Archivo de la etiqueta: css3

Recomendaciones Oficiales CSS3 por la W3C

Dos nuevas recomendaciones oficiales CSS por la W3C – CSS3 Selectores y CSS3 Namespaces

La W3C ha publicado hace algunos días dos nuevos módulos CSS como recomendaciones oficiales, los cuales se convierten en el segundo y tercer módulo de CSS3.

Los módulos son el CSS Namespaces Module (Módulo de espacios de nombres de CSS) y Selectors Level 3 (Selectores de nivel 3), los cuales han seguido al lanzamiento del módulo anterior (el primero) “CSS3 Color Module” que ha sido publicado anteriormente éste año 2011.

El módulo de espacios de nombres cubre una necesidad que se planteó cuando se diseñó XHTML de manera que un documento en este lenguaje pudiera albergar marcado de otro —como por ejemplo SVG o MathML—, que no era otra que ofrecer la posibilidad de aplicar reglas de estilo a elementos de uno de los lenguajes en concreto.

Por su parte, la recomendación de selectores de nivel 3 define una serie de nuevos selectores que nos permiten afinar aún más los elementos a los que aplicar nuestras declaraciones, y que cuentan con un soporte bastante decente en los navegadore actuales.

Via Digitalcon.es

5 Nuevas técnicas que todo desarrollador web debe conocer

Las tecnologías web estás en constante cambio, y cada día está saliendo algo nuevo que posiblemente sea la revolución en el futuro, por lo cual todo desarrollador web tiene que estar siempre atento a estas nuevas tecnologías y a su modo de uso.

Hoy vamos a ver 5 nuevas técnicas que han aparecido con la introducción de CSS3 y HTML5, de manera que podamos estar a la moda.

1. CSS3 Media Queries

Con la web 2.0 y la aparición de los smartphones, tablets y las resoluciones en FullHD, se hace imperioso que nuestros diseños y desarrollos web sean flexibles y se adapten a las distintas resoluciones de cada uno de estos dispositivos para que el usuario pueda recibir de buena manera nuestra información. Es así como gracias a CSS3 podemos especificar distintas hojas de estilos para las distintas resoluciones y dispositivos que tengamos.

Por ejemplo, podríamos especificar un ancho para cuando la resolución del usuario es menor a 1024px.

@media screen and (max-width:1024px){
#contenedor{
		width:960px;
	}

	header h1#logo {
		width:300px;
		height:50px;
		background:url(fondno-header-chico.jpg) no-repeat 0 0;
	}

}
}

2. Tamaño de las fuentes con “rem”

CSS3 sigue introduciendo nuevas tecnologías, y ahora ha creado una nueva unidad de medida que nos permite definir tamaños para las fuentes en relación al elemento de origen (rem = “r”oot “em”) y no al elemento padre como lo hace em.

html { font-size: 10px; }
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

3. Guardar las páginas en el caché para usarlas Offline

HTML5 introduce una nueva característica, el Offline Caching, o guardar las páginas en el caché, y para qué? se preguntará usted, bueno, para permitirle al navegador del usuario guardar la página para así poder verlas más tarde incluso si se está desconectado de internet.

Para activar esta nueva característica hay que partir agregando la siguiente línea a su archivo .htaccess

AddType text/cache-manifest .manifest

Una vez listo, tenemos que crear un archivo llamado, por ejemplo, offline.manifest con las siguientes líneas:

CACHE MANIFEST

CACHE
index.html
style.css
image.jpg

Y finalmente linkear al archivo offline.manifest desde el archivo html

<html manifest="/offline.manifest">

Con estos pasos ya hemos activado ésta característica, la cual estará disponible si tu navegador, o el del usuario que visita tu sitio, soporta HTML5.

4. Múltiples imágenes de fondo

A diferencia del pasado, CSS3 nos permite aplicar múltiples fondos a un objeto determinado, de manera que se pueden obtener efectos visuales/gráficos que de otra manera podría resultar muy complicado de realizar.

div.prueba { background: url(imagen1.png), url(imagen2.png), url(imagen3.png) #000; }

5. Animaciones con CSS3

CSS3 simplifica muchas cosas que hasta ahora solo era posible realizarlas con javascript frameworks como jQuery, como por ejemplo animaciones de color, de forma o posición de los objetos. Ahora, con la ayuda de CSS3 es posible realizar animaciones y transiciones de manera fácil y rápida.
Por ejemplo, para realizar un cambio de color suave para todos los enlaces con la clase prueba, el código sería algo más o menos así:

<a href="#" alt="Prueba" class="prueba">Enlace de prueba</a>
a.prueba {
color:#AAA;
-moz-transition-property: color;/* FF4+ */
-moz-transition-duration:1s;
-webkit-transition-property: color;/* Saf3.2+, Chrome */
-webkit-transition-duration:1s;
-o-transition-property: color;/* Opera 10.5+ */
-o-transition-duration:1s;
-ms-transition-property: color;/* IE10? */
-ms-transition-duration:1s;
transition-property: color;/* Standard */
transition-duration:1s;
}

a.prueba:hover {
color:#F00;
}

Generador de Botones con CSS3

El futuro es ahora, y el futuro es CSS3, lo cual significa que lo que hoy se lleva y donde debemos volcar todas nuestras energías y esfuerzos es embellecer la web usando CSS3, para lo cual ya tenemos varios navegadores que soportan todos sus atributos.

Hoy, para entretenernos en fin de semana, dejo una web en la cual se pueden crear botones totalmente a la moda, con gradientes, transiciones, deformaciones y todo lo que queramos gracias a la potencia de CSS3.

Dale un vistazo a cómo crear un botón animado usando totalmente CSS3.

 

Vía CSS Drive