Angel Sanche
Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 18 Nov 2013
- Mensajes
- 208
Que tal betas;
He decidido regresarles el favor ya me han ayudado en algunas ocasiones así que a partir de hoy empezare a publicar aportes para todos.
Hoy les enseñare a darle un poco de diseño en las entradas de sus blog´s, esto que publicare sirve para destacar un poco más algunas partes con divs con sombra o tablas con sombra, yo lo utilice para este pots para destacar cada imagen con su texto y botones de like Azul Web -Blog-: Google Doodles 2000
En este caso utilizare un post ya echo para darle el diseño;
Esta es la entrada que modificare voy a darle diseño ala imagen que esta en medio del post Blogdirec: Sombra en divs (Sin modificar)
Primero nos colocaremos en la pestaña HTML que esta en las opciones arriba donde esta lo de tipo de letra y color etc. y nos quedamos ahí.
"El código que les pasare es para declarar los estilos directamente sobre el elemento, usando el atributo “style”, también se puede con el css pero es mas complicado, bueno no complicado paro si mas gorroso.
Ok, ya estamos en la pestaña de html de la entrada a modificar, buscamos el código de la parte que cambiaremos, es este caso el código de la imagen;
A qui ya encontre el código de la imagen que modificare;
A hora procedo a colocar el código para generar el efecto de sombra, colocamos esta primera parte del código arriba;
Como la imagen, lo que esta seleccionado es el código de la imagen y lo que esta arriba es el código anterior "Marca un error blogger por que falta cerrar la etiqueta DIV, no pasa nada eso se soluciona cuando pongamos el otro pedazo de código
"
A hora cerramos la etiqueta con esto;
Imagen, ya serramos la etiqueta y podemos observar que ya no marco nada blogger
Este es el resultado, pero no me gusta por que quiero que la imagen este centrada y que tenga un poco mas de margen;
Agregando esto al código que ponemos arriba se centra la imagen align="center" , quedaría así;
Ya esta la imagen centrada a hora quiero ponerle un margen arriba, no quiero batallar así solo pondré un <br> después del código que va arriba para que se brinque un espacio, así quedaría:
Final mete hemos acabado, a qui pueden ver el resultado Blogdirec: Sombra en divs (Modificada)
Esto lo pueden aplicar de muchas formas, todo se lo dejo a su imaginación
No me quise meter en cuestiones técnicas, pero para las personas que desean saber que fue lo que acaban de hacer les comento lo siguiente;
Conseguimos un efecto de sombra usando solamente CSS. En el ejemplo aplicamos la sombra a un div, pero este efecto se puede usar prácticamente con cualquier elemento HTML, como imágenes, tablas, formularios, etc.
Aunque para las versiones actuales de todos los navegadores solo sería necesario usar la propiedad estándar “box-shadow“, para lograr la compatibilidad con todos los navegadores y sus versiones, utilizamos 5 propiedades distintas.
Las dos primeras son necesarias para versiones anteriores de Mozilla Firefox y de navegadores basados en WebKit, como Safari y Google Chrome. La tercera propiedad es la estándar de CSS 3, válida para Opera y para todos los navegadores actuales. Las dos últimas son filtros específicos de Microsoft (Shadow Filter) y son necesarias para antiguas versiones de Internet Explorer.
Podemos cambiar los valores de la sombra para que quede a tu gusto, sin olvidar que tendrás que hacer los cambios en todas las propiedades, intentando que la sombra sea similar en los distintos navegadores.
Valores de box-shadow
1.- Desplazamiento de la sombra sobre el eje X. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
2.- Desplazamiento de la sombra sobre el eje Y. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
3.- Cantidad de efecto blur de la sombra. (Ejemplo: 4px)
4.-Color de la sombra. (Ejemplo: #111)
Atributos de Shadow Filter
1.- Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)
2.-Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315. (Ejemplo: Direction=135)
3.-Color de la sombra (Ejemplo: Color=’#111111′)
Saludos!!!
He decidido regresarles el favor ya me han ayudado en algunas ocasiones así que a partir de hoy empezare a publicar aportes para todos.
Hoy les enseñare a darle un poco de diseño en las entradas de sus blog´s, esto que publicare sirve para destacar un poco más algunas partes con divs con sombra o tablas con sombra, yo lo utilice para este pots para destacar cada imagen con su texto y botones de like Azul Web -Blog-: Google Doodles 2000
En este caso utilizare un post ya echo para darle el diseño;
Esta es la entrada que modificare voy a darle diseño ala imagen que esta en medio del post Blogdirec: Sombra en divs (Sin modificar)
Primero nos colocaremos en la pestaña HTML que esta en las opciones arriba donde esta lo de tipo de letra y color etc. y nos quedamos ahí.
"El código que les pasare es para declarar los estilos directamente sobre el elemento, usando el atributo “style”, también se puede con el css pero es mas complicado, bueno no complicado paro si mas gorroso.
HTML:
<div style="-moz-box-shadow: 0px 0px 4px #111; -webkit-box-shadow: 0px 0px 4px #111; box-shadow: 0px 0px 4px #111; -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#111111)'; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');">
EN ESTA PARTE VA LO QUE QUIERAS QUE TOME EL EFECTO DE SOMBRA
</div>Ok, ya estamos en la pestaña de html de la entrada a modificar, buscamos el código de la parte que cambiaremos, es este caso el código de la imagen;
A qui ya encontre el código de la imagen que modificare;
A hora procedo a colocar el código para generar el efecto de sombra, colocamos esta primera parte del código arriba;
HTML:
<div style="-moz-box-shadow: 0px 0px 4px #111; -webkit-box-shadow: 0px 0px 4px #111; box-shadow: 0px 0px 4px #111; -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#111111)'; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');">Como la imagen, lo que esta seleccionado es el código de la imagen y lo que esta arriba es el código anterior "Marca un error blogger por que falta cerrar la etiqueta DIV, no pasa nada eso se soluciona cuando pongamos el otro pedazo de código
"A hora cerramos la etiqueta con esto;
HTML:
</div>Imagen, ya serramos la etiqueta y podemos observar que ya no marco nada blogger
Este es el resultado, pero no me gusta por que quiero que la imagen este centrada y que tenga un poco mas de margen;
Agregando esto al código que ponemos arriba se centra la imagen align="center" , quedaría así;
HTML:
<div align="center" style="-moz-box-shadow: 3px 3px 4px #111; -webkit-box-shadow: 3px 3px 4px #111; box-shadow: 3px 3px 4px #111; -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#111111)'; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');">Ya esta la imagen centrada a hora quiero ponerle un margen arriba, no quiero batallar así solo pondré un <br> después del código que va arriba para que se brinque un espacio, así quedaría:
HTML:
<div align="center" style="-moz-box-shadow: 3px 3px 4px #111; -webkit-box-shadow: 3px 3px 4px #111; box-shadow: 3px 3px 4px #111; -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#111111)'; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');">
<br>Final mete hemos acabado, a qui pueden ver el resultado Blogdirec: Sombra en divs (Modificada)
Esto lo pueden aplicar de muchas formas, todo se lo dejo a su imaginación
No me quise meter en cuestiones técnicas, pero para las personas que desean saber que fue lo que acaban de hacer les comento lo siguiente;
Conseguimos un efecto de sombra usando solamente CSS. En el ejemplo aplicamos la sombra a un div, pero este efecto se puede usar prácticamente con cualquier elemento HTML, como imágenes, tablas, formularios, etc.
Aunque para las versiones actuales de todos los navegadores solo sería necesario usar la propiedad estándar “box-shadow“, para lograr la compatibilidad con todos los navegadores y sus versiones, utilizamos 5 propiedades distintas.
Las dos primeras son necesarias para versiones anteriores de Mozilla Firefox y de navegadores basados en WebKit, como Safari y Google Chrome. La tercera propiedad es la estándar de CSS 3, válida para Opera y para todos los navegadores actuales. Las dos últimas son filtros específicos de Microsoft (Shadow Filter) y son necesarias para antiguas versiones de Internet Explorer.
Podemos cambiar los valores de la sombra para que quede a tu gusto, sin olvidar que tendrás que hacer los cambios en todas las propiedades, intentando que la sombra sea similar en los distintos navegadores.
Valores de box-shadow
1.- Desplazamiento de la sombra sobre el eje X. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
2.- Desplazamiento de la sombra sobre el eje Y. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
3.- Cantidad de efecto blur de la sombra. (Ejemplo: 4px)
4.-Color de la sombra. (Ejemplo: #111)
Atributos de Shadow Filter
1.- Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)
2.-Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315. (Ejemplo: Direction=135)
3.-Color de la sombra (Ejemplo: Color=’#111111′)
Saludos!!!
