Emilio Orts López

HOME -> MÁS INFORMACIÓN -> PROGRAMACIÓN -> CSS3

CSS3

Hoja de estilos en cascada

Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de marcas, esto incluye varios lenguajes basados en XML como son XHTML o SVG.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

Las especificaciones de CSS son mantenidos por el Consorcio World Wide Web (W3C). Tipo de medio de Internet ( tipo MIME ) text/css está registrado para su uso con CSS por RFC 2318 (marzo de 1998), y también opera un libre servicio de validación de CSS.

Sintaxis

CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas del inglés para especificar los nombres de varias propiedades de estilo.

Modelo de caja.svg

Una hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de reglas consiste en uno o más selectores y un bloque de declaración (o «bloque de estilo») con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y está formado por una o varias declaraciones de estilo con el formato propiedad:valor;.

En el CSS, los selectores marcarán qué elementos se verán afectados por cada bloque de estilo que les siga, y pueden afectar a uno o varios elementos a la vez, en función de su tipo, nombre (name), ID, clase (class), posición dentro del Document Object Model, etcétera.

Abajo puede verse un ejemplo de una parte de una hoja de estilos CSS:

selector [, selector2, ...] [:pseudo-class][::pseudo-element] { propiedad: valor; [propiedad2: valor2; ...>] }

Uso

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización del texto.

Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre cómo será visualizado, solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo, especifica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz, por ejemplo.

Por otro lado, antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas <table>. Aunque esta era una técnica cómoda y versátil, ello conllevaba el uso de un elemento con una semántica particular, y en el que la distribución de los datos no se ajustaban al flujo de la información que se obtenía en la vista desde los navegadores habituales, lo que redundaba en una merma en la accesibilidad a la página por parte de otros navegadores (orientados a personas con alguna deficiencia sensorial, o a ciertos dispositivos electrónicos).

Mediante el uso de CSS, se ha permitido eliminar el uso de tablas para el diseño, usándolas solamente para la muestra de datos tabulados, si bien es cierto que obtener la versatilidad que ofrecía el diseño con tablas, es algo más complicado si no se usan.

Formas de usar CSS3

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:

  1. Mediante CSS introducido por el autor del HTML
    1. Un estilo en línea (online) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona.
      Dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (online).
    2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.
    3. Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
  2. Estilos CSS introducidos por el usuario que ve el documento, mediante un archivo CSS especificado mediante las configuraciones del navegador, y que sobreescribe los estilos definidos por el autor en una, o varias páginas web.
  3. Los estilos marcados "por defecto" por los user agent, para diferentes elementos de un documento HTML, como por ejemplo, los enlaces.

ETIQUETAS

La tabla siguiente resume las propiedades definidas en las recomendaciones de Hojas de Estilo en Cascada (CSS):

