Share
Este tutorial mostrará cómo crear una barra de navegación sencilla y agradable con varios estilos CSS3 combinados. Nuestro objetivo es lograr una apariencia que en el pasado solo pudiera crearse combinando varias imágenes, JavaScript y varios divs. Vamos a ponerlo en marcha?
Nota: Todos los ejemplos siguientes se probaron en Mozilla Firefox, Safari y Chrome. Si quieres obtener algo similar en IE o en cualquier otro navegador, deja un comentario y estaré encantado de ayudarte..
Una barra de navegación atractiva y bien diseñada ha sido, desde el comienzo del diseño web, uno de los elementos más poderosos para mantener los sitios web organizados y bien estructurados. En el pasado, la creación de un bonito diseño con sombras, degradados, esquinas redondeadas y efectos de desplazamiento requería una serie de trucos que aumentaban el tamaño de nuestro código y la cantidad de imágenes..
Para este tutorial vamos a profundizar en dos efectos CSS3 muy importantes; Esquinas redondeadas y sombras de cuadro, además usaremos los gradientes lineales que se muestran anteriormente en CSS3 vs Photoshop - Tutorial de fondos complejos.
Todo el mundo ha oído hablar de ellos, será redundante hablar sobre cómo crearlos, por lo que en los siguientes ejemplos me centraré en las diferencias en la creación de un efecto de Esquina redondeada utilizando imágenes y las ventajas y desventajas de usar CSS3..
Crear un efecto de esquina redondeada es bastante simple en cualquier software gráfico, pero en Photoshop tenemos algunos problemas:
Exactitud: Incluso si puede establecer el radio de la esquina redondeada, el motor de suavizado de Photoshop incorporado a menudo agrega uno o dos píxeles adicionales en el gráfico. La mayoría de nosotros en el pasado tuvimos que reducir manualmente los píxeles de las esquinas redondeadas basadas en imágenes inexactas para crear una combinación limpia, por ejemplo, con fondos de color.
Edición: Este es uno de los mayores problemas de crear una esquina redondeada basada en imágenes. Si crea un gráfico para un radio de 10px en Photoshop, y por alguna razón necesita aumentar el radio a 20px, no hay otra manera de hacerlo redibujando la forma o editando manualmente todos sus bordes, perdiendo tiempo y precisión. Cambiar el tamaño es otro gran problema, si desea estirar o ampliar la forma, debe usar la Herramienta de selección de puntos en Photoshop, ya que el uso de los controles de transformación puede causar distorsiones no deseadas en la forma de la esquina. No necesito mencionar que cortar las esquinas requiere un montón de minutos valiosos.
Rellenos y Fronteras: Crear un relleno degradado dentro de una caja de esquina redondeada basada en imagen siempre ha sido una tarea importante, sin cubrir siquiera los bordes, se requiere precisión quirúrgica para cortar las imágenes involucradas. Necesita crear al menos 3 imágenes para cada cuadro, una para las esquinas superiores, otra para las esquinas inferiores y el degradado horizontal o vertical y luego escribir el código para ello. Otro problema con el relleno de imagen es que a menudo el contenedor tiene que aumentar su altura o ancho, obteniendo un efecto no deseado con el gradiente (vea la captura de pantalla a continuación).
Mezcla de estilos de esquina: En Photoshop, crear estilos de esquinas mixtas toma un tiempo, no hay opciones para combinar estilos de esquinas. ¿Debe reducir / aumentar el radio manualmente o combinar formas? y luego cortar cada esquina.
Usar CSS3 para reemplazar las esquinas redondeadas basadas en imágenes clásicas es una gran idea. Aquí hay un par de pros:
Veamos el código para crear esquinas redondeadas en un elemento HTML:
/ * Cajas de esquinas redondeadas * / .box background-image: -moz-linear-gradient (top, # FAD502, # E89502); imagen de fondo: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# FAD502), hasta (# E89502), color-stop (1, # E89502)); .fourcorners -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; radio del borde: 20px; .topleft -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-radius-topleft: 20px; borde superior izquierdo del radio: 20px; .bottomleft -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-radius-bottomleft: 20px; borde inferior-izquierdo-radio: 20px; .topright -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; borde superior-derecho-radio: 20px; .bottomright -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-radius-bottomright: 20px; borde inferior-derecho-radio: 20px; .asymmetrical1 -webkit-border-top-left-radius: 160px; -khtml-border-radius-topleft: 160px; -moz-border-radius-topleft: 160px; borde superior izquierdo del radio: 160 px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; -moz-border-radius-topright: 20px; borde superior-derecho-radio: 20px; -webkit-border-bottom-left-radius: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; borde inferior-izquierdo-radio: 10px; -webkit-border-bottom-right-radius: 0px; -khtml-border-radius-bottomright: 0px; -moz-border-radius-bottomright: 0px; borde inferior-derecho-radio: 0px; .asymmetrical2 -webkit-border-top-left-radius: 0px; -khtml-border-radius-topleft: 0px; -moz-border-radius-topleft: 0px; borde superior izquierdo del radio: 0px; -webkit-border-top-right-radius: 90px; -khtml-border-radius-topright: 90 px; -moz-border-radius-topright: 90 px; borde superior-derecho-radio: 90px; -webkit-border-bottom-left-radius: 0px; -khtml-border-radius-bottomleft: 0px; -moz-border-radius-bottomleft: 0px; borde inferior-izquierdo-radio: 0px; -webkit-border-bottom-right-radius: 90px; -khtml-border-radius-bottomright: 90 px; -moz-border-radius-bottomright: 90px; borde inferior-derecho-radio: 90px; .circle ancho: 170px; altura: 170px; relleno: 15px; Familia tipográfica: Arial, Helvetica, sans-serif; color: #FFF; tamaño de fuente: 12px; font-weight: negrita; flotador izquierdo; imagen de fondo: -moz-linear-gradient (arriba, # FAD502, # E89502); imagen de fondo: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# FAD502), hasta (# E89502), color-stop (1, # E89502)); -webkit-border-top-left-radius: 100px; -khtml-border-radius-topleft: 100px; -moz-border-radius-topleft: 100px; borde superior-izquierdo-radio: 100px; -webkit-border-top-right-radius: 100px; -khtml-border-radius-topright: 100px; -moz-border-radius-topright: 100px; borde superior-derecho-radio: 100px; -webkit-border-bottom-left-radius: 100px; -khtml-border-radius-bottomleft: 100px; -moz-border-radius-bottomleft: 100px; borde inferior-izquierdo-radio: 100px; -webkit-border-bottom-right-radius: 100px; -khtml-border-radius-bottomright: 100px; -moz-border-radius-bottomright: 100px; borde inferior-derecho-radio: 100px;
Algunos de los efectos más geniales que puede lograr con Photoshop son a través de Sombras paralelas y Sombras internas. Usarlos de la manera adecuada puede resultar en efectos 3D sobresalientes. Por supuesto, usar una sombra paralela o una sombra interior de manera incorrecta puede convertirse rápidamente en un efecto cursi.
A continuación encontrará un par de ejemplos de buenas prácticas:
CSS3 nos permite crear sombras con solo un par de líneas de código, el estilo a cargo es "box-shadow".
Para crear un Photoshop como Sombra paralela Puedes usar la siguiente sintaxis:
sombra de la caja:
Para crear un Photoshop como Sombra interior Puedes usar la siguiente sintaxis:
caja de sombra: inserción
Accentsconagua