Index général
- Outils
- Références
- Tuyaux
This is an old revision of the document!
A Faire :
header
, une zone nav
, une zone aside
, 5 zones section
et une zone footer
.border-radius
de 10px)Avant de poursuivre notre exercice, vous aurez probablement besoin d'en savoir plus sur le positionnement en css.
Plusieurs d'entre vous n'ont pas pris le temps dans le TD précédent de comprendre les positionnements pour construire une page web. Nous vous invitons à prendre le temps, si vous ne l'avez pas déjà fait, de lire les tutoriaux suivants.
Regardez le tutoriel sur
A Faire :
A Faire :
skewY
) lors du survol du pointeur souris. On utilisera le selecteur first-of-type
pour sélectionner cette image.skewX
) lors du survol du pointeur souris. On utilisera le selecteur nth-last-of-type
pour sélectionner cette image. scale
) lors du survol du pointeur souris. On utilisera le selecteur nth-child
pour sélectionner cette image.rotate
) lors du survol du pointeur souris. On utilisera le selecteur nth-of-type
pour sélectionner cette image.last-of-type
pour sélectionner cette image.Le résultat devrait ressembler à quelque chose comme cela :
Voir pour les transformations CSS : http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html
Et pour “jouer” avec skewX, skewY : http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_skewx
Si vous avez besoin d'aide pour les transitions, n'hésitez pas à vous reporter au tutoriel suivant : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html (consultez aussi les pages 2 à 4 de ce tutoriel).
A Faire :
section
, une zone div
contenant 4 zones section
. Chacune de ces nouvelles zones section contiendra une zone header
, article
et footer
. L'image ci-dessus vous donne une idée du résultat. Ces nouvelles sections auront une largeur de 160px.border-bottom
) composée de points qui n'occupera pas toute la largeur.HTML5 a introduit plusieurs nouvelles balises dont 2 balises multimédia (la balise video et la balise audio).
Vous trouverez plus de détail sur cette balise video chez alsacreations : http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
A Faire :
On devrait avoir un résultat dans le style de ceux ci dessous :
Voyons maintenant comment faire une infobulles du type de celle de l'image ci-dessous :
A Faire :
<p> <a href="#">Survole moi! <span>Je suis une infobulle...</span> </a> </p>
p
span
en span
complètement invisible en le rendant transparent (opacity:0)a
. span
quand on survole l'élement a
. a
.Il ne nous reste plus qu'à finir notre zone nav, que nous avons laissé de coté jusqu'à maintenant.
A Faire :
<a href="#tableau"> <div class="icone">T</div> ableau </a> <a href="#images"> <div class="icone">I</div> mages </a> <a href="#colonnes"> <div class="icone">C</div> olonnes </a> <a href="#videos"> <div class="icone">V</div> ideos </a> <a href="#infobulle"> <div class="icone">I</div> nfobulle </a>
overflow:hidden;
)white-space:nowrap;
text-overflow:ellipsis;
}