Entradas etiquetadas con css

3 comentarios

Martes, 9 de Septiembre del 2008

CSS 3 mola (algunas novedades de CSS3)

Al publicar la serie “cosas que debes saber sobre CSS” me di cuenta de que hay bastante gente interesada en el tema de las hojas de estilo, sobre todo cuando se habla de CSS avanzado. Supuse que ese interés se debía, en gran parte, a la curiosidad por lo nuevo y a la sorpresa por lo potente del CSS. Por eso, me decidí a escribir este artículo, mostrando por encima lo más nuevo en CSS: La tercera versión de CSS.

Quiero aclarar también que CSS 3 está todavía en desarrollo, y que la mayoría de sus propiedades aún no han sido implementadas por los navegadores. Aún así, pinta muy bien y hay algunas que ya pueden ser usadas. Por ejemplo, en ululand usamos bastante la propiedad border-radius para redondear algunos bordes sin recurrir a trucos raros de CSS o a librerías de javascript (como la que se usa en este blog).

Algunos elementos nuevos

border-radius

Este es, para mí, uno de los cambios más prácticos de la próxima versión de CSS. Los diseños web con esquinas redondeadas son muy habituales hoy en día y, paradójicamente, no existe una forma sencilla de conseguir este efecto. Por suerte para todos, CSS3 trae la propiedad border-radius al rescate:

Resultado

Sintaxis
border-radius: <radio_horizontal> <radio_vertical>;

border-top-radius: <radio_horizontal> <radio_vertical>;
border-right-radius: <radio_horizontal> <radio_vertical>;
border-bottom-radius: <radio_horizontal> <radio_vertical>;
border-left-radius: <radio_horizontal> <radio_vertical>;
Soporte

Firefox (usando prefijo “-moz-”): -moz-border-radius
Webkit (safari 3/Chrome) (usando prefijo “-webkit-”): -webkit-border-radius

Leer el resto de esta entrada »

7 comentarios

Martes, 2 de Septiembre del 2008

Cinco cosas avanzadas que debes saber sobre CSS

Ahora que ya has aprendido lo más básico de CSS y que ya has profundizado con cinco cosas menos básicas que debes saber sobre CSS ya puedes dar el paso y empezar a jugar con los “pros” en esto del CSS.

Archivos de ejemplo

Como en el artículo anterior, he preparado un pequeño archivo de ejemplo para que podáis verlos ejemplos en vivo y para que podáis toquetear con el código más facilmente.
Descargar ejemplocss_avanzado.zip

1. Pseudo elementos

Los pseudo elementos son una de esas cosas menos conocidas de CSS, pero que a veces acaban siendo muy útiles. Existen cuatro de estos pseudo elementos:

1.1. Modificador de primera línea (:first-line)

Gracias al pseudo elemento :first-line podemos modificar la primera línea del texto contenido en un elemento de bloque. El siguiente ejemplo quizás lo aclare un poco más.

RESULTADO:

HTML:

<p id="firstLine">A este texto le aplicamos un estilo solo a la primera línea.
El resto de líneas se dibujaran de forma normal. Y ahora tengo que
rellenar con este texto para que podáis comprobar que efectivamente
funciona tal y como digo. Este tipo de selectores se usan muy poco, pero a veces vienen
muy bien, y mucha gente no los conoce.</p>

CSS:

p#firstLine:first-line
{
color: red;
font-size: large;
background-color: pink;
}

El único uso que he dado alguna vez a este elemento fué para destacar la primera línea de un texto que quería que llamara la atención.

1.2. Modificador de primera letra (:first-letter)

El pseudo elemento :first-letter permite dar un estilo diferente a la primera letra de un párrafo.

RESULTADO:

HTML:

<p id="firstLetter">Este párrafo tiene aplicado un estilo a su primera letra, unicamente. Esto
se usa muchas veces para crear efectos tipográficos similares a los que se usa en muchas publicaciones
impresas.</p>

CSS:

p#firstLetter:first-letter
{
color: blue;
font-size: xx-large;
font-weight: bold;
}

Este elemento se suele utilizar para crear efectos tipográficos habituales en las publicaciones impresas.

