Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Shiny 3color links - by Kuma


ESTOY DE REGRESOOOOOOOO!!! Huy no saben lo qué hice en estos días o mejor dicho "qué no hice" {eso sería más breve }. En fin hoy ando a paso veloz, para empezar que hoy tengo visitas. Segundo no me fue bien en el Middle Exam, nunca en mi vida saqué 80 de puntuación , estoy tan acostumbrada a los 100 y 97 que me es raro sacar un 80. Se siente tan vació(?) Ok no ! Pero me esforzaré para la próxima. YES! I CAN!!!

Hoy les traigo un tutorial muy fácilito, es una creación mia así que les agradeceré inmensamente que me den los créditos que me correspondan por este.

Descripción  

A este efecto lo nombré Shiny Tricolor Links. Este efecto hace que los enlaces tengan un color en degradé entre dos colores, que al combinarse asemejan que hay 3 colores, además que al pasar el cursor por encima del enlace, este brilla o se ilumina.

Vista Previa  

Para ver el vista previa da clic en la equis {X}. También dejo una captura.

Código  

Antes de aplicar cualquier nuevo código, siempre descarga tu plantilla actual {a medida de precaución}. Busca {usa Cotrol + F} .widget .post-body ul li { ...Aparecerá esto:
.widget .post-body ul li {
  border: none;
Después de   ...es decir al final de todo el anterior código, pega el sgte. código:
.sidebar .widget a:link {
background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#ffde00));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.sidebar .widget a:visited {
background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#ffde00));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.sidebar .widget a:hover {
background-image:-webkit-gradient(linear,left top,right top,from(#ff99e0),to(#fef668));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Personaliza  

Este efecto está adaptado para que funcione en los WIDGETS {las columnas fuera de las publicaciones}. Pero si gustas usar este efecto en todo el blog, en lugar de hacer lo anterior, busca /* Content y dentro de este busca el sgte. código...
a:link {
  text-decoration:none;
  color: $(link.color);
}
a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}
a:hover {
  text-decoration:none;
  color: $(link.hover.color);
}
Ahora reemplaza todo eso por este código...
a:link {
background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#ffde00));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
a:visited {
background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#ffde00));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
a:hover {
background-image:-webkit-gradient(linear,left top,right top,from(#ff99e0),to(#fef668));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Para cambiar los colores solo cambia #ff57cc#ffde00#ff99e0 #fef668 por los colores que más prefieras.
COLORES NORMAL
COLORES AL PASAR EL CURSOR
*Código adaptable a Plantilla clásica.

Es todo, me retiro. Tengo cosas que hacer de la universidad. AH! SI! Lo olvidé! YA REGRESE A CLASES . Así que es probable que esté ocupada, sin embargo no dejaré de publicar en el blog {osea aquí}, tal vez la única diferencia sea que mis publicaciones ya no serán tan frecuentes. He ahí el motivo por mi ausencia. Bueno hasta la próxima! Bye Byeeeeeee!! I love my sweeties!! 

12 comentarios:

  1. waa que chulo como queda, gracias por el tutorial

    ResponderEliminar
  2. Muchas gracias por el tuto amiga eh queria pedirte una disculpa por que no pude participar en lo del sorteo de publicidad la verdad si lo queria pero el tiempo me come y no pude, de verdad perdon amiga

    ResponderEliminar
  3. Gracias por el tuto ^^ ame el efecto del blockquote :DD

    ResponderEliminar
  4. Muy buena la tuto n.n
    ¿Me afilias en mi blog?
    Aqui esta el enlace: http://piki-diary.blogspot.com.es/

    ResponderEliminar
  5. muy bonito el efecto!! *^* muchas gracias por el tutorial!

    ResponderEliminar
  6. Tienes un premio en mi blog: http://piki-diary.blogspot.com.es/2013/08/premio.html

    ResponderEliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.