CreativeJuiz blog - Archives (juin 2012)
CreativeJuiz, blog de Webdesign et développement autour de HTML5, CSS3, WordPress, PHP et jQuery.
Vous connaissez ou avez certainement entendu parler du plugin payant CSShat, pour Photoshop, qui permet de créer une feuille de styles à partir d’un PSD ? Si l’idée vous séduit, regardez plutôt du côté de CSS3ps.com qui vous permet de transformer votre PSD en styles CSS3. CSS3ps.com est un plugin Photoshop compatible avec les versions [...]
Désolé pour le titre à rallonge, je n’ai pas trouvé plus court. J’ai eu besoin pour un client de rendre privé un post lorsqu’il était publié dans certaines catégories. L’idée initiale étant de lui simplifier la tâche et d’éviter les erreurs de publication. Le hook WordPress prévoit un hook qui permet d’intervenir au moment où [...]
Ayant récemment eu besoin de parcourir les ressources du web à la recherche d’une solution de slideshow simple et personnalisable, j’ai rencontré quelques bonnes choses. Voici une liste très largement non exhaustive de quelques slideshow et carrousels en JavaScript qui ont retenu mon attention par leur simplicité, leurs fonctionnalités ou la qualité de leur ergonomie. [...]
Il y a quelques jours de cela je répondais à un petit tweet d’un confrère pour donner une astuce sur la création d’un effet graphique de feuilles superposées en CSS3. Le défi était de ne pas multiplier les éléments HTML pour réaliser cet effet. C’est chose faite. Jetons un œil sur la technique utilisée.
Tweet et réponse
L’un de vous saurait-il faire ça en CSS3 ? Merci d’avance 
twitpic.com/9mgntn
— Daniel Roch, SeoMix (@rochdaniel) Mai 18, 2012
L’idée me semblait intéressante, voici ma proposition visible sur dabblet et correspondant au mieux à l’image fournie par Daniel :
Effet de feuilles superposées
Comment faire ? Comment l’utiliser ?
Nous allons voir plusieurs exemples pour réaliser deux effets similaires.
Pour réaliser le premier effet, utilisons un code HTML simple correspondant à un bloc de citation :
<blockquote>
<p>C'est en forgeant qu'on devient forgeron</p>
</blockquote>Ce code suffit amplement pour notre affaire. Voyons notre CSS.
/* on fixe la largeur du bloc (optionnel)
et on le définit comme référent */
blockquote {
position: relative;
width: 300px;
padding: 10px;
}
/* on ajoute des effets graphiques
sur nos futures feuilles */
blockquote,
blockquote:after,
blockquote:before {
background: #fff;
box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
/* on utilise les pseudo éléments pour ajouter des feuilles */
blockquote:after,
blockquote:before {
position: absolute;
top: 0; right:3px; bottom:0; left:-3px;
content: "";
z-index: -10;
/* définit le centre de transformation */
transform-origin: 100% 0;
}
blockquote:after {
transform: rotate(-0.6deg);
}
blockquote:before {
transform: rotate(-1.2deg);
right: 5px; left: -5px;
}N’oubliez pas que ce code CSS n’est pas préfixé (-webkit-, -moz-, etc.) et qu’il convient de le faire pour les propriétés CSS3 (ici box-shadow, transform-origin et transform).
Aller plus loin
L’exemple de code fourni à Daniel propose d’ajouter un auteur de la citation, ainsi que des guillemets autour de celle-ci.
Ajoutez un paragraphe portant le nom de l’auteur après le paragraphe de la citation.
Puis en CSS nous allons utiliser à nouveau les pseudo éléments pour ajouter nos guillemets. La fonte Georgia propose de jolis guillemets, soit dit en passant.
/* on style les deux paragraphes */
p {
margin:0;
}
blockquote p + p {
text-align: right;
line-height: 1.2em;
margin:-1.1em 0 0 0;
color: #999;
}
/* on ajoute les guillemets */
blockquote p:first-child:before,
blockquote p:first-child:after {
font-size: 1.75em;
font-family: Georgia, serif;
color: #888;
}
blockquote p:first-child:before {
content : "“ ";
vertical-align: -.05em;
}
blockquote p:first-child:after {
content : " ”";
vertical-align: -.55em;
}Le plus difficile ici est de trouver le bon alignement pour les guillemets, tout en jouant avec les marges des paragraphes.
Toujours plus loin (toujours plus fort !)
Pour réaliser le deuxième effet de la démonstration, nous allons appliquer les mêmes styles sur des liens autour d’images. Le code HTML est plutôt simple :
<a href="#">
<img src="http://lorempixel.com/200/200/sports/1" alt="" width="200" height="200">
</a>
<a href="#">
<img src="http://lorempixel.com/200/200/sports/4" alt="" width="200" height="200">
</a>
<a href="#">
<img src="http://lorempixel.com/200/200/sports/5" alt="" width="200" height="200">
</a>Nous préparons ensuite notre code CSS, fortement ressemblant au précédent :
a {
display:inline-block;
position: relative;
padding: 10px;
margin: 0 2em;
width: 200px;
height: 200px;
}
/* on ajoute des effets graphiques
sur nos futures feuilles */
a,
a:after,
a:before {
background: #fff;
/* ombres légèrement diminuées en opacité */
box-shadow: 0 0 4px rgba(0,0,0,0.2);
/* on prévoit une transition générale */
transition: all .7s;
}
/* on utilise les pseudo éléments pour ajouter des feuilles */
a:after,
a:before {
position: absolute;
top: 0; right:0; bottom:0; left:0;
content: "";
z-index: -10;
/* définit le centre de transformation */
transform-origin: 100% 0;
}Nous préparons notre transition sur la rotation, le déplacement et le changement d’ombre de notre élément. Pour simplifier, j’ai fait le choix d’effectuer la transition sur all.
Au survol ou au focus sur un lien, nous effectuons nos changements d’état :
a:hover:after,
a:focus:after {
transform: rotate(-1deg);
right: 6px; left:-6px;
}
a:hover:before,
a:focus:before {
transform: rotate(-2.2deg);
right: 12px; left: -12px;
}
/* on ré-hausse l'opacité des ombres */
a:hover,
a:hover:after,
a:hover:before,
a:focus,
a:focus:after,
a:focus:before {
box-shadow: 0 0 4px rgba(0,0,0,0.4);
}Les sélecteurs CSS sont un peu longs du fait de la prise en charge du focus et du survol sur les 3 éléments.
Et voilà, vous êtes arrivés au bout !
J’ai bien conscience que les commentaires au sein du code CSS ne seront peut-être pas suffisants pour tout le monde, n’hésitez pas à commenter si vous rencontrez des difficultés.