Tipo de letra (fuente)
Propiedad Descripción Valores
font propiedad compuesta [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar
font-family tipo de letra (fuente) [ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-genérica ]*
font-size tamaño tamaño-absoluto | tamaño-relativo | distancia | porcentaje
font-style inclinación (cursiva) normal | italic | oblique
font-variant versalitas normal | small-caps
font-weight grosor del trazo (negrita) normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Texto
Propiedad Descripción Valores
color color del texto color
direction dirección del texto ltr | rtl
letter-spacing espacio entre carácteres normal | distancia
line-height espaciado entre líneas normal | número | distancia | porcentaje
text-align alineación del texto center | justify | left | right
text-decoration decoración del texto none | blink | line-through | overline | underline
text-indent sangría de la primera línea distancia | porcentaje
text-transform mayúsculas / minúsculas none | capitalize | lowercase | uppercase
unicode-bidi dirección del texto normal | embed | bidi-override
vertical-align alineación vertical baseline | bottom | middle | sub | super | text-bottom | text-top | top | distancia | porcentaje
white-space espacios en blanco, saltos de línea y wrap normal | nowrap | pre | pre-line(+) | pre-wrap(+)
word-spacing espacio entre palabras normal | distancia
Bordes
Propiedad Descripción Valores
border cuatro bordes simultáneamente border-color || border-width || border-style
border-top borde superior border-color || border-width || border-style
border-right borde derecho border-color || border-width || border-style
border-bottom borde inferior border-color || border-width || border-style
border-left borde izquierdo border-color || border-width || border-style
border-color color de los bordes [ color | transparent ] {1, 4}
border-width grosor de los bordes [ medium | thick | thin | distancia ] {1, 4}
border-style estilos de los bordes [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-top-color color del borde superior [ color | transparent ] {1, 4}
border-top-width grosor del borde superior [ medium | thick | thin | distancia ] {1, 4}
border-top-style estilo del borde superior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-right-color color del borde derecho [ color | transparent ] {1, 4}
border-right-width grosor del borde derecho [ medium | thick | thin | distancia ] {1, 4}
border-right-style estilo del borde derecho [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-bottom-color color del borde inferior [ color | transparent ] {1, 4}
border-bottom-width grosor del borde inferior [ medium | thick | thin | distancia ] {1, 4}
border-bottom-style estilo del borde inferior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-left-color color del borde izquierdo [ color | transparent ] {1, 4}
border-left-width grosor del borde izquierdo [ medium | thick | thin | distancia ] {1, 4}
border-left-style estilo del borde izquierdo [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
Margen exterior
Propiedad Descripción Valores
margin cuatro márgenes exterior simultáneamente [ auto | distancia | porcentaje ] {1, 4}
margin-top margen exterior superior auto | distancia | porcentaje
margin-right margen exterior derecho auto | distancia | porcentaje
margin-bottom margen exterior inferior auto | distancia | porcentaje
margin-left margen exterior izquierdo auto | distancia | porcentaje
Margen interior
Propiedad Descripción Valores
padding cuatro márgenes interiores simultáneamente [ distancia | porcentaje ] {1, 4}
padding-top margen interior superior distancia | porcentaje
padding-right margen interior derecho distancia | porcentaje
padding-bottom margen interior inferior distancia | porcentaje
padding-left margen interior izquierdo distancia | porcentaje
Fondos
Propiedad Descripción Valores
fondos.html#propiedad">background propiedad compuesta background-attachment || background-color || background-image || background-position || background-repeat
fondos.html#background4">background-attachment atadura de la imagen fixed | scroll
fondos.html#background">background-color color de fondo transparent | color
fondos.html#background1">background-image imagen de fondo none | uri
fondos.html#background3">background-position posición de la imagen de fondo [ [ left | center | right | distancia | porcentaje] [ top | center | bottom | distancia | porcentaje] ]? | [ [ left | center | right ] || [ top | center | bottom ] ]
fondos.html#background2">background-repeat repetición de la imagen de fondo no-repeat | repeat | repeat-x | repeat-y
Listas
Propiedad Descripción Valores
listas.html#propiedad">list-style propiedad compuesta list-style-image || list-style-position || list-style-type
listas.html#Tipo1">list-style-image imagen del marcador none | uri
listas.html#Posici">list-style-position posición del marcador inside | outside
listas.html#Tipo">list-style-type tipo de marcador none | circle | disc | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | lower-roman | upper-roman | armenian | georgian | hebrew(-) | cjk-ideographic(-) | hiragana (-) | katakana (-) | hiragana-iroha(-) | katakana-iroha(-)
Tablas
Propiedad Descripción Valores
tablas.html#Modos">border-collapse modo de bordes collapse | separate
tablas.html#Separaci">border-spacing separación entre celdas distancia distancia?
tablas.html#Posici">caption-side posición de la leyenda top | bottom | left(-) | right(-)
tablas.html#Bordes">empty-cells borde de casillas vacías hide | show
tablas.html#L1160">table-layout algoritmo ancho de tabla auto | fixed
Tamaño
Propiedad Descripción Valores
tamano.html#Tama">width anchura auto | distancia | porcentaje
tamano.html#Tama1">min-width anchura mínima distancia | porcentaje
tamano.html#Tama1">max-width anchura máxima distancia | porcentaje
tamano.html#Tama">height altura auto | distancia | porcentaje
tamano.html#Tama1">min-height altura mínima distancia | porcentaje
tamano.html#Tama1">max-height anchura máxima distancia | porcentaje
tamano.html#Overflow">overflow si el contenido desborda al elemento auto | hidden | scroll | visible
Posicionamiento
Propiedad Descripción Valores
posicionamiento_flotante.html">float modo de posicionamiento flotante none | left | right
posicionamiento_flotante.html">clear lado en el que no puede haber elementos flotantes none | both | left | right
posicionamiento_absoluto.html">position modo de posicionamiento absolute | fixed | relative | static
posicionamiento_absoluto.html#L449">top posición del borde superior del elemento auto | distancia | porcentaje
posicionamiento_absoluto.html#L449">right posición del borde derecho del elemento auto | distancia | porcentaje
posicionamiento_absoluto.html#L449">bottom posición del borde inferior del elemento auto | distancia | porcentaje
posicionamiento_absoluto.html#L449">left posición del borde izquierdo del elemento auto | distancia | porcentaje
clip recorta el elemento auto | forma
display tipo de caja none | block | compact(-) | inline | inline-block(+) | inline-table | list-item | marker(-) | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
visibility visibilidad hidden | collapse | visible
posicionamiento_absoluto.html#z-index">z-index apilamiento auto | número-entero
Impresora
Propiedad Descripción Valores
page-break-after salto de página después de auto | always | avoid | left | right
page-break-before salto de página antes de auto | always | avoid | left | right
page-break-inside salto de página dentro de auto | avoid
orphans número de líneas al final de página número-entero
widows número de líneas al principio de la página número-entero
Interface de usuario
Propiedad Descripción Valores
interface.html#Cursor">cursor tipo de cursor [uri,]* | auto | crosshair | default | help | move | pointer | progress | n-resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-resize | nw-resize | text | wait
interface.html#propiedad1">outline cuatro bordes simultáneamente outline-color || outline-width || outline-style
interface.html#propiedade1">outline-color color de los bordes color
interface.html#propiedade1">outline-width grosor de los bordes border-width
interface.html#propiedade1">outline-style estilos de los bordes border-style
Pseudo-elementos
Nombre Descripción Valores
pseudoclases.html#pseudo-ele1">:after inserta contenido después del elemento content: contenido
pseudoclases.html#pseudo-ele1">:before inserta contenido antes del elemento content: contenido
pseudoclases.html#pseudo-ele">:first-letter primera letra
pseudoclases.html#pseudo-ele">:first:line primera línea de texto
pseudoclases.html#pseudo-ele1">content contenido generado normal(+) | none(+) | [ texto | uri | contador | attr(atributo) | open-quote | close-quote | no-open-quote | no-close-quote ]+
pseudoclases.html#Generar">counter-increment incremento de contador none | [ identificador número-entero? ]+
pseudoclases.html#Generar">counter-reset puesto a cero de contador none | [ identificador número-entero? ]+
quotes comillas none | [ texto-apertura texto-cierre ]+
Pseudo-clases
Nombre Descripción Valores
pseudoclases.html#pseudo-cla2">:active cuando se hace clic sobre el elemento
pseudoclases.html#pseudo-cla">:first-child primer elemento hijo
pseudoclases.html#pseudo-cla2">:focus cuando el elemento tiene el foco
pseudoclases.html#pseudo-cla2">:hover cuando el ratón pasa sobre el elemento
pseudoclases.html#pseudo-cla3">:lang idioma :lang(en) | :lang(es) | :lang(fr) etc.
pseudoclases.html#pseudo-cla1">:link enlaces no visitados
pseudoclases.html#pseudo-cla1">:visited enlaces ya visitados
Propiedades no incluidas en CSS 2.1
Propiedad Descripción Valores
fuente.html#Ajuste">font-size-adjust ajuste de tamaño número-decimal
fuente.html#Anchura">font-stretch anchura ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | wider | narrower
listas.html#Distancia">marker-offset distancia entre marcador y elemento distancia
marks marcas de corte de papel crop | cross
texto.html#Sombreado">text-shadow sombreado desplazamiento horizontal, desplazamiento vertical, tamaño desenfoque, color
Tipos
Propiedad Descripción Valores
contador Contador counter(nombre, estilo)
fuente.html#Familia">familia-genérica Familia genérica de fuente cursive | fantasy | monospace | serif | sans-serif
forma Forma rect(top, right, bottom, left)
fuente.html#Tama1">tamaño-absoluto Tamaño absoluto de fuente xx-small | x-small | medium | large | x-large | xx-large
fuente.html#Tama2">tamaño-relativo Tamaño relativo de fuente larger | smaller
uri (para imagen de fondo o fuentes web) Dirección absoluta o relativa url("ruta_y_nombre_de_archivo")
CSS 3
Propiedad Descripción Valores
border-radius bordes redondeados [ distancia | porcentaje ] {1, 4}
border-top-right-radius borde superior derecho redondeado distancia | porcentaje
border-bottom-right-radius borde inferior derecho redondeado distancia | porcentaje
border-bottom-left-radius borde inferior izquierdo redondeado distancia | porcentaje
border-top-left-radius borde superior izquierdo redondeado distancia | porcentaje

EJEMPLOS PRACTICOS

Utilizar un loading o imagen de carga con CSS

No hay nada mejor que hacer saber al usuario cuando está esperando algo para no impacientarlo, y aunque una animación simple no le informa del progreso exacto o del tiempo que tendrá que esperar, muchas veces es suficiente para retener al usuario en tu página y evitar que se marche pensando que el sitio web no funcionaba.

Una manera muy simple de indicar que una imagen o cualquier otro elemento aun no se cargó es colocar en su lugar una imagen de fondo animada que nos de la sensacion de que ese elemento está descargandose.

Para ello aquí un truco muy sencillo, poner de fondo del elemento una imagen animada muy ligera, para que no añada un exceso de carga a la página web, pero que indique al usuario que la página sigue funcionando.

El código necesario para hacer el loading es el siguiente:

img { background:transparent url(images/ajaxload.gif) center no-repeat;}

Con este código la imagen animada (imagen de fondo) se mostraría en todas las imágenes que estén cargandose en tu web.
Eso es, así de sencillo, con este simple código a todas las imagenes del sitio le colocamos nuestra animación de fondo. Cuando la imagen principal se haya cargado dejará de ser visible, mientras se esté descargando le damos al usuario mayor sensación de continuidad, pareciendo más evidente que la página sigue activa.

Pero como esto puede resultar innecesario usarlo en todas las imágenes de una página web, ya que hay muchas imágenes pequeñas que cargan rápidamente, otra forma es crear una clase CSS que se podrá utilizar en las imagenes grandes (muy pesadas) que usemos en nuestra web, y para las que sí resulta útil añadir un efecto como este puesto que es posible que el usuario tenga que esperar unos segundos para ver la imagen:

.precarga { background:transparent url(images/ajaxload.gif) center no-repeat; }

Y para que la imagen de fondo aparece como la queremos, tenemos que añadir la anchura (width) y la altura (height) de las propiedades de la imagen, mediante estilos CSS en un div que rodee la imagen:

<div style="width: 140px; height: 120px" class="precarga">
<a href="tp://www.paginaweb.com/>
<img src="http://www.paginaweb.com/" alt="texto descriptivo" border="0" />
</a>
</div>

Menú de navegación

Estructura básica del menú de navegación

La estructura básica en XHTML para nuestro menú será la siguiente:

<div id="menu">
  <ul>
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
    <li>Sección 4</li>
  </ul>
</div>

Estos son los cimientos sobre los cuales construiremos el resto del proyecto, como podemos ver se trata simplemente de una lista desordenada (unordered list) que contendrá el número de “ítems” o secciones que queremos mostrar en el menú los cuales están resguardados dentro de las etiquetas “<li>”.  Sin agregar un estilo, esto se vería nada más como una lista con viñetas de punto en nuestro navegador, pero ahí es donde empieza a hacer su trabajo el CSS.

Añadiendo estilos CSS

Debemos declarar la propiedad “inline-block” para los ítem del id #menu en nuestro CSS, así todo el texto dentro de las etiquetas “<li>” se acomodaran dentro de una sola línea sin que exista saltos entre ellos; es decir, al momento de definir esta propiedad en el navegador veremos una lista pero ahora de manera horizontal y sin decoración, aunque esto puede variar si nosotros se la agregamos. Para lograr esto basta con agregar las siguientes líneas en nuestro código:


#menu ul li {
  display: inline;
  }

Al momento de definir la propiedad “inline-block” también podemos agregar otras como padding para separar cada elemento por cierta distancia dada en pixeles, si yo indico algo como “padding-left: 15px;” existirá un espacio de 15 píxeles a la izquierda de cada elemento de la lista. Con “inline-block” podemos agregar width y height para definir el tamaño del elemento, es por ello que en este caso lo usamos en vez de “inline”, que aunque a simple vista parecen la misma propiedad, al usar “inline” no se puede dar ancho ni altura a los elementos de la lista.

También podemos irle dando estilo a nuestro menú agregando atributos como fuentes y colores.


#menu a {
  height: 20px;
  font-family: Helvetica;
  font-size: 18px;
  color: #CCCCCC;
  }

Con el código anterior las letras de nuestro menú ahora se mostrarán con una Font (fuente) llamada Helvética, muy utilizada por los diseñadores, en color gris bajo y un tamaño de 18 píxeles. De igual manera podemos hacer que la lista se muestre exactamente en el inicio del div menú, esto lo podemos lograr quitando de la siguiente manera, los márgenes y padding que se agregan por default.


#menu ul {
  margin: 0;
  padding: 0;
  }

Con ello tenemos definida la estructura del menú, este div lo podemos incrustar dentro de otro div “contenedor” y asi centrarlo o colocarlo en el lugar donde queremos que luzca. Para poder realizar una menú vertical básicamente se hace lo mismo sólo que obviamente la propiedad “inline-block” se omite.

A partir de ahí podemos usar nuestra creatividad para darle el estilo que deseemos a nuestro menú podemos manejar fondos, sombras, eventos y demás, en los siguientes artículos daremos ideas para decorar y hacer más presentables nuestros menús.

Crear una galería de imágenes solo con CSS y HTML

Muchas veces sucede que, por desconocer todo el potencial que ofrecen los recursos web más elementales, se aplican herramientas más complejas y que no todos los ordenadores ni todos los navegadores aceptan. CSS es una poderosa herramienta que brinda una infinidad de recursos que no siempre son bien explotados.

Conceptos generales

Podríamos decir que este trabajo está basado fundamentalmente en un solo concepto, y es el de la visibilidad de las capas. Con CSS podemos determinar si una capa es visible o no mediante el empleo de la etiqueta “visibility”, que puede tener los valores visible, hidden y collapse.

La galería de imágenes constará de una serie de imágenes en miniatura (thumbnails) alineadas en forma ordenada en dos columnas. Cuando se pasa el puntero por estas imágenes, aparece en un recuadro ubicado a la derecha de estas dos columnas la imagen ampliada. Para realizar esto, debemos emplear una etiqueta y uno de sus posibles valores, que para este ejemplo es fundamental: “position: absolute>”.

Ahora explicaremos los principios de funcionamiento. Cada par de imágenes (una imagen ampliada con su respectivo thumbnail) se encuentran formando parte del mismo ítem de lista. Cada una de estas imágenes que forman el par, tienen una clase diferente (min y max). La clase min define los atributos del thumbnail.

La clase max es la que se refiere a la imagen ampliada, y que tiene una posición absoluta y un valor “hidden” de su atributo “visibility”, lo que hace que en condiciones normales esta imagen no se encuentre visible.

Se emplea una pseudo-clase vinculada a la clase “max” (“a:hover .max”), que es la que hace que el atributo “visibility” adquiera valor “visible” cuando el puntero se posa sobre cualquier elemento que compone el ítem de la lista.

Estructura

En primer lugar, definiremos la estructura del menú, que consta simplemente de dos listas no ordenadas (ul), conteniendo cada una de ellas cuatro ítems (li). Las listas tienen sus atributos definidos por la clase “cat”. Como ya dijimos, cada uno de los ítems contiene dos imágenes.

Ubicación de los thumbnails

Debemos ubicar las imágenes en miniatura en dos columnas (cada columna es una lista diferente) y para ello debemos definir en el archivo CSS los atributos de la clase “min” que se encuentran contenidos en los ítems (li).

1
2
3
4
5
6
7
8
9
10
11
.cat {
list-style-type: none;
margin: 0 0 25px 10px; /* Eliminacion de viñeta en IE6 */
padding: 0px; /* Eliminacion de viñeta en IE6 */
float:left;
}
li .min {
width: 75px;
height: 64px;
padding: 6px 20px 20px 7px;
}

La primera clase define que la lista no tendrá estilo de lista, se definen los márgenes y el relleno para que se vea como queremos, y le damos el valor “left” a la propiedad “float”, de forma que ambas listas se ubiquen una al lado de la otra flotando a la izquierda. Luego, se definen los atributos de las dimensiones de cada uno de los ítems y el relleno de los mismos, en la regla “li .min”.

Imágenes grandes

Cuando vemos el ejemplo que hemos desarrollado hasta aquí, vemos que se nos presenta un gran espacio en blanco que solo aparecerá cubierto por las imágenes grandes cuando el puntero se pose sobre los thumbnails. Es por esta razón, que incorporamos una imagen que contendrá un mensaje con instrucciones para el usuario, de forma tal que todo el espacio quedará cubierto.

Esto lo realizamos empleando una capa con posicionamiento absoluto, y cuyos atributos aparecen definidos en el archivo CSS con el identificador “#base”:

1
2
3
4
5
6
7
8
9
#base {
width: 410px;
height: 310px;
border: solid 1px #ccc;
position: absolute;
top: 250px; /* Provoca la separacion del borde superior */
left: 500px; /* Separa la imagen grande de la pequeña */
background: url(img/galeria.png);
}

