Mouse hover en texto con css
Para personas que quieren mejorar su sitio web, en especial a los principiantes, les ayudará mucho darle vida a sus enlaces, el famoso "mouse hover". Es algo sencillo, pero con muchas opciones para elegir, algunos simplemente hacen que cambie de color y ya, pero hay que considerar que hay otras opciones de decorado.
Lo mas apropiado es usar las opciones de color y subrayado, pero aún así podemos elegir entre negrita, cursiva, subrayada, etc... También podemos configurarlo por secciones o clases.
Lo más apropiado es agregar el código dentro de nuestro archivo CSS, para crear la regla a todos los enlaces de nuestro sitio, sin embargo pondré el codigo para css incrustado en nuestra cabecera de html.
Seré más simple, ya que quiero que este blog sea facil de comprender.
Utilizaremos la etiqueta <style> que va dentro de las etiquetas <head> y </head>.
' a ' en el css está dedicada a todos los enlaces, así que le agregaremos caracteristicas a esa funcion.
en ' a:hover ' pondremos los efectos que queremos en nuestro muse hover, lo que queremos que se vea cuando ponemos el cursor encima del enlace.
La estructura básica sería ésta:
Las funciones se irán modificando en el ' a:hover ' segun nuestro criterio y gusto. En el css hay muchas opciones para hacer que nuestro enlace no sea básico, depende de tu imaginacion, ya que puedes agregarle un borde, con un "border-right: red solid 6px;" que podrá dar el aspecto de que seleccionas el link. Y que aparezca por ejemplo un cuadro a la derecha, como éste rojo:
*Nota: una etiqueta en html siempre se cierra con una diagonal </ es recomendable cerrar TODAS.
Lo mas apropiado es usar las opciones de color y subrayado, pero aún así podemos elegir entre negrita, cursiva, subrayada, etc... También podemos configurarlo por secciones o clases.
Lo más apropiado es agregar el código dentro de nuestro archivo CSS, para crear la regla a todos los enlaces de nuestro sitio, sin embargo pondré el codigo para css incrustado en nuestra cabecera de html.
Seré más simple, ya que quiero que este blog sea facil de comprender.
Utilizaremos la etiqueta <style> que va dentro de las etiquetas <head> y </head>.
' a ' en el css está dedicada a todos los enlaces, así que le agregaremos caracteristicas a esa funcion.
en ' a:hover ' pondremos los efectos que queremos en nuestro muse hover, lo que queremos que se vea cuando ponemos el cursor encima del enlace.
La estructura básica sería ésta:
<style>
a {
color: red;
text-decoration: none;
font-weight: bold;
}
a: hover {
color: blue;
text-decoration: underline;
font-weight: bold;
}
</style>
El codigo anterior nos dará un efecto de mouse hover básico y normal. Ésto podremos modificarlo como queramos. Podemos agregar un "padding: 3px; " que pondrá a nuestro enlace en una caja, a la cuál podemos agregar un fondo de color con la funcion "background-color: withe;" y quedaría algo así.
Enlace
Las funciones se irán modificando en el ' a:hover ' segun nuestro criterio y gusto. En el css hay muchas opciones para hacer que nuestro enlace no sea básico, depende de tu imaginacion, ya que puedes agregarle un borde, con un "border-right: red solid 6px;" que podrá dar el aspecto de que seleccionas el link. Y que aparezca por ejemplo un cuadro a la derecha, como éste rojo:
Enlace normal
Enlace hover
*Nota: una etiqueta en html siempre se cierra con una diagonal </ es recomendable cerrar TODAS.
Comentarios
Publicar un comentario