Nous allons voir aujourd’hui comment réaliser une page avec des items flottants sur la droite de cette page.
Nous allons tout d’abord commencer par créer le code HTML de notre page. Nous allons mettre un court texte et le code pour les items flottants :
<div class="float-container">
<a href="#" class="icon one">Lire plus</a>
<a href="#" class="icon two">Get in touch</a>
<a href="#" class="icon three">Envoyer un message</a>
</div>
<!-- text -->
<p>
Lorem ipsum dolor sit amet
</p>
Comme vous pouvez le constater, rien de bien compliqué de ce coté là. Mais voici que viens le CSS. C’est là que ça va un peu se corser (pas au début, bien sûr!). Nous allons commencer par définir les caractères principaux du bloc qui contient les icônes. On utilise la méthode display: flex; , les ombres, des transitions etc… On arrange aussi la page en elle-même :
body {
background: #f2f2f2;
}
p {
font-family: "Montserrat";
font-weight: 800;
line-height: 160px;
font-size: 200px;
color: #eaa;
text-transform: uppercase;
}
.float-container {
position: fixed;
top: 33%;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
width: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.float-container a {
z-index: 99;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
margin-right: -190px;
margin-bottom: 10px;
padding: 10px 20px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-decoration: none;
color: white;
border-color: #46b8da;
border-radius: 5px 0 0 5px;
background-color: #eb690b;
-webkit-box-shadow: 0 2px 4px #7d7d7d;
box-shadow: 0 2px 4px #7d7d7d;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-family: sans-serif;
}
Nous avons par défault caché au 3/4 les items et on créer des transitions pour les faire apparaître quand on passera par dessus grâce à la propriété margin-right. On change aussi légèrement la couleur des bandes :
.float-container a:hover {
margin-right: 0;
background-color: #c45100;
-webkit-box-shadow: 0 2px 4px #7d7d7d;
box-shadow: 0 2px 4px #7d7d7d;
}
Il ne nous reste maintenant plus qu’à définir les icônes grâce à FontAwesome : on définit la police de FontAwesome pour toutes les icônes puis on utilise un content pour avoir les dessins voulus :
.float-container .icon:before {
font-family: "Font Awesome 5 Free";
margin-right: 25px;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.icon.one:before {
content: "\f073";
}
.icon.two:before {
content: "\f086";
}
.icon.three:before {
content: "\f1d8";
}
Surtout, noubliez pas le :before, il est indispensable.
Il nous reste une dernière chose à faire. Vous ne voyez pas? Mais si, c’est toujours mieux quand notre design est responsif, alors nous allons nous atteler à la tâche… On va définir les Media queries pour tout les écrans de 440 pixels ou moins. On va supprimer le dernier lien pour ne pas faire de « surplus » et on va positionner les 2 items en bas de page côte à côte. Sinon, rien ne change :
/* Media queries */
@media screen and (max-width:440px)
{
.float-container .icon:last-child {
display: none;
}
.float-container
{
position: fixed;
top: auto;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: auto;
-webkit-box-align: auto;
-ms-flex-align: auto;
align-items: auto;
}
.float-container a.icon
{
right: 0;
bottom: 0;
width: 100%;
margin-right: 0;
margin-bottom: 0;
padding: 5px;
border-radius: 0;
-webkit-box-shadow: 0 0 0 #7d7d7d;
box-shadow: 0 0 0 #7d7d7d;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-left: 1px solid darkorange;
border-right: 1px solid darkorange;
}
}
Et voilà, tout y est. On pourrait bien sûr améliorer en mettant les icônes qui apparaissent comme sur le coté mais en haut pour que cela prenne moins de place (pour la section Media queries) mais je vous laisse le soin de le faire car ce n’est pas si compliqué que ça!!!
SublimeCode 