Como vemos, tiene un ancho y una altura definidos. Como hemos querido agregar un borde que aparecerá separado 5px a cada lado de la imagen, las dimensiones son 10px más grandes que las de las imágenes. A su vez, esta capa tiene una imagen de relleno, que es la que se presenta cuando ninguna de las imágenes de la galería está visible.

Ahora solo resta definir el posicionamiento de las imágenes grandes, así como su condición de visibilidad, por lo que definiremos a todos los elementos contenidos dentro de un ítem de lista con la clase “.max”.

1
2
3
4
5
6
li .max{
visibility: hidden;
position: absolute;
top: 256px; /* Provoca la separacion del borde superior */
left: 506px; /* Separa la imagen grande de la pequeña */
}

Como vemos, se define que en condiciones normales estos elementos (imágenes) estarán no visibles. La posición (top y left) son seis pixeles más que los de la capa “#base”, debido al relleno de 5px por lado que hemos definido y al borde de 1px que tiene dicha capa.

A continuación, mediante el empleo de una pseudo-clase, haremos que la capa sea visible cuando el puntero se pose sobre cualquier elemento con enlace contenido dentro del ítem de lista:

1
2
3
a:hover .max {
visibility: visible;
}

El ejemplo ya terminado pueden verlo aquí.

Conclusión

