En esta practica vamos a cambiar el formato de elementos Font Awesome, ademas de un texto y un botón, cada que el puntero se posicione sobre el elemento.
Anteriormente aprendimos a añadir elementos Font Awesome, recordemos un poco.
Para utilizar los íconos Font Awesome es necesario:
1.-Descargar a la carpeta de tu proyecto la carpeta:
- CSS que incluye los siguientes archivos:
- font-awesome.css
- font-awesome.css.map
- font-awesome.min.css
- fonts que incluye los siguientes archivos
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff
2.- Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir las referencias CSS en las páginas desde donde se utilizarán los iconos:
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/> <link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>
3.- para llamar los íconos en tu página web se hace através del artributo class de HTML donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:
<span> <img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/> </span>
Ya que hemos recapitulado la manera de añadir elementos Font Awesome, Comencemos con el ejercicio.
Pasos:
1.- Como anteriormente lo mencionamos añadimos las referencias al archivo css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Practica</title> <link rel="stylesheet" href="FA/css/font-awesome.min.css"/> </head>
2.-Ahora armemos nuestro body en el que insertamos el elemento Font Awesome con la etiqueta <span>, ademas de insertar texto y un botón.
< div class="services-div"> <span> <img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/> </span> <p class="services-title"> <a href="#">Services</a> </p> <p class="services-title"> <a href="#">Services</a> </p> <hr width="50%" align="center"/> <p class="services-desc">Look through an extensive catalog of our services including everything from cloud messaging to remote sensing equipment.</p> < div class="boton"> < div class="capa"></div> < a href="#">More</a> </div> </div>
3.-El siguiente paso sera insertar el código css
- Usaremos .services-title para dar formato al Titulo
- .service-title a para dar formato a los hiperenlaces que colocaremos.
- .services-title a:hover para especificar los cambios que tendra el titulo al momento de color el cursor sobre el.
- .services-desc para dar formato al parrado de texto.
- .fl-icon para dar formato en este caso tamaño y una transición a los iconos Font Awesome.
- Y por ultimo .services-div:hover .fl-icon para señalar que cada que el cursor pase en el contenedor cambie el formato de los iconos Font Awesome dentro de este.
<!--Código CSS--> <style type="text/css"> .services-title{ font-family:"Arial Narrow", "Times New Roman", Times, serif; text-transform:uppercase; color:white; text-align:center; font-size:2.3em; } .services-title a{ color:white; text-decoration:none; transition:all .5s; } .services-title a:hover{ color:#50ADE7; } .services-desc{ text-align:center; color:white; font-family:Tahoma; width:80%; margin:0px auto; font-size:0.95em; } .fl-icon{ transform:scale(.4); transform:scale(.4); transition:all 1s; margin-top:-140px; margin-bottom:-150px; margin-left:30px } .services-div:hover .fl-icon { transform:scale(.5);} . . .
- También usaremos .boton para dar estilo al boton
- .boton a para dar estilo al hiperenlace dentro del botón
- .capa para el estilo a una capa que que tendrá el botón
- Y por ultimo .boton:hover .capa para cambiar el tamaño de la capa y así crear el efecto en el botón.
. . . .boton{ width:155px; height:50px; background:linear-gradient(to bottom, #429fe2, #5ebbeb); overflow:hidden; border-bottom:2px solid #a5dbfa; margin:0px auto; margin-top:50px; margin-bottom:50px} .boton a{ text-align:center; padding-top:15px; padding-bottom:15px; color:white; text-decoration:none; text-transform:uppercase; font-weight:100; font-family:"Arial Narrow"; display:block; position:absolute; width:155px;} .capa{ height:0px; transition:all 0.5s ease; position:absolute; width:155px; background-color:rgba(76,80,81,1);} .boton:hover .capa{ height:50px;} </style>
A continuación se muestra el resultado final
Resultado Final:
See the Pen Elementos by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.