Publicidad

RSS Introducción a CSS3

Introducción a las propiedades de los fondos en CSS3

5 Comentarios
Introducción a las propiedades de los fondos en CSS3

addEventListener('load', function (event) { prettyPrint() }, false);

La semana pasada hablábamos sobre fondos con degradados en CSS3. Esta semana continuamos la serie de introducción a CSS3 hablando de los backgrounds o fondos. Varios han sido los cambios introducidos a los mismos y el módulo de la nueva especificación relativo a ellos es ya un CR (Candidate Release) por lo que la práctica mayoría de navegadores modernos los soportan, incluyendo IE9.

Uno de los cambios que mas hype han generado, es la posibilidad que nos ofrece CSS3 de crear diferentes capas para nuestros fondos y poder de esa manera generar complejas composiciones e incluso animaciones con las nuevas propiedades de transición de CSS3 (de las que ya hablaré en su día) o con scripts JavaScript.

Pero no es solo ese el único cambio que trae consigo CSS3 para los fondos. También se incorporan otras propiedades para fijar el tamaño, la posición o el origen de nuestros fondos. En las próximas líneas hablaremos sobre todas ellas en esta nueva introducción a las propiedades de los fondos en CSS3.

Leer más »

Fondos con degradados en CSS3

6 Comentarios
Fondos con degradados en CSS3

addEventListener('load', function (event) { prettyPrint() }, false);



La semana pasada vimos las propiedades de sombreado para textos de CSS3. Aunque aún no es parte del estándar, Gecko, Webkit y Presto han introducido la habilidad de crear fondos con degradado a través de CSS sin necesidad de utilizar imágenes.

Esto significa que podemos añadir degradados lineales o radiales para Safari 4+, Chrome 1+, Firefox 3.6+ y Opera 11.10+ (solo lineales) utilizando tan solo CSS. Parece que IE10 también soporta degradados CSS3 y para aquellos navegadores más antiguos o que aún no lo soportan, existe un truco muy sencillo para ocuparnos de ellos y que nuestra página tenga el mismo aspecto independientemente del navegador que nos visite.

La sintaxis para crear degradados no era demasiado estándar hasta hace poco, por ejemplo la sintaxis que usaba Webkit para definir los degradados era todo lo contrario a la palabra “intuitivo” y todo lo alejado de lo que un estándar debe ser. En el Editor’s Draft de la W3C donde se está empezando a definir el estándar para los degradados de CSS3 han elegido como base una sintaxis mucho más parecida a la que utilizaba Mozilla mucho más legible.

Leer más »
Publicidad

Introducción a las propiedades del texto en CSS3

14 Comentarios
Introducción a las propiedades del texto en CSS3

addEventListener('load', function (event) { prettyPrint() }, false);



Ya hemos hablado anteriormente sobre las propiedades de las fuentes en CSS3 o los media queries. Hoy voy a hacer una breve introducción a las propiedades del texto en CSS3.

Como ya sabemos, CSS3 aporta muchas novedades sobre todo en lo que a transparencias, sombras, gráficos y transiciones se refiere. Una de ellas es la capacidad de cualquier texto de proyectar una sombra (o varias) de cualquier color hacia cualquier dirección y con cualquier difuminado.

Esto se consigue con la propiedad text-shadow que está soportada por Firefox >= 1.9, Safari >= 1.1, Chrome/Chromium >= 2, Opera >= 10. Ni IE9 ni IE10 soportan aún la propiedad text-shadow por lo que para el navegador de Microsoft habrá que recurrir a los ya acostumbrados hacks.

Leer más »

Introducción a las propiedades de las fuentes en CSS3

9 Comentarios
Introducción a las propiedades de las fuentes en CSS3

addEventListener('load', function (event) { prettyPrint() }, false);



En nuestra serie de CSS3 ya hemos hablado sobre las pseudoclases y las media queries. Hoy voy a hacer una introducción a las propiedades de las fuentes en CSS3, algunas como veremos, no tan nuevas.

CSS nos da la posibilidad de controlar la apariencia de las fuentes que utilizamos en nuestros sitios web. Podemos fijar cosas como su familia, el peso, el tamaño, las decoraciones, el interlineado y mucho más. Todas esas opciones no son nuevas, algunas de ellas llevan con nosotros mucho tiempo. Un entendimiento y uso adecuado de las propiedades de las fuentes en una página web es muy importante para dotar a nuestros sitios de un aspecto agradable.

