 |
Usuario: Ingresar |
Blog de diseño gráfico, informática, tecnología y cultura política.
 |
| Dirección URL | http://cgnauta.blogspot.com/ Registrado:03-Feb-2008 |
Compartir:
|
|
 Enviar a email | Box-Shadow: Diseño web con CSS 3 - Bordes sombreados en General |  Por matius
el 31-Dec-1969 | Ahora veremos la propiedad Box-Shadow que nos permite agregar una sombra, la implementación CSS 3 solamente la soporta Opera, en Firefox, Safari y Chrome requeriremos anteponer -moz- y -webkit- a box-shadow.
En la etiqueta DIV en el atributo Style agregamos:
style="
box-shadow: -8px -5px 0px #000;
-moz-box-shadow: -8px -5px 0px #000;
-webkit-box-shadow: -8px -5px 0px #000;
" El resultado será el siguiente:
-2
-
-
-
-1 3
-
-
4
Los valores negativos representan por orden de aparición:
Style="lado izquierdo (-1) y lado superior (-2)" Si por el contrario usaramos valores positivos:
style="
box-shadow: 8px 5px 0px #000;
-moz-box-shadow: 8px 5px 0px #000;
-webkit-box-shadow: 8px 5px 0px #000;
"
-2
-
-
-
-1 3
-
-
4
El orden de aparición sería
style="lado derecho(3) y lado inferior (4)"
-2
-
-
-
-1 3
-
-
4
Ahora si revolvemos negativos y positivos:
box-shadow: -8px 5px;
-2
-
-
-
-1 3
-
-
4
Usando box-shadow: 8px -5px;
-2
-
-
-
-1 3
-
-
4
Difuminado
Lo que falta es ver el último valor que controla el difuminado, esto es, que luego del ancho de la sombra dura, el difuminado empieza y se determina en pixeles. Para este ejemplo usaremos de valor 20 pixeles.
style="
box-shadow: 8px 5px 20px #000;
-moz-box-shadow: -8px -5px 20px #000;
-webkit-box-shadow: -8px -5px 20px #000;
"
-2
-
-
-
-1 3
-
-
4
Color
Además de todo esto al final de la sentencia debe ir el color en Hexadecimal (#color) o RGB [rgb (254,254,254) ] esto afectará al filete y el degradado, en este caso usaremos el color #FF2B80 que en RGB se puede representar como rgb(255, 43, 128)
style="
box-shadow: 8px 5px 20px #FF2B80;
-moz-box-shadow: -8px -5px 20px #FF2B80;
-webkit-box-shadow: -8px -5px 20px #FF2B80;" o
style="
box-shadow: 8px 5px 20px rgb(255, 43, 128);
-moz-box-shadow: -8px -5px 20px rgb(255, 43, 128);
-webkit-box-shadow: -8px -5px 20px rgb(255, 43, 128);
"
-2
-
-
-
-1 3
-
-
4
Simple ¿no?
Aclaraciones de uso
border-radius - Nombre del estándar bajo CSS (De momento solamente Opera)
-moz-border-radius - Navegadores bajo el motor de Mozilla (Firefox)
-webkit-border-radius - Navegadores bajo Webkit (Safari y Chrome)
Internet Explorer no soporta ninguna instrucción, a partir de Internet Explorer 9 se implementará.
Leído 15 veces
|
|
 |
 | Mercadolibreblog |  León | Anuncios en Mexico clasificados en español.
Directorio de Contactos Todos los contactos empresariales de México |
| SERVICIO DE DISENO en PUEBLA | | Contacto: RAUL TAME ALVEAR Giro: SERVICIO DE DISENO Estado: PUEBLA Ciudad: PUEBLA Direccion: CALLE 29 SUR 3910 A-B COLONIA RIVERA DE SANTIAGO CP: 72410 Telefono: (222)2948173 Fax: 2948173 [..] Leer nota completa | | Publicado 22-Mar-2011 por Contacto AA en Empresas y ServiciosPueblaSERVICIO DE DISENO
Leído 2 veces. Más resultados en    |
|
| Mercadolibreblog | León | Anuncios en Mexico clasificados en español.
Directorio de Contactos Todos los contactos empresariales de México |
| DISENO GRAFICO en PUEBLA | | Contacto: RAUL TAME ALVEAR Giro: DISENO GRAFICO Estado: PUEBLA Ciudad: PUEBLA Direccion: AVENIDA CALLE REAL 14 11 B COLONIA EMILIANO ZAPATA CP: 72470 Telefono: (222)2856346 Fax: 2856346 [..] Leer nota completa | | Publicado 22-Mar-2011 por Contacto AA en Empresas y ServiciosDISENO GRAFICOPuebla
Leído 4 veces. Más resultados en |
|
| text-shadow : text-shadow : Su futuro en Internet Explorer 9 con CSS 3 | | Siendo una idea realmente brillante que introdujeron en CSS 2 y retiraron en la especificación 2.1, text-shadow es una de las especificaciones que en Internet Explorer 9 no será incluida como parte de la especificación CSS 3 parcial que Microsoft prepara para su navegador, a mi parecer el peor de todos los navegadores que actualmente lideran las preferencias de la gente, donde Chrome, Opera, Safar [..] Leer nota completa | | Publicado 31-Dec-1969 por matius en General
Leído 9 veces. Más resultados en |
|
| En Tus Bordes |  Nada más cruzar la puerta ella soltó las llaves sobre una mesa llena de recuerdos en fotos.Silencio.- Estás en tu casa - dijo -. Puedes poner tus cosas donde quieras.Y no le hice caso sino que me quedé rozando con la punta de mis dedos las sonrisas y los besos plasmados entre marcos de una vida pasada, tan presente y joven como sus ganas de caminar y salir de una niebla espesa y plomiza. Ella pensó que le quita [..] Leer nota completa | | Publicado 04-May-2008 por AdR en Ilustracionescabanodesnudodibujofisicaherreroiglesiasilustracionesilustradorjeffreymaximaxi iglesias
Leído 56 veces. Más resultados en |
|
| Curioso Pero Inútil | Blogueros | Blog de Curiosidades de ciencias, biología, astronomía y física
CPI (Curioso pero inútil) En directo en la Red desde 11111010100 |
| Vidrios y bordes verdes |  Disculpen la aliteración en el título, pero es que venía al pelo. David nos pregunta:
Buenos días Remo
Me encanta el blog por esa forma sencilla y amena de acercar la ciencia a gente curiosa como nosotros… No sé si lo que viene será una consulta CPIera pero ahí va…
Leyendo la entrada sobre retrovisores me [...] [..] Leer nota completa | | Publicado 05-Dec-2007 por Remo en romulo loredoraúl gonzález de cascorroFestival Nacional de Teatro de CamagüeyFestival Nacional
Leído 178 veces. Más resultados en |
|
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| Bordes redondeados en imágenes con CSS 3 y jQuery | | CSS 3 tiene la propiedad border-radius que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados.
Solución
En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste [...] [..] Leer nota completa | | Publicado 01-Jul-2010 por Francisco en CSSJavascriptTutorialesborder-radiusCSS3Esquinas redondeadasjQuery
Leído 11 veces. Más resultados en |
|
| Blog Cristiano -pagina Cristiana - Seguidores Del Rey De Reyes | cluj | PREDICAS CRISTIANAS EN AUDIO, SERMONES CRISTIANOS EN MP3, MÚSICA, VÍDEOS CRISTIANOS, PROFECÍA, FIN MUNDO, BIBLIA, CRISTO, JESÚS, NOTICIAS, INVESTIGACIÓN, CONSPIRACIONES, DOCUMENTALES, ARTÍCULOS DE OPINIÓN, DENUNCIA FALSOS PROFETAS, SANA DOCTRINA.
Artículos nuevos en seguidores. Actualizacion del blog. |
|
Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza
por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes.
Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de
remover cualqueir material que consideremos inconveniente.
|
|
| |
Hola, Invitado
En línea: 112 visitantes
+ fotos
Para el día de hoy (07/02/11): [..] 
Para el día de hoy (25/06/10): [..] 