Como pueden ver, el ejemplo es extremadamente sencillo. Se puede ampliar, colocar una mayor cantidad de columnas, modificar las posiciones o cualquier otra cosa que su imaginación les dicte, sin mayores dificultades.

La especificidad en Hojas de Estilo CSS

¿Qué es la especificidad en CSS?

¿En qué consiste? Básicamente la especificidad se refiere al valor que toma cada uno de los elementos de una hoja de estilo, hay selectores que tienen más peso e importancia que otros, es decir más especificidad.

Entre más especificidad exista, tendremos menos posibilidades de equivocarnos al aplicar el estilo que queremos a cierto elemento, y es ahí donde la desesperación de no obtener lo que queremos desaparecerá.

Como calcular la especificidad CSS

Existe una forma sencilla de calcular la especificidad CSS, es mediante una fórmula considerada incluso como un cálculo ya estandarizado. Consiste en sumar los puntos totales de una sentencia CSS en base a los selectores o elementos de los que está compuesto.

Se le da un valor de 1 punto a un elemento simple como una etiqueta a, p o div, a un selector de clase se le da el valor de 10 puntos y a un selector de id se le da un valor de 100 puntos, siendo únicamente superado por los atributos de estilos a los que se les da un valor de 1000 puntos.

Es decir; supongamos que queremos agregar un estilo los párrafos de nuestro documento, si agregamos en nuestro CSS un selector p{…}, este será utilizado para dar estilo a todos los párrafos del HTML, pero sólo se le dará el valor total de 1 punto, esto quiere decir que tiene poco especificidad.