En CSS se definen cinco familias de fuentes genéricas dentro de la que la mayoría de las fuentes se categorizan.

NombreEjemploSerifTimes New RomanSans-SerifHelvetica y ArialMonospaceCourier NewCursiveCaflisch ScriptFantasyPapyrus

Obviamente, no todos los sistemas operativos instalan las mismas fuentes en el sistema. Además, los diferentes fabricantes de navegadores instalan o utilizan fuentes predeterminadas para cada una de estas familias.

Para asegurarnos de que independientemente del navegador o sistema donde nuestras páginas —y nuestros textos— sean renderizadas, fijamos una pila de fuentes a través de la propiedad de CSS font-family. Así siempre podemos definir como último recurso una de las cinco fuentes genéricas y si el sistema del cliente no tiene cierta fuente instalada, renderizará una fuente genérica de la misma familia.

Leer más »

Introducción a las reglas @media de CSS3

7 Comentarios
Introducción a las reglas @media de CSS3


La semana pasada vimos las nuevas pseudo clases de CSS nivel 3 o más comúnmente conocido como CSS3 y como utilizarlas. Hoy, vamos a hacer una introducción a las reglas @media de CSS3 y a la nueva forma de utilizarlas para mejorar la experiencia de usuario de las personas que entran a nuestros sitios web independientemente del dispositivo que estén utilizando para acceder a los mismos.

La regla @media nos permite especificar que cierto conjunto de reglas CSS solo deben aplicarse a cierto tipo de dispositivo. Así las definiciones dentro del bloque de la regla @media screen { ... } solo serían interpretadas por dispositivos conectados a monitores de ordenador y los de la regla @media projection { ... } solo se aplicaría a proyectores.

CSS3 añade importantes y nuevas capacidades que nos permiten definir conjuntos de estilos dependiendo de propiedades comunes de los dispositivos que acceden a nuestros sitios. Propiedades como el alto y el ancho o la relación de aspecto o el número de colores disponible. Las reglas @media pueden ser utilizadas para adaptar nuestras páginas, no solo para dispositivos comunes, sino para todo tipo de dispositivos que nuestros lectores usen para visitar nuestras páginas.

Leer más »

Introducción a las pseudo clases de CSS3

11 Comentarios
Introducción a las pseudo clases de CSS3

addEventListener('load', function (event) { prettyPrint() }, false);

Ya hemos hablado anteriormente de la nueva especificación modular de CSS Level 3 o más comúnmente conocido como CSS3. Hoy voy a hacer una introducción a las pseudo clases de CSS3 para conocer la nueva funcionalidad que además está ya ampliamente implementada en la mayoría de los navegadores actuales.

Pero para hablar de las pseudo clases en CSS3 primero tenemos que hacer una pequeña introducción para explicar que es una pseudo clase y para que se usa.

¿Qué es una pseudo clase?

Muchos elementos del lenguaje de marcas HTML disponen de estados especiales o usos asociados a ellos. Podemos aplicar estilos diferentes a estos elementos basándonos en esos estados o usos en nuestra hojas de estilo CSS. Por ejemplo, el elemento a tiene cuatro estados:

  • normal: Su estado normal
  • visited: Cuando ya hemos visitado el link al que hace referencia
  • hover: Cuando tenemos el cursor situado encima del mismo
  • active: Cuando hacemos click sobre él

Leer más »
Publicidad

Breve introducción a CSS3

8 Comentarios
Breve introducción a CSS3

Para proseguir en la linea de nuestra serie de HTML5 hoy vamos a comenzar otra nueva serie en la que vamos a hablar sobre CSS3.

La especificación de CSS Level 3 o más comúnmente conocida como CSS3 no es una especificación completa sino que se divide en diferentes módulos. Cada uno de ellos añade nuevas capacidades o extiende aquellas ya existentes en especificaciones anteriores. La nueva especificación debe preservar compatibilidad hacia atrás. Según la W3C existen 53 módulos actualmente en diferentes estados.

Debido a su carácter modular, hay partes de la especificación en diferentes estados dentro del proceso de estandarizado. Así el pasado día 7 de junio el módulo Color Module de CSS3 era publicado como recomendación por el consorcio W3C.

Leer más »
Publicidad
Inicio
Inicio

Ver más artículos