Share
CSS3 es una de las nuevas tecnologías web disponibles para los desarrolladores web. Usando algunas de sus muchas características, es posible reproducir los efectos que podría haber hecho previamente en Photoshop, con el código CSS que es más fácil de mantener, cargar más rápido y actual con las últimas tendencias. Siga leyendo para aprender sobre las herramientas eléctricas disponibles para usted y cómo combinarlas para producir los efectos gráficos más avanzados..
CSS3 tiene muchas características, pero algunas de ellas son imprescindibles para aprender si va a reproducir efectos similares a Photoshop. Yo los llamo mis "herramientas eléctricas". Incluyen los siguientes:
Cada una de estas funciones puede ayudar a reemplazar algunas de las imágenes que pudo haber creado en Photostop en el pasado. Al hacer esto, está haciendo que su sitio web sea más fácil de mantener, ya que puede cambiar una propiedad simplemente cambiando su archivo CSS en lugar de editar una imagen en Photoshop. También está haciendo que su sitio web se cargue más rápido ya que las imágenes utilizan mucho ancho de banda. Vamos a explorar estas características una por una.
Soporte del navegador:
A estas alturas, es probable que haya escuchado sobre el radio de la frontera un millón de veces. Es muy fácil de usar y es compatible con todos los navegadores modernos. Si aún no lo sabe, el radio del borde es una forma de crear esquinas redondeadas con CSS, ¡no se necesitan imágenes! Echemos un vistazo a la sintaxis..
-webkit-border-radius: tamaño; -moz-border-radius: tamaño; borde-radio: tamaño;
Hay tres sintaxis que necesitarás usar. El primero es para navegadores basados en Webkit, como Safari y Chrome; el segundo es para los navegadores basados en Mozilla, como Firefox; y la última es la versión sin prefijo, para los navegadores que la admiten, incluidos IE9, Opera y Safari 5.
La aplicación de un radio de borde de 10 píxeles a un div crea el siguiente efecto:
OK, fácil! Vamos a pasar a la siguiente herramienta eléctrica..
Soporte del navegador:
Las sombras de cuadro son otra característica bien soportada. Su sintaxis se ve así:
-webkit-box-shadow: offset_x offset_y blur_radius color; -moz-box-shadow: offset_x offset_y blur_radius color; box-shadow: offset_x offset_y blur_radius color;
Una vez más, tenemos que usar los prefijos de proveedores para Webkit y Mozilla. El primer y segundo parámetro de la propiedad box-shadow son las posiciones de desplazamiento desde las coordenadas izquierda y superior del elemento. Establecer un valor positivo para estas propiedades mueve la sombra hacia la derecha y hacia abajo desde el elemento, y establecer un valor negativo mueve la sombra hacia la izquierda y hacia arriba desde el elemento. El blur_radius es la cantidad de desenfoque que desea agregar a su sombra (lo difícil o difusa que lo quiere). Finalmente, el último parámetro es el color que desea que sea la sombra. Agregar una sombra a nuestro div redondeado utilizado anteriormente creará un efecto de aspecto agradable.
-webkit-box-shadow: 5px 5px 10px # 555; -moz-box-shadow: 5px 5px 10px # 555; cuadro de sombra: 5px 5px 10px # 555;
Otra característica interesante de las sombras de la caja CSS es la palabra clave insertada. Cuando la palabra clave de inserción está presente, la sombra se representa dentro del cuadro en lugar de fuera. Esto puede crear una apariencia depresiva agradable, especialmente para los botones. Así es como se vería nuestro div con una sombra insertada.
-webkit-box-shadow: 0 0 20px # 333 inset; -moz-box-shadow: 0 0 20px # 333 inset; caja-sombra: 0 0 20px # 333 recuadro;
La última característica de las sombras de cuadro que vale la pena mencionar es la capacidad de tener múltiples sombras en el mismo elemento. Esto es muy útil y puede eliminar tener marcas adicionales en su HTML solo para aplicar una sombra adicional. Todo lo que tienes que hacer para crear varias sombras es separarlas con comas. Aquí hay un ejemplo:
-webkit-box-shadow: 0 0 20px # 333 inserto, 20px 15px 30px amarillo, -20px 15px 30px lima, -20px -15px 30px azul, 20px -15px 30px rojo; -moz-box-shadow: 0 0 20px # 333 inserto, 20px 15px 30px amarillo, -20px 15px 30px lima, -20px -15px 30px azul, 20px -15px 30px rojo; box-shadow: 0 0 20px # 333 recuadro, 20px 15px 30px amarillo, -20px 15px 30px cal, -20px -15px 30px azul, 20px -15px 30px rojo;
Soporte del navegador:
Las sombras de texto son como sombras de cuadro, excepto que son sombras de texto en lugar de todo el elemento. Afortunadamente, no hay un prefijo de proveedor necesario para la sombra del texto.
text-shadow: offset_x offset_y blur_radius color;
Las opciones para la sombra de texto son las mismas que para la sombra de cuadro, excepto que no hay soporte de sombra de texto insertado. Aquí hay una demostración que hace que el texto invisible salga de la página..
color: #fff / * color de texto a blanco * / text-shadow: 0 0 50px # 333;
Esto crea el siguiente efecto:
Al igual que con las sombras de cuadro, es posible tener varias sombras de texto simplemente separándolas con comas. Aquí hay un ejemplo que crea un efecto de texto llameante..
text-shadow: 0 0 4px #ccc, 0 -5px 4px # ff3, 2px -10px 6px # fd3, -2px -15px 11px # f80, 2px -18px 18px # f20;
Las sombras de texto pueden crear algunos efectos impresionantes y pueden complementar otros efectos muy bien.
Soporte del navegador:
Los gradientes son una de las funciones más poderosas disponibles para usted si desea crear estos impresionantes efectos. Si bien la compatibilidad total con el navegador aún no existe, siempre puede proporcionar un estilo de respaldo a los navegadores sin soporte. Recuerde: los sitios web no necesitan tener el mismo aspecto en todos los navegadores. Hay dos tipos de degradados que puede crear: degradados lineales y degradados radiales. Como es de esperar, los degradados lineales se mueven a lo largo de una línea recta y los degradados radiales giran alrededor de un círculo. Los gradientes se pueden usar en cualquier lugar donde haya usado una imagen en el pasado, como para el fondo, la imagen de borde o las viñetas de lista.
Desafortunadamente para los desarrolladores web, hay dos sintaxis diferentes: una para Mozilla y otra para Webkit.
Safari y Chrome usan el motor de renderizado Webkit, por lo que siempre usan la misma sintaxis. Su sintaxis de gradiente es bastante simple:
-webkit-gradiente (, El, ]?, El, ]? El, ] *)
Webkit usa la misma sintaxis para los gradientes lineales y radiales. Solo cambia el tipo parámetro para cambiar entre ellos.
Firefox usa sintaxis separadas para gradientes lineales y radiales, ambos son muy diferentes de sus contrapartes de Webkit.
-gradiente lineal moz ([|| ,]? , El, ] *) -moz-radial-gradient ([ || ,]? El || ,]? , El, ] *)
Veamos estas sintaxis por separado..
Para simplificar, aquí hay una sintaxis de Webkit solo para gradientes lineales.
-webkit-gradient (linear, start_x start_y, end_x end_y, stop, stop…)
La sintaxis de Firefox se ve así.
-moz-linear-gradient (angle start_x start_y, stop, stop…)
En la sintaxis de Webkit, los parámetros start_x y start_y especifican la posición inicial del gradiente, y end_x y end_y especifican la posición final del gradiente. Puede utilizar cualquiera de los valores de dimensión CSS estándar, incluidos los porcentajes, así como las palabras clave izquierda, superior, inferior, derecha y centro como valores para estos parámetros de posición. Las paradas son una forma de especificar colores específicos que se utilizarán en puntos específicos a lo largo del degradado. Puede hacer tantas paradas de color como desee, pero debe tener al menos dos: un color inicial y uno final. Para paradas de color adicionales, puede usar la función de parada de color () que proporciona una posición como porcentaje o decimal entre 0 y 1, así como un color. Por ejemplo: parada de color (50%, negro) crearía una parada de color negro exactamente a la mitad del gradiente. En lugar de escribir 0% y 100% para los colores inicial y final, existen las funciones de conveniencia de () y a (). Todo lo que tienes que aportar a estos es el color..
La sintaxis de Firefox es mucho menos sencilla y tiene muchas formas de lograr el mismo objetivo. Lo único que es estático acerca de la sintaxis son las paradas de color, que son solo un color seguido de una posición como porcentaje. Para las posiciones inicial y final, puede omitir el 0% y el 100%, y si deja la posición desactivada en cualquiera de los otros topes de color, se distribuyen uniformemente a lo largo del gradiente. A diferencia de la sintaxis de Webkit, la sintaxis de Firefox no tiene una posición final, solo una posición inicial y un ángulo. El gradiente se ejecutará desde la posición inicial en el ángulo especificado. Si deja el ángulo fuera, se ejecutará perpendicularmente desde ese punto. Si deja de lado el punto de inicio, la pendiente se ejecutará de arriba a abajo. Esta sintaxis es algo confusa y un poco menos flexible que la sintaxis simple de Webkit, por lo que es mejor aprender con el ejemplo..
Aquí hay un ejemplo simple de gradientes CSS en acción. Este gradiente va desde la esquina superior izquierda a la esquina inferior izquierda (en otras palabras, de arriba a abajo) y de rojo a blanco.
-webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, de (rojo), a (blanco)); -moz-lineal-gradiente (rojo, blanco)
Al establecer esto como la propiedad de fondo de un div, obtenemos el siguiente resultado:
Al agregar una parada de color y cambiar el ángulo del degradado, podemos obtener un efecto diferente.
-webkit-gradiente (lineal, izquierda superior, derecha inferior, desde (rojo), color-stop (50%, blanco), hasta (rojo)); -moz-lineal-gradiente (arriba a la izquierda, rojo, blanco, rojo);
Aquí está la sintaxis para gradientes radiales en Webkit.
-webkit-gradiente (radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius, outer_circle_center_x outer_circle_center_y, outer_circle_radius, stop, stop…)
La sintaxis de Firefox se ve así.
-moz-radial-gradient (center_x center_y, tamaño de la forma, stop, stop…)
La sintaxis de Webkit es un poco más complicada que la sintaxis de gradiente lineal, pero aún se aplican los mismos principios. Los gradientes radiales en Webkit tienen dos círculos: un círculo inicial y un círculo final. Usted especifica las posiciones centrales X e Y para cada uno de estos círculos junto con sus radios. Finalmente, especifica que el color se detiene de la misma forma que lo hizo con los degradados lineales..
La sintaxis de Firefox para degradados radiales es similar a la sintaxis de degradados lineales en que todas sus partes, excepto las paradas de color, pueden omitirse. Puede especificar las posiciones X y Y centrales del gradiente de manera muy similar a las coordenadas del círculo interno en la sintaxis de Webkit, pero no hay un círculo externo en Firefox. En su lugar, puede especificar una forma y tamaño del degradado. La forma puede ser un círculo o una elipse, la última de las cuales no se puede crear actualmente en Webkit. El tamaño acepta muchas palabras clave diferentes, pero no un tamaño de píxel como podría haber esperado. Puede leer sobre lo que hace cada una de estas constantes en el Centro de desarrolladores de Mozilla. Para este tutorial, solo usaremos los valores predeterminados. Una vez más, si deja las posiciones X e Y centrales hacia afuera, se asumirá que son el centro del objeto que está rellenando con un degradado. Si omite la forma y el tamaño, se asumirá que el degradado es un círculo que llena todo el cuadro..
-webkit-gradiente (radial, centro centro, 0, centro centro, 50, desde (blanco), hasta (rojo)); -moz-radial-gradiente (blanco, rojo)
Si aplicamos este gradiente al fondo de un div, esto es lo que obtendremos.
Soporte del navegador:
Los fondos múltiples facilitan la creación de efectos complejos en CSS sin necesidad de crear un marcado adicional en su HTML. Tener soporte para esto significa que los elementos pueden tener múltiples gradientes y fondos de imagen junto con el color de fondo estándar. No hay diferencia en la sintaxis de los fondos múltiples de fondos individuales, solo con comas, sepáralos y listo.!
Aquí hay un ejemplo de un div con un fondo degradado y un bonito efecto de textura usando una imagen:
fondo: url (noise.png), -webkit-gradient (linear, left superior, left inferior, de (# 999), a (# 333)); fondo: url (noise.png), -moz-linear-gradient (# 999, # 333);
Tenemos que declararlo dos veces ya que, como hemos aprendido, hay una sintaxis de gradiente diferente para cada navegador. Esto crea el siguiente efecto:
Ahora que tenemos cinco grandes herramientas eléctricas a nuestra disposición, combinémoslas para producir un efecto aún más impresionante.
Hay tantos tipos diferentes de botones que puedes elegir para diseñar. Para ser simples, emulemos algo que ya existe: el estilo de botón de Mac OS X.
Comenzaremos con nuestro código HTML para esta demostración. Es realmente bastante simple, solo dos DIVs y algunos textos..
Botón
Ahora vamos a empezar con nuestro CSS básico. En primer lugar, vamos a diseñar el panel.
.panel fondo: -webkit-gradiente (lineal, izquierda superior, izquierda inferior, desde (#bbbcbb), hasta (# 959695)); fondo: -moz-linear-gradient (#bbbcbb, # 959695); color de fondo: # b7b9b7; ancho: 100px;
El panel es solo un bonito contenedor para nuestro botón. Tiene un gradiente que va de arriba a abajo entre dos bonitos colores grises. Para aquellos navegadores que no admiten gradientes, se da un color de fondo de reserva.
Ahora, veamos el CSS para el botón real.
.botón display: inline-block; margen: 20px; relleno: 3px 6px; Familia tipográfica: 'Lucida Grande', Arial, sans-serif; tamaño de fuente: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; borde: 1px rgba sólido (0, 0, 0, 0.6); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, de (#fbfcfb), a (# 9d9e9d)); fondo: -moz-linear-gradient (#fbfcfb, # 9d9e9d); color de fondo: # c0c2c0; text-shadow: rgba (255, 255, 255, 0.4) 0px 1px; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; cuadro de sombra: rgba (255, 255, 255, 0.4) 0 1px; -webkit-user-select: none; -moz-user-select: none; cursor: por defecto;
Aquí hay una cantidad decente de código, que utiliza todas las herramientas eléctricas que describí anteriormente, excepto para los fondos múltiples. Hay varias secciones de este código, que vamos a tomar una por una. Las dos primeras líneas son solo una información de diseño simple. Configuración del botón para mostrar: inline-block hace que se extienda automáticamente para ajustarse al contenido, sin importar cuánto texto ponga en el botón. La siguiente sección le da alguna información de fuente al botón. Finalmente, en la tercera sección, podemos usar nuestra primera herramienta eléctrica: el radio del borde. En el caso de nuestro encantador botón, le damos un buen radio de 3px. A continuación le damos al botón un borde. Tenga en cuenta que estamos usando rgba como color aquí. Esto nos permite hacer el color parcialmente transparente como lo hacemos aquí, creando un bonito color grisáceo. En la siguiente sección del código, configuramos el fondo del botón. Le damos un fondo degradado, así como un color sólido para el retroceso en los navegadores que aún no admiten gradientes. A continuación, usamos la sombra del texto para que el texto se vea ligeramente grabado en el botón. Una vez más, usamos rgba aquí para dar un blanco parcialmente transparente a la sombra del texto. La sección de código de pen-ultimate crea una sombra de cuadro. Ahora, esto no parece realmente una sombra, en realidad se parece a un segundo borde, pero le da un toque destacado a la parte inferior del botón para que se vea grabado en el fondo y complemente el color del borde. Este es un truco útil para saber si alguna vez quiere que algo se vea como si tuviera múltiples bordes, lo uso mucho. Finalmente, la última sección del código CSS es un buen truco que impide la selección de texto en los navegadores basados en Webkit y Firefox, y establece el cursor en la flecha predeterminada en lugar del cursor de selección de texto..
Hasta ahora, este código hace que nuestro botón se vea así:
OK, así que no está tan mal todavía! Vamos a pasar a la mirada deprimida del botón.
.botón: activo fondo: # B5B5B5; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, negro 0px 1px 3px inserción, rgba (0, 0, 0, 0.4) 0px -5px 12px inserción; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, negro 0px 1px 3px inserción, rgba (0, 0, 0, 0.4) 0px -5px 12px inserción; cuadro de sombra: rgba (255, 255, 255, 0.4) 0 1px, negro 0px 1px 3px inserción, rgba (0, 0, 0, 0.4) 0px -5px 12px inserción; text-shadow: rgba (255, 255, 255, 0.3) 0px 1px;
Cuando se presiona el botón, cambiamos una serie de cosas. Primero, establecimos el fondo a un color liso, eliminando el gradiente que habíamos establecido en el repetidor. Esto se debe a que crearemos el aspecto deprimido con una sombra de cuadro en lugar de un degradado. Lo siguiente que hacemos es establecer esa sombra, o más bien varias sombras. La primera sombra en la lista es la misma que teníamos en el estado normal: el resaltado en la parte inferior del botón. Las sombras segunda y tercera son las que hacen que nuestro botón se vea presionado. El primero de ellos es una sombra negra inserta que se establece desde el primer píxel y tiene 3 píxeles de desenfoque, una sombra de aspecto bastante oscuro. La última sombra también es negra pero un negro ligeramente transparente que se configura desde los 5 píxeles inferiores con 12 píxeles de desenfoque. Esto crea el aspecto oscuro en la parte inferior del botón cuando se presiona. Lo último que debemos hacer cuando se presiona este botón es simplemente reducir la opacidad de la sombra del texto en una muesca para que no se destaque como un pulgar dolorido.
¡Eso es! Nuestro botón está completo. Aquí es cómo se ve la versión presionada:
Reemplazar imágenes con CSS3 tiene muchos beneficios. Facilita su trabajo como desarrollador web, ya que no necesita abrir Photoshop cada vez que necesita hacer un cambio en su interfaz de usuario. Hace que su sitio web o aplicación web se cargue más rápido ya que no necesita descargar tantas imágenes pesadas. Y le permite crear una experiencia más rica, interactiva y deseable para los usuarios, de manera que sigan regresando por más.
Te dejaré con un poco de inspiración de las cosas que podrías hacer con CSS3. Estos no son necesariamente los ejemplos más reales del mundo, pero muestran lo que es posible con un poco de trabajo.
La primera demostración, creada por Jeff Batterton, es un iPhone creado con CSS3 puro, sin imágenes. Es muy impresionante, utilizando gradientes de CSS, sombras de texto, sombras de cuadros, transiciones y transformaciones. Desafortunadamente, actualmente solo se ve bien en los navegadores basados en Webkit como Safari y Chrome. Puede ser su tarea hacer que la demostración funcione en Firefox!
Otra demostración, tal vez aún más sorprendente, fue escrita por Louis Harboe. Es una recreación de algunos de los iconos de iOS en CSS puro, ¡y recreaciones muy realistas en eso! Esta demostración también funciona solo en navegadores basados en WebKit. Si desea obtener información sobre cómo se reproducen algunos de estos íconos, puede dirigirse al blog de Louis Harboe's, donde describe el proceso..
Espero que hayas disfrutado este artículo! No dude en ponerse en contacto conmigo en Twitter o dejar sus pensamientos en los comentarios.!
Accentsconagua