Using SVG | CSS-Tricks
►https://css-tricks.com/using-svg
Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web
Using SVG | CSS-Tricks
►https://css-tricks.com/using-svg
Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web
#bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing)
▻http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing
Tags : #em #typographie #CSS #fluide #élastique bookmarklet
Using #svg | CSS-Tricks
►http://css-tricks.com/using-svg
Tags : svg
A Guide to #SVG Animations (SMIL)
▻http://css-tricks.com/guide-svg-animations-smil
A Complete Guide to #flexbox
►http://css-tricks.com/snippets/css/a-guide-to-flexbox
Tags : flexbox #documentation #CSS #mise_en_page #layout #RWD #référence
Font Size Idea: #px at the Root, #rem for Components, #em for Text Elements | #CSS-Tricks
▻http://css-tricks.com/rems-ems
Tags : em #font-size CSS rem px
Amélioration de mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Il s’agit ici de limiter l’effet de « redraw » au chargement de la page. Le plugin, en effet, fait que la page se charge et s’affiche une première fois, avant de charger les images. Et pendant ce temps, la page est calculée et affichée en supposant que les images sont carrées. Du coup, après ce premier affichage de la page sans les images responsives, on se retrouve avec un « redraw » (la page est redessinée) durant lequel on « voit » nettement qu’il se passe quelque chose, puisque les éléments de texte (tout ce qui est hors images responsive, en fait) se déplacent. Le redessin de la page est donc très visible. Par ailleurs, dans le cas où il y a une vignette de prévisualisation avant le chargement de l’image complète, du fait des différences d’arrondi entre les trailles d’images, il n’est pas rare d’avoir alors un petit effet de bougé sur… 1 pixel.
De plus, cet effet de redraw visible se produit même quand on revient sur la page (dont l’ensemble est déjà en cache), puisque le principe même du plugin est qu’on redessinne la page forcément après l’avoir dessinée une première fois.
Dans le cas où l’on avait pas de vignette de prévisualisation (on charge le carré « rien.gif »), le javascript du plugin limitait les dégâts en « forçant » les dimensions des images contenant rien.gif, mais on avait quand même un effet de « bougé » après le premier affichage.
Pour moi, c’était le principal défaut de cette façon de réaliser des images responsives.
L’amélioration du jour s’applique de manière transparente pour le webmestre (il suffit de faire la mise à jour du plugin et de recalculer les pages - attention, recalculer aussi les CSS). Pour les images_responsive classiques (pas les nouvelles, verticales, que j’ai introduites dans la précédente mise à jour), la balise <img> est désormais intégrée à l’intérieur d’un <span>. L’image, elle, passe alors en position absolue à l’intérieur du spam, qui définit les dimensions de l’image.
Et comme on fait pour qu’un <span> adopte les proportions de l’image tout en restant responsive ? Avec la technique tirée de « Fluid Width Video » :
►http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Le span a une largeur de 100%, une hauteur de 0. Sa hauteur est définie précisément par un padding-bottom, qui est la proportion (par exemple 50% pour une image qui serait deux fois plus large que haute).
De cette façon, on a bien les dimensions de l’emplacement de l’image qui sont connues, dès le chargement de la page, par les CSS et le HTML, sans attendre le chargement des images et/ou du Javascript.
Il n’y a plus d’effet visible de bougé lors du redraw, puisque tout est déjà correctement positionné dans la page avant même le démarrage du javascript de chargement des images. Ce qui est épatant, c’est que la différence est également sensible lorsqu’on revient sur la page déjà en cache. On a désormais un effet de « surgissement » des images sans redessiner visiblement la page.
Un peu comme si on avait définit dans le code HTML les dimensions (width et height) des images, comme c’est préconisé, mais en restant en responsive.
▻http://css-tricks.com/css-animation-tricks
The following is a guest post by Zach Saucier. Zach cooks up some pretty inspiring animations over on CodePen. I couldn’t be happier that he wanted to share some of the tricks he uses to create them, especially because they are things we all strive for: efficiency, reusability, practicality, and speed.
When to use #target="_blank" | CSS-Tricks
▻http://css-tricks.com/use-target_blank
Why You Should Use Continuous Integration and Continuous Deployment | CSS-Tricks
▻http://css-tricks.com/continuous-integration-continuous-deployment
Plusieurs principes intéressants et pas si difficiles à mettre en oeuvre dans une infrastructure de développement :
– intégration continue : tout changement dans le code est testé
– déploiement continu : toute branche du code est déployée quelque part et utilisable
– récupération automatique d’une version passée du code et du backup correspondant de la base de données
Art Directed Articles. Still a Good Idea? | CSS-Tricks
▻http://css-tricks.com/art-directed-articles-still-good-idea
The idea of an “#art_directed_article” is that it is designed specifically for the content of the article. It might share some characteristics from the parent site (it probably should), but lots of design elements change to suit the specific article. Layout, colors, type, backgrounds, images, interactions... all custom just for the article.
The HTML5 progress Element | CSS-Tricks
▻http://css-tricks.com/html5-element
Throughout this article, we’ll only focus on styling the determinate state of the progress bar. So let’s change the state by adding the max and value attribute.
FitVids.JS - A lightweight, easy-to-use #jquery plugin for fluid width video embeds.
▻http://fitvidsjs.com
Un script qui utilise la technique suivante pour les embeds (qui devrait intéresser @kent1) : Koblentz entoure son #iframe d’un conteneur auquel il va donner une classe pour lui appliquer ensuite du CSS. Ce conteneur permet d’avoir un iframe fluid, même si les valeurs de largeur et hauteur sont données en pixels et en dur dans le HTML.
Repéré sur : ▻http://www.alsacreations.com/article/lire/1559-#responsive-web-design-present-futur-adaptation-mobile.html
Ah chouette ! mais ça marche pas pour ce que j’ai, car le style height width est inscrit en dur et il faudrait l’éliminer ! grrr…
La semaine dernière j’avais aussi tenté ►http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Code Snippets | CSS-Tricks
►http://css-tricks.com/snippets
plein de snippets dans les différents langages de dev web (CSS3, jQuery en particulier)
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks
►http://css-tricks.com/pseudo-element-roundup
It’s pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here’s a whole bunch of those amazing things. A roundup, if you will1.
Toi aussi tes amis parlent de #mediaqueries et tu ne sais pas ce que c’est...
Tu peux t’amuser à tout comprendre avec le W3C : ►http://www.w3.org/TR/css3-mediaqueries
Ou te perdre avec Mozilla Developper Network.
►https://developer.mozilla.org/en-US/docs/CSS/Media_queries
Regarder des belles captures d’écran via ►http://seenthis.net/messages/92686
Penser voir la lumière avec Css tricks…
►http://css-tricks.com/css-media-queries
et te pâmer devant le Responsive Web Design avec Ethan
►http://www.alistapart.com/articles/responsive-web-design
ou au moins faire semblant en regardant les images,
Ou simplement lire la définition de #wikipedia :
Media Queries is a CSS3 module allowing to adapt the rendering of webpages based on conditions such as screen resolution (eg. smartphone vs. high definition screen). It was first drafted in 2001 by the W3C and became a recommended standard in June 2012. It is a cornerstone technology to Responsive Web Design.
Soit une extension de @media que tu connais déjà depuis avant ta retraite lorsque tu faisais du CSS2.
Et en quelques liens, tu te sens édifiée.
et ça (que tu as twitté)
Le responsive design expliqué à ma grand-mère !
►http://graphism.fr/le-responsive-design-expliqu-ma-grandmre
Saving the Day with Scoped #CSS | CSS-Tricks
►http://css-tricks.com/saving-the-day-with-scoped-css
The style block with the scoped attribute will overwrite the global styles generally found in the head (whether in a style block or linked stylesheet), but only on the sibling/descendent elements inside the same parent.
Chrome 20 is the only browser at the time of this writing that is supporting scoped styles.
Flat Icons & Icon Fonts | CSS-Tricks
►http://css-tricks.com/flat-icons-icon-fonts
Icon Fonts...
are awesome. They typically come with standard vectors as well if you prefer working with them that way, but these icon projects go the extra mile in offering an @font-face compatible font for web use.