PUBLIC MARKS from decembre with tags image & demo

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

Another Use Case: The fill property is one of many reasons SVG is a much more flexible option than typical image files. Let's take icons, as an example. We might have the same set of icons but in two different color schemes. Typical image files (such as JPG, PNG and GIF) would require us to make two versions of each icon — one for each color scheme. SVG, on the other hand, allows us to paint the icons in using the CSS fill property: .icon { fill: black; } .icon-secondary { fill: orange; }

Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques. There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.

the browser only knows the size of the viewport when it begins downloading images.

TEST case

Modèle tabulaire Le design tabulaire à l'aide de CSS (entendons-nous bien, je ne parle évidemment pas des balises HTML table) est voué à un très bel avenir proche, enfin utilisable depuis IE8. Le modèle d'affichage tabulaire permet de réaliser de manière simplissime l'ensemble des cas de figure qui nous compliquent la vie actuellement : Hauteurs de frères identiques, Alignement vertical, Répartition de la hauteur restante, Répartition de la largeur restante, Un menu fluide, Réordonnement des blocs.

nous allons vous montrer comment créer les légendes des images avec diverses transitions simplement en utilisant CSS3. Simple transition effect with only CSS3.How to create image captions with various transitions simply using CSS3, dependent on transform and transition properties.

Tutorial : How to create different interesting hover effects on circles with CSS transitions and 3D rotations.Border radius property, we can create circular shapes. Seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!