Por lo cual si existe otro selector en el mismo CSS que diga así “.par p{…}” tendrá mayor importancia que el anterior, ya que le estamos agregando una clase por lo que la especificidad aumenta en 10 puntos es decir 10 puntos por el selector clase más 1 punto por el elemento nos da 11 puntos.

De la misma manera esto se aplica para los id, si agregamos una línea que diga “#parr p{…}” esta tomará el valor de 101 puntos de especificidad, por lo que será la más importante, así podemos crear combinaciones para que los estilos se apliquen correctamente.

Un ejemplo de especificidad con CSS

Con el siguiente código CSS:


p{
background: crimson;//Especificidad de 1 punto
}
.par{
background: pink;//Especificidad de 10 puntos
}
p.par{
background: maroon;//Especificidad de 11 puntos
}
#parr{
background: orange;//Especificidad de 100 puntos
}
p#parr{
background: red;//Especificidad de 101 puntos
}
p.par#parr{
background:green;//Especificidad de 111 puntos
}

Obtendré los siguientes resultados si inserto este bloque en mi HTML:

<p>El fondo de este párrafo será color carmesí</p>
<p class="par">El fondo de este párrafo será color granate</p>
<div class="par">Este div tendrá el fondo de color rosa</div>
<p id="parr" class="par">El fondo de este párrafo será de color verde</p>
<p id="parr" style="background: black;">El fondo de este párrafo será negro
porque use un atributo de estilo dentro de la etiqueta</p>
<p id="parr">El fondo de este párrafo será rojo</p>

