Creando suave subrayado rojo para enlaces de la web Tweet

by Jesus Lombardo on Monday, 2 June 2008 | No Comments

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 subrayado 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 Brillo.

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 > Animation

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 dibujo 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 marcas

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!

Creando suave subrayado rojo para enlaces de la web Tweet

1. Photoshopiando el brillo: Gif animado:

2. Las marcas

3. Css

Please inspire the world with your comments. Cancel reply

Categorías