Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

11 Técnicas Clásicas de CSS Simplificadas con CSS3

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Todos hemos tenido que lograr algún efecto que requiriera un puñado adicional de divs o PNGs. No deberíamos limitarnos a estas viejas técnicas cuando está llegando una nueva era. Esta nueva era incluye el uso de CSS3. En el tutorial de hoy, le mostraré once diferentes efectos que consumen mucho tiempo y que se pueden lograr fácilmente con CSS3.


¿CSS3? ¡¿Que es eso?!

Estoy seguro de que ha oído hablar de CSS en general. CSS3 no es muy diferente, en términos de sintaxis; sin embargo, el poder de CSS3 es mucho mayor. Como usted verá en estas once técnicas, ¡puede tener múltiples fondos, cambiar dinámicamente esos fondos, bordes redondeados, sombras de texto y mucho más.

Esto es lo que el sitio oficial (o al menos, lo que yo considero oficial) de CSS3, css3.info, tiene que decir acerca de CSS3:

CSS3 es el nuevo chico en la familia de hojas de estilo. Ofrece excitantes nuevas posibilidades para crear un impacto con sus diseños, le permite utilizar hojas de estilo más diversas para una variedad de ocasiones y mucho más.

Lo que Estaremos Cubriendo

Aquí están las 11 técnicas que voy a mostrarle cómo recrear con CSS3. Le mostraré cómo crearlas usando CSS2 (o JavaScript) y luego con las propiedades CSS3. Recuerde - estos efectos sólo funcionarán en navegadores modernos que implementen estas características CSS3. Su mejor opción es verlas con Safari 4.

  1. Esquinas Redondeadas
  2. Sombra de Caja
  3. Sombra de Texto
  4. Fuentes Atractivas
  5. Opacidad
  6. RGBA
  7. Tamaño del Fondo
  8. Fondos Múltiples
  9. Columnas
  10. Borde de Imagen
  11. Animaciones

1. Esquinas Redondeadas

Rounded Corners

Probablemente mi favorito en esta lista, las esquinas redondeadas proporcionan a un desarrollador tantas opciones. Puede crear un botón de esquinas redondeadas en segundos. Lo que más me gusta es establecer una gradiente de fondo para repetir a lo largo del eje x y luego aplicar esquinas redondeadas para hacer un bitón muy agradable de aspecto Web 2.0.

Puede simular las esquinas redondeadas utilizando cuatro divs adicionales o mediante JavaScript. Sin embargo, un usuario no ve estas esquinas suaves si tiene JavaScript desactivado, creo que está bien siempre y cuando el sitio web sigue funcionando como debería. Puede leer sobre este método si prefiere utilizar CSS puro en la realización de esquinas redondeadas.

Método Clásico

El método clásico utiliza jQuery junto con un complemento JavaScript llamado Corners.

Método CSS3

Como puede ver, todo lo que necesita hacer es especificar tres propiedades CSS3. Eventualmente, sólo será una; usted tiene que utilizar tres ahora debido a que los diferentes navegadores utilizan diferentes nombres para la propiedad.

Ver la demostración.

2. Sombra de Caja

Box Shadow

Las sombras de caja proporcionan una herramienta muy potente. 99% del tiempo cuando estoy diseñanado, me encuentro usando sombras para algo. Una vez más, voy a estar usando un plugin jQuery para ocuparme de la manera clásica porque honestamente, tratando de imaginármelo sólo con CSS es confuso. ¿Por qué debería perder mi tiempo jugando con márgenes negativos cuando ya hay algo escrito que hace el trabajo para mí? Siempre y cuando mi diseño se vea bien cuando la gente tenga JavaScript desactivado, estoy perfectamente contento utilizando un complemento jQuery.

Método Clásico

Estoy utilizando el complemento dropShadow. Simple y lo que quería; aunque preferiría utilizar sólo CSS ;).

Método CSS3

Los valores para las propiedades de sombra de caja son: x-offset y-offset blur color. Mucho más fácil que la importación de dos archivos JavaScript y MUCHO más fácil que jugar con imágenes de fondo y márgenes negativos.

Ver la demostración.

3. Sombra de Texto

Text Shadow

Si alguna vez has leído un tutorial sobre cómo hacer el efecto de tipografía en Photoshop, sabrá que se utiliza el efecto de sombra. Es muy sencillo crear texto con efecto de tipografía, simplemente siga este tutorial en Line25 de Chris Spooner.

Método Clásico

En vez de usar un plugin de jQuery esta vez, solo utilizo algunos trucos simples de CSS para colocar absolutamente el texto detrás de la otra copia del texto. Lo único malo de no usar CSS3 para esta situación es que usted obtendrá dos copias del texto si CSS está deshabilitado.

Método CSS3

Si usted está planeando usar sombras de texto borrosas (la tercera "opción" en la propiedad text-shadow), no sé cómo lograría eso con CSS puro y sin imágenes.

Ver la demostración.

4. Fuentes Atractivas

Fancy Font

Hemos soñado con esto desde hace mucho tiempo, pero usted finalmente puede mostrar "fuentes atractivas" en la web sin tener que depender de JavaScript. Por supuesto, esto causa algunos problemas con el permiso de las fuentes pagadas que se distribuyen a través de Internet. De todos modos, le presento a @font-face.

Método Clásico

Decidí usar Cufón para reemplazar el texto. No voy a explicar cómo usarlo porque Jeffrey ya tiene un impresionante tutorial de video.

Método CSS3

Creamos una familia de fuentes con @font-face y luego la usamos como un valor para font-family. Michael Owens escribió un artículo aquí hace un mes, el cual explica @font-face bastante bien.

Ver la demostración.

5. Opacidad