Fondos con gradientes – degradados con CSS3

Formas de crear degradados para tus fondos con CSS3

Hasta el momento existen dos formas establecidas por CSS3 para crear un gradiente, ya que desafortunadamente Webkit y Mozilla no llegaron a un acuerdo en lo que a este tema se refiere, aunque los dos hayan adoptado la misma sintaxis para casi el resto de CSS3.

Webkit es un framework que esta presente en navegadores como Safari y Chrome, mientras que el kit de Mozilla controla el CSS3 en Firefox. Es esto y la sintaxis lo único que diferencia a los dos códigos que utilizaremos en este artículo, ya que producen básicamente el mismo resultado.

La sintaxis del gradiente Webkit es la siguiente:

  -webkit-gradient(<tipo>,  <punto> [, <radio>]?, <punto> [, <radio>? [,  <parada>]*)

El tipo puede ser “linear” o “radial”, es decir que el degradado se haga mediante lineas o mediante círculos Un punto es un par de valores separados por espacios, puede ser indicado con números, porcentajes o las palabras clave “top”, “bottom”, “left” y “right”.

Radio es un número y sólo se puede especificar cuando el tipo de degradado es radial. Una parada es una función con dos argumentos, un número y un color, indicando donde debe terminar el gradiente, también se pueden utilizar las funciones “from” y “to” para especificar esto.
Entonces, si queremos definir un degradado lineal que abarque todo el fondo de nuestra página y que vaya del color “granate” al color “carmesí”, incluiremos en nuestro CSS la siguiente línea:

body{
                                background: -webkit-gradient(linear, 0 0,  0 100%, from(maroon), to(crimson));
                                }

De esta manera estamos indicando con “linear” que es de tipo lineal, “0 0” que va de la esquina superior izquierda, “0 100%” hasta la esquina inferior izquierda, “from(maroon)” de granate, “to(crimson)” a carmesí.

Es entonces que si queremos que el gradiente únicamente cubra una parte del fondo basta con cambiar el porcentaje en el segundo parámetro, si indicamos “0 20%” el degradado se terminará en el 20% del fondo y el otro 80% será del color que le dimos al final en la función “to()”.

En caso de que queramos incluir un tercer color en el gradiente utilizaremos “color-stop” de la siguiente manera:

background: -webkit-gradient(linear,  0 0, 0 100%, from(maroon), color-stop(50%, crimson), color-stop(90%, red) ); 

Esto indica que el color carmesí empezara en el 50% y el color rojo en el 90%, creando un gradiente entre tres colores lo que da un efecto diferente a los degradados comunes.

Como mencioné al principio, se pueden hacer fondos con gradiente en CSS3 de dos maneras. Ya vimos como poder realizar el efecto con Webkit, ahora veamos como hacer un fondo con gradiente con Mozilla. Primero que nada la sintaxis aquí sería de la siguiente manera:

-moz-linear-gradient(  [<punto> || <ángulo>,]? <parada>, <parada> [,  <parada>]*)

El “tipo” en este caso está definidio al inicio de la sentencia, como vemos linear está en el nombre “-moz-linear-gradient”, el “punto” está para definir la posición horizontal y vertical en donde iniciará el degradado, y se puede usar con porcentaje, pixeles, o palabras claves (left, center, right para horizontal y top, center, bottom para vertical), si no es especificado se inicia en el centro por defecto.

También se puede usar un ángulo en vez de dar un punto, por ejemplo si damos 15deg (15 grados) en la sentencia “-moz-linear-gradient (left 15deg, marron, crismon);” obtendremos un degradado que inicia con 15 grados de inclinación de izquierda a derecha.

Al igual que en Webkit, con Mozilla se puede utilizar el “color-stop” como parada para definir hasta donde queremos que llegue un color, y donde inicia otro.

Conclusiones

Como podemos ver son sentencias muy parecidas que varían en muy pocas situaciones, con ellas podemos crear miles de combinaciones y experimentando podemos llegar a crear efectos muy buenos para nuestro sitio Web.

Recuerda que Internet Explorer aún no puede interpretrar CSS3 por lo tanto tampoco gradientes, en cuanto a Safari y Firefox si tienes una versión mayor a la tres podrás usarlos, al igual que en Google Chrome.

Para no dejar a nadie resentido o con un fondo que tu no quieres mostrar, trata de incluir un color base para aquellos navegadores que aún no soporten el gradiente, esto lo puedes hacer simplemente incluyendo dentro de “body” en el CSS la siguiente sentencia “background: #000000;”, con esto si el usuario usa Internet Explorer verá el fondo de color negro.

Algunos trucos CSS simples

Imagen flotante sin que el texto se ajuste

Cuando intentamos incorporar una imagen flotante junto a un párrafo, el texto del párrafo tiende a “envolver” a la imagen. Esto generalmente es el efecto deseado, para que no aparezcan espacios en blanco debajo de la imagen. Sin embargo, es posible que algún diseño requiera que la imagen mantenga una posición (como si ocupara una columna) y que el texto no ocupe espacio debajo de ella. Esto es muy simple de hacer, y basta con la aplicación de capas y márgenes.

En primer lugar, veremos como queda la maquetación cuando colocamos una imagen flotante junto a un párrafo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="capa">
<img src="imagenes/agua.jpg" alt="agua" />
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el
vapor que compone sus colas.</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
#capa {
  width: 610px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #f60;
  background: #fed;
  }
   
