Título del blog en 3D con CSS

En esta ocasión os traigo un poquito de CSS pero muy sencillo la verdad. En este nuevo post de El Blog de la Informática 10 os voy a explicar cómo poner el título del blog en 3D utilizando CSS.

Título del blog en 3D con CSS

Lo primero a realizar es, como siempre que vamos a realizar cualquier modificación en la plantilla del blog, una copia de seguridad de la misma.

Una vez realizada la copia de seguridad, ya podemos hacer cualquier modificación en la misma y, en el caso de que se produzca algún error o no nos guste el resultado final, podremos volver al estado anterior.

Lo siguiente será acceder a Plantilla –> Edición de HTML y buscar el código que define el estilo para el título del blog que, en el caso de la plantilla Rounders, es:

#header h1

Una vez encontrado, borramos

font: $pageTitleFont;

y añadimos el siguiente código:

color:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:25px;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);

Cierto es que en vez de reemplazar el texto podríamos haber creado un selector de clase y modificar la definición del estilo del título, pero creo que ésta es una forma bastante sencilla de aplicarlo.

En esta ocasión también puede suceder que el código de definición del estilo del título varíe de una plantilla a otra, por lo que si no utilizáis la plantilla Rounders, tendréis que indagar un poco para averiguar el código exacto.

Para finalizar, solo nos quedará guardar los cambios y con este simple código habremos modificado la apariencia del título de nuestro blog de 2D a 3D.

También si queremos podemos personalizar un poco el código anteriormente añadido.

Por ejemplo podemos modificar el color (propiedad color), el tipo de letra (propiedad font-family), el tamaño (propiedad font-size) o el estilo de ésta (propiedad font-weight).

Título del blog en 3D con CSS

Para los posibles colores que podéis utilizar os dejo la Tabla de Colores Web de Wikipedia que es bastante completa.

2 comentarios:

Frank dijo...

Muy buen blog:
Aporta mucha información a diversos temas que me interesan.
Muchas gracias.
Saludos

José M. dijo...

Gracias Frank, un saludo :-)

Publicar un comentario

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.