Nuestro Primer Artí­culo, hoy aunque no tenemos mucho tiempo vamos a tratar de publicar un mini de photoshop, paso a paso para intentar hacer una barrita, para el de los enlaces.
Como primer post les pido perdon si hay algo que no se comprenda bien, de estructura y analisis les prometemos que con el tiempo la claridad y entendimiento van a ir mejorando y la experiencia también!

EMPEZAMOS…

En este tutorial, le mostraremos cómo crear vínculos con subrayado usando el .

1. Photoshopiando el brillo: Gif animado:

Abrimos un nuevo documento de Photoshop y lo creamos con 15×1 px (15 pí­xeles de ancho y 1 píxel de altura).

Abrir también: Window >

Llene su documento con el color que desee, yo elegí un rojo profundo. También asegúrese de que la capa está desbloqueado en la ventana Window > Layers. Si el layer está bloqueado, hacerle doble clic para desbloquearlo. Ahora haga clic en la flecha de la capa 1 en la paleta de animación y haga clic en el pequeño cronómetro al lado de la opacidad.

La idea ahora es arrastrar la flecha azul hacia el 0:00:4, aunque esta tabla se puede presentar de varias formas, la idea es hacer el mismo mas adelante bajandole la transparencia, el tiempo no debe ser muy prolongado, ya que va a terminar siendo un Gif, y la opacidad se puede cambiar de las propiedades de Layer.
A continuación es como tendría que quedar en el segundo 4, dentro de nuestra mini-animación.
Podemos jugar con esta línea de tiempo, por ejemplo, agregandole una acción mas 4 segundos mas adelante que sea que la opacidad vuelve a 90% por ejemplo, la idea básica es esa.
Una vez terminado vamos a
File > Save for Web & Devices; Elegimos la opción GIF, tiene que repitiendose “Forever”.

2. Las

Vamos a aplicar algunas clases para nuestra animación se relacione con los enlaces, aquí­ un ejemplo:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a class="glow-hover" href="#">this link underline glows on hover</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <a href="#" class="glow">this link glows all the time</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Aviso hay dos enlaces en este apartado, uno con una clase de “brillo-hover” y uno con una clase de “brillo”. Esto es sólo para ilustrar dos posibilidades. El resplandor-clase hover haremos hincapié en la brillante sólo aparece cuando el ví­nculo se arrastró. El resplandor de clase vamos a tener la brillante subrayar estar allí­ todo el tiempo.

Si utiliza este en la producción real, es posible que desee considerar la no utilización de determinadas clases, sino sólo la aplicación de la presente estilos directamente a todos ancla (a) elementos. Incluso má
s inteligente, aplicando únicamente a los elementos de anclaje en sus principales á
reas de contenido podrí­a ser una buena idea, por lo que no se destaca brillando en los que no desea!

3. Css

o nuestra “brillo” de clase, aplicamos la imagen de fondo derecho a la clase, asegúrese de que alinea a la parte inferior y se repite a lo largo del eje “x”. Dado que los elementos de anclaje son elementos en lí­nea, esto funcionará
incluso si el ví­nculo se rompe a través de múltiples lí­neas, que es grande.

Por nuestra “resplandor-hover” de clase, sólo se aplicará
la imagen de fondo en la: hover pseudo-clase (pero en exactamente la misma moda), que sólo toma la brillante subrayar aparecen cuando los enlaces se está
rondado.

a { color: #3366cc; text-decoration: none; } .glow { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } .glow:hover { color: #3366cc; } .glow-hover:hover { background: url(images/glow-underline.gif) bottom repeat-x; color: black; }

Ver Ejemplo

Artí­culo traducido de tutorialblog.org

Si te gusto el post, podes subscribirte al feed!