1.3. Modificadores :before y :after

Los modificadores :before y :after permiten añadir contenido desde el CSS al final o al principio de un elemento de bloque.

RESULTADO:

HTML:

<p id="beforeandafter">Estos dos selectores son practicamente desconocidos y realmente curiosos.
Permiten añadir cierto contenido (en este caso, el texto en rojo) justo al principio o al final
del que ya le des tú al elemento. Nunca los he llegado a usar en la práctica, pero nunca se sabe...</p>

CSS:

p#beforeandafter:before
{
content: "[PRINCIPIO] - ";
color: red; font-weight: bold;
}
p#beforeandafter:after
{
content: " - [FINAL]";
color: red; font-weight: bold;
}

Uno de los pocos usos que se me ocurren para estos pseudo elementos son los de añadir un icono al principio o al final de un texto, por ejemplo.

Leer el resto de esta entrada »

9 comentarios

Jueves, 22 de Mayo del 2008

Cinco cosas (menos básicas) que debes saber sobre CSS

Ahora que ya dominas lo más básico de CSS estás listo para aprender a hacer cosas un poco más avanzadas. Pero solo un poco más.

Archivos de ejemplo

Esta vez he preparado un pequeño ejemplo de cada una de las cinco cosas que intento enseñaros en esta entrada. Os será útil para ver los resultados en directo y para entender mejor como funcionan.

Descargar ejemploscss.zip

1. Aplicar varias clases a un mismo objeto

Es posible aplicar más de un estilo a un mismo elemento. Esto se consigue poniendo los nombres de las clases separadas por un espacio.

<p class="marcado grande">Texto marcado y grande</p>

En el CSS no hay que hacer nada raro.

.grande{
font-size: x-large;
}
.marcado{
background: #ffff86;
}

Leer el resto de esta entrada »

8 comentarios

Miércoles, 30 de Abril del 2008

Cinco cosas básicas que debes saber sobre CSS (aprende CSS en 5 pasos)

AVISO: Entrada para principiantes.

Esta entrada va dirigida a gente sin conocimientos de CSS. Si ya estás minimamente familiarizado con el uso de hojas de estilo, puede que esto no te interese.

Aún así, quien sabe, quizás aprendas algo que se te había pasado por alto. O, mejor aún, igual puedes aportar algo a través de los comentarios.

1. Qué es CSS

CSS son las siglas de Cascading Style Sheets, que traducido al español sería algo así como Hojas de estilo en cascada. Analicemos ese nombre:

Son hojas de estilo:

CSS son hojas de estilos. Esto quiere decir que son unos documentos (de extensión .css) que contendrán información acerca del estilo de una página web. Por “estilo” se debe entender todo aquello que afecta a la apariencia de lo que se ve en pantalla (colores, tamaños, posiciones, etc…).

Por ejemplo:

p /* Esto da un color gris oscuro a todos los párrafos de una página web */
{
color: #222222;
}

Son en cascada:

Las CSS son hojas de estilo en cascada. Lo de cascada viene por la forma en que se aplican los estilos de forma jerárquica y hereditaria. Basicamente quiere decir que, aprovechando que las páginas web se programan de forma jerárquica, los estilos se irán heredando desde los elementos más importantes hacia los que se van anidando dentro de ellos.

Por ejemplo:

<div id="contenedor" class="estilo">
Esto hereda el estilo del contenedor por estar anidado en él.
</div>

Separar el contenido de su representación

La gran ventaja de las hojas de estilo CSS es que permiten separar el contenido de su apariencia. Esto se puede ver muy claramente en CSS Zen Garden. Ahí podéis ver un mismo archivo html (el contenido) que cambia completamente su apariencia según qué css se le aplique (el estilo).

2. Cómo cargar una hoja de estilos.

Lo primero de todo es saber cómo se carga una hoja de estilos en la página web para que se empiecen a aplicar. Es muy sencillo; solo hay que añadir una línea en el head de la página:


...
<!-- Así cargamos y aplicamos la hoja de estilos 'estilo.css' -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
...

Leer el resto de esta entrada »