Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje07-11-2011, 23:38 (UTC)    
Título del mensaje: [CSS-HTML] Elegantes efectos de textos en css

Hola aquí les traigo unos Efectos que encontré

Información:
El CSS3 text-shadow propiedad ha estado alrededor por algún tiempo y se utiliza comúnmente para recrear la sombra de Photoshop Gota de sombreado tipo para añadir sombras sutiles que ayudan a añadir profundidad, dimensión y el levantamiento de un elemento de la página. Esto no es toda la propiedad text-shadow es capaz de, sin embargo, por ser creativos y jugar con los colores, offset y la confusión que puede crear algunos efectos interesantes y muy inteligente de texto!






Fuente.http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

Echa un vistazo a los efectos de texto a seis de Vintage / Retro , inserción , anaglifos , fuego y juego de mesa en la demo, y luego copiar los fragmentos de código a continuación para utilizar los efectos de sus propios diseños. Ni que decir tiene que usted necesita un browser que soporte text-shadow (Safari, Chrome, Firefox) para verlos en toda su gloria.

Vista previa de los textos
Cita:
http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html#vintage


Estos efectos los puedes pegar En tu editor de paginas para darle un toque atractivo a tus textos,


¿Como le agrego ese tal efecto?

Para agregarles estos Efectos copia el código css de los textos Ejemplo:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

ve al editor de paginas luego a la casilla que dice: <Div>/Avanzado/Estilo css,

[

Y pega el codigo que les dejo aqui abajo en la casilla css estilo


O también puedes pegar todo el texto en fuente html y comenzar a escribir

Códigos css-html


Vitage retro:
Código:
<h1 style="text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;">Vitage retro</h1>


Neon :
Código:
<h1 style="text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;">Neon</h1>


Inset:
Código:
<h1 style="text-shadow: 0px 2px 3px #666;">Inset</h1>


Anagly phic
Código:
<h1 style="text-shadow: 8px 8px 0 rgba(255,0,180,0.5);">Anagly phic</h1>


Fire:
Código:
<h1 style="text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;">Fire</h1>


Board game :
Código:
<h1 style="text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;">Board game</h1>


Textro sombreado código por ayuda031.es.tl
<span style="color: rgb(0, 0, 255);"><span style="text-shadow: 3px 2px 5px rgb(0, 0, 0);">Textro sombreado</span></span>


Gracias por entrar comenta tu visita :D

Aviso del Moderador "Design-PWG":
[El "Asunto" del aporte debe tener su respectiva etiqueta.]
Mas información: http://www.paginawebgratis.es/forum/viewtopic.php?t=66177
Desde ya gracias por su comprensión y colaboración!


Ultima edición por animeeasy el Jue Nov 10, 2011 11:29 am; editado 8 veces
Mensaje08-11-2011, 15:12 (UTC)    
Título del mensaje: Re: Elegantes efectos de textos en css

Bueno Mira , tendrias q dejar una explicacion , porque si entra alguien
que no entiende nada sobre codigos yno save que aser
ademas no se distingue mucho , Igual me gusto el post
Me gusto mas el de fire y el de neon , pero igua ahy muchas mas formas de
Lograr esos efectos con CSS , estaria bueno
que los encuentres y los compartas con la comunidad :D

Saludos !
Mensaje08-11-2011, 16:12 (UTC)    
Título del mensaje:

yo te dejo unas letras azul con zombra y es CsS3
Código:
<span style="color: rgb(0, 0, 255);"><span style="text-shadow: 3px 2px 5px rgb(0, 0, 0);">Textro sombreado</span></span>


______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
Mensaje08-11-2011, 16:21 (UTC)    
Título del mensaje:

Hola!,

El post esta genial,me gustaron todos los tipos,es un gran aporte ya que pueden lograr bueno efectos sin necesidad de un programa de diseño,no digo que hagan todo,pero ayudan en algo,de nuevo me gusta el aporte,gracias por compartirlo.

Saludos!
Mensaje08-11-2011, 20:00 (UTC)    
Título del mensaje:

Exelente aporte :D
______________
Votame
Click aqui
Mensaje09-11-2011, 01:03 (UTC)    
Título del mensaje:

Estan muy buenos los efectos pero tendrías que explicar un poco los códigos para los que no saben de CSS.
______________
Mensaje11-11-2011, 03:14 (UTC)    
Título del mensaje:

kilometro6 escribió:
Estan muy buenos los efectos pero tendrías que explicar un poco los códigos para los que no saben de CSS.



Gracias por tu comentario creo que ahora si se entiende un poco mas el tutorial
*eso creo* xD
Mensaje12-11-2011, 15:10 (UTC)    
Título del mensaje:

Muy buen aporte animeeasy, me gustaron los efectos!
______________
Mensaje14-11-2011, 03:07 (UTC)    
Título del mensaje:

insaniquarium-deluxe escribió:
Muy buen aporte animeeasy, me gustaron los efectos!


de nada amigo solo los encontré y los quise compartir con ustedes :D
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group