CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. https://www.css3create.com/ Découvrir et apprendre à utiliser les CSS et notamment CSS3 pour vos sites web. Démos, expériences, conseils, inspirations et tutoriels. Réaliser menus, galerie photos et interfaces web avec CSS3 Create. fr CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. http://www.css3create.com/local/cache-vignettes/L144xH62/siteon0-9c21e.png https://www.css3create.com/ 62 144 Ombre interne sur du texte http://www.css3create.com/Ombre-interne-sur-du-texte http://www.css3create.com/Ombre-interne-sur-du-texte 2013-11-26T09:34:49Z text/html fr css3create https://www.css3create.com/IMG/artoff94.jpg Utiliser les filtres SVG en CSS http://www.css3create.com Filtres CSS <p>Un snippet CSS pour émuler une fonctionnalité non existante en CSS, <code class='spip_code' dir='ltr'>text-shadow: inset ... ;</code></p> - <a href="http://www.css3create.com/Filtres-CSS" rel="tag">Filtres CSS</a> <img class='spip_logos' alt="" align="right" src="local/cache-vignettes/L150xH50/arton94-5b00d.jpg" width='150' height='50' onmouseover="this.src='local/cache-vignettes/L150xH150/artoff94-40f87.jpg'" onmouseout="this.src='http://www.css3create.com/local/cache-vignettes/L150xH50/arton94-5b00d.jpg'" style='height:50px;width:150px;' /> <div class='rss_texte'><p>Un snippet CSS pour émuler une fonctionnalité non existante en CSS, <code class='spip_code' dir='ltr'>text-shadow: inset ... ;</code></p> <p>Comme pour la démo précédente « <a href="http://www.css3create.com/Simuler-background-clip-text" class='spip_in'>Simuler background-clip : text</a> », je vous propose un snippet pour recréer une ombre interne sur n'importe quel élément d'une page web. C'est notamment utile sur les textes car la propriété <code class='spip_code' dir='ltr'>text-shadow</code> n'a pas de mot-clé <code class='spip_code' dir='ltr'>inset</code>, comme c'est le cas pour <code class='spip_code' dir='ltr'>box-shadow</code>.</p> <p>Pour simuler cet effet, <strong>nous utilisons les filtres SVG appliqués depuis CSS sur du contenu HTML</strong>. Le code SVG du filtre est légèrement plus complexe que la démo précédente :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><filter id="filter"><br /> <br /> <feFlood flood-color="black" flood-opacity=".6" /><br /> <feComposite in2="SourceAlpha" operator="out" /><br /> <feGaussianBlur stdDeviation="2"/><br /> <feOffset dx="0" dy="10" /><br /> <feComposite in2="SourceAlpha" operator="in" /><br /> <feMerge><br /> <feMergeNode in="SourceGraphic" /><br /> <feMergeNode /><br /> </feMerge><br /> <br /> </filter></code></div> <p>Et il suffit donc de le référencer depuis CSS :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.element {<br /> -webkit-filter: url('#filter'); /* webkit browser */<br /> filter: url('#filter'); /* all others browsers */<br /> }</code></div> <p>Voici en détails le fonctionnement du filtre :</p> <ul class='spip'><li> La primitive <code class='spip_code' dir='ltr'><feFlood></code> remplit l'espace graphique avec la couleur et l'opacité définie (c'est la future couleur de l'ombre interne) </li><li> La primitive <code class='spip_code' dir='ltr'><feComposite></code> réalise une étape de compositing entre la couleur (attribut <code class='spip_code' dir='ltr'>in</code> implicite) et la couche alpha de l'élément où s'applique le filtre (attribut <code class='spip_code' dir='ltr'>in2</code>) avec l'opérateur <code class='spip_code' dir='ltr'>out</code>.</li><li> La primitive <code class='spip_code' dir='ltr'><feGaussianBlur></code> floute le résultat obtenu</li><li> La primitive <code class='spip_code' dir='ltr'><feOffset></code> décale de 10px sur l'axe Y</li><li> De nouveau, la primitive <code class='spip_code' dir='ltr'><feComposite></code> fusionne le résultat obtenu avec la couche alpha de départ. (l'ombre se forme)</li><li> Enfin, les primitives <code class='spip_code' dir='ltr'><feMergeNode></code> rassemblent la source graphique et le résultat pour le rendu final.</li></ul> <p>Ce filtre SVG appliqué sur le HTML est supporté par Firefox, Chrome, Opera 15+ et théoriquement Safari 7 (mais celui bug fortement). Dans les faits, sur iOS7 il fonctionne à peu près mais pas sur Safari 7 Mac. :/</p> <p>Si vous avez plus d'infos, ou si vous avez une démo en ligne, je suis très intéressé !</p> <p> :)</p> </div> Simuler background-clip : text http://www.css3create.com/Simuler-background-clip-text http://www.css3create.com/Simuler-background-clip-text 2013-11-26T09:34:42Z text/html fr css3create https://www.css3create.com/IMG/artoff93.jpg Combiner les filtres CSS, SVG et @supports http://www.css3create.com Filtres CSS <p>Un snippet CSS pour simuler la propriété non standard : <code class='spip_code' dir='ltr'>background-clip: text</code>, en <strong>profitant de la puissance des filtres SVG</strong>.</p> - <a href="http://www.css3create.com/Filtres-CSS" rel="tag">Filtres CSS</a> <img class='spip_logos' alt="" align="right" src="local/cache-vignettes/L150xH50/arton93-c6dff.jpg" width='150' height='50' onmouseover="this.src='local/cache-vignettes/L150xH150/artoff93-014fd.jpg'" onmouseout="this.src='http://www.css3create.com/local/cache-vignettes/L150xH50/arton93-c6dff.jpg'" style='height:50px;width:150px;' /> <div class='rss_texte'><p>Un snippet CSS pour simuler la propriété non standard : <code class='spip_code' dir='ltr'>background-clip: text</code>, en <strong>profitant de la puissance des filtres SVG</strong>.</p> <p>La propriété <code class='spip_code' dir='ltr'>background-clip: text</code> n'étant pas standard et non reconnue au sein des navigateurs non WebKit, je vous propose un petit snippet pour profiter de cette propriété, dans la quasi majorité des navigateurs du marché.</p> <p>Pour simuler cet effet, <strong>nous utilisons les filtres SVG appliqués depuis CSS sur du contenu HTML</strong>. Le code SVG du filtre est très simple :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><filter id="filter"><br /> <br /> <!-- faking background-clip:text --><br /> <feImage xlink:href="grass-texture.jpg" width="450" height="450" /><br /> <feTile /><br /> <feComposite in2="SourceGraphic" operator="in" /><br /> <br /> </filter></code></div> <p>Et il suffit donc de le référencer depuis CSS :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.element {<br /> filter: url('#filter');<br /> }</code></div> <p>Voici en détails ce que fait le filtre :</p> <ul class='spip'><li> La primitive <code class='spip_code' dir='ltr'><feImage></code> extrait les pixels d'une image </li><li> La primitive <code class='spip_code' dir='ltr'><feTile></code> se charge de créer une mosaïque recouvrant l'intégralité de la source graphique sur laquelle le filtre s'applique (en se basant sur les pixels récupérés de l'image) </li><li> Enfin, la primitive <code class='spip_code' dir='ltr'><feComposite></code> réalise <a href="https://developer.mozilla.org/fr/docs/Web/SVG/Element/feComposite" class='spip_out' rel='external'>l'étape de compositing</a> entre la mosaïque créée (attribut <code class='spip_code' dir='ltr'>in</code> implicite) et la source graphique d'origine (attribut <code class='spip_code' dir='ltr'>in2</code>). Cette étape est réalisée avec l'opérateur <code class='spip_code' dir='ltr'>in</code>.</li></ul> <p>Pour profiter d'un support maximal, <strong>tout en prenant en compte l'amélioration progressive</strong>, l'appel à ce filtre peut être fait au sein de la règle CSS <code class='spip_code' dir='ltr'>@supports</code>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.element {<br /> color: green; /* fallback */<br /> }<br /> <br /> /* si -webkit-background-clip: text et @supports sont supportés */<br /> @supports (-webkit-background-clip: text) {<br /> <br /> .element {<br /> /* applique un background par défaut + clip:text */<br /> background: url('grass-texture.jpg');<br /> -webkit-background-clip: text;<br /> /* pour surcharger color */<br /> -webkit-text-fill-color: transparent; <br /> }<br /> <br /> }<br /> <br /> /* si -webkit-background-clip: text n'est pas supporté, mais que @supports l'est :) */<br /> @supports not (-webkit-background-clip: text) {<br /> <br /> .element {<br /> filter: url('#filter'); /* applique le filtre */<br /> }<br /> <br /> }</code></div> <p><strong>Le support final est donc effectif pour Firefox 22+, Chrome 28+, Opera 15+</strong> comme <a href="http://caniuse.com/#feat=css-featurequeries" class='spip_out' rel='external'>le montre ce support sur CanIUse</a>. Le fallback servira donc principalement pour Safari et IE.</p> <p>Pour améliorer le rendu avec Safari (où <code class='spip_code' dir='ltr'>background-clip: text</code> existe également), il est possible d'inverser le test du <code class='spip_code' dir='ltr'>@supports</code>. <strong>Attention, la dégradation gracieuse risque de ne plus être maintenue</strong>. Votre code pourrait ressembler à cela pour un support Firefox 22+, Chrome, Safari, Opera :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.element {<br /> <br /> /* applique un background par défaut + clip:text */<br /> background: url('grass-texture.jpg');<br /> -webkit-background-clip: text;<br /> /* pour surcharger color */<br /> -webkit-text-fill-color: transparent; <br /> <br /> }<br /> <br /> /* si -webkit-background-clip: text n'est pas supporté, mais que @supports l'est :) */<br /> @supports not (-webkit-background-clip: text) {<br /> <br /> .element {<br /> background: none; /* override background */<br /> filter: url('#filter'); /* applique le filtre */<br /> }<br /> <br /> }</code></div> <p>Pour IE, vous pouvez éventuellement passez par du full SVG. Regardez du coté de <a href="http://raphaeljs.com/" class='spip_out' rel='external'>RaphaëlJS</a> ou de <a href="http://snapsvg.io/" class='spip_out' rel='external'>Snap.svg</a></p> <p>Retrouvez également le second snippet utilisant les filtres SVG : « <a href="http://www.css3create.com/Ombre-interne-sur-du-texte" class='spip_in'>Ombre interne sur du texte</a> »</p> <p> :)</p> </div> Filtre CSS « flou localisé » ou « flou progressif » http://www.css3create.com/Filtre-CSS-flou-localise-ou-flou-progressif http://www.css3create.com/Filtre-CSS-flou-localise-ou-flou-progressif 2013-06-20T13:50:38Z text/html fr css3create https://www.css3create.com/IMG/artoff91.png Créer de la profondeur de champ avec les filtres et les masques http://www.css3create.com linear-gradient radial-gradient Filtres CSS <p><strong>Combiner les avancées graphiques de CSS3</strong> (les filtres et les masques) pour réaliser des effets d'images saisissants !</p> - <a href="http://www.css3create.com/linear-gradient" rel="tag">linear-gradient</a> , <a href="http://www.css3create.com/radial-gradient" rel="tag">radial-gradient</a> , <a href="http://www.css3create.com/Filtres-CSS" rel="tag">Filtres CSS</a> <img class='spip_logos' alt="" align="right" src="local/cache-vignettes/L150xH50/arton91-9f356.png" width='150' height='50' onmouseover="this.src='local/cache-vignettes/L150xH150/artoff91-9f23e.png'" onmouseout="this.src='http://www.css3create.com/local/cache-vignettes/L150xH50/arton91-9f356.png'" style='height:50px;width:150px;' /> <div class='rss_texte'><p><strong>Combiner les avancées graphiques de CSS3</strong> (les filtres et les masques) pour réaliser des effets d'images saisissants !</p> <p>Cette démo fait suite à <a href="http://www.css3create.com/Effet-soft-focus-en-CSS" class='spip_in'>Effet « soft-focus » en CSS</a>, mais fait entrer les masques CSS et SVG pour créer des effets de « flou progressif » ou de « flou localisé ».</p> <p>Le principe est donc <strong>strictement le même que la démo précédente</strong>, hormis l'utilisation des masques sur la seconde image qui superpose la première. (Je vous conseille de lire le premier article avant de continuer)</p> <h2 class="spip">Ajout des filtres CSS et SVG</h2> <p>Dans ce tuto, je vais entrer sur la partie spécifique des filtres et des masques. Nous partons donc du principe que nos deux images sont superposées :</p> <p><strong>Il nous suffit d'appliquer un flou avec la propriété <code class='spip_code' dir='ltr'>filter</code> sur cette seconde image</strong>. Le flou est ajouté via les <a href="http://www.css3create.com/Filtres-CSS" class='spip_in'>filtres CSS</a> (pour les navigateurs WebKit) et les filtres SVG (pour Firefox)</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">img:last-child{<br /> -webkit-filter: blur(5px);<br /> filter: url('#flou');<br /> }</code></div> <p>Et le SVG correspondant :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><svg><br /> <filter id="flou"><br /> <feGaussianBlur stdDeviation="5" /><br /> </filter><br /> </svg></code></div> <h2 class="spip">Ajout des masques CSS et SVG</h2> <p>Maintenant, il nous faut <strong>masquer une partie de cette image avec les masques</strong>. Pour WebKit, cela doit se faire avec la propriété <code class='spip_code' dir='ltr'>-webkit-mask</code> et pour Firefox, cela se fait via les masques SVG et la propriété <code class='spip_code' dir='ltr'>mask</code>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">img:last-child{<br /> ...<br /> -webkit-mask: linear-gradient(black, transparent 30%, black);<br /> mask: url('#mask');<br /> }</code></div> <p>Et le SVG correspondant au masque :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><svg><br /> <mask id="mask"><br /> <rect width="400" height="300" fill="url(#l1)"></rect><br /> <linearGradient id="l1" x1="0" y1="0" x2="0" y2="1"><br /> <stop stop-color="white" offset="0%"/><br /> <stop stop-color="black" offset="30%"/><br /> <stop stop-color="white" offset="100%"/><br /> </linearGradient><br /> </mask><br /> </svg></code></div> <p>Cette technique ouvre la porte a beaucoup d'effets visuels très intéressants. Grâce aux masques et aux filtres, vous pouvez créer des effets de lumière, des accentuations locales de contraste, et certainement encore plein d'autres choses auxquelles je n'ai pas encore pensé. :) <strong>N'hésitez pas à partager vos démos dans le forum</strong>.</p> <div class="note-info"> Pour en savoir plus sur les filtres et les masques, regardez <a href="http://iamvdo.me/conf/2013/meetupHTML5" class='spip_out' rel='external'>une présentation de ces 2 sujets</a> que j'avais fait il y a quelques temps. Vous y trouverez également d'autres ressources intéressantes. </div> </div> Effet « soft-focus » en CSS http://www.css3create.com/Effet-soft-focus-en-CSS http://www.css3create.com/Effet-soft-focus-en-CSS 2013-05-31T09:16:14Z text/html fr css3create https://www.css3create.com/IMG/artoff90.jpg Réaliser un flou artistique avec les filtres CSS http://www.css3create.com Filtres CSS <p><strong>Reproduire cette technique très populaire qu'est le flou artistique (soft-focus)</strong> en CSS uniquement, via l'utilisation des filtres CSS et de l'opacité.</p> - <a href="http://www.css3create.com/Filtres-CSS" rel="tag">Filtres CSS</a> <img class='spip_logos' alt="" align="right" src="local/cache-vignettes/L150xH50/arton90-d677a.jpg" width='150' height='50' onmouseover="this.src='local/cache-vignettes/L150xH150/artoff90-5cbbb.jpg'" onmouseout="this.src='http://www.css3create.com/local/cache-vignettes/L150xH50/arton90-d677a.jpg'" style='height:50px;width:150px;' /> <div class='rss_texte'><p><strong>Reproduire cette technique très populaire qu'est le flou artistique (soft-focus)</strong> en CSS uniquement, via l'utilisation des filtres CSS et de l'opacité.</p> <p>L'effet <a href="http://en.wikipedia.org/wiki/Soft_focus" class='spip_out' rel='external'>« soft-focus » ou « soft-blur »</a> est extrêmement simple à réaliser. Il suffit <strong>d'appliquer un léger effet de flou et de transparence à une image qui se superpose à elle-même</strong>.</p> <p>Voici donc le HTML utilisé, deux images identiques dans une <code class='spip_code' dir='ltr'><div></code> :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><div><br /> <img src="src.jpg" alt="" /><br /> <img src="src.jpg" alt="" /><br /> </div></code></div> <div class="note-info"> Note : Afin d'éviter de dupliquer le code HTML, il est possible de cloner l'image via JavaScript. Si vous avez pensé aux pseudo-éléments CSS, c'est très bien, mais malheureusement, ceux-ci ne s'appliquent pas aux images. </div> <h2 class="spip">Création de l'effet soft-focus</h2> <p>Les images doivent se superposer, nous utilisons donc le positionnement absolu :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">img{<br /> position: absolute;<br /> }</code></div> <p><strong>Enfin, il nous suffit d'appliquer un flou avec la propriété <code class='spip_code' dir='ltr'>filter</code>, puis une opacité avec <code class='spip_code' dir='ltr'>opacity</code></strong>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">img:last-child{<br /> filter: blur(2px);<br /> opacity: .5;<br /> }</code></div> <div class="note-info"> Note : Attention, n'oubliez pas de <a href="http://caniuse.com/#feat=css-filters" class='spip_out' rel='external'>mettre les bons préfixes</a>. </div> <p>Et c'est tout ! :)</p> </div> Reflection en CSS sur une image http://www.css3create.com/Reflection-en-CSS-sur-une-image http://www.css3create.com/Reflection-en-CSS-sur-une-image 2013-04-30T08:52:10Z text/html fr css3create https://www.css3create.com/IMG/artoff88.jpg Créer un reflet avec element() et -webkit-box-reflect http://www.css3create.com Transformations 2D element() <p>Découverte de la fonction <code class='spip_code' dir='ltr'>element()</code>, de la propriété <code class='spip_code' dir='ltr'>-webkit-box-reflect</code> et des masques CSS et SVG pour créer un reflet en pur CSS.</p> - <a href="http://www.css3create.com/Transformations-2D" rel="tag">Transformations 2D</a> , <a href="http://www.css3create.com/element" rel="tag">element()</a> <img class='spip_logos' alt="" align="right" src="local/cache-vignettes/L150xH50/arton88-448c1.jpg" width='150' height='50' onmouseover="this.src='local/cache-vignettes/L150xH150/artoff88-61c0a.jpg'" onmouseout="this.src='http://www.css3create.com/local/cache-vignettes/L150xH50/arton88-448c1.jpg'" style='height:50px;width:150px;' /> <div class='rss_texte'><p>Découverte de la fonction <code class='spip_code' dir='ltr'>element()</code>, de la propriété <code class='spip_code' dir='ltr'>-webkit-box-reflect</code> et des masques CSS et SVG pour créer un reflet en pur CSS.</p> <h2 class="spip">Le code de base HTML et CSS</h2> <p>Le principe ici est de créer un reflet en n'utilisant qu'un seul élément HTML. Le code est donc très extrêmement simple, une image et un texte contenus dans un bloc <code class='spip_code' dir='ltr'><div></code>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><div id="div-element"><br /> <p>San Francisco, CA</p><br /> <img src="image.jpg" alt="Texte alternatif"><br /> </div></code></div> <p>Et avec un peu de CSS pour faire beau :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code>div{<br /> position: relative;<br /> width: 300px;<br /> height: 215px;<br /> margin: 50px auto 150px;<br /> }<br /> p{<br /> font: 1.2em sans-serif;<br /> position: absolute;<br /> right: 0; bottom: 20px;<br /> margin: 0; padding: 10px;<br /> background: rgba(0,0,0,.3);<br /> color: white;<br /> }</code></div> <h2 class="spip">Un reflet, version standardisée</h2> <p>Les spécifications CSS sont vastes. Au sein de ces multiples modules existe une fonction qui peut être utilisée pour réaliser des reflets, c'est la fonction <code class='spip_code' dir='ltr'>element()</code>. <strong>Cette fonction permet de créer une image dynamique d'un élément du DOM</strong> (en référençant son identifiant).</p> <p>Bien qu'en cours de standardisation, cette fonction est déjà présente au sein de Firefox 4+ (préfixée). Nous l'utilisons donc ici. Pour cela, ajoutons un pseudo-élément <code class='spip_code' dir='ltr'>::after</code>, lequel reçoit en arrière-plan l'image générée avec <code class='spip_code' dir='ltr'>element()</code>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code>div::after{<br /> content: '';<br /> position: absolute; left: 0; top: 100%;<br /> width: inherit; height: inherit;<br /> background: -moz-element(#div-element);<br /> }</code></div> <div class="note-info"> Note : Vous pouvez lire cet article pour <a href="http://blog.iamvdo.me/post/45981346020/la-cascade-css-inherit-et-initial" class='spip_out' rel='external'>comprendre la cascade CSS et l'utilisation de <code class='spip_code' dir='ltr'>inherit</code></a> </div> <p><span class='spip_document_66 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L413xH512/1-0b936.jpg' width='413' height='512' alt="" style='height:512px;width:413px;' /></span></p> <p>La fonction <code class='spip_code' dir='ltr'>element()</code> crée une image dynamique, mais en aucun cas un reflet. C'est à nous ensuite de peaufiner le résultat pour obtenir ce que l'on souhaite réellement. <strong>Dans notre cas, il nous faut réaliser un effet miroir puis masquer l'image de manière progressive</strong>. Utilisons d'abord une <a href="http://www.css3create.com/Transformations-2D" class='spip_in'>transformation CSS</a> pour réaliser une symétrie :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code>div::after{<br /> ...<br /> transform: scaleY(-1);<br /> }</code></div> <p><span class='spip_document_67 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L413xH512/2-f60a3.jpg' width='413' height='512' alt="" style='height:512px;width:413px;' /></span></p> <p>Ensuite, <strong>utilisons les masques CSS pour cacher progressivement notre contenu</strong>. Dans ce premier cas (compatible avec Firefox uniquement), il nous faut passer par un masque SVG et le référencer en CSS, car Firefox ne supporte pas encore les masques Full CSS.</p> <p>Voici donc le SVG utilisé :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><svg height="0"><br /> <mask id="mask1"><br /> <rect width="100%" height="215" fill="url(#gr)"/><br /> <linearGradient x1="0" y1="0" x2="0" y2="1" id="gr"><br /> <stop offset="50%" stop-color="black" /><br /> <stop offset="100%" stop-color="white" /><br /> </linearGradient><br /> </mask><br /> </svg></code></div> <p>Et l'appel via CSS :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code>div::after{<br /> ...<br /> mask: url('#mask1');<br /> }</code></div> <p><span class='spip_document_68 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L413xH512/3-364a7.jpg' width='413' height='512' alt="" style='height:512px;width:413px;' /></span></p> <p>Notre SVG est composé ici d'un élément <code class='spip_code' dir='ltr'><mask></code>, lequel contient un élément <code class='spip_code' dir='ltr'><rect></code>. Cet élément <code class='spip_code' dir='ltr'><rect></code> est rempli avec un <code class='spip_code' dir='ltr'><linearGradient></code> allant du noir au blanc. Ce SVG peut être inclus directement dans le document HTML5 ou dans un fichier SVG séparé.</p> <div class="note-info"> <p>Il existe deux types de masques SVG :</p> <ul class='spip'><li> Les masques de luminance, identiques à un masque de fusion dans Photoshop</li><li> Les masques de transparence (alpha), identiques à un masque d'écrêtage dans Photoshop.</li></ul> <p>Les masques SVG sont par défaut des masques de luminance : le blanc rend visible et le noir masque. Il est possible de modifier le type avec la propriété <code class='spip_code' dir='ltr'>mask-type: luminance | alpha</code> (Firefox 23+ actuellement)</p> </div> <p>Terminons notre reflet en baissant l'opacité générale du pseudo-élément :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code>div::after{<br /> ... <br /> opacity: .3;<br /> }</code></div> <p><span class='spip_document_69 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L413xH512/4-9bad6.jpg' width='413' height='512' alt="" style='height:512px;width:413px;' /></span></p> <h2 class="spip">Un reflet, version WebKit (non standard)</h2> <p>Les navigateurs basés sur WebKit n'implémentent pas encore la fonction <code class='spip_code' dir='ltr'>element()</code>. Néanmoins, il existe une propriété CSS non standard qui permet de réaliser un reflet, c'est <code class='spip_code' dir='ltr'>-webkit-box-reflect</code>. Elle s'utilise de la façon suivante :</p> <ul class='spip'><li> Un mot-clé pour la position du reflet : <code class='spip_code' dir='ltr'>below</code>, <code class='spip_code' dir='ltr'>above</code>, <code class='spip_code' dir='ltr'>left</code> ou <code class='spip_code' dir='ltr'>right</code> (dessous, dessus, droite ou gauche)</li><li> Une distance pour décaler le reflet</li><li> Un dégradé CSS qui sera utilisé comme masque de transparence.</li></ul> <p>Il nous suffit donc d'ajouter cette propriété à notre CSS pour rendre notre reflet compatible avec tous les navigateurs WebKit (depuis 2008) :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code>div{<br /> ...<br /> -webkit-box-reflect: below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3));<br /> }</code></div> <p><strong>Attention, cette propriété ne sera jamais standardisée car son utilisation est limitée à cet effet. La fonction <code class='spip_code' dir='ltr'>element()</code> doit être préférée.</strong></p> <p>De plus, l'utilisation d'un dégradé linéaire CSS ne fonctionne pas sous Android inférieur à 3 avec <code class='spip_code' dir='ltr'>-webkit-box-reflect</code>. Une image transparente doit alors être utilisée.</p> <h2 class="spip">Et les autres navigateurs ?</h2> <p>Les autres navigateurs, comme IE ou Opera, ont plus ou moins le support des masques SVG (sur du contenu SVG). Ce qui bloque pour cette démo est donc l'impossibilité de répéter dynamiquement un élément de la page. Une duplication du contenu est donc à prévoir dans le cas de la mise en place de ces techniques pour un support multi-navigateurs.</p> <p>Le nouvel Opera, basé sur Blink (et donc Chromium) reconnait <code class='spip_code' dir='ltr'>-webkit-box-reflect</code>.</p> <p>Vous avez déjà mis en place ces techniques ? Vous comptez le faire bientôt ? Parlez-en sur le forum !</p> </div> Effet accordéon sur une image en CSS http://www.css3create.com/Effet-accordeon-sur-une-image-en-CSS http://www.css3create.com/Effet-accordeon-sur-une-image-en-CSS 2013-02-06T21:09:23Z text/html fr css3create https://www.css3create.com/IMG/artoff87.jpg Créer un effet de pliage avec les transformations CSS 3D http://www.css3create.com Transformations 3D linear-gradient :nth-child() <p>Utiliser les transformations 3D CSS et un peu de JavaScript pour <strong>créer un effet d'accordéon (ou paperfold)</strong> sur une image de manière dynamique.</p> - <a href="http://www.css3create.com/Transformations-3D" rel="tag">Transformations 3D</a> , <a href="http://www.css3create.com/linear-gradient" rel="tag">linear-gradient</a> , <a href="http://www.css3create.com/nth-child" rel="tag">:nth-child()</a> <img class='spip_logos' alt="" align="right" src="local/cache-vignettes/L150xH50/arton87-c3c26.jpg" width='150' height='50' onmouseover="this.src='local/cache-vignettes/L150xH150/artoff87-87335.jpg'" onmouseout="this.src='http://www.css3create.com/local/cache-vignettes/L150xH50/arton87-c3c26.jpg'" style='height:50px;width:150px;' /> <div class='rss_texte'><p>Utiliser les transformations 3D CSS et un peu de JavaScript pour <strong>créer un effet d'accordéon (ou paperfold)</strong> sur une image de manière dynamique.</p> <h2 class="spip">Code HTML de base</h2> <p>Pour réaliser cet effet, nous avons besoin d'une structure HTML minimaliste. Une simple image dans une balise <code class='spip_code' dir='ltr'><article></code> :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><article><br /> <img src="..." alt="..." /><br /> </article><br /> <p><br /> <label>Pliage <br /> <input type="range" min="200" max="500" value="400" step="10" /><br /> </label><br /> </p></code></div> <p>En fait, l'image sera remplacée en JavaScript. Elle restera présente seulement si JS est desactivé.</p> <h2 class="spip">Styles CSS</h2> <p>La majeure partie de l'effet va être réalisé en JavaScript pour nous permettre de modifier les styles CSS en temps-réel (lors de la modification du slider). Néanmoins, voici les styles nécessaires pour un bon départ :</p> <p>Modification de la largeur et de la hauteur de l'élément principal :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">article{<br /> width: 500px;<br /> height: 350px;<br /> }</code></div> <h2 class="spip">Initialisation du code JavaScript</h2> <div class="note-info"> Tout au long de cette démo, j'utilise le framework <a href="http://jquery.com/" class='spip_out' rel='external'>jQuery</a> pour réaliser le JavaScript, notamment pour sa simplicité d'utilisation. </div> <p>Commençons donc notre JS en récupérant la source de l'image (que nous allons ensuite masquer pour la réutiliser depuis <code class='spip_code' dir='ltr'>background-image</code>)</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-javascript">// recupere la source de l'image<br /> var src = $('article img').attr('src');</code></div> <p>Puis nous créeons une boucle qui va créer 10 éléments <code class='spip_code' dir='ltr'><div class="face"></code>. Dans chaque élément, une <code class='spip_code' dir='ltr'><div></code> est présente et contient un élément <code class='spip_code' dir='ltr'><span></code>. Ces éléments sont ensuite ajoutés dans la balise <code class='spip_code' dir='ltr'><article></code> en remplacement de <code class='spip_code' dir='ltr'><img></code>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-javascript">var elements = '';<br /> for( var i = 0; i < 10; i++){<br /> elements += '<div class="face">';<br /> elements += '<div><span></span></div>';<br /> elements += '</div>';<br /> }<br /> <br /> // remplace le contenu d'article<br /> $('article').html(elements);</code></div> <h2 class="spip">Ajout des CSS de base pour chaque face</h2> <p>Les faces qui viennent d'êtres injectées dans le DOM doivent êtres affichées les unes à coté des autres. Pour cela, nous utilisons <code class='spip_code' dir='ltr'>display: inline-block</code>. Nous spécifions aussi la taille de chaque face et un positionnement relatif (pour permettre un placement en absolu des enfants).</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">article .face{<br /> position: relative;<br /> display: inline-block;<br /> width: 10%;<br /> height: 100%;<br /> }</code></div> <p>Chaque enfant est alors positionné en absolu, et sa largeur est égale à 100% de la taille d'une face, soit 50px ici. (Cette valeur sera forcée pour être conservée à 50px en JavaScript, voir plus loin)</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">article .face div{<br /> position: absolute;<br /> width: 100%;<br /> height: 100%;<br /> }</code></div> <h2 class="spip">Application de l'image en arrière-plan de chaque face</h2> <p>Toujours lors de l'initialisation, nous devons donc afficher l'image en arrière-plan de chaque élément, puis modifier à chaque fois le <code class='spip_code' dir='ltr'>background-position</code> pour que <strong>l'ensemble des éléments affichés reconstituent l'image de départ</strong>. Cela va être fait en JS :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-javascript">// recupere la taille d'une face<br /> var widthFace = $('article').width() / 10; // 50px <br /> <br /> // pour chaque face<br /> $('.face').each(function(){<br /> // recupere sa position au sein de son parent<br /> var pos = $('article .face').index($(this));<br /> // calcul du background-position<br /> var bgPos = pos * widthFace + 'px';<br /> <br /> // application du CSS pour chaque élément enfant<br /> $(this).find('div').css({<br /> width: widthFace + 'px',<br /> backgroundImage: 'url('+src+')',<br /> backgroundPosition: '-'+bgPos+' 0' <br /> });<br /> });</code></div> <p>Donc, pour chaque élément <code class='spip_code' dir='ltr'><div class="face"></code>, nous récupérons sa position (<code class='spip_code' dir='ltr'>index()</code>), que nous multiplions par la taille d'une face. Cela nous permets de décaler l'image d'arrière-plan pour chaque élément. De plus, nous forçons la taille de chaque élément à rester 1/10e de la taille de départ de <code class='spip_code' dir='ltr'><article></code>. (Rappelez-vous en CSS nous avions fixé à 100% d'une face)</p> <p>À cet instant, notre image semble s'afficher entièrement, mais il faut bien avoir en tête que <strong>l'image est en fait utilisée par les 10 faces et que seule la position de l'arrière-plan change</strong>.</p> <h2 class="spip">Actions lors de la modification du slider</h2> <p>Maintenant que nos éléments sont initialisés, <strong>que doit-on faire lors de la modification du slider ?</strong> Plusieurs choses :</p> <ul class='spip'><li> récupérer la valeur du champ</li><li> modifier la taille de l'élément <code class='spip_code' dir='ltr'><article></code> en fonction de la valeur récupérée </li><li> récupérer la largeur de chaque face</li><li> calculer l'angle en fonction de cette largeur</li></ul> <p>Le tout bien entendu lors de la détection de l'évènement.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-javascript">// détection de l'evenement change() sur l'input<br /> $('input').change(function(){<br /> // recup la valeur de l'attribut value<br /> var width = $(this).val();<br /> <br /> // modification de la taille de article<br /> $('article').width(width + 'px');<br /> <br /> // recupere la taille d'une face initiale (taille du premier element d'une face)<br /> widthFaceInitiale = $('article .face div').get(0).width();<br /> // la taille d'une face en cours<br /> widthFace = width / 10;<br /> <br /> // calcul de l'angle<br /> var angle = Math.acos(widthFace / widthFaceInitiale) * 180 / Math.PI;<br /> }</code></div> <p>Ce qui est le plus complexe ici, c'est le calcul de l'angle. Pour ce faire, utilisons ce petit schéma qui représente notre accordéon vu de dessus :</p> <p><span class='spip_document_65 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L470xH364/01-5d13f.jpg' width='470' height='364' alt="" style='height:364px;width:470px;' /></span></p> <p>En noir, chaque <code class='spip_code' dir='ltr'><div class="face"></code> dont la largeur vaut <code class='spip_code' dir='ltr'>widthFace</code> (1/10e de l'élément parent). En bleu, les éléments enfants qui seront transformés et dont on cherche la valeur de l'angle. Ces éléments mesurent la taille fixé en JS lors de l'initialisation : 1/10e de l'article au départ : 50px.</p> <p>Notre angle se calcule donc de cette façon : <code class='spip_code' dir='ltr'>cosinus(angle) = widthFace / widthFaceInitiale</code>.</p> <div class="note-info"> Attention, en JavaScript les fonctions mathématiques sur les angles utilisent des radians. J'ai donc fait le choix ici de multiplier par 180, puis diviser par PI pour obtenir des angles en degrés. J'aurais pu aussi conserver cette valeur en radians, puis utiliser plus cette unité en CSS. </div> <h2 class="spip">Le CSS pour nos transformations 3D</h2> <p>Maintenant que notre angle se calcule lorsque l'élément <code class='spip_code' dir='ltr'><article></code> est redimensionné, appliquons nos <a href="http://www.css3create.com/Transformations-3D" class='spip_in'>transformations 3D</a>, mais avant définissons en CSS les propriétés de transformations :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">/* Ajout de la perspective 3D sur chaque face */<br /> article .face{<br /> ...<br /> perspective: 500px;<br /> }<br /> <br /> /* Les éléments transformés */<br /> article .face div{<br /> ...<br /> <br /> /* calage à droite */<br /> right: 0;<br /> <br /> /* origine de la transformation */<br /> transform-origin: top right;<br /> }<br /> <br /> /* Les éléments transformés IMPAIRS */<br /> article .face:nth-child(odd) div{<br /> ...<br /> <br /> /* calage à gauche */<br /> right: auto;<br /> left: 0;<br /> <br /> /* origine de la transformation */<br /> transform-origin: top left;<br /> }</code></div> <p>L'idée est la suivante : les éléments impairs sont positionnés à gauche au sein de leur parent, et seront transformés depuis le coin en haut à gauche. Les éléments pairs sont eux positionnés à droite dans leur parent et seront transformés depuis l'angle en haut à droite. Voir le schéma ci-dessus.</p> <h2 class="spip">Application des transformations 3D sur chaque élément</h2> <p>Pour appliquer chaque transformation 3D, nous utilisons l'angle calculé plus haut. <strong>Cet angle nous permets d'appliquer une rotation sur l'axe Y à chaque élément</strong>. Voici le code JavaScript :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-javascript">// détection de l'evenement change() sur l'input<br /> $('input').change(function(){<br /> ...<br /> <br /> // pour chaque élément dans une face,<br /> // on modifie son CSS en ajoutant une rotation sur l'axe Y de la valeur de l'angle<br /> $('.face div').css({<br /> transform: 'rotateY('+angle+'deg)'<br /> });<br /> <br /> // pour chaque élément dans une face IMPAIRE,<br /> // l'angle est négatif<br /> $('.face:nth-child(odd) div').css({<br /> transform: 'rotateY(-'+angle+'deg)'<br /> });<br /> <br /> }</code></div> <h2 class="spip">Correction de la perspective</h2> <p>Bien que les choses aient été faites correctement, les éléments semblent ne pas êtres tout à fait caler. Il se peut que de petits espaces apparaissent ou que les éléments se chevauchent. <strong>Cela est du à l'origine de la perspective : ce que l'on appelle le point de fuite</strong>. Corrigeons cela avec la propriété <a href="http://www.css3create.com/Transformations-3D" class='spip_in'><code class='spip_code' dir='ltr'>perspective-origin</code></a> depuis le CSS :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">article .face{<br /> ...<br /> perspective-origin: 0% 70%;<br /> }<br /> <br /> article .face:nth-child(odd){<br /> ...<br /> perspective-origin: 100% 70%;<br /> }</code></div> <p>Nous ajoutons donc le point de fuite sur la droite des éléments impairs (100%) et sur la gauche des éléments pairs (0%). La valeur 70% correspond à la hauteur de ce point sur chaque face.</p> <h2 class="spip">Ajout de réalisme : les ombres</h2> <p>Pour créer les ombres, et ainsi ajouter de la profondeur à notre démo, nous utilisons les éléments <code class='spip_code' dir='ltr'><span></code> au sein de chaque face. Ces éléments vont venir superposer les faces et nous y dessinons des dégradés CSS.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">/* tous les spans */<br /> article .face div span{<br /> position: absolute;<br /> width: 100%; height: 100%;<br /> background: black;<br /> background: linear-gradient( <br /> to right, <br /> transparent 0%, <br /> rgba(0,0,0,.5) 90%, <br /> black),<br /> rgba(0,0,0,.5);<br /> opacity: 0;<br /> }<br /> /* les spans IMPAIRS */<br /> article .face:nth-child(odd) div span{<br /> background: none;<br /> background: linear-gradient(<br /> to left, <br /> transparent 70%, <br /> rgba(0,0,0,.4) 90%, <br /> black);<br /> }<br /> /* le premier span */<br /> article .face:first-child div span{<br /> background: none;<br /> }</code></div> <p>Ces éléments sont masqués par défaut avec <code class='spip_code' dir='ltr'>opacity: 0</code>. C'est pourquoi il nous suffit de modifier cette opacité en JavaScript. Pour cela, récupérons les valeurs minimales, maximales, et la différence entre les deux pour appliquer une opacité qui sera égale à 0 lorsque la taille de <code class='spip_code' dir='ltr'><article></code> est maximale et égale à 1 lorsque la taille sera minimale.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-javascript">// détection de l'evenement change() sur l'input<br /> $('input').change(function(){<br /> ....<br /> <br /> // min et max<br /> var min = $input.attr('min'); // 500<br /> var max = $input.attr('max'); // 200<br /> // delta entre min et max<br /> var delta = max - min; // 300<br /> // largeur de article - min<br /> var width0 = width - min; // entre 0 et 300<br /> <br /> // opacity entre 0 (taille au minimum) et 1 (taille au maximum)<br /> var opacity = (width0 / 1000) / (delta / 1000);<br /> // inversion: 0 (taille au maximum) et 1 (taille au minimum)<br /> opacity = 1 - opacity;<br /> <br /> // application de l'opacite<br /> $(' .face div span').css({<br /> opacity: opacity<br /> });<br /> });</code></div> <h2 class="spip">Conclusion</h2> <p>J'espère que ce tutoriel vous aura appris quelques petites choses sur l'utilisation des transformations 3D en CSS, ainsi que sur la façon d'interagir avec depuis JavaScript. Pour terminer, j'attire votre attention sur le fait que <strong>cela reste une expérience</strong> et qu'il vous faut prendre le maximum de soin lors de la mise en place de telles techniques.</p> <p>Pensez notamment à <strong>des librairies comme <a href="http://modernizr.com/" class='spip_out' rel='external'>Modernizr</a> pour la détection de fonctionnalités</strong> (mettre en place les T3D seulement si le navigateur les reconnaît), et à <strong>l'utilisation des préfixes navigateurs (en CSS et en JS)</strong>.</p> <p>Note : j'utilise également le polyfill <a href="https://github.com/fryn/html5slider" class='spip_out' rel='external'>html5slider</a> pour générer un <code class='spip_code' dir='ltr'><input type="range" /></code> sur Firefox !</p> </div> Effet de brillance en CSS et SVG http://www.css3create.com/Effet-de-brillance-en-CSS-et-SVG http://www.css3create.com/Effet-de-brillance-en-CSS-et-SVG 2013-01-17T14:13:34Z text/html fr css3create https://www.css3create.com/IMG/artoff86.png Utiliser les masques, les pseudo-éléments et les dégradés CSS http://www.css3create.com Transitions CSS radial-gradient ::after, ::before <p>Créer un effet brillant qui mettra en valeur vos logos, images, bannières, etc. <strong>Une petite touche de bling-bling qui fait toujours son petit effet</strong>.</p> - <a href="http://www.css3create.com/transition" rel="tag">Transitions CSS</a> , <a href="http://www.css3create.com/radial-gradient" rel="tag">radial-gradient</a> , <a href="http://www.css3create.com/after-before" rel="tag"> ::after, ::before</a> <img class='spip_logos' alt="" align="right" src="local/cache-vignettes/L150xH50/arton86-ca60a.png" width='150' height='50' onmouseover="this.src='local/cache-vignettes/L150xH150/artoff86-196fc.png'" onmouseout="this.src='http://www.css3create.com/local/cache-vignettes/L150xH50/arton86-ca60a.png'" style='height:50px;width:150px;' /> <div class='rss_texte'><p>Créer un effet brillant qui mettra en valeur vos logos, images, bannières, etc. <strong>Une petite touche de bling-bling qui fait toujours son petit effet</strong>.</p> <h2 class="spip">Le HTML utilisé</h2> <p>Pour cette démo, nous avons besoin du code HTML suivant :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><div class="mask"><br /> <a href="#"><br /> <img src="http://..." alt="..." /><br /> </a><br /> </div></code></div> <h2 class="spip">Ajout d'un pseudo-élément</h2> <p>Pour créer le reflet, nous allons donc ajouter un pseudo-élément. Celui-ci va se superposer à notre élément, comme ceci :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.mask a::after{<br /> content: '';<br /> position: absolute;<br /> top: 0; left: 0; <br /> right: 0; bottom: 0;<br /> }</code></div> <p>Sur ce pseudo-élément, nous ajoutons un dégradé radial :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.mask a::after{<br /> ...<br /> background: radial-gradient(<br /> circle farthest-side at 0 0, <br /> rgba(255,255,255,0) 90%,<br /> rgba(255,255,255,.8) 98%,<br /> rgba(255,255,255,0) 100%<br /> ) no-repeat;<br /> }</code></div> <div class="note-info"> Note : Pensez aux préfixes de radial-gradient... </div> <h2 class="spip">Animation du pseudo-élément</h2> <p>Il nous reste maintenant à animer le déplacement du dégradé. Pour cela, utilisons les transitions CSS sur la propriété <code class='spip_code' dir='ltr'>background-position</code>. Il est possible d'écrire ceci :</p> <ul class='spip'><li> positionnement à gauche de -140px</li><li> lors du survol et du focus, positionnement à gauche de 10px + transition CSS</li></ul> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.mask a::after{<br /> ...<br /> background-position: -140px 0;<br /> }<br /> .mask a:hover::after,<br /> .mask a:focus::after{<br /> transition: background-position 1s;<br /> background-position: 10px 0;<br /> }</code></div> <div class="note-info"> <i>Note</i> : ce code fonctionne si votre navigateur supporte les transitions sur les pseudo-éléments (en janvier 2013 : Firefox 4+ et Chrome 26+). Pour la démo ici, j'ai utilisé une technique différente mais qui a l'avantage de fonctionner sur tous les navigateurs qui supportent les transitions. Lisez mon article pour <a href="http://blog.iamvdo.me/post/32892255091/animer-les-pseudo-elements-avec-les-transitions-css" class='spip_out' rel='external'>animer les pseudo-éléments en CSS</a> pour en savoir plus. Pensez aux préfixes également si nécessaire. </div> <h2 class="spip">Ajout d'un masque</h2> <p>Notre effet fonctionne mais n'est pas réaliste puisque il est visible dans l'ensemble du pseudo-élément. Nous allons donc limiter sa visibilité grâce à un masque. Pour cela, nous utilisons deux méthodes :</p> <ul class='spip'><li> utilisation de la propriété <code class='spip_code' dir='ltr'>-webkit-mask</code> en CSS</li><li> utilisation de la propriété SVG <code class='spip_code' dir='ltr'>mask</code> sur du contenu HTML</li></ul> <p>Cela nous offre un support sur un bon nombre de navigateur.</p> <div class="note-info"> <i>Note</i> : La propriété <code class='spip_code' dir='ltr'>-webkit-mask</code> est supportée depuis assez longtemps dans le moteur Webkit (Chrome, Safari, iOS, Android), mais n'est malheureusement pas un standard. Un module CSS3 est cependant à l'état de Working Draft depuis peu de temps au W3C. <br />La propriété <code class='spip_code' dir='ltr'>mask</code> est définie au sein du standard SVG est applicable sur des éléments HTML dans Firefox. Le module sur les masques CSS actuellement à l'étude repose sur ces propriétés SVG. Le support complet ne sera donc que grandissant. </div> <p>Voici le code CSS d'ajout des masques, ainsi que le code SVG à ajouter dans le document HTML5 ou dans un fichier séparé.</p> <ul class='spip'><li> Pour la propriété <code class='spip_code' dir='ltr'>-webkit-mask</code>, nous passons une URL dont la transparence sera utilisée comme masque. L'image du logo lui-même fait donc l'affaire.</li><li> Pour la propriété <code class='spip_code' dir='ltr'>mask</code> SVG, nous utilisons la même image mais entièrement remplie de blanc à l'endroit où nous souhaitons faire apparaître le reflet. En effet, les masques SVG se basent sur la luminance des couleurs et non la couleur elle-même. Le masque est référencé en CSS via son identifiant.</li></ul> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">.mask a::after{<br /> ...<br /> -webkit-mask: url('meme-image.png');<br /> mask: url('#id-masque');<br /> }</code></div> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><svg><br /> <mask id="id-masque"><br /> <image width="150" height="64" xlink:href="meme-image-en-blanc.png"><br /> </image> <br /> </mask><br /> </svg></code></div> <p>Voilà, j'espère que ce tutoriel vous a plu et que vous commencerez à regarder du coté des masques CSS et SVG, car les effets graphiques réalisables sont encore insoupçonnés. N'hésitez pas à en discuter dans les commentaires.</p> </div> Navigation à onglets fluides avec les transitions CSS http://www.css3create.com/Navigation-a-onglets-fluides-avec-les-transitions-CSS http://www.css3create.com/Navigation-a-onglets-fluides-avec-les-transitions-CSS 2012-10-25T12:56:41Z text/html fr css3create https://www.css3create.com/IMG/arton80.png Créer un menu avec display: table-cell http://www.css3create.com text-shadow box-shadow Transitions CSS border-radius rgba() transition-delay linear-gradient ::after, ::before :first-child :last-child <p>Créer un menu de navigation design grâce au <strong>modèle de positionnement tabulaire</strong>, aux <strong>effets graphiques</strong> et aux <strong>transitions de CSS3</strong>.</p> - <a href="http://www.css3create.com/text-shadow" rel="tag">text-shadow</a> , <a href="http://www.css3create.com/box-shadow" rel="tag">box-shadow</a> , <a href="http://www.css3create.com/transition" rel="tag">Transitions CSS</a> , <a href="http://www.css3create.com/border-radius" rel="tag">border-radius</a> , <a href="http://www.css3create.com/rgba" rel="tag">rgba()</a> , <a href="http://www.css3create.com/transition-delay" rel="tag">transition-delay</a> , <a href="http://www.css3create.com/linear-gradient" rel="tag">linear-gradient</a> , <a href="http://www.css3create.com/after-before" rel="tag"> ::after, ::before</a> , <a href="http://www.css3create.com/first-child" rel="tag">:first-child</a> , <a href="http://www.css3create.com/last-child" rel="tag">:last-child</a> <img class='spip_logos' alt="" align="right" src="http://www.css3create.com/local/cache-vignettes/L150xH50/arton80-ffea8.png" width='150' height='50' style='height:50px;width:150px;' /> <div class='rss_texte'><p>Créer un menu de navigation design grâce au <strong>modèle de positionnement tabulaire</strong>, aux <strong>effets graphiques</strong> et aux <strong>transitions de CSS3</strong>.</p> <p>Note : ce tutoriel a été initialement publié dans WebDesign Magazine Hors-série 16. Suivez pas à pas les 18 étapes de ce tutoriel.</p> <h2 class="spip">01 - La structure HTML</h2> <p><strong>La première étape de ce tutoriel consiste à créer notre structure HTML</strong>. Pour ce menu, nous avons besoin d'une liste de liens. Pour cela, nous utilisons un élément de liste non ordonnée (balise <code class='spip_code' dir='ltr'><ul></code>), lequel contient 5 éléments de liste (balise <code class='spip_code' dir='ltr'><li></code>). Chaque élément de cette liste est composé d'un lien hypertexte (balise <code class='spip_code' dir='ltr'><a></code>). Ouvrez donc votre éditeur préféré, et au sein d'un document HTML5 valide, copiez-collez ce code :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><ul><br /> <li><a href="#1">Home</a></li><br /> <li><a href="#2">Portfolio</a></li><br /> <li><a href="#3">News</a></li><br /> <li><a href="#4">Labs</a></li><br /> <li><a href="#5">Contact</a></li><br /> </ul></code></div> <p><span class='spip_document_55 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/01-menu-html-40dcf.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">02 - Le CSS de base...</h2> <p>Place aux CSS maintenant ! Pour démarrer, nous modifions la couleur d'arrière-plan de notre page. Utilisons un gris très foncé, compris entre <code class='spip_code' dir='ltr'>#222</code> et <code class='spip_code' dir='ltr'>#333</code>. Nous paramétrons également la taille et la famille de police :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">html{<br /> background: #2A2A2A;<br /> font: 1.1em sans-serif;<br /> }</code></div> <h2 class="spip">03 - Un menu horizontal</h2> <p>Pour passer notre menu vertical en menu horizontal, afin d'avoir chaque élément côte à côte, nous allons utiliser le modèle de boite tabulaire de CSS. Nous affichons donc notre <code class='spip_code' dir='ltr'><ul></code> en <code class='spip_code' dir='ltr'>display: table</code> en lui donnant une taille, puis nos éléments de liste en <code class='spip_code' dir='ltr'>display: table-cell</code>. <strong>De cette façon, chaque élément de liste mesure automatiquement 1/5e de la taille de son parent</strong>. Nous réglons aussi les marges internes et externes</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul{<br /> display: table;<br /> width: 500px;<br /> margin: 100px auto;<br /> padding: 0;<br /> }<br /> ul li{<br /> display: table-cell;<br /> }</code></div> <h2 class="spip">04 - Création d'un dégradé linéaire</h2> <p><strong>Ajoutons à présent un dégradé linéaire en CSS</strong> pour visualiser notre menu. Nous allons pour cela utiliser la fonction <a href="http://www.css3create.com/linear-gradient" class='spip_in'><code class='spip_code' dir='ltr'>linear-gradient</code></a> définie au sein de CSS3. Créons donc un dégradé du haut vers le bas (dégradé par défaut), d'un bleu clair vers un bleu plus foncé (les couleurs utilisées ici sont des mots-clés définis dans CSS3)</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul{<br /> ...<br /> background: linear-gradient(deepskyblue, dodgerblue);<br /> }</code></div> <p><span class='spip_document_56 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/04-menu-display-table-cell-0a0fe.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">05 - Compatibilité du dégradé</h2> <p>Bien que la syntaxe des dégradés soit finalisée, l'utilisation de préfixes est obligatoire pour fonctionner sur les navigateurs plus ancien qui sont sur le marché. Pour cela, nous ajoutons :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul{<br /> ...<br /> background: -webkit-linear-gradient(deepskyblue, dodgerblue);<br /> background: -moz-linear-gradient(deepskyblue, dodgerblue);<br /> background: -ms-linear-gradient(deepskyblue, dodgerblue);<br /> background: -o-linear-gradient(deepskyblue, dodgerblue);<br /> background: linear-gradient(deepskyblue, dodgerblue);<br /> }</code></div> <p>Note : les préfixes vendeurs sont <code class='spip_code' dir='ltr'>-webkit-</code> (pour Chrome, Safari, iOS, Android...), <code class='spip_code' dir='ltr'>-moz-</code> (pour Firefox), <code class='spip_code' dir='ltr'>-ms-</code> (pour Internet Explorer), et <code class='spip_code' dir='ltr'>-o-</code> (pour Opéra)</p> <h2 class="spip">06 - Dégradation gracieuse du dégradé</h2> <p>La prise en compte de la <strong>dégradation gracieuse</strong> nous permets d'offrir une <strong>alternative au dégradé CSS</strong> si le navigateur utilisé par l'internaute est trop ancien. Ici, nous appliquons simplement en premier lieu une couleur d'arrière-plan unie. Ainsi, les navigateurs non compatibles avec les dégradés utiliseront la première valeur, tandis que les autres surclasseront le style en suivant le principe de la cascade CSS, et appliqueront donc le dégradé.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul{<br /> ...<br /> background: dodgerblue;<br /> ...<br /> }</code></div> <p><span class='spip_document_57 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/06-compatibilite-degrade-css3-6ebba.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">07 - Ajout de coins arrondis et d'ombres</h2> <p>Pour adoucir notre design, nous ajoutons des angles arrondis à notre menu, à l'aide de la propriété <a href="http://www.css3create.com/border-radius" class='spip_in'><code class='spip_code' dir='ltr'>border-radius</code></a>. Nous ajoutons également <strong>plusieurs ombres qui nous aide à donner de la profondeur</strong>. Pour cela, la propriété <a href="http://www.css3create.com/box-shadow" class='spip_in'><code class='spip_code' dir='ltr'>box-shadow</code></a> accepte plusieurs ombres séparées par des espaces.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul{<br /> …<br /> border-radius: 3px;<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, .3),<br /> 0 3px 5px rgba(0, 0, 0, .2),<br /> 0 5px 10px rgba(0, 0, 0, .2),<br /> 0 20px 20px rgba(0, 0, 0, .15);<br /> }</code></div> <p>Note : ces ombres sont visibles du haut vers le bas.</p> <h2 class="spip">08 - Style des liens</h2> <p>Afin d'avoir quelque chose de plus propre, ajoutons des styles à nos liens contenus dans chaque élément de liste. Les liens sont donc affichés tel des blocs (afin que la taille de chaque lien corresponde à celle de son parent), le texte est centré, de couleur noire légèrement transparente et sans soulignement. Les marges internes sont définies indépendemment (la marge interne du bas est plus importante).</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a{<br /> display: block;<br /> text-align: center;<br /> color: rgba(0, 0, 0, .7); <br /> text-decoration: none;<br /> padding: 8px 8px 17px 8px;<br /> }</code></div> <p><span class='spip_document_58 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/08-menu-avec-liens-95f2b.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">09 - Effet de texte incrusté</h2> <p>Terminons le style des liens par l'ajout <strong>d'une ombre qui simule l'incrustation du texte</strong>. Pour cela, la propriété <a href="http://www.css3create.com/text-shadow" class='spip_in'><code class='spip_code' dir='ltr'>text-shadow</code></a> est utilisée, et une ombre vers le bas, de couleur blanche transparente à 40% est appliquée. Ainsi, notre oeil perçoit cette ombre comme étant une lumière venant du haut de l'écran.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a{<br /> ...<br /> text-shadow: 0 1px 0 rgba(255, 255, 255, .4);<br /> }</code></div> <p><span class='spip_document_59 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/09-texte-incruste-css-db031.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">10 - Effet 3D sur le menu</h2> <p>Pour <strong>simuler un effet 3D ou d'extrusion de notre menu</strong>, nous allons ajouter plusieurs ombres sur chaque lien. La première de ces ombres est une ombre interne claire sur le haut du lien (là où la lumière arrive), les autres sont une succession d'ombres décalées progressivement vers l'intérieur du lien à partir du bas. La couleur de chaque ombre est progressivement plus claire que la précédente.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a{<br /> …<br /> box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, <br /> 0 -1px 0 hsl(210, 100%, 32%) inset, <br /> 0 -2px 0 hsl(210, 100%, 38%) inset, <br /> 0 -3px 0 hsl(210, 100%, 44%) inset, <br /> 0 -4px 0 hsl(210, 100%, 50%) inset, <br /> 0 -5px 0 hsl(210, 100%, 60%) inset;<br /> }</code></div> <h2 class="spip">11 - Peaufinage de l'effet (coins arrondis)</h2> <p>Nous remarquons que sur le premier et le dernier lien du menu, les ombres ne suivent pas les arrondis. C'est normal, puisque ceux-ci ont été appliqués sur l'élément <code class='spip_code' dir='ltr'><ul></code>. Il nous faut donc ajouter également des coins arrondis sur le premier et le dernier lien de notre menu. Pour cela, nous utilisons les pseudo-classes <a href="http://www.css3create.com/first-child" class='spip_in'><code class='spip_code' dir='ltr'>:first-child</code></a> et <a href="http://www.css3create.com/last-child" class='spip_in'><code class='spip_code' dir='ltr'>:last-child</code></a>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li:first-child a{<br /> border-radius: 3px 0 0 3px;<br /> }<br /> ul li:last-child a{<br /> border-radius: 0 3px 3px 0;<br /> }</code></div> <p><span class='spip_document_60 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/10-effet-3d-bf773.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">12 - Différents états (<code class='spip_code' dir='ltr'>:hover</code>, <code class='spip_code' dir='ltr'>:focus</code>, <code class='spip_code' dir='ltr'>:active</code>)</h2> <p>Pour <strong>améliorer l'expérience utilisateur et ainsi aider l'internaute dans sa navigation</strong>, ajoutons différents états sur nos liens. Lors du survol avec la souris (ou lors du focus au clavier), nous ajoutons un arrière-plan plus clair, et nous éclaircissons également la couleur de chaque ombre de 10% :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a:hover, <br /> ul li a:focus{<br /> background: rgba(255,255,255,.2);<br /> box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, <br /> 0 -1px 0 hsl(210, 100%, 42%) inset, <br /> 0 -2px 0 hsl(210, 100%, 48%) inset, <br /> 0 -3px 0 hsl(210, 100%, 54%) inset, <br /> 0 -4px 0 hsl(210, 100%, 60%) inset, <br /> 0 -5px 0 hsl(210, 100%, 70%) inset; <br /> } </code></div> <p>Lors de l'activation du lien, l'arrière-plan devient plus sombre (utilisation d'un dégradé : voir plus haut pour la compatibilité), et la majorité des ombres disparaissent :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a:active{<br /> background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); <br /> box-shadow: 0 0 2px rgba(0,0,0,.3) inset;<br /> }</code></div> <p><span class='spip_document_61 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/13-etat-hover-active-3bf5f.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">13 - Modification des marges internes</h2> <p>Lors du survol (ou du focus clavier) sur un lien, nous modifions également la taille de ses marges internes gauche et droite. Cependant, <strong>cette augmentation ne modifie pas la taille du menu car nous utilisons le modèle de boite tabulaire</strong>. De fait, ce sont les éléments frères qui sont réduits.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a:hover,<br /> ul li a:focus{<br /> …<br /> padding: 8px 25px 17px 25px;<br /> }</code></div> <h2 class="spip">14 - Ajout des transitions</h2> <p>Le moment tant attendu ! Les transitions CSS vont nous permettre <strong>d'augmenter la taille des marges internes progressivement</strong>, et ainsi éviter l'effet brutal d'agrandissement. Pour ce faire, nous ajoutons donc une transition sur les marges internes (<code class='spip_code' dir='ltr'>padding</code>), d'une durée de 0.3 secondes :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a{<br /> …<br /> transition: padding .3s;<br /> } </code></div> <p>Cette transition est ajoutée sur les liens par défaut et non uniquement lors du survol/focus. Ainsi l'effet est visible dans tous les cas (lorsque l'on arrive sur le lien ET lorsque l'on quitte)</p> <p><span class='spip_document_62 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/15-ajout-transitions-css3-9d389.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">15 - Transitions sur d'autres propriétés</h2> <p>Il est également possible d'appliquer une transition sur la couleur d'arrière-plan de chaque lien. Il nous suffit pour cela de modifier la déclaration par :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a{<br /> …<br /> transition: padding .3s, background .3s;<br /> }<br /> <br /> ou plus simplement <br /> <br /> ul li a{<br /> …<br /> transition: all .3s;<br /> }</code></div> <p>Attention toutefois à l'utilisation du mot-clé <code class='spip_code' dir='ltr'>all</code> et donc aux transitions non souhaitées sur certaines propriétés.</p> <h2 class="spip">16 - Temporisation de la transition</h2> <p>Pour ajouter un effet supplémentaire, et encore augmenter l'expérience utilisateur, nous allons <strong>retarder le début de la transition lors du retour à l'état normal</strong>. Pour ce faire, nous spécifions un délai différent entre l'état normal et l'état survolé :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a{<br /> …<br /> transition: all .3s .1s;<br /> }<br /> <br /> ul li a:hover,<br /> ul li a:focus{<br /> …<br /> transition: all .3s 0s;<br /> }</code></div> <p>Ici, nous avons donc un délai de 0 seconde lors du passage à l'état survolé puis un délai de 0.1 seconde pour revenir à l'état normal.</p> <h2 class="spip">17 - Ajout d'une petite lumière</h2> <p>Pour cette dernière étape, nous utilisons le pseudo-élément <a href="http://www.css3create.com/after-before" class='spip_in'><code class='spip_code' dir='ltr'>::before</code></a> pour simuler une petite lumière. Pour cela, nous ajoutons notre contenu généré à chaque lien de notre menu. Ces pseudo-éléments sont positionnées en absolu au sein de leur parent en relatif :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a{<br /> ...<br /> position: relative;<br /> }<br /> ul li a::before{<br /> content: '';<br /> position: absolute;<br /> left: 50%;<br /> bottom: 9px;<br /> margin-left: -2px;<br /> width: 4px;<br /> height: 4px;<br /> border-radius: 50%;<br /> background: rgba(0, 0, 0, .5);<br /> }</code></div> <p>Note : les pseudo-éléments sont notés <code class='spip_code' dir='ltr'>::</code> en CSS3, alors qu'ils sont notés <code class='spip_code' dir='ltr'>:</code> en CSS2.1.</p> <h2 class="spip">18 - La lumière s'allume !</h2> <p>Enfin, la dernière action consiste à modifier la couleur d'arrière-plan de l'élément ajouté lors du survol avec la souris, ou lors du focus clavier. Une ombre est également ajoutée. La lumière semble alors s'allumer :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-css">ul li a:hover::before,<br /> ul li a:focus::before{<br /> background: white;<br /> box-shadow: 0 0 2px white, <br /> 0 -1px 0 rgba(0, 0, 0, .4);<br /> }</code></div> <p><span class='spip_document_63 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/18-pseudo-elements-2e993.jpg' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <p>J'espère que ce tutoriel vous a plus. Si c'est le cas, votez !</p> </div> Effet coverflow en full CSS http://www.css3create.com/Effet-coverflow-en-full-CSS http://www.css3create.com/Effet-coverflow-en-full-CSS 2012-10-09T08:07:36Z text/html fr css3create https://www.css3create.com/IMG/arton82.png Utiliser les sélecteurs avancés, les transitions et les transformations CSS. http://www.css3create.com Transitions CSS Transformations 3D :nth-child() :first-child :last-child :not() <code class='spip_code' dir='ltr'>~</code> (CSS3) <p>Mettre à profit <strong>les sélecteurs avancés CSS3</strong>, <strong>les transitions</strong> et les <strong>transformations 3D</strong> pour réaliser l'effet Coverflow bien connu de tous. <strong>Tutoriel pas à pas</strong>.</p> - <a href="http://www.css3create.com/transition" rel="tag">Transitions CSS</a> , <a href="http://www.css3create.com/Transformations-3D" rel="tag">Transformations 3D</a> , <a href="http://www.css3create.com/nth-child" rel="tag">:nth-child()</a> , <a href="http://www.css3create.com/first-child" rel="tag">:first-child</a> , <a href="http://www.css3create.com/last-child" rel="tag">:last-child</a> , <a href="http://www.css3create.com/not" rel="tag">:not()</a> , <a href="http://www.css3create.com/Selecteur-~-CSS3" rel="tag"> <code class='spip_code' dir='ltr'>~</code> (CSS3)</a> <img class='spip_logos' alt="" align="right" src="http://www.css3create.com/local/cache-vignettes/L150xH50/arton82-13058.png" width='150' height='50' style='height:50px;width:150px;' /> <div class='rss_texte'><p>Mettre à profit <strong>les sélecteurs avancés CSS3</strong>, <strong>les transitions</strong> et les <strong>transformations 3D</strong> pour réaliser l'effet Coverflow bien connu de tous. <strong>Tutoriel pas à pas</strong>.</p> <p>Cet effet est maintenant un peu dépassé. En tout cas, il est vu et revu. Le but de cette démo est de <strong>reproduire ce fameux menu de présentation, mais sans utilisation de JavaScript</strong>. Vous allez voir que ce n'est pas si simple... C'est un bon exercice pour qui veut tester quelques sélecteurs avancés, et commencer avec les transitions CSS et les transformations 3D.</p> <p>Note : Sur Firefox, pensez à désactiver les <code class='spip_code' dir='ltr'>box-shadow</code> (case à cocher) pour une expérience convenable. Voir à la fin de cet article pour l'explication.</p> <h2 class="spip">La structure de base</h2> <p>Une simple liste HTML est utilisée ici. Chaque élément de liste <code class='spip_code' dir='ltr'><li></code> est affiché en <code class='spip_code' dir='ltr'>display: inline-block</code> et dimensionné.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">ul{<br /> width: 560px;<br /> padding: 0;<br /> }<br /> ul li{<br /> display: inline-block;<br /> width: 112px;<br /> height: 165px;<br /> background: orangered;<br /> }</code></div> <p>Je ne m'étendrais pas plus sur les styles décoratifs, le principal étant ici la réalisation de l'effet.</p> <p><span class='spip_document_48 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/1-2-a80f9.png' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">Analyse de l'effet Coverflow</h2> <p>Analysons un peu ce que nous souhaitons au chargement de la page :</p> <ul class='spip'><li> L'élément central est affiché devant nous, légèrement agrandi</li><li> Les autres éléments « regardent » cet élément :<ul class='spip'><li> Les éléments précédents subissent une rotation d'un certain angle</li><li> Les éléments suivants subissent une rotation du même angle, mais en négatif</li></ul></li></ul> <p>Puis lors du survol, l'élément survolé prend le rôle de l'élément central. Les autres éléments se comportent de la même façon que précédemment.</p> <h2 class="spip">Mise en place initiale</h2> <p>Pour notre première mise en place, appliquons :</p> <ul class='spip'><li> une rotation de <code class='spip_code' dir='ltr'>45deg</code> à tous nos éléments</li><li> une rotation de <code class='spip_code' dir='ltr'>0deg</code> et une mise à l'échelle de notre élément central</li><li> une rotation de <code class='spip_code' dir='ltr'>-45deg</code> aux éléments qui suivent l'élément central. Pour cela, aidons-nous du sélecteur <a href="http://www.css3create.com/nth-child" class='spip_in'><code class='spip_code' dir='ltr'>:nth-child()</code></a> et du <a href="http://www.css3create.com/Selecteur-~-CSS3" class='spip_in'>sélecteur d'adjacence indirecte <code class='spip_code' dir='ltr'>~</code></a>.</li></ul> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* tous les elements */<br /> ul li{<br /> ...<br /> transform: rotateY(45deg);<br /> }<br /> /* l'element central */<br /> ul li:nth-child(3){<br /> ...<br /> transform: rotateY(0deg) scale(1.2);<br /> }<br /> /* les elements qui suivent l'element central */<br /> ul li:nth-child(3) ~ li{<br /> ...<br /> transform: rotateY(-45deg);<br /> }</code></div> <p><span class='spip_document_49 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/2-2-b288b.png' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <p>Pour une impression de 3D, il ne faut pas oublier de définir la <a href="http://www.css3create.com/Transformations-3D" class='spip_in'>perspective sur l'élément parent</a> :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">ul{<br /> ...<br /> perspective: 500px;<br /> }</code></div> <p><span class='spip_document_50 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/3-2-a6a02.png' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <h2 class="spip">Ajouter les différents états</h2> <p><strong>Attention, je vous préviens tout de suite, tout est une question de <a href="http://jeremie.patonnier.net/post/2009/08/18/La-preseance-des-selecteurs-CSS" class='spip_out' rel='external'>poids des sélecteurs !</a></strong></p> <p>Pour notre état survolé, il nous faut surclasser nos styles déjà appliqués. Tout d'abord, modifions l'état de l'élément survolé (avec la pseudo-classe <code class='spip_code' dir='ltr'>:hover</code>) :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* l'élément survolé */<br /> ul li:hover{<br /> ...<br /> transform: rotateY(0deg) scale(1.2);<br /> }</code></div> <p>Cela fonctionne mais deux problèmes se posent :</p> <ul class='spip'><li> <strong>1</strong> - l'élément central reste dans son état d'origine</li><li> <strong>2</strong> - les éléments 4 et 5 ne subissent pas le survol. En fait, le sélecteur <code class='spip_code' dir='ltr'>ul li:nth-child(3) ~ li</code> défini plus haut est prioritaire. Il faut donc surclasser ce style.</li></ul> <p><strong>Pour le problème 1</strong>, ajoutons simplement un style pour les éléments qui suivent l'élément survolé :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* les elements qui suivent l'element survole */<br /> ul li:hover ~ li{<br /> transform: rotateY(-45deg);<br /> }</code></div> <p><strong>Pour le problème 2</strong>, ajoutons un sélecteur qui cible de manière plus précise que précédemment. Ici, nous ciblons les éléments survolés qui sont précédés de l'élément central (<code class='spip_code' dir='ltr'>ul li:nth-child(3) ~ li:hover</code>).</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* les éléments survolés */<br /> ul li:hover,<br /> ul li:nth-child(3) ~ li:hover{<br /> ...<br /> transform: rotateY(0deg) scale(1.2);<br /> }</code></div> <p>Nous avons donc corrigé ces deux problèmes. Quoique, pas tout à fait ! En fait, un dernier problème se pose :</p> <ul class='spip'><li> <strong>3</strong> - l'élément central reste toujours dans son état d'origine lors du survol des éléments 4 et 5.</li></ul> <p><span class='spip_document_51 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH383/4-2-589e9.png' width='500' height='383' alt="" style='height:383px;width:500px;' /></span></p> <p><strong>Pour régler le problème 3</strong>, et comme il n'existe pas de sélecteur d'adjacence inverse, nous allons devoir ajouter un style pour les éléments non survolés, mais seulement lors du survol du parent <code class='spip_code' dir='ltr'><ul></code>. Ce qui nous donne :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* les elements non survoles, lors du survol du parent */<br /> ul:hover li:not(:hover){<br /> transform: rotateY(45deg);<br /> }</code></div> <p>Cela semble marcher, sauf que non ! Nous venons en effet de <strong>surclasser un style précédent : celui du problème 1</strong>. Il nous faut donc mettre à jour notre sélecteur pour que cet ancien style surclasse le précédent. Ainsi, ajoutons le survol sur le parent ou ajoutons un <code class='spip_code' dir='ltr'>id</code> (le principal étant de surclasser le style) :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* les elements qui suivent l'element survole */<br /> ul:hover li:hover ~ li{<br /> transform: rotateY(-45deg);<br /> }<br /> <br /> ou <br /> <br /> ul#id li:hover ~ li{<br /> transform: rotateY(-45deg);<br /> }</code></div> <p><strong>Hourra ! :)</strong> Notre Coverflow se comporte bien comme attendu. Mais règlons encore les quelques petits bugs restants.</p> <h2 class="spip">Empêcher le clignotement et ajouter les transitions</h2> <p>Nos éléments étant trop séparés les uns des autres (du aux <a href="http://www.css3create.com/Transformations-3D" class='spip_in'>transformations 3D</a>), cela provoque un clignotement pendant le déplacement puisque la souris sort de l'élément. Ajoutons alors une marge négative pour resserrer l'ensemble. Modifions également la taille du parent, pour que <a href="http://www.css3create.com/Transformations-3D" class='spip_in'>l'origine de la perspective</a> soit toujours centrée.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">ul{<br /> ...<br /> width: 500px;<br /> }<br /> ul li{<br /> ...<br /> margin-right: -15px;<br /> }</code></div> <p><span class='spip_document_54 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/5-2-5264e.png' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <p>Ajoutons ensuite les <a href="http://www.css3create.com/transition" class='spip_in'>transitions CSS</a> pour un effet plus réaliste :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">ul li{<br /> ...<br /> transition: all .45s;<br /> }</code></div> <p>Ici, toutes les propriétés sont animées en 0.45 seconde.</p> <h2 class="spip">Gérer l'empilement avec <code class='spip_code' dir='ltr'>z-index</code></h2> <p>Pour comprendre les problèmes d'empilement, modifions la couleur de certains éléments :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* les elements pairs */<br /> ul li:nth-child(odd){<br /> background: crimson;<br /> }</code></div> <p>Les éléments sont empilés en suivant leur ordre dans le code source (par défaut) et ce n'est pas ce que nous souhaitons.</p> <p><span class='spip_document_52 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/6-2-6c313.png' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <p>Utilisons alors la propriété <code class='spip_code' dir='ltr'>z-index</code> sur nos éléments. Attention, il faut également penser à ajouter <code class='spip_code' dir='ltr'>position: relative</code> sinon le <code class='spip_code' dir='ltr'>z-index</code> est sans effet.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* z-index de tous les elements */<br /> ul li{<br /> ...<br /> position: relative;<br /> z-index: 50;<br /> }<br /> <br /> /* z-index de l'element central (devant) */<br /> ul li:nth-child(3){<br /> ...<br /> z-index: 55;<br /> }<br /> <br /> /* z-index du premier et dernier element (derrière) */<br /> ul li:first-child,<br /> ul li:last-child{<br /> z-index: 45;<br /> }</code></div> <p><span class='spip_document_53 spip_documents spip_documents_center'> <img src='http://www.css3create.com/local/cache-vignettes/L500xH192/7-2-3f2b9.png' width='500' height='192' alt="" style='height:192px;width:500px;' /></span></p> <p>Enfin, modifions le <code class='spip_code' dir='ltr'>z-index</code> de l'élément survolé, et profitons-en pour surclasser le style du premier élément survolé :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* les éléments survolés */<br /> ul li:hover,<br /> ul li:first-child:hover,<br /> ul li:nth-child(3) ~ li:hover{<br /> ...<br /> z-index: 60;<br /> }</code></div> <p><strong>Ouf ! C'est terminé</strong>. N'hésitez à voter pour cet article s'il vous a plu et à en discuter sur le forum de l'article si vous avez des questions.</p> <h2 class="spip">Compatibilité</h2> <p>Le menu est fonctionnel dans tous les navigateurs récents, sauf Opera qui ne supporte pas encore les transformations 3D.</p> <p>Sur Firefox, un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=790239" class='spip_out' rel='external'>bug connu</a> provoque un clignotement des éléments. C'est le cas lorsque <code class='spip_code' dir='ltr'>box-shadow</code>, <code class='spip_code' dir='ltr'>transition</code> et <code class='spip_code' dir='ltr'>transform3D</code> sont utilisés conjointement. Pour une expérience convenable, pensez à désactiver les <code class='spip_code' dir='ltr'>box-shadow</code> (case à cocher)</p> <p>De plus, l'effet est limité à une utilisation à la souris. Il ne tient qu'à vous de mettre en place une utilisation tactile ou clavier.</p> </div> Barre de progression avec l'élément HTML5 <progress> http://www.css3create.com/Barre-de-progression-avec-l-element-HTML5-progress http://www.css3create.com/Barre-de-progression-avec-l-element-HTML5-progress 2012-09-25T12:13:57Z text/html fr css3create https://www.css3create.com/IMG/arton79.png Styler en CSS une barre de progression http://www.css3create.com box-shadow Dégradés CSS border-radius rgba() linear-gradient :not() <p><strong>Étude de cas</strong> pour mettre en forme via CSS les nouveaux éléments de formulaire HTML5 <code class='spip_code' dir='ltr'><progress></code> et <code class='spip_code' dir='ltr'><meter></code>. <strong>Le W3C ne définit encore aucune spécification.</strong></p> - <a href="http://www.css3create.com/box-shadow" rel="tag">box-shadow</a> , <a href="http://www.css3create.com/Degrades-CSS" rel="tag">Dégradés CSS</a> , <a href="http://www.css3create.com/border-radius" rel="tag">border-radius</a> , <a href="http://www.css3create.com/rgba" rel="tag">rgba()</a> , <a href="http://www.css3create.com/linear-gradient" rel="tag">linear-gradient</a> , <a href="http://www.css3create.com/not" rel="tag">:not()</a> <img class='spip_logos' alt="" align="right" src="http://www.css3create.com/local/cache-vignettes/L150xH50/arton79-a801f.png" width='150' height='50' style='height:50px;width:150px;' /> <div class='rss_texte'><p><strong>Étude de cas</strong> pour mettre en forme via CSS les nouveaux éléments de formulaire HTML5 <code class='spip_code' dir='ltr'><progress></code> et <code class='spip_code' dir='ltr'><meter></code>. <strong>Le W3C ne définit encore aucune spécification.</strong></p> <p>Cet article n'est qu'une étude de cas puisque qu'à l'heure actuelle (septembre 2012), il n'existe aucune spécification W3C définissant la mise en forme des éléments <code class="spip_code" class='spip_code' dir='ltr'><progress></code> ou <code class='spip_code' dir='ltr'><meter></code>. Cependant, certains navigateurs ont implémenté des pseudo-éléments/pseudo-classes permettant de mettre en forme ces éléments. Nous allons dons les tester. <strong>Mais attention, ces techniques ne sont pas pérennes et sont à prendre à titre expérimental.</strong> De plus, le rendu par défaut de ces éléments diffère d'un navigateur à l'autre et d'un OS à l'autre.</p> <h2 class="spip">Les éléments de base</h2> <p>Commençons tout d'abord par le HTML utile. Un balisage simple entoure notre élément <code class='spip_code' dir='ltr'><progress></code>, lequel reçoit 3 attributs : <code class='spip_code' dir='ltr'>value</code>, <code class='spip_code' dir='ltr'>min</code> et <code class='spip_code' dir='ltr'>max</code>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><div id="progress"><br /> <p>Retrieving data...<strong>0%</strong></p><br /> <progress value="5" min="0" max="100">0%</progress><br /> </div></code></div> <p>Nous ajoutons à ce code quelques CSS de base :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">#progress{<br /> width: 300px;<br /> margin: auto;<br /> }<br /> progress{<br /> display: inline-block;<br /> -moz-box-sizing: border-box;<br /> box-sizing: border-box;<br /> width: 300px;<br /> height: 20px;<br /> padding: 3px 3px 2px 3px;<br /> background: #333; <br /> background: -webkit-linear-gradient(#2d2d2d,#444);<br /> background: -moz-linear-gradient(#2d2d2d,#444);<br /> background: -o-linear-gradient(#2d2d2d,#444);<br /> background: linear-gradient(#2d2d2d,#444);<br /> border: 1px solid rgba(0,0,0,.5);<br /> border-radius: 15px;<br /> box-shadow: 0 1px 0 rgba(255,255,255,.2); <br /> }</code></div> <h2 class="spip">Cibler précisément avec les pseudo-éléments</h2> <p>Pour l'élément <code class='spip_code' dir='ltr'><progress></code>, il existe donc un (ou deux) pseudo-éléments. En fait, il en existe un pour Firefox, et deux pour Chrome. Ce sont :</p> <ul class='spip'><li> <code class='spip_code' dir='ltr'>::-moz-progress-bar</code> : la barre de progression</li><li> <code class='spip_code' dir='ltr'>::-webkit-progress-bar</code> : le conteneur de la barre de progression</li><li> <code class='spip_code' dir='ltr'>::-webkit-progress-value</code> : la barre de progression</li></ul> <p>Les deux approches peuvent se comprendre, mais pour nous, il va nous falloir dupliquer notre code. Cela nous donne donc :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* Style de la barre pour Firefox*/<br /> progress::-moz-progress-bar{<br /> border-radius:10px;<br /> background: #09c;<br /> background: <br /> -moz-repeating-linear-gradient(<br /> 45deg, <br /> rgba(255,255,255,.2) 0,<br /> rgba(255,255,255,.2) 10px, <br /> rgba(255,255,255,0) 10px,<br /> rgba(255,255,255,0) 20px<br /> ),<br /> -moz-linear-gradient(<br /> rgba(255,255,255,.1) 50%,<br /> rgba(255,255,255,0) 60%<br /> ),<br /> #09c;<br /> background: <br /> repeating-linear-gradient(<br /> 45deg, <br /> rgba(255,255,255,.2) 0,<br /> rgba(255,255,255,.2) 10px, <br /> rgba(255,255,255,0) 10px,<br /> rgba(255,255,255,0) 20px<br /> ),<br /> linear-gradient(<br /> rgba(255,255,255,.1) 50%,<br /> rgba(255,255,255,0) 60%<br /> ),<br /> #09c;<br /> background-size: 300px 20px, auto, auto;<br /> background-position: -300px 0, top, top;<br /> background-position: top right, top, top;<br /> box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, <br /> 0 -1px 0 rgba(0,0,0,.8) inset,<br /> 0 0 2px black;<br /> <br /> }<br /> <br /> /* Style de la barre pour Chrome*/<br /> progress::-webkit-progress-value{<br /> <br /> /* Code identique mais avec les bons préfixes! */<br /> <br /> }</code></div> <p>Nous avons donc le premier bloc (<code class='spip_code' dir='ltr'>progress::-moz-progress-bar</code>) et le second (<code class='spip_code' dir='ltr'>progress::-webkit-progress-value</code>) qui ciblent la barre. Dans Webkit (Chrome), il nous faut ôter la couleur de fond du conteneur de la barre (<code class='spip_code' dir='ltr'>progress::-webkit-progress-bar</code>) :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">/* Enlève la couleur d'arrière-plan */<br /> progress::-webkit-progress-bar{<br /> background: transparent;<br /> }</code></div> <h2 class="spip">Animer la barre de progression</h2> <p>La barre de progression est un élément de formulaire automatiquement créée grâce à ses attributs, notamment <code class='spip_code' dir='ltr'>value</code>. C'est pourquoi, il n'est pas possible de modifier cet attribut par CSS (<a href="http://lists.w3.org/Archives/Public/public-webapps/2012JulSep/0508.html" class='spip_out' rel='external'>en tout cas pour l'instant...</a>).</p> <p>Pour l'animation créée ici, le JavaScript est donc indispensable. Le code utilisé est le suivant (nécessite jQuery). Une simple fonction qui récupère la valeur de <code class='spip_code' dir='ltr'>value</code> et l'incrémente de 0.25 toutes les 40ms.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-javascript">function modifValues(){<br /> var val = $('#progress progress').attr('value');<br /> if(val>=100){val=5;}<br /> var newVal = val*1+0.25;<br /> var txt = Math.floor(newVal)+'%'; <br /> <br /> $('#progress progress').attr('value',newVal).text(txt);<br /> $('#progress strong').html(txt);<br /> }<br /> setInterval(function(){ modifValues(); },40);</code></div> <h2 class="spip">Dégradation gracieuse</h2> <p>Nous obtenons donc quelque chose de très similaire dans ces 2 navigateurs. Mais qu'en est-il des autres ?</p> <ul class='spip'><li> Safari ne supporte ni <code class='spip_code' dir='ltr'><progress></code>, ni <code class='spip_code' dir='ltr'><meter></code></li><li> Opéra 11+ les supporte mais il n'existe aucun moyen de les personnaliser. Par défaut, les barres de progression sont vertes (et ce sur tous les OS).</li><li> Internet Explorer 10+ les supporte également sans personnalisation. Cependant, la valeur de <code class='spip_code' dir='ltr'>color</code> est utilisée pour l'arrière-plan de la barre de progression. Il n'est donc pas possible d'y inclure de dégradé, ni d'image.</li><li> Sans oublier les navigateurs plus anciens</li></ul> <p>Malgré ces limitations, il est envisageable de simuler les barres de progression, soit grâce au <a href="http://lea.verou.me/2011/07/a-polyfill-for-html5-progress-element-the-obsessive-perfectionist-way/" class='spip_out' rel='external'>polyfill de Lea Verou</a> ou plus simplement, en stylant un élément qui se base sur la valeur de <code class='spip_code' dir='ltr'>value</code>.</p> <p>Pour cela, ajoutons un élément au sein de <code class='spip_code' dir='ltr'><progress></code>. Celui-ci n'est affiché que si l'élément <code class='spip_code' dir='ltr'><progress></code> n'est pas supporté. Ici, c'est un <code class='spip_code' dir='ltr'><span></code>.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="language-markup"><div id="progress"><br /> <p>Retrieving data...<strong>0%</strong></p><br /> <progress value="5" min="0" max="100"><span></span></progress><br /> </div></code></div> <p>Ensuite, cet élément est stylé par rapport à la valeur de <code class='spip_code' dir='ltr'>value</code>, de cette façon :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">progress[value='100'] span{<br /> width: 100%;<br /> }<br /> progress[value^='9']:not([value^='9.']):not([value='9']) span{<br /> width: 95%;<br /> }<br /> progress[value^='8']:not([value^='8.']):not([value='8']) span{<br /> width: 85%;<br /> }<br /> progress[value^='7']:not([value^='7.']):not([value='7']) span{<br /> width: 75%;<br /> }<br /> progress[value^='6']:not([value^='6.']):not([value='6']) span{<br /> width: 65%;<br /> }<br /> progress[value^='5']:not([value^='5.']):not([value='5']) span{<br /> width: 55%;<br /> }<br /> progress[value^='4']:not([value^='4.']):not([value='4']) span{<br /> width: 45%;<br /> }<br /> progress[value^='3']:not([value^='3.']):not([value='3']) span{<br /> width: 35%;<br /> }<br /> progress[value^='2']:not([value^='2.']):not([value='2']) span{<br /> width: 25%;<br /> }<br /> progress[value^='1']:not([value^='1.']):not([value='1']):not([value='100']) span{<br /> width: 15%;<br /> }</code></div> <p>Chaque bloc se lit de cette façon : élément <code class='spip_code' dir='ltr'><span></code>, contenu dans un élément <code class='spip_code' dir='ltr'><progress></code> dont l'attribut <code class='spip_code' dir='ltr'>value</code> commence par 'N', mais qui n'est pas 'N', ni 'N.' (chiffres à virgule).</p> <p>Avec cette syntaxe, nous pouvons cibler la valeur de 10 à 19, puis de 20 à 29, et ainsi de suite...</p> <p>Enfin, l'ajout de transitions CSS permet de simuler une progression dynamique :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code class="css">progress span{<br /> -webkit-transition: width 1.6s linear;<br /> -moz-transition: width 1.6s linear;<br /> -o-transition: width 1.6s linear;<br /> transition: width 1.6s linear;<br /> }</code></div> <p>Bien entendu, pour les navigateurs encore plus ancien, l'utilisation d'un polyfill est nécessaire, ou alors le contenu textuel de progression doit toujours rester présent.</p> <h2 class="spip">Les autres pseudo-éléments/pseudo-classes</h2> <p>D'autres pseudo-éléments/pseudo- classes sont disponibles et s'appliquent à l'élément <code class='spip_code' dir='ltr'><meter></code>. C'est le cas de :</p> <ul class='spip'><li> <code class='spip_code' dir='ltr'>:-moz-meter-optimum</code>, <code class='spip_code' dir='ltr'>:-moz-meter-sub-optimum</code> et <code class='spip_code' dir='ltr'>:-moz-meter-sub-sub-optimum</code></li><li> <code class='spip_code' dir='ltr'>::-webkit-meter-optimum-value</code>, <code class='spip_code' dir='ltr'>::-webkit-meter-suboptimum-value</code> et <code class='spip_code' dir='ltr'>::-webkit-meter-even-less-good-value</code></li></ul> <p>Coté standard, les pseudo-classes définies dans le <a href="http://www.w3.org/TR/css3-ui" class='spip_out' rel='external'>module User Interface</a> ne s'appliquent pas (encore ?) à ces éléments, sauf <code class='spip_code' dir='ltr'>:indeterminate</code>. Cette pseudo-classe permet de mettre en forme un élément dont l'attribut <code class='spip_code' dir='ltr'>value</code> n'est pas conforme ou non présent.</p> <h2 class="spip">Conclusion</h2> <p>Si vous souhaitez approfondir le sujet, bien que ce soit encore non homogène, voici quelques liens intéressants :</p> <ul class='spip'><li> <a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" class='spip_out' rel='external'>Les pseudo-classes Webkit</a></li><li> <a href="http://caniuse.com/#feat=progressmeter" class='spip_out' rel='external'>Support de <code class='spip_code' dir='ltr'><progress></code> et <code class='spip_code' dir='ltr'><meter></code></a></li><li> L'élément <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/progress" class='spip_out' rel='external'><code class='spip_code' dir='ltr'><progress></code> sur MDN</a></li></ul> <p>Une suggestion ? Une amélioration ? Parlez-en sur le forum...</p> </div>