#capa img {
  float: left;
  margin: 0 10px 10px 0;
  }

Imagen flotante

A continuación veremos el ejemplo. Se trata simplemente de crear dos capas. La primera, es una capa contenedora, a la que hemos dado algunos elementos de diseño (borde, fondo, etc.), a la que hemos dado el identificador “principal”. Dentro de esta capa, crearemos una segunda capa, a la que daremos el identificador “flotante”, cuya característica principal es que tendrá la propiedad float y dentro de la cual incluiremos la imagen. Luego, dentro de la capa “principal”, incluiremos el párrafo. Los códigos y el resultado son los siguientes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="principal">
<div id="flotante">
<img src="imagenes/agua.jpg" alt="agua" />
</div>
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el
vapor que compone sus colas.</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#principal{
  width: 610px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #f60;
  background: #fed;
  }
 
#principal #flotante{
  float: left;
  width: 300px;
  }
 
#principal p{
  margin-top: 0;
  margin-left: 310px;
  }

Imagen flotante en una columna

Lo que produce el efecto deseado es:

  • La capa “flotante” tiene la propiedad “float” a la izquierda.
  • El párrafo (identificado como “#principal p” en el código CSS) tiene un margen derecho tal que es igual al ancho de la capa “principal” menos el ancho de la capa “flotante”, lo que permite que ésta se coloque a la derecha del párrafo.
  • El margen otorgado al párrafo es lo que hace que el texto no continúe hacia la derecha luego de que el espacio ocupado por la imagen finalice.

Esto puede hacerse también con la imagen flotante hacia la derecha. Para ello deberemos solo cambiar el “float:” de izquierda a derecha, al igual que el margen que se da al párrafo, con lo que el texto aparecerá a la derecha y la imagen a la izquierda.

Esquina “doblada” en capa

El siguiente ejemplo, se trata simplemente de crear una capa que aparente una hoja cuya esquina inferior derecha está doblada. Para ello deberemos contar con la siguiente imagen, la que para utilizarla solo deberán utilizar el botón derecho del ratón sobre ella y emplear la opción “Guardar como…”:

Imagen de ejemplo

A continuación mostraremos los códigos que hemos utilizado en este ejemplo y la imagen resultante, para posteriormente explicar como lo hemos hecho:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="oscuro">
<div id="esquina">
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el
vapor que compone sus colas.</p>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#oscuro  {
  width: 420px;
  background: #444;
  padding: 60px;
  }
   
#esquina  {
 background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
 }
 
#esquina p  {
  padding: 50px;
  margin: 0;
  }

Esquina doblada con CSS

La imagen de la esquina doblada tiene dos colores fundamentales: el gris oscuro del fondo, y el color blanco de la mayor parte del resto de la imagen, que coincide con los bordes de la misma (esto es importante para que no existan diferencias con el resto de la capa). El truco solo consiste en utilizar una propiedad de la que ha hemos hablado, que es el posicionamiento de las imágenes de fondo.

En primer lugar crearemos la capa contenedora, que será de color gris oscuro para que coincida con el fondo de la imagen. Luego crearemos la capa donde se insertará el texto (o cualquier otro contenido), cuyo fondo tiene el siguiente código CSS:

1
2
3
#esquina  {
 background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
 }

