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.
color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;
Efecto obtenido con shadow
color: #000;
background: #fff;
text-shadow: 2px 2px #666;
Efecto obtenido con shadow
color: #33cc33;
background: #fff;
text-shadow: 2px 2px 2px #ff3300;
Efecto obtenido con shadow
color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;
Efecto obtenido con shadow
color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;
Efecto obtenido con shadow
color: #fff;
background: #666;
text-shadow: 0px 1px 1px #000;
Efecto obtenido con shadow
color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;
Efecto obtenido con shadow
color: #fff;
background: #666;
text-shadow: 0px 0px 3px #fff;
Efecto obtenido con shadow
color: #000;
background: #000;
text-shadow: 1px 1px 4px #fff;
Efecto obtenido con shadow
color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;
Efecto obtenido con shadow
color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
Efecto obtenido con shadow
Estupendos verdad !!
Bueno como pueden ver lo que se usa para optener esos efectos es el color ,background y text-shadow . tambien añadimos el tamaño del texto font-size la distancia que quieras de la isquierda o derecha o de abajo margin-left ,margin-bottom.
Ejemplo si va a escribir una entrada y quieren poner un texto con uno de estos efecto o en la sidebar,barra lateral pueden guiarse por el siguiente codigo:
<div style="background: #666; color: black; font-size: 1.8em; font-weight: bold; height: 35px; margin-bottom: 5px; margin-left: 15px; padding-left: 20px; text-shadow: 0px 1px 1px #fff; width: 400px;">Esto es un texto de ejemplo </div>
Tambien si quieren darle un toque de efecto a los titulos de las entradas o los de los gadget en la sidebar para eso van a diseño >>> Edicion html >>> y en su plantilla para una busqueda mas rapida Ctrl+F y ponen lo que quieren buscar .
Para los titulos de las entradas deben buscar :
h3.post-title si no aparece con esa clase prueben con .post h3.post-title en mi caso en la plantilla fue este .post-title como ya saben hay muchas plantillas que son diferentes bueno una ves encontrado una de esas clases la van a copiar y remplazan .post-title por la que encontraron y van a guardar el codigo justo antes de ]]></b:skin>
.post-title {
color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;
}
Para los titulos de los gadget en la sidebar deben buscar sidebar h2{ o .sidebar .widget h2 {
todo depende de la plantilla y sigan los mismos pasos del anterior y es todo espero y haigan disfrutado de esta interesante y larga entrada.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
Cómo hacer para que se vea bien en IE y en Firefox??
ResponderEliminarHola Patricia García,En IE por ahora nada,siempre a tenido su problemita con el css,en firefox no se que version estas usando pero yo uso la 14.0.1 y funcionan todos los efectos de maravillas.saludos
EliminarA partir de IE10 debería de funcionar sin problemas, bueno entrecomillas porque IE tiene tela :-)
ResponderEliminar