5 técnicas para familiarizarte con CSS 3

CSS es un lenguaje muy conocido y ampliamente utilizado para diseñar sitios web. Con la versión tres en funcionamiento, se implementarán muchas funciones que ahorran tiempo. Aunque solo los navegadores más modernos actualmente admiten estos efectos, ¡todavía es divertido ver lo que está a la vuelta de la esquina! En este tutorial te mostraré cinco técnicas..




1: El marcado básico

Antes de comenzar con este tutorial, vamos a crear el marcado básico con el que trabajaremos a lo largo del tutorial..

Para nuestro xHTML, necesitaremos los siguientes elementos div:

  • #round, para aplicar el código CSS3 de la esquina redondeada en.
  • #indie, para aplicar una esquina redondeada individualmente en.
  • #opacidad, para mostrar las nuevas formas en que CSS3 maneja con opacidad..
  • #shadow, para mostrarte cómo crear sombras paralelas, sin Photoshop.
  • #resize, para mostrarte un nuevo tipo de CSS, para redimensionar elementos.

Para esto, nuestro xHTML será:

     Una introducción a CSS3; Un tutorial de Nettuts    
 
 
 
 
imagen de tamaño variable

En nuestro documento HTML, hemos creado algunos elementos div, con los ID indicados anteriormente.
Vamos a crear rápidamente un archivo CSS base.

 cuerpo fondo-color: #fff;  #wrapper ancho: 100%; altura: 100%;  div ancho: 300px; altura: 300px; margen: 10px; flotador izquierdo;  / * el resto del código vendrá aquí, más adelante * /

Como puede ver, hemos dado a todas las etiquetas div un ancho y alto de 300px cada uno. También los forzamos a flotar a la izquierda, dejándonos con una página llena de divs para jugar..

2: esquinas redondeadas

Puede ser una molestia crear esquinas redondeadas. Primero, debes crear las imágenes. A continuación, debe crear más elementos para que las esquinas redondeadas se establezcan como fondos. Ya sabes que hacer.

Este problema se puede resolver fácilmente con CSS3, con la propiedad llamada "border-radius".
Primero crearemos un elemento div negro y le daremos un borde negro..
El borde está ahí porque necesitamos "ejecutar" el frontera-propiedad del radio.

Hacemos esto así:

 #round background-color: # 000; borde: 1px sólido # 000; 

Una vez que hayas creado el div, actualiza la página. Ahora debería ver un div cuadrado negro con un ancho y alto de aproximadamente 300px. Ahora, trabajemos en las esquinas redondeadas. Esto se puede lograr con solo dos líneas de código.

 #round background-color: # 000; borde: 1px sólido # 000; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Como puede ver, hemos agregado dos líneas casi idénticas, con la única diferencia de ser "-moz" y "-webkit". -mocz se refiere a Mozilla Firefox, y Safari / Google Chrome usa el prefijo -webkit.

Actualice su documento HTML y verá un div redondeado, agradable y suave. Bueno, suave ... En Firefox y Safari, sí, pero Chrome tiene un borde ligeramente pixelado.

De vuelta a nuestro código, "borde-radio"necesita un valor. Este valor determina la nitidez de la esquina; cuanto mayor sea el valor, más redondeada será la esquina, al igual que en Photoshop. Según mi conocimiento, no hay un valor máximo para este elemento.

3: esquinas individualmente redondeadas

Crear esquinas redondeadas tradicionales puede agotar tu día. Afortunadamente, CSS3 lo resuelve!

Esta propiedad es bastante similar a la anterior. También usa el "radio de borde", sin embargo, modificaremos ligeramente nuestro código.

Lo hacemos así:

 #indie color de fondo: # 000; borde: 1px sólido # 000; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; 

Hemos agregado "topright" y "bottomright" a nuestro código; esto se refiere a la esquina superior derecha e inferior del elemento div. Con estas nuevas propiedades, puede implementar fácilmente una característica "similar a una pestaña".

Las adiciones que se utilizarán son "topright", "bottomright", "bottomleft" y "topleft".

4: Cambiando la opacidad, a la manera de CSS3

Actualmente, necesitas escribir varias líneas de CSS para ajustar la opacidad de los elementos (hacks). Una vez más, CSS 3 simplifica el proceso..

Esta línea también es fácil de recordar, es simplemente "opacidad: valor". Fácil a la derecha?
Nuestro código será:

 #opacity background-color: # 000; opacidad: 0,3; 

5: Sombra!

En Photoshop, es una tarea trivial crear sombras paralelas. Sin embargo, al implementarlas en sus aplicaciones web, es probable que guarde la sombra como una imagen y luego la use como fondo. ¡No más! (Al menos para los navegadores modernos). Desafortunadamente, solo Safari y Chrome admiten esta función en este momento.

El código requiere solo una línea, pero es bastante largo y tiene 4 valores diferentes!

 -webkit-box-shadow: 3px 5px 10px #ccc;

Para el primer valor, he usado 3px. Esta determina la horizontal Distancia entre la sombra y el elemento div. Moviéndose a lo largo, el segundo valor, 5px, determina la vertical distancia entre la sombra y la caja.

Sin embargo, hay otro valor px, 10px. Este es el radio de la sombra, que en inglés simple significa el desenfoque de la sombra, o cuán "ancho" es el degradado..

Finalmente, el último valor determina el color de la sombra. Esto significa que la sombra no solo se limita a la escala de grises; También podemos usar rojo (# f00) como un valor, lo que representa una sombra roja brillante..

Para nuestro código final, se reduce a lo siguiente:

 #shadow background-color: #fff; borde: 1px sólido # 000; -webkit-box-shadow: 3px 5px 10px #ccc; 

Como puedes ver, le he dado a la división un fondo blanco, un borde negro y una sombra gris clara..

6: cambiar el tamaño!

Con la versión más reciente de CSS, es posible cambiar el tamaño de los elementos. (Actualmente solo funciona en Safari).

Con este código, es posible hacer que aparezca un pequeño triángulo en la esquina inferior derecha de un elemento. A continuación, puede arrastrarlo para cambiar el tamaño. El código a seguir es, una vez más, muy fácil, solo requiere una línea y es compatible con algunos elementos más antiguos que quizás ya conozca. Estos son "max-width", "max-height", "min-width" y "min-height".

El código es el siguiente:

 #resize background-color: #fff; borde: 1px sólido # 000; redimensionar: ambos; desbordamiento: auto; 

En el código, he usado 2 líneas adicionales a nuestro CSS normal, "redimensionar: ambas"; y "desbordamiento: auto;". La línea con desbordamiento es necesaria para hacer que el cambio de tamaño funcione, puede ser cualquier tipo de valor de "desbordamiento", siempre y cuando esté allí.

La otra línea que he usado es "redimensionar: ambos;". Esta línea especifica que el elemento se puede redimensionar tanto en horizontal y vertical direcciones.

Conclusión

¿Qué debes tomar de este artículo? ¡En los próximos años, su trabajo será más fácil, las páginas web se cargarán más rápido y le quedará más tiempo para su familia! Aunque todavía no puede confiar en que estos efectos funcionen en todos los navegadores, no hay absolutamente nada de malo en aplicar una esquina redondeada a un div en un navegador, y no en el otro. Considérelo una actualización!

Para obtener más información sobre CSS3, puede visitar http://www.css3.info.

  • Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..