Se trata en realidad de varias propiedades que se encuentran simplificadas:

  • Background-color, que tiene el valor #fff y que es visible en todos los puntos de la capa que no se encuentran cubiertos por la imagen.
  • Background-image, cuyo valor es la URL de la imagen de la esquina doblada.
  • Background-position, que tiene los valores bottom y right, para que la imagen de fondo se ubique en la esquina inferior derecha de la capa.
  • Background-repeat, que tiene el valor no-repeat, para que no ocupe el resto de la capa y sea visible una sola vez.

Además, se debe hacer que el párrafo o cualquier otro contenido que se encuentre en la capa tenga un relleno tal que dicho contenido no se monte sobre la imagen utilizada en la esquina. Este efecto puede utilizarse (modificando la posición de la imagen de fondo y utilizando una imagen apropiada) en cualquiera de las cuatro esquinas de la capa.

Propiedades de texto con CSS3

Unas de las propiedades más populares en el uso de CSS3 son aquellas que se aplican a la edición y estilización de textos, muchas de estas fueron incluidas desde la versión anterior de CSS pero por cuestiones de implementación se decidieron postergar para adaptarlas mejor en esta entrega.

CSS3 ha permitido ahorrarnos el hecho de editar una imagen exclusivamente para mostrar un texto, el hecho de tener que subir dicha ilustración a nuestro servidor únicamente para que nuestro texto luciera de manera presentable nos podía poner los pelos de punta, ya que no sólo era cuestión de subir 1 o 2, muchas veces se tenía que subir bastantes imágenes, las cuáles a su vez llevaban un tiempo invertido en su edición y representaban mayor tiempo descarga para los usuarios.

Entre las propiedades más comunes podemos encontrar a text-shadow, text-stroke y text-overflow, las cuales son fáciles de aplicar y aunque algunas son más exclusivas que otras, pueden ser adaptadas a partir de diseños hechos previamente con algún editor de imágenes como Photoshop, en cuestión de minutos.

Text-shadow

El efecto text-shadow consiste en agregar una sombra a nuestro texto, la cual se encontrara difuminada en distintos grados que varian según los valores proporcionados a través de cuatro parámetros, los cuales son x-offset y y-offest que indican el desplazamiento horizontal y vertical de la sombra es decir a que distancia estará la sombra del texto, blur que indica el desenfoque y finalmente el cuarto parámetro es el color de la sombra, en caso de no proporcionar un color se tomará el color de texto como el valor default.

1
2
3
4
5
h2 {
    text-shadow: 0 5px 3px #CCC;
    color: #000;
    font-size: 40px;
}

También podemos agregar múltiples sombras mediante el uso de comas como separadores

1
2
3
4
5
h2 {
    text-shadow: 0 2px 0 #FFF, 0 1px 5px #CCC;
    color: #000;
    font-size: 40px;
}

Text-stroke

Antes de empezar con la descripción, hay que mencionar que este método sólo funciona para Web-kit por lo que hay que tener cuidado al momento de utilizarlo y estar consientes que sólo lucirá bien en Chrome y Safari. El objetivo de este efecto es mostrar nuestro texto como si se subrayara el contorno de las letras, creando un trazo que puede adaptarse al tamaño y color deseado, es especialmente útil si se desea utilizar letras y fondo del mismo color.

1
2
3
4
5
h2 {
    -webkit-text-stroke: 3px black;
    color: crimson;
    font-size: 70px;
}

Text-overflow

Esta propiedad puede ser utilizada para “cortar” la extensión de un texto que exceda la medida del contenedor en el cual se encuentra, proveyendo de una muestra para que el usuario pueda interesarse en leer el texto completo. Se le pueden asignar dos valores los cuales son clip y ellipsis, la diferencia entre estos dos valores es que el clip no cortará palabras mientras que ellipsis muestra tres puntos que se despliegan al final del texto de muestra indicando que existe más texto.

1
2
3
4
5
6
#texto {
     text-overflow: ellipsis;
     overflow:hidden;
     white-space:nowrap;
     width: 200px;
}

Conclusión

>>> Puedes ver aquí algunos ejemplos simples del funcionamiento del CSS3 explicado.

Las tres propiedades analizadas en esta parte del artículo son consideradas como parte del grupo de las más sencillas, por su fácil aplicación y edición, pero CSS3 no se ha limitado únicamente a esta clase de estilos, podemos indagar un poco más y realizar efectos un poco más elaborados y avanzados mediante herramientas como el set de animación proporcionado por webkit a través de su propiedad “keyframes”, que nos ofrece los efectos “pulse” y “bounce” para enriquecer el contenido.

Como podemos observar con muy poco hemos logrado darle un gran estilo a nuestro sitio, con esta pequeña serie de atributos y el ingenio se puede llegar a realizar bastantes proyectos de gran calidad, es cuestión de no limitarnos y saber aprovechar las bondades que nos ofrecen los lenguajes de la actualidad. CSS3 no es un obstáculo, es un aliado, así que no veas como un inconveniente el hecho de que luzca distinto en los navegadores, pronto llegara su total estandarización y debemos estar más que familiarizados con el lenguaje en el siguiente artículo de la serie explicaremos más atributos relacionados a otros elementos de una página Web.

2017 © eorts.com