Ir al contenido principal

Usando CSS3

C

on la reciente aparición de los primeros códigos en HTML5 han aparecido también los primeros en CSS3, y es que esta vez, ambas tecnologías van de la mano. Si antes era recomendable utilizarlas conjuntamente, ahora es casi obligado, ya que es el objetivo del desarrollo de dichas tecnologías.

Al igual que ocurre con HTML5, CSS3 incluye una serie de mejoras y nuevas funcionalidades que nos harán la vida más fácil a la hora de dar estilo a nuestras páginas. Alguna de estas mejoras las iremos viendo a continuación.

Para facilitar la tarea y no tener que escribir código HTML de nuevo, usaremos el que hemos creado en el mini tutoria de HTML5.

El código CSS es el siguiente:

/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
display: block;
}

body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}

h2 {
font-size: 28px;
line-height: 44px;
padding: 22px 0;
}

h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}

p {
padding-bottom: 22px;
}

nav {
position: absolute;
left: 0;
width: 100%;
background: url("nav_background");
}

nav ul li {
float: left;
}

nav ul li a {
display: block;
margin-right: 20px;
width: 140px;
font-size: 14px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}

nav ul li a:hover {
color: #fff;
}

nav ul li.selected a {
color: #fff;
}

nav ul li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url("rss.png") left center no-repeat;
}

Hasta aquí utilizamos las mismas propiedades que las que se utilizaban en CSS2. Las nuevas propiedades las mostramos a continuación:

#intro {
margin-top: 66px;
padding: 44px;
background: #467612 url("intro_background.png") repeat-x;
background-size: 100%;
border-radius: 22px;

/* Background-size not implemented yet */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;

/* Border-radius not implemented yet */
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
}

Para esta etiqueta podemos observar dos nuevas propiedades:

- background-size: que nos permite definir el fondo de tamaño dinámico y en caso de que el contenido o el tamaño de la página veríe, la imagen también lo hará, adaptandose a ésta.

- border-radius: redondea el borde con un radio igual al indicado.

La mayoría de los navegadores aún no soportan estas propiedades, por lo que especificamos a continuación de éstas las propiedades nativas de cada navegador que sustituyen a las especificadas por CCS3.

A la propiedad background le podemos indicar dos imágenes a utilizar (no estoy seguro si este aspecto ya se podía en CSS2, pero yo no lo conocía):

background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
url("intro_flower.png") top right (653px 100%) no-repeat;

Una nueva propiedad muy interesante es poder indicar que dentro de una etiqueta se va a mostrar una tabla, y definer las propiedades de la misma. En el siguiente código vemos un ejemplo:

.blogPost div {
column-count: 2;
column-gap: 22px;
}

.blogPost {
column-count: 2;
column-gap: 22px;
}

.blogPost header {
column-span: all;
}

En este caso indicamos que se van a mostrar dos columnas con una separación entre cada una de 22px;

Como CSS3 solo está soportado por algunas versiones de los navegadores, damos las propiedades propias de cada navegador para suplir esta carencia:

.blogPost div {
/* Column-count not implemented yet */
-moz-column-count: 2;
-webkit-column-count: 2;

/* Column-gap not implemented yet */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}

Otra funcionalidad nueva es la de dar sombra a una etiqueta. En este caso, la vamos a dar a la imagen de la etiqueta blog:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

El primer atributo de la propiedad box-shadow indica en dónde queremos que pare la sombra en sentido horizontal, el segundo en sentido vertical, en el tercero indicamos cómo de transparente será la sombra y por último, indicamos el color base de la sombra.

De momento, esta propiedad solo funciona en Safari, por lo que indicamos las propiedades supletorias para el resto de navegadores:

.blogPost img {
margin: 22px 0;
-webkit-box-shadow: 3px 3px 7px #777;
}

La última propiedad que vamos a mostrar en este artículo es la de alternar el fondo los comentarios que se muestran, de forma que se muestren en forma de cebra los comentarios. Para ello, antes no nos quedaba más remedio que utilizar JavaScript, pero ahora con CSS3 será muy sencillo, simplemente utilizando la pseudo-clase “nth-child”:

section#comments article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;

/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}

El elemento 2n indica que se aplicará al segundo comentario, 3n al tercero, y así sucesivamente.

El +1 indica que se comienza a contar por el primer elemento.

Como los vectores comienzan por el elemento 0, esto indica que comenzará por el segundo del vector.

Con esto finalizamos nuestro pequeño tutorial de inciación a CSS3. A medida que vayamos descubriendo nuevas funcionalidades os las iremos mostrando. Mientras tanto.. a practicar un poco.

Recordad que podéis ver también nuestro tutorial de introducción a HTML5

Comentarios

Entradas populares de este blog

Exportar archivo de configuración de WinSCP

S i estamos trabajando con WinSCP seguro que ya hemos guardado distintas sesiones para acceder a ellas directamente en futuras ocasiones y evitar volver a introducir todos los parámetro de configuración. Seguro que también muchos de vosotros habéis agrupado las sesiones en carpetas dependiendo de la naturaleza de las mismas. Este trabajo ocupa un valioso tiempo que no nos podemos permitir repetirlo para todos los equipos que tenemos, por lo que lo más lógico es configurar todas las sesiones y exportar su configuración al resto de equipos , teniendo una sola versión y evitarnos tener que volver a configurar todas las sesiones en cada uno. El problema es que WinSCP no nos muestra la opción de exportar de una forma sencilla, por lo que tendremos que buscarnos la vida. Lo primero que debemos hacer es abrir el programa y acceder a Preferencias -> Almacenamiento (o su equivalente al inglés) En esta pantalla deberemos indicar que almacene la configuración en un archivo

Asignar valores por defecto a input=”file” y a textarea

S eguro que muchos os habéis estado rompiendo la cabeza buscando la forma de dar un valor por defecto a el tipo de dato input=”file” . Pues que sepáis que no se puede!!! No se puede dar un valor por defecto a los campos de este tipo, ya que hacen referencia a una ruta física local y podrían surgir problemas de seguridad. Lo que se puede hacer, por ejemplo, es mostrar la imagen o el nombre del dato que tenemos almacenado y si el usuario desea modificarla, ofrecerle la opción de cargar una nueva. La etiqueta textarea , aunque pueda parecérnoslo, no se trata de un input y para darle valor por defecto simplemente debemos mostrar el texto que deseemos entre su marca de apertura y de cierre. Es decir, en caso de que lo que deseemos mostrar por defecto sea una variable, introduciremos el siguiente código: <textarea id="txtobservaciones" name="txtobservaciones" rows="2" cols="40" class="txt" ><?=$_POST["txtobservaciones"] ?&

Configuración de archivo de Logs para IpTables

I pTables se usa para configurar, mantener e inspeccionar las tablas de reglas de filtrado de IPs en el kernel de Linux, pero por defecto, su sistema de logs no es todo lo completo esperamos. Por defecto, la mayoría de los logs del sistema se guardan en el fichero /var/log/messages pero en este caso vamos a configurar un nuevo fichero para que almacene únicamente los logs que generaremos con algunas reglas en IpTables , creando así su propio archivo de bitácora . Lo primero que debemos hacer es configurar el archivo /etc/syslog.conf , que se trata de un archivo de configuración en el que se indica el modo en que los mensajes del sistema son bitacorizados a través de la utilidad syslogd que se instala y configura por defecto en todos los sistemas GNU/Linux . Debemos añadir al final del fichero la siguiente sentencia: kern.warning /var/log/iptables.log Con esto indicamos que se almacenen los mensajes provienen del kernel con prioridad 4 o superior ('warning' es el nivel de