lunes, 22 de julio de 2013

Los mejores efectos con css shadow 3D, relieve o texto hundido, fuego y mas



Hace unos dias Ivan me preguntaba si era posible colocar paypal en nuestros sitio web o blog pero con una imagen diferente a la de su boton, el cual generalmente tienen la mayoria de las personas en sus sitios.para que las personas realisen una donación vía Pay-Pal.La respuesta es si, si se puede,Muchos de seguro navegando se han de encontrar con varios sitio que tienen la Famosa frase " Me invitas un cafe '' La cual la usan para que las personas hagan alguna donacion,Ivan la forma de implementar esto en tu sitio es de lo mas facíl,solo en unos pocos paso a seguir y listo.

A continuacion les muestro el codigo y sus cambios a seguir.
El codigo se coloca en un gadget en cualquier parte del sitio en la barra lateral al final etc...

Donde dice Tu correo que tienes en paypal  Lo cambian por el correo que tienen asociada a paypal.
Donde dice  Me Invítas un café!   esa frase la pueden cambiar por la que quieran es agusto de cada cual  esta aparece en donde colocan la donacion que te van a dar .
Done dice  http://img89.xooimage.com/files/1/4/8/cafe-cup-image2-399cb3b.gif    es donde van a colocar la imagen como esta en el ejemplo .

Una ves hecho eso, guardan el gadget y todo ya esta listo ya cuentan con paypal en su sitio con una imagen diferente a su boton




Los mejores efectos con css shadow 3D, relieve o texto hundido, fuego y mas

Desde hace dias estoy implementando estos efectos en el blog el cual me gusta mucho el efecto que obtengo con css, con la propiedad llamada text-shadow ,con el que podemos obtener muchos efectos como efecto relieve o texto undido,texto 3d ,texto que simula tener fuego y mas todos muy interesantes. La propiedad CSS llamada text-shadow, se incluyó por primera vez en CSS2 (pero no está implementado en todos los navegadores todavía).Si funciona muy bien en Firefox , Chrome y otros , Anteriormente estos efectos sólo se podían hacer por photoshopping de texto y era como una imagen.
En esta entrada les describo cómo funcionan estos efectos,El objetivo principal de esta propiedad es dar a los diseñadores y programadores css una herramienta para hacer efectos de texto, que sólo se podía hacer antes por la prestación de texto como imágenes, con todos los efectos secundarios. Texto traducido como una imagen no se puede buscar, y por lo tanto muy undelicious para los motores de búsqueda. Otro efecto secundario es el hecho de que las imágenes pueden ser manera más grande como una pequeña línea de código en términos de tamaño de archivo. Como ustedes saben la mayoría de los CSS de los archivos, que contienen todo el diseño de un sitio web, son más pequeños de una imagen en la mayoría de los sitios web. Así que es realmente inteligente para utilizar una función de CSS en lugar de imágenes para reducir el tráfico innecesario.

La utilización de text-shadow para simular texto grabado o la serigrafía se utiliza ampliamente en las páginas web. Apple lo hizo en todas partes en Mac OS X no sólo desde Leopard (basta con ver las barras de título). Así que si se quiere diseñar un sitio web para los usuarios de Mac se puede aumentar la sexyness de su sitio web, ya que este uso particular de text-shadow se integra muy bien con el aspecto general de Mac OS X. 

Text-shadow no es una propiedad nueva, ya que se definió por primera vez con CSS2 en 1998 , pero se llevó a cabo sólo por los KHTML / Webkit de la gente. Sin embargo, está disponible en Safari desde la versión 1.1 (2003), en Konqueror desde la versión 3.4 (creo, no estoy seguro) y Opera desde la 9.5. Además, está apoyado también por Firefox y, finalmente, Google Chrome .En la plataforma Mac WebKit también se utiliza en varios otros programas con un navegador incluido, como Coda de Panic, CSSEdit de MacRabbit o NetNewsWire de NewsGator. También todos los navegadores que es accionado por el motor WebKit es capaz de hacer de la propiedad text-shadow, como Shiira , OmniWeb o de la Epifanía , que son, ya sea para Mac o Linux.Opera es el primer no-WebKit navegador que soporta texto -sombra.A continuacion les muestro algunos ejemplos con sus css correspondientes.

No hay comentarios:

Publicar un comentario