Opacity

Si usted ha visitado el rediseño del sitio web de Envato últimamente, usted pudo haber notado que hay muchos elementos transparentes. Aunque esto se consigue con PNGs transparentes, puede lograr un efecto similar utilizando la propiedad opacity. Ahora, la propiedad opacity ha estado vigente por un tiempo, pero nuestro querido IE tiene sus propias propiedades.

Método Clásico

Método CSS3

Con CSS3, simplemente eliminamos dos propiedades que eran específicas para IE, ¡¿no es genial ?!

Ver la demostración.

6. RGBA

RGBA

Todo el mundo sabe lo que significa RGB (rojo, verde, azul), pero ¿qué significa la A? Representa alfa, que se refiere a la transparencia.

Aparte de esquinas redondeadas, RGBA es mi siguiente propiedad CSS3 más utilizada. A veces sólo quiero añadir un poco de luz de fondo blanco/negro a los enlaces de navegación cuando un usuario pase el cursor por ellos. Es mucho más fácil que crear una nueva imagen para cada color; sin embargo, con un poco de PHP se hacen las cosas mucho más fáciles.

Método Clásico

Viendo como esto no es un artículo de PHP, no voy a repasar sobre el PHP. Simplemente guarde este archivo como rgba.php y cuando necesite un determinado color RGBA, haga el "color" de fondo como url (rgba.php?r=R&g=G&b=B&a=A).

Ahora solo aplíquelo a un div...

Método CSS3

Ver la demostración.

7. Tamaño del Fondo

Background Size

La propiedad de tamaño de fondo es algo increíble para tener en su cinturón de herramientas cuando está creando un diseño fluido. Un ejemplo de esto podría ser cuando usted tiene una imagen de fondo para un contenedor que es para la barra lateral. La manera clásica de hacer esto requeriría ajustar para repetir la imagen a lo largo del eje y, pero con CSS3 es como añadir otra propiedad background.

Método Clásico

Método CSS3

Desafortunadamente, esta propiedad no está implementada en Firefox (V3.5.2) al momento de escribir este artículo.

Ver la demostración.

8. Fondos Múltiples

Multiple Backgrounds

Ah, fondos múltiples. Ahora esto da a los desarrolladores una herramienta muy poderosa. Puedo pensar en tantas cosas que requieren múltiples divs sólo para tener más de un fondo. El lugar más común que puedo ver esto siendo útil es en una sección de encabezado de la página web, pero eso es sólo lo primero que pensé.

Método Clásico

El método clásico es bastante obvio, sólo envuelva el div con otro div y así sucesivamente para cada fondo que necesita. Produce un código agradable a la vista, ¿verdad?

Método CSS3

La sintaxis es muy fácil de entender en este caso. ¡Todo lo que hace para los fondos múltiples es añadir una coma entre cada uno! Sin embargo, una vez más, esta es una propiedad limitada y sólo está en Safari.

Ver la demostración.

9. Columnas

Columns

Esta es la propiedad CSS3 más interesante que he revisado. No es algo que se ve mucho en diseño web. Yo mismo, sólo he visto columnas tipo periódico una o dos veces; sin embargo, me encanta cómo se ve el efecto cuando se hace correctamente. Normalmente usted separaría el contenido en divs y flotaría esos divs, pero he encontrado un complemento jQuery que dinámicamente procesa las columnas.

Método Clásico

He añadido un poco de relleno a las columnas sólo para que los textos no se amontonen entre sí.

Método CSS3

Existen gran cantidad de otras propiedades de columna CSS3 que puede aplicar, pero para fines demostrativos, sólo especifiqué el número de columnas. Si desea obtener más información acerca de estas propiedades adicionales, consulte la página de multi-columnas en CSS3.info.

Ver la demostración.

10. Imagen de Borde

Border Image

No tenía ni idea de la propiedad de borde de imagen hasta que actualizé a Firefox 3.5 y fui al sitio web de Chris Spooner y vi que sus imágenes de publicación tenían bordes de imagen. Yo personalmente no tengo ningún interés en esta propiedad, pero eso no va a impedirme explicar cómo conseguirla.

Método Clásico

En vez de pasar el tiempo creando divs múltiples y repitiendo la imagen de fondo alrededor de la div, encontré un plugin de jQuery que hace el trabajo para mí. Se llama borderImage y funciona tal y como debería.

Método CSS3

Como puede ver, la propiedad de borde de imagen es un poco extraña. W3 explica cómo se calcula MUCHO mejor.

Ver la demostración.

11. Animaciones

Animations

Muy bien, ¿a quién no le gusta ver algún elemento deslizar suavemente a la izquierda o desaparecer cuando usted posiciona el cursor sobre algo? Las animaciones son geniales para mejorar la interfaz de usuario, ¡pero asegúrese de no caer por la borda! Los únicos navegadores compatibles con las animaciones CSS3 son los navegadores basados ​​en Webkit. La única otra forma de mostrar animaciones es usar JavaScript. Estaré usando jQuery porque es mi biblioteca de JavaScript favorita (si todavía no lo ha adivinado).

Método Clásico

Método CSS3

Ambos fragmentos de código hacen lo mismo: deslizan el div 20 píxeles hacia abajo en el transcurso de 300 ms. Recuerde, ¡el código CSS3 sólo funciona en los navegadores Webkit!

Ver la demostración.

Conclusión

Ahí las tiene: 11 técnicas de CSS que se harán mucho más fáciles con CSS3 en el futuro (ojalá cercano). Obviamente, pasará un tiempo antes de que podamos depender 100% de estas propiedades a lo largo de todos los navegadores.

No se olvide de revisar estos otros tutoriales de Nettuts+ que discuten CSS3:


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.