Bookmark Bronco2016-11-24T17:52:00+01:00http://warriordudimanche.net/shaarli/http://warriordudimanche.net/shaarli/http://warriordudimanche.net/shaarli/10 principles for smooth web animations – Gyroscopehttp://warriordudimanche.net/shaarli/?t95-_A2016-11-24T17:52:00+01:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/10-principles-for-smooth-web-animations-gyroscope-motion.png) <br />
Traduction rapide pour mémoire de ces 10 principes pour des animations fluides...<br />
<br />
<br />
1. Ne change jamais d'autres propriétés que **_opacity_** ou **_transform_** ! (même si ça a l'air chouette, ne le fais pas !)<br />
2. Cache les objets avec **_opacity:0_** et **_pointer-events: none_** pour éviter les rendus inutiles<br />
3. N'anime pas tout en **_même temps_** (à la place fais des chorégraphies: déclenche une série d'animations par l'ajout d'une classe, chaque animation ayant son propre **_transition-delay_**).<br />
4. Augmente les transition-delay pour créer un effet de chorégraphie.<br />
5. Utilise un modificateur de délai global pour créer tes animations en slow motion puis accélérer ensuite<br />
6. Filme tes animations pour avoir une perspective à la troisième personne.<br />
7. L'activité réseau peut ralentir les animations: pense au preload or temporise les grosses requêtes HTTP<br />
8. N'attache pas d'animations au défilement de page et évite de créer tes propres scrollbars<br />
9. Teste sur mobile tôt et souvent.<br />
10. Teste sur des appareils différents.<br />
<br />
<br />
Via Kalvn's linksSource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="http://warriordudimanche.net/shaarli/?t95-_A">Permalink</a>)Hero Patternshttp://warriordudimanche.net/shaarli/?u6MNkw2016-10-21T17:41:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/hero-patterns-avatar.png) <br />
Vachement bien ça: on peut même adapter les couleurs ! ../.plugins/WDD_replace/img/normal/content.png Via Marquetapages ShazenSource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="http://warriordudimanche.net/shaarli/?u6MNkw">Permalink</a>)CSS ICON -- project by Wenting Zhanghttp://warriordudimanche.net/shaarli/?S3SGWg2016-10-18T10:18:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/css-icon-project-by-wenting-zhang-shia-magic.gif) <br />
Fascinant d'efficacité, d’ingéniosité et de concision... ../.plugins/WDD_replace/img/normal/oooh.png ../.plugins/WDD_replace/img/normal/siffle.png <br />
avec quelques classes css, il fait des icônes... ../.plugins/WDD_replace/img/normal/wow.png <br />
Du coup, c'est plus léger que les font/img, plus élégant, on peut changer la couleur...<br />
Via bookmarks.xavierbarbotSource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="http://warriordudimanche.net/shaarli/?S3SGWg">Permalink</a>)Punch-Out Avatar | Adrian Rosellihttp://warriordudimanche.net/shaarli/?ffi3aA2016-06-13T20:53:20+02:00hoooo c'est chouette ! Bonne idée<br>(<a href="http://warriordudimanche.net/shaarli/?ffi3aA">Permalink</a>)Remove forced yellow input background in Chrome / Webagilityhttp://warriordudimanche.net/shaarli/?ye1GDQ2016-06-13T08:46:36+02:00Con de Chromium avec son fond jaune merdique sur les input pré remplis ! <br />
Un "bug" de 2008, quoi, chier...<br />
Donc, un palliatif est d'utiliser un box shadow de la couleur qu'on veut:<br />
```<br />
input:-webkit-autofill {<br />
-webkit-box-shadow: 0 0 0px 1000px white inset;<br />
}<br />
```<br />
<br />
Par contre, comme le dit l'auteur : « if you desperately need transparent background color you're doomed»<br>(<a href="http://warriordudimanche.net/shaarli/?ye1GDQ">Permalink</a>)Créer un menu sticky avec JavaScript et CSS - CSS / CSS3 | Creative Juizhttp://warriordudimanche.net/shaarli/?yuggNQ2015-11-13T08:54:19+01:00à regarder plus tard....<br>(<a href="http://warriordudimanche.net/shaarli/?yuggNQ">Permalink</a>)How to make complex icons with only CSS — Truth Labs — Mediumhttp://warriordudimanche.net/shaarli/?aaME6A2015-09-22T16:18:05+02:00Oooooh oO du coup on comprend mieux...<br />
<br />
edit: un complément, http://nicolasgallagher.com/pure-css-gui-icons/demo/<br>(<a href="http://warriordudimanche.net/shaarli/?aaME6A">Permalink</a>)Solved by Flexbox — Cleaner, hack-free CSShttp://warriordudimanche.net/shaarli/?HcoNqg2015-09-21T09:34:23+02:00Je me regarderai ça ce soir, tranquilou...<br>(<a href="http://warriordudimanche.net/shaarli/?HcoNqg">Permalink</a>)Use Cases for CSS Variables | James Steinbachhttp://warriordudimanche.net/shaarli/?-03RNA2015-09-07T12:44:51+02:00Bien sympa, les variables en css, mais tant que ce n'est pas universellement supporté, ça ne sert à rien...<br>(<a href="http://warriordudimanche.net/shaarli/?-03RNA">Permalink</a>)[CSS] Quelques possibilités apportées par le modèle « flexbox » - Le Hollandais Volanthttp://warriordudimanche.net/shaarli/?ue7YtQ2015-08-23T13:33:43+02:00Faut que je m'y mette, je fais régulièrement partie des délinquants ! ^^<br>(<a href="http://warriordudimanche.net/shaarli/?ue7YtQ">Permalink</a>)Footer Sticky At Bottom With Flexible Height (via le hollandais volant)http://warriordudimanche.net/shaarli/?kv1OIw2015-08-18T08:37:30+02:00\o/ merci Timo !<br>(<a href="http://warriordudimanche.net/shaarli/?kv1OIw">Permalink</a>)[CSS] Note centrer une image dans un bloc - Le Hollandais Volanthttp://warriordudimanche.net/shaarli/?8rHJKg2015-07-31T20:07:53+02:00Tiens, j'ai eu besoin d'une astuce comme ça ya pas longtemps : merci !<br />
Drirect dans mon snippetvamp ;-)<br />
http://snippetvamp.warriordudimanche.net/snippetvamp.php?snippet=55bbb92ea7faf<br>(<a href="http://warriordudimanche.net/shaarli/?8rHJKg">Permalink</a>)7 Rules for Creating Gorgeous UI (Part 1) — Mediumhttp://warriordudimanche.net/shaarli/?uHF9mQ2015-07-09T10:32:21+02:00Je croyais avoir déjà coudifié... donc, un résumé:<br />
<br />
1- La lumière vient d'en haut: donner un effet 3d subtil en creux ou en relief <br />
- en creux: text input, boutons pressés, ascenseur, bouton radio, checkbox<br />
- en relief: boutons non pressés, bouton d'ascenseur, dropdown, cards, boutons d'un radio selectionné, popups<br />
<br />
2- Noir et blanc d'abord: <br />
- réaliser l'ensemble en N&B puis au final ajouter la couleur mais toujours avec un objectif précis (ça, il faudra que je le retienne ^^)<br />
- ajout de la couleur: une seule couleur et ses variations (saturation ou luminosité) pour conserver la pertinence de la couleur<br />
<br />
3- Doubler les espaces vides: espace entre les lignes, entre les éléments, entre les groupes d'éléments... ex: entre les items d'un menu, 2x la hauteur du texte.<br />
<br />
4- Placer du texte au-dessus d'une image: <br />
- directement dessus avec une image sombre et un texte blanc, lisible dans toutes les dimensions d'écran<br />
- ajouter un overlay pour pouvoir gérer l'assombrissement (marche aussi très bien avec les thumbnails)<br />
- texte avec fond de couleur ou noir (semi transparent ou pas)<br />
- fond flouté (div avec le même fond flou ou texte placé sur une partie floue de l'image)<br />
- dégradé doux vers une couleur unique (en général en footer) : permet d'améliorer la lisibilité du texte sans altérer l'image (effet possible via css: un fond dégradé de noir rgba de 0% à 20% d'opacité par exemple)<br />
- on peut mélanger le flou et le dégradé<br />
<br />
5- Faire ressortir le texte: <br />
- diviser le css du texte entre ce qui en accroît la visibilité (gras, grand, capitalisé, italique, plus de marge ou de contraste etc) et ce qui la décroît (petit, fin, moins contrasté, moins de marge etc).<br />
- hover/selected: jouer sur la couleur du texte, la couleur du fond, l'ombre, le soulignage, relief/creux, le changement de contraste (blanc>coloré ou coloré>blanc avec un fond subtilement assombri)<br />
<br />
6- Utiliser les bonnes polices:<br />
- clair et simple<br />
- peu de polices différentes<br />
- icon fonts<br />
<br />
7- Chercher l'inspiration: observer les UI qu'on trouve belles et chercher pourquoi pour s'en inspirer<br>(<a href="http://warriordudimanche.net/shaarli/?uHF9mQ">Permalink</a>)Without JavaScript Carousel (via Liens Ecyseo)http://warriordudimanche.net/shaarli/?pjjWDA2015-06-03T11:13:08+02:00C'est beau, j'en chialerais ^^ merci ;-) (hop dans mon snippetvamp: http://snippetvamp.warriordudimanche.net/snippetvamp.php?snippet=556ec5810fd0f )<br />
{code<br />
<div class="carousel"><br />
<div class="carousel-inner"><br />
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"/><br />
<div class="carousel-item"><br />
<img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without"><br />
</div><br />
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""/><br />
<div class="carousel-item"><br />
<img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript"><br />
</div><br />
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""/><br />
<div class="carousel-item"><br />
<img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel"><br />
</div><br />
<label for="carousel-3" class="carousel-control prev control-1">‹</label><br />
<label for="carousel-2" class="carousel-control next control-1">›</label><br />
<label for="carousel-1" class="carousel-control prev control-2">‹</label><br />
<label for="carousel-3" class="carousel-control next control-2">›</label><br />
<label for="carousel-2" class="carousel-control prev control-3">‹</label><br />
<label for="carousel-1" class="carousel-control next control-3">›</label><br />
<ol class="carousel-indicators"><br />
<li><br />
<label for="carousel-1" class="carousel-bullet">•</label><br />
</li><br />
<li><br />
<label for="carousel-2" class="carousel-bullet">•</label><br />
</li><br />
<li><br />
<label for="carousel-3" class="carousel-bullet">•</label><br />
</li><br />
</ol><br />
</div><br />
</div><br />
<br />
<br />
<style>html, body {<br />
margin: 0px;<br />
padding: 0px;<br />
background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");<br />
}<br />
<br />
.carousel {<br />
position: relative;<br />
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);<br />
margin-top: 26px;<br />
}<br />
<br />
.carousel-inner {<br />
position: relative;<br />
overflow: hidden;<br />
width: 100%;<br />
}<br />
<br />
.carousel-open:checked + .carousel-item {<br />
position: static;<br />
opacity: 100;<br />
}<br />
<br />
.carousel-item {<br />
position: absolute;<br />
opacity: 0;<br />
-webkit-transition: opacity 0.6s ease-out;<br />
transition: opacity 0.6s ease-out;<br />
}<br />
<br />
.carousel-item img {<br />
display: block;<br />
height: auto;<br />
max-width: 100%;<br />
}<br />
<br />
.carousel-control {<br />
background: rgba(0, 0, 0, 0.28);<br />
border-radius: 50%;<br />
color: #fff;<br />
cursor: pointer;<br />
display: none;<br />
font-size: 40px;<br />
height: 40px;<br />
line-height: 35px;<br />
position: absolute;<br />
top: 50%;<br />
-webkit-transform: translate(0, -50%);<br />
cursor: pointer;<br />
-ms-transform: translate(0, -50%);<br />
transform: translate(0, -50%);<br />
text-align: center;<br />
width: 40px;<br />
z-index: 10;<br />
}<br />
<br />
.carousel-control.prev {<br />
left: 2%;<br />
}<br />
<br />
.carousel-control.next {<br />
right: 2%;<br />
}<br />
<br />
.carousel-control:hover {<br />
background: rgba(0, 0, 0, 0.8);<br />
color: #aaaaaa;<br />
}<br />
<br />
#carousel-1:checked ~ .control-1,<br />
#carousel-2:checked ~ .control-2,<br />
#carousel-3:checked ~ .control-3 {<br />
display: block;<br />
}<br />
<br />
.carousel-indicators {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0;<br />
position: absolute;<br />
bottom: 2%;<br />
left: 0;<br />
right: 0;<br />
text-align: center;<br />
z-index: 10;<br />
}<br />
<br />
.carousel-indicators li {<br />
display: inline-block;<br />
margin: 0 5px;<br />
}<br />
<br />
.carousel-bullet {<br />
color: #fff;<br />
cursor: pointer;<br />
display: block;<br />
font-size: 35px;<br />
}<br />
<br />
.carousel-bullet:hover {<br />
color: #aaaaaa;<br />
}<br />
<br />
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,<br />
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,<br />
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {<br />
color: #428bca;<br />
}<br />
<br />
#title {<br />
width: 100%;<br />
position: absolute;<br />
padding: 0px;<br />
margin: 0px auto;<br />
text-align: center;<br />
font-size: 27px;<br />
color: rgba(255, 255, 255, 1);<br />
font-family: 'Open Sans', sans-serif;<br />
z-index: 9999;<br />
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);<br />
}<br />
</style><br />
<br />
code}<br>(<a href="http://warriordudimanche.net/shaarli/?pjjWDA">Permalink</a>)More Elegant Fix for Jumping Scrollbar Issuehttp://warriordudimanche.net/shaarli/?1DxE6w2015-04-06T15:11:11+02:00Une astuce pour éviter le saut horizontal quand le contenu d'une page web dépasse soudainement la hauteur visible et que la scrollbar apparaît.<br />
Je connaissais html { overflow-y: scroll; } mais pas html { margin-left: calc(100vw - 100%); <br />
Bon, ben les deux marchent même s'il semble que le second soit plus "élégant" ^^<br>(<a href="http://warriordudimanche.net/shaarli/?1DxE6w">Permalink</a>)A propos de Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou (Liens Ecyseo)http://warriordudimanche.net/shaarli/?XQ6VMw2015-02-26T12:57:48+01:00Oui, elle est brillante, astucieuse, pro et en plus mignonne comme un coeur ^^<br />
Son dabblet est une tuerie ^^<br />
<br />
Lien vers le message anterieur http://bookmarks.ecyseo.net/?cyz2cQ<br>(<a href="http://warriordudimanche.net/shaarli/?XQ6VMw">Permalink</a>)Astuce : Accélérez vos polices d'icônes ! (via Alsacreations.com - Apprendre)http://warriordudimanche.net/shaarli/?x2ypAw2015-02-09T17:48:46+01:00je me note ça pour plus tard...<br />
une astuce pour intégrer seulement les webfonts nécessaires directement dans le fichier css...<br>(<a href="http://warriordudimanche.net/shaarli/?x2ypAw">Permalink</a>)CSS Reference | Codrops (via Liens Ecyseo)http://warriordudimanche.net/shaarli/?l3UV6Q2015-02-05T08:40:21+01:00C'est juste... beau ^^<br>(<a href="http://warriordudimanche.net/shaarli/?l3UV6Q">Permalink</a>)Fun with line-height! | CSS-Trickshttp://warriordudimanche.net/shaarli/?aVsBlw2015-01-27T17:52:31+01:00Amusants effets en css<br>(<a href="http://warriordudimanche.net/shaarli/?aVsBlw">Permalink</a>)BADA55.io - CSS hex color words for web developers (via hemltreppler.net/shaarli )http://warriordudimanche.net/shaarli/?mizuNQ2014-11-16T13:43:52+01:00Oh ça j'aime bien ! ^^ <br />
Les couleurs correspondantes à certains mots en anglais... <br />
le premier: booops (#B000B5) :-P<br>(<a href="http://warriordudimanche.net/shaarli/?mizuNQ">Permalink</a>)Créez vos animations CSS3 en quelques clics « Korbenhttp://warriordudimanche.net/shaarli/?ZP_RaA2014-06-12T19:13:23+02:00peut-être sympa ça...<br>(<a href="http://warriordudimanche.net/shaarli/?ZP_RaA">Permalink</a>)Article : La fonction calc() en CSS (via Alsacreations.com - Apprendre)http://warriordudimanche.net/shaarli/?vsDBSw2014-05-20T19:26:16+02:00Parcouru en diagonale, je reviendrai dessus plus tard -> coude<br>(<a href="http://warriordudimanche.net/shaarli/?vsDBSw">Permalink</a>)A propos de Doit-on justifier le texte sur un site internet ? (le hollandais volant)http://warriordudimanche.net/shaarli/?3_OQ5w2014-03-19T12:58:32+01:00Sinon, il y a des trucs du genre ça<br />
https://github.com/aristus/sweet-justice<br />
<br />
pour 3ko de js (+jquery) ça fait une justification propre...<br />
<br />
<br />
<br />
Lien vers le message anterieur http://lehollandaisvolant.net/?mode=links&id=20140319121006<br>(<a href="http://warriordudimanche.net/shaarli/?3_OQ5w">Permalink</a>)Flexbox Bar Navigation Demo | CSS-Trickshttp://warriordudimanche.net/shaarli/?WcOqnA2014-03-06T12:27:25+01:00Flexbox c'est bô, flexbox c'est simple... <br />
Mais bon, il faut quand même prévoir un fallback pour un truc compatible avec tout http://caniuse.com/flexbox<br>(<a href="http://warriordudimanche.net/shaarli/?WcOqnA">Permalink</a>)CSS viewport units: vw, vh, vmin and vmax - Dev.Opera (via Liens en vrac de sebsauvage)http://warriordudimanche.net/shaarli/?ILNDrQ2014-02-02T09:11:57+01:00Ooooh que ça a l'air intéressant, ça, oooooh ! -> coude ! riditléteur<br>(<a href="http://warriordudimanche.net/shaarli/?ILNDrQ">Permalink</a>)demosthenes.info – Which CSS Measurements To Use Whenhttp://warriordudimanche.net/shaarli/?4NXmlA2013-11-04T17:37:44+01:00Tiens, un très bon résumé des unités en css et de leur contexte d'utilisation.<br>(<a href="http://warriordudimanche.net/shaarli/?4NXmlA">Permalink</a>)"bug" overflow hidden sous firefox.http://warriordudimanche.net/shaarli/?0RLYmg2013-10-16T19:59:21+02:00Au passage, si ça peut servir:<br />
en cas de bug d'affichage sous firefox quand on met overflow:hidden et que le contenu supposé invisible ne l'est pas, il suffit d'ajouter overflow: -moz-hidden-unscrollable; et ça fonctionne...<br>(<a href="http://warriordudimanche.net/shaarli/?0RLYmg">Permalink</a>)Guide des feuilles de styles CSS, conseils et bonnes pratiques (via http://links.cochi.se/)http://warriordudimanche.net/shaarli/?RpdVpg2013-08-17T15:26:47+02:00un très bon tuto avec d'excellentes remarques.<br>(<a href="http://warriordudimanche.net/shaarli/?RpdVpg">Permalink</a>)Note : les préfixes CSS devenues inutiles en 2013http://warriordudimanche.net/shaarli/?jhgSYA2013-08-08T08:07:24+02:00Je note, pour la prochaine version d'auto_css, un jour ^^<br />
Merci Timo ;)<br>(<a href="http://warriordudimanche.net/shaarli/?jhgSYA">Permalink</a>)Pixem — A PX to EM converterhttp://warriordudimanche.net/shaarli/?Qxk-KA2013-08-06T08:36:51+02:00Un convertisseur de px vers em ultra simple et minimaliste... <br />
A conserver par devers soi ;)<br>(<a href="http://warriordudimanche.net/shaarli/?Qxk-KA">Permalink</a>)LeaVerou/prismhttp://warriordudimanche.net/shaarli/?QDC7sQ2013-07-07T11:43:14+02:00Lea Verou, auteure de Dabblet entre autres, a fait un syntax highlighter... <br />
Vu son niveau de maîtrise et la qualité de son travail en général, moi je dis que ça se teste...<br>(<a href="http://warriordudimanche.net/shaarli/?QDC7sQ">Permalink</a>)Centering Percentage Width/Height Elements | CSS-Trickshttp://warriordudimanche.net/shaarli/?hvp8tQ2013-07-06T09:37:13+02:00Bonne idée ça: utiliser translate pour centrer un élément dont on ne connaît pas la taille.<br>(<a href="http://warriordudimanche.net/shaarli/?hvp8tQ">Permalink</a>)Tutoriel vidéo HTML-CSS : Box Sizing | Grafikart.frhttp://warriordudimanche.net/shaarli/?cyoK3g2013-07-02T13:45:02+02:00un bon résumé des avantages du box-sizing (comment on a pu vivre avant ^^)<br>(<a href="http://warriordudimanche.net/shaarli/?cyoK3g">Permalink</a>)A propos de Les 30 sélecteurs CSS à connaître absolument (Liens éclairs)http://warriordudimanche.net/shaarli/?cjZfJw2013-06-24T09:41:29+02:00Ces sélecteurs sont très utiles pour cibler des objets n'ayant pas de classe ou d'id quand tu n'as pas complètement la main sur la structure HTML du projet ou quand l'objet va se répéter dans la page et que l'ajout d'une classe pour chaque itération alourdirait le code inutilement.<br />
<br />
De plus, ils permettent des fioritures uniquement via les css sans passer par un codage spécifique pour isoler les objets en questions (genre des styles spéciaux pour les liens qui s'ouvrent dans une nouvelle page ou qui ouvrent un document en particulier... on se passe d'une portion de js ou de php qui teste tout pour ajouter des classes à la pelle de chantier ^^)<br />
<br />
C'est léger, ça allège le code html, ça simplifie la vie du codeur, c'est très bien pris en charge et ça maintient la séparation dev / design+maquette...<br>(<a href="http://warriordudimanche.net/shaarli/?cjZfJw">Permalink</a>)Helium CSS - Déctecter le CSS non utilisé sur votre site - La Ferme du webhttp://warriordudimanche.net/shaarli/?kxtkHw2013-06-13T16:56:44+02:00Tiens ça peut être utile ça... c'est vrai qu'à la fin d'une session hardcore de prog/intégration, on finit par voir flou en se disant qu'on optimisera les css plus tard...<br />
C'est une bon début ^^<br>(<a href="http://warriordudimanche.net/shaarli/?kxtkHw">Permalink</a>)LeaVerou/csss · GitHubhttp://warriordudimanche.net/shaarli/?wO9o1g2013-06-06T18:23:59+02:00Oh ! Léa Verou, l'auteure du génial Dabblet ( https://github.com/LeaVerou/dabblet ) propose un système de slidesho via css ! Faut que je regarde ça !<br />
via Seb http://sebsauvage.net/links/?7ysPMQ<br>(<a href="http://warriordudimanche.net/shaarli/?wO9o1g">Permalink</a>)Note : CSS astuce pout les champs de recherche - Le Hollandais Volanthttp://warriordudimanche.net/shaarli/?hwcZIA2013-05-31T08:52:38+02:00ha oui, pas con ça ^^ Hop, SnippetVampirisé ;)<br />
Meeeercitiiimo (merci Timooo!) (sur l'air de merci patron http://www.dailymotion.com/video/x1hlgp_clip-video-les-charlots-merci-patro_music )<br>(<a href="http://warriordudimanche.net/shaarli/?hwcZIA">Permalink</a>)Self-Hosted And Embeddable HTML-CSS-JS Playground: Editrhttp://warriordudimanche.net/shaarli/?id-y4Q2013-04-29T13:20:23+02:00Un éditeur bac à sable pour css+js+html à héberger sur son propre serveur ou à embed où on veut...<br />
A tester !<br />
(difficile de faire aussi bien que dabblet par exemple, mais ça m'a l'air bien quand même !)<br>(<a href="http://warriordudimanche.net/shaarli/?id-y4Q">Permalink</a>)Le contexte de formatage block en CSS - Alsacreationshttp://warriordudimanche.net/shaarli/?_7clKQ2013-03-19T09:11:39+01:00Le contexte de block en CSS: excellent article qui permet de comprendre la réaction ubuesque de certains enfants en float...<br>(<a href="http://warriordudimanche.net/shaarli/?_7clKQ">Permalink</a>)Complex Selectors - An Advanced Guide to HTML & CSShttp://warriordudimanche.net/shaarli/?W2cwxA2013-02-01T15:38:10+01:00les sélecteurs CSS complexes<br />
quelques trucs à garder sous la main<br>(<a href="http://warriordudimanche.net/shaarli/?W2cwxA">Permalink</a>)Clearing a float container without source markuphttp://warriordudimanche.net/shaarli/?R_yIxg2012-11-17T17:46:00+01:00un clear fix crossbrowser<br>(<a href="http://warriordudimanche.net/shaarli/?R_yIxg">Permalink</a>)Faut arrêter avec les Media Queries ! – HTeuMeuLeuhttp://warriordudimanche.net/shaarli/?VuHadg2012-11-05T19:30:07+01:00Je +1 à fond !<br>(<a href="http://warriordudimanche.net/shaarli/?VuHadg">Permalink</a>)Différence entre pseudo-élément et pseudo-classe - CSS / CSS3 | CreativeJuizhttp://warriordudimanche.net/shaarli/?iJJ0kg2012-11-05T11:42:21+01:00(<a href="http://warriordudimanche.net/shaarli/?iJJ0kg">Permalink</a>)Un Nth-child en CSS 2 compatible depuis IE7 - CSS / CSS3 | CreativeJuizhttp://warriordudimanche.net/shaarli/?01pDUw2012-11-05T11:23:21+01:00Excellent truc pour remplacer nth-child en css2.1<br>(<a href="http://warriordudimanche.net/shaarli/?01pDUw">Permalink</a>)Styling ordered list numbers | 456 Berea Streethttp://warriordudimanche.net/shaarli/?wHFfBw2012-09-25T16:45:14+02:00Styler les ol li : un point sur couter en css : très intéressant.<br>(<a href="http://warriordudimanche.net/shaarli/?wHFfBw">Permalink</a>)Wrapping Long URLs and Text Content with CSS : Perishable Presshttp://warriordudimanche.net/shaarli/?8gHcGQ2012-09-25T07:45:56+02:00couper du texte à la ligne dans les <pre><br>(<a href="http://warriordudimanche.net/shaarli/?8gHcGQ">Permalink</a>)KNACSS, un framework CSS minimaliste qui claque sous la dent !http://warriordudimanche.net/shaarli/?z-O5GQ2012-07-26T09:39:52+02:00KNACSS est ce que l'on appelle un "framework CSS" comme il en existe tant d'autres.<br />
Son but est de servir de base commune à tous les projets d'intégration web, grâce à une nomenclature et des conventions constantes. Mais aussi de faciliter les positionnements d'éléments, de gérer les alignements, les gouttières, etc. Le tout de la façon la plus propre et accessible possible<br>(<a href="http://warriordudimanche.net/shaarli/?z-O5GQ">Permalink</a>)Demo: CSS drop-shadows without images – Nicolas Gallagherhttp://warriordudimanche.net/shaarli/?aahKEQ2012-06-29T22:07:29+02:00des ombres en perspective en css<br>(<a href="http://warriordudimanche.net/shaarli/?aahKEQ">Permalink</a>)15 CSS Habits to Develop for Frustration-Free Coding - Noupehttp://warriordudimanche.net/shaarli/?jmfBnA2012-05-20T21:50:32+02:00(<a href="http://warriordudimanche.net/shaarli/?jmfBnA">Permalink</a>)Clean CSS - A Resource for Web Designers - Optmize and Format your CSShttp://warriordudimanche.net/shaarli/?indp-Q2012-05-20T21:42:14+02:00(<a href="http://warriordudimanche.net/shaarli/?indp-Q">Permalink</a>)