[CSS3] Puking rainbow!

¡Regocijaos, newbies, regocijaos todos! ¡Porque ha llegado a nosotros el color, las formas y los paneles! ¡Se acabaron los días del impecable blanco en nuestra web! ¡Se acabaron los días de la tiranía de la monocromía! Hoy llega a nosotros, CSS3.

Y después de esta épica, casi bíblica introducción, nos introducimos en el complejo mundo del CSS3. Hay dos maneras de trabajar con CSS3: colocar nuestras especificaciones en el mismo documento HTML o utilizando otro archivo que enlazaremos a nuestro documento HTML. Personalmente, prefiero la segunda opción por un manejo más ordenado y fácil, así que me dedicaré a ello.

¿Qué es CSS3?

Es Cascade Style Sheet, o Plantilla de Estilos en Cascada. Se guarda en formato *.css, y en él vamos a especificar todo el aspecto visual de nuestra web mediante cascada (efecto que ya veremos explicado visualmente). Para usarlo y que lo que creemos tenga su efecto en nuestra web, añadiremos esta línea bajo nuestro <!DOCTYPE HTML>:

<link rel="stylesheet" href="nombredelaplantilla.css">

¿Cómo empezar?

Preguntas, buenas preguntas. La verdad es que me resulta algo complejo de explicar. No sigue una estructura en específico, sino que vamos modificando la web mediante apartados. El apartado de enlaces, el apartado de subtítulos, el apartado de párrafos… Espero explicarme bien, aunque con las imágenes se verá todo mucho más claro.

Por ejemplo, si queremos modificar cómo se ve nuestro párrafo, que está dentro de una etiqueta <p>. ¿Qué haremos con ello? Algo muy básico: colocar un borde coloreado redondeado a su alrededor, y darle un ancho determinado. Es muy sencillo de realizar, vamos a ver:

p
{
    border:5px solid grey;
    border-radius:10px;
    width:300px;
}

Border es la creación del borde, el grosor de este en px, y el color que lleva este borde. Si queremos variar en colores y no sabemos su código, podemos acudir a Color Picker en w3Schools, y escoger el color y la tonalidad que queramos de una forma muy sencilla. Así sustituimos en la imagen a grey por el código que queramos poner.
Border-radius es lo que redondea el borde, y Width es lo que determina el ancho.

A partir de aquí todo es muy sencillo. Y si tenemos un apartado identificado, como puede ser un <div>(en forma de <div id=’nombre’>), podemos expresarlo de la siguiente forma:

#contenido
{
    color:#FF4719;
    background-color:#000000;
    box-shadow: 10px 20px 30px #FF4719;
    width:350px
}

Color define el color de la fuente, y Background-color el color del fondo. Box-shadow es una opción que nos permite darle sombra al cuadro sobre el que irá el texto. ¿Quieres más, quieres más? Pues también tenemos paneles, efectos de fuentes y más chorradas que incluir (siempre es bueno variar y dosificar los añadidos y elementos visuales. Para no saturar y demás).

Volveré pronto con más equivocaciones y tutorial.

SeeU!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s