W

e

b

A

g

e

n

c

y

Technologies utilisées :

Lien vers le site

Projet d'étude

Intégrer la maquette d'un graphiste uniquement en HTML-CSS.

Technologie

L'objectif était de creuser dans les capacités de CSS3 et HTML5.
On découvre ainsi, qu'en seulement quelques lignes de code, on peut rendre des animations, des transitions ou encore des boutons fonctionnels de plusieurs types (menus de navigation, onglets, sliders etc)

Code

<h2>NOS PROJETS</h2>
<div class="separateur">
  <p><i class="fa fa-circle fa-sm bleu"></i></p>
</div>
<p class="description">Nous sommes fiers de vous présenter un échantillon de notre travail. […]</p>
<!-- Les commentaires suivants sont déstinés à supprimer les white-spaces entre 
les éléments 'inline-block' -->
<input type="radio" id="all-works" name="radio" checked><!--
--><label for="all-works" id="onglet-all-works">
  All Works
  <i class="fa fa-caret-down fa-lg bleu triangle"></i>
</label><!--
--><input type="radio" id="creative" name="radio"><!--
--><label for="creative" id="onglet-creative">
  Creative
  <i class="fa fa-caret-down fa-lg bleu triangle"></i>
</label><!--

/******************************************************/
/*********************** PROJETS **********************/
/******************************************************/
#projets input:checked + label {
  color: white;
  background-color: #5cadd3;
  padding: 10px 16px;
  border-bottom: 3px solid #4494bb;
}
#creative:checked ~ .contenu .image-projet:not(.creative) {
    visibility: hidden;
    position: absolute;
}
#corporate:checked ~ .contenu .image-projet:not(.corporate) {
    visibility: hidden;
    position: absolute;
}