Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

CSS3 versus Photoshop: Esquinas Redondeadas y Sombras de Cajas

by
Length:MediumLanguages:
This post is part of a series called CSS3 vs. Photoshop.
CSS3 vs. Photoshop: Complex Backgrounds
CSS3 vs Photoshop: Opacity and Transparency

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

Este tutorial demostrará cómo crear una barra de navegación sencilla, pero estupenda, usando varios estilos CSS3 combinados. Estamos buscando una apariencia que en el pasado solamente podría ser creada al combinar varias imágenes, JavaScript y varios divs. Así que comencemos...

Nota: todos los siguientes ejemplos fueron probados en Mozilla Firefox, Safari y Chrome. Si quiere conseguir algo parecido a IE o cualquier otro navegador, por favor, deje un comentario y estaré contento en poder ayudarle.


Antes de que comencemos.

Una buena apariencia y una barra de navegación bien diseñada ha sido, desde el comienzo del diseño web, uno de los elementos más poderosos para mantener a los sitios web organizados y bien estructurados, las esquinas redondas y los efectos hover requieren una serie de trucos que incrementan el tamaño de nuestro código y el número de imágenes.

Para este tutorial, examinaremos dos efectos CSS3 muy importantes: Esquinas Redondeadas y Sombras de Caja , además, usaremos el degradado lineal que vimos anteriormente en el tutorial: CSS3 versus Photoshop - Fondos Complejos.


Paso 1: Esquinas Redondeadas

Todos han escuchado de ellas, así que sería redundante hablar de cómo crearlas, así que en el siguiente ejemplo me enfocaré en las diferencias de crear el efecto Esquinas Redondeadas usando imágenes y las ventajas y desventajas de hacerlo con CSS3.

Crear un efecto de esquina redondeada es muy sencillo en cualquier software gráfico, pero en Photoshop tenemos algunos problemas:

Precisión: Incluso si usted puede establecer el radio de la esquina redondeada, el motor integrado anti-alisado de Photoshop a menudo añade uno o dos pixeles extra en el gráfico. La mayoría de nosotros en el pasado tuvo que reducir manualmente los pixeles de una imagen inexacta basada en esquinas redondeadas para crear una unión nítida con, por ejemplo, fondos de color.

Edición: Esto es uno de los problemas más grandes de crear imágenes basadas en esquinas redondeadas. Si usted crea un gráfico para un radio de 10px en Photoshop para redondear y, por alguna razón, usted necesita incrementar el radio a 20px, no hay otra forma de hacer esto que dibujando la forma, o editando de forma manual todas sus esquinas, perdiendo tiempo y precisión. Cambiar el tamaño es otro problema, si usted quiere estirar o aumentar la forma, entonces debe usar la Herramienta de Selección de Punto de Photoshop, ya que si usa los Controles de Transformación, puede ocasionar una distorsión no deseada en la esquina de la forma. Y no necesito mencionar que recortar las esquinas un montón de valiosos minutos.

Rellenos y Bordes: Crear un relleno de degradado dentro de una imagen mediante una caja de esquinas redondeadas, siempre ha sido una tarea grande, incluso, sin considerar los bordes, la precisión quírurjica  Otro problema con el relleno de imagen que a menudo el contenedor tiene que aumentar su altura o anchura, por lo que se obtiene un efecto no deseado con el degradado (vea la siguiente captura de pantalla).

Estilos de Esquinas Variados: En Photoshop, crear estilos de esquinas toma su poco de tiempo, ya que no hay opciones para combinar estilos de esquinas. Usted debe reducir o aumentar de forma manual el radio o combinar las formas… y luego cortar cada esquina.


Ahora en CSS3

Usando CSS3 para reemplazar la clásica esquinas redondeadas basadas en imágenes es una excelente idea. Aquí están algunas de las ventajas: 

  • Reduce el número de imágenes y solicitudes HTTP al servidor.
  • Funciona en todos los navegadores modernos (excepto Internet Explorer versión 6, 7 y 8) incluyendo la mayoría de los navegadores más populares para teléfonos.
  • Solamente necesita algunas lineas en el archivo CSS para hacerlo funcionar.
  • Aumentar/Reducir el radio, cambiar el tamaño, cambiar el relleno y los bordes solamente toma algunos segundos, pero en Photoshop le tomará varios minutos.

Veamos el código para crear esquinas redondeadas en un elemento HTML:

Ver el Demo


Paso : Box Shadows

Algunos de los mejores efectos que puede conseguir con Photoshop son a través de las opciones Drop Shadow e Inner Shadow. Usándolas de forma adecuada se puede lograr un resultado sorprendente de efectos 3D. Por supuesto, si se usan de forma equivocada pueden convertirse fácilmente en un efecto cursi.

Debajo encontrará un par de ejemplo de buenas prácticas:


Ahora en CSS3

CSS3 nos permite crear sombras, solamente con un par de lineas de código, el estilo a cargo "box-shadow".

Para crear un efecto Drop Shadow como el de Photoshop, puede usar la siguiente sintaxis:

box-shadow: <xpos> <ypos> <size> <color>  ;

Para crear un efecto Inner Shadow como el de Photoshop, puede usar la siguiente sintaxis:

box-shadow: inset <style> <xpos> <ypos> <size> <color> ;

Ahora, éste es el código para crear distintas variantes de Box Shadows:

Ver Demo


Paso 3: Menú de la Navegación

Vamos a combinar esquinas redondeadas, rellenos de degradados y sombras de cajas para crear los menús para la navegación. Siempre puede empezar con Photoshop para crear los gráficos, consiga descargar los archivos fuentes de la parte superior de la página si desea empezar justo ahí.

La parte divertida de esto es tratar de conseguir el mismo resultado con CSS3, ¡aquí vamos!

Primero, la definición del contenido por medio de las etiquetas HTML (así es, estoy usando la etiqueta "nav" de HTML5, porque es muy atractiva y semánticamente adecuada, pero en su lugar usted puede usar una etiqueta div). 


Paso 4: CSS

Ahora, empecemos con el CSS. Primero ajuste las posiciones y la altura.

Luego añada la opción de relleno Gradient Fills:

Después la opción para redondear las esquinas; Rounded Corners:

Y finalmente, las sombras con la opción Box Shadows:

Ver Demo


Paso 5: Adaptando el Sangrado

Una nota final con respecto a las esquinas redondeadas con un relleno y un borde: utilizan sangrado. Lo observará durante el estado hover de nuestros botones de navegación:


Relleno de color el área de sangrado más allá de los bordes.

Podemos solucionar estos usando la propiedad background-clip, la cual determina si el fondo de un elemento dato se extiende más allá de su borde. De forma predeterminada está (border-box), la cual nos da éste engorroso sangrado, sin embargo, podemos alterarlo por medio de padding-box, el cual detiene por debajo del borde.

Ahora, vamos a añadir el siguiente código CSS a nuestros botones:

…lo cual nos da un resultado más parecido a lo que deseamos cuando pasemos el cursor sobre ellos:


Un magnífico relleno de color contenido dentro de los límites de nuestro elemento.

Ver Demo

Usted puede leer más sobre la propiedad background-clip en CSS3 info.


Conclusión

Crear un efecto atractivo para una barra de navegación simple con CSS3 es más fácil y más rápido que nunca, así que ¿por qué no probar con su próximo diseño? ¡Gracias por su lectura!

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.