Share
¿Alguna vez se preguntó cómo se logró un efecto particular en un diseño web y, después de hacer varios clics, descubrió que el autor agregó varias sombras sutiles, bordes, degradados, etc.? En el pasado, esto se lograba simplemente cortando una imagen y configurándola como fondo de algún elemento. Afortunadamente, con CSS3, podemos tener mucha más flexibilidad. Ahora, mientras que el código para un efecto tan simple puede ser un poco tedioso, vale la pena, y eso es lo que revisaremos en la sugerencia rápida de video y video de hoy.!
Más bien mira este screencast en Screenr.com?
Es sorprendente que algo tan simple requiera mucho código, pero no es tan rudo y se puede abstraer fácilmente en un fragmento para su uso futuro..
Para hacer que nuestro proyecto sea tan simple como sea posible, solo estamos trabajando con un div vacío. Cree un nuevo archivo index.html y pegue lo siguiente:
A continuación, agregaremos algunos estilos básicos para el elemento del cuerpo. Esto es solo para la presentación, y se puede quitar fácilmente. Dentro de las etiquetas de estilo en su encabezado, agregue:
/ * Nada especial aquí. Sólo el lienzo. * / cuerpo ancho: 500px; margen: 60px auto 0; fondo: # 666;
Ahora, crearemos nuestra caja, suministrando un ancho y alto..
#box / * Solo un cuadro * / width: 500px; altura: 500px;
Todos deberíamos saber sobre esquinas redondeadas de CSS por ahora. Sigamos adelante e implementemos eso..
/ * Esquinas redondeadas * / -moz-border-radius: 3px; -webkit-border-radius: 3px; radio del borde: 3px;
Tenga en cuenta que también estamos suministrando la especificación final, de "radio de borde", además de las versiones de Mozilla y Webkit.
Mozilla ofrece una propiedad útil, llamada "-moz-border - * - colors". Esto nos permite establecer un número infinito de colores para un borde. Para lograr un efecto sutil de "doble borde", implementemos esta propiedad.
/ * Establecer un borde base y color * / borde: 2px blanco sólido; / * Múltiples colores de borde en Gecko * / -moz-border-top-colors: # 292929 blanco; -moz-border-right-colors: # 292929 blanco; -moz-border-bottom-colors: # 292929 blanco; -moz-border-left-colors: # 292929 blanco;
Observe cómo el número de colores que suministramos es el mismo que el ancho del borde que establecimos al principio (2px). Además, no coloque comas después de cada valor hexadecimal; Cometí ese error al principio!
Según mi conocimiento, webkit no admite actualmente colores de borde, aunque es posible que me equivoque. Si lo estoy, por favor deja un comentario y házmelo saber! De todos modos, para imitar este efecto lo mejor que podamos en Safari y Chrome, usaremos box-shadow.
/ * Compensar para Webkit. No es tan bonito, pero funciona. * / -webkit-box-shadow: 0 -1px 2px # 292929;
Tenga en cuenta que los valores proporcionados se refieren al desplazamiento X, el desplazamiento Y, el desenfoque y el color de la sombra, respectivamente. Al pasar -1px como el desplazamiento Y, podemos empujar la sombra hacia arriba.
El paso final es proporcionar un gradiente de fondo sutil para nuestra caja. Sin embargo, debemos asegurarnos de proporcionar un color sólido alternativo para los navegadores que no admiten gradientes de CSS.
/ * Gradiente de fondo sutil, con retroceso a color sólido * / fondo: # e3e3e3; fondo: -moz-lineal-gradiente (arriba, # a4a4a4, # e3e3e3); fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, desde (# a4a4a4), hasta (# e3e3e3));
Desafortunadamente, Mozilla y Webkit no están de acuerdo con la sintaxis de los gradientes, lo que hace que el proceso sea muy irritante. Si es demasiado confuso, puedes usar un nuevo servicio llamado CSS3 Please para generar automáticamente la sintaxis de cada navegador; Es muy genial!
Es asombroso; Mirando por encima de nuestra imagen final, ¡es difícil decir lo que realmente hicimos! Pero esto es algo bueno; La sutileza es clave en todos los aspectos del diseño. Gracias por leer / ver!
/ * Nada especial aquí. Sólo el lienzo. * / cuerpo ancho: 500px; margen: 60px auto 0; fondo: # 666; #box / * Solo un cuadro * / width: 500px; altura: 500px; / * Esquinas redondeadas * / -moz-border-radius: 3px; -webkit-border-radius: 3px; radio del borde: 3px; borde: 2px blanco sólido; / * Múltiples colores de borde en Gecko * / -moz-border-top-colors: # 292929 blanco; -moz-border-right-colors: # 292929 blanco; -moz-border-bottom-colors: # 292929 blanco; -moz-border-left-colors: # 292929 blanco; / * Compensar para Webkit. No es tan bonito, pero funciona. * / -webkit-box-shadow: 0 -1px 2px # 292929; / * Gradiente de fondo sutil, con retroceso a color sólido * / fondo: # e3e3e3; fondo: -moz-lineal-gradiente (arriba, # a4a4a4, # e3e3e3); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# a4a4a4), hasta (# e3e3e3));
Accentsconagua