46 liens privés
Tout est dans le titre
Des astuces et rappels sur CSS (via http://www.inpixelitrust.fr/blog/la-semaine-en-pixels-8-mai-2015/ )
Grâce à la propriété CSS background-blend-mode, on peut "fusionner" une image d'arrière plan avec une couleur, une autre image, etc. On peut même appliquer plusieurs modes de fusion et c'est ce que montre cet article
Tout est dans le titre
Des bouts de code CSS3 pour customiser l'apparence des formulaires (via http://www.inpixelitrust.fr/blog/la-semaine-en-pixels-17-avril-2015-2/ )
Tout est dans le titre (via http://www.inpixelitrust.fr/blog/la-semaine-en-pixels-17-avril-2015-2/ )
Pas tout à fait en "pur CSS", puisqu'il faut ajouter des data-attributes mais c'est très bien fait et assez simple (via http://www.inpixelitrust.fr/blog/la-semaine-en-pixels-17-avril-2015-2/ )
Tout est dans le titre (via http://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-15 )
L'auteur déconseille fortement d'utiliser la propriété CSS will-change, car celle-ci pourrait aussi changer le contexte d'empilement ou créer des blocs conteneurs par elle même...
Cette propriété permet d'indiquer au navigateur que tel élément est susceptible de "changer" sous peu. C'est très utile pour améliorer le rendu des animations mais l'auteur insiste, avec raison, sur la nécessité de l'utiliser avec parcimonie.
Une technique de Sprite intéressante... actuellement supportée seulement par Chrome mais j'espère que les autres navigateurs l'implémenteront
Tout est dans le titre, et c'est bluffant ! (via inpixelwetrust)
La ligne magique : img { object-fit: cover; } (via Maxlab via le Warrior du dimanche)
Plein de bonnes idées :
- du parallaxe avec plein de maths :-) en CSS
- un menu responsive uniquement en CSS
- un scroll animé en CSS
- des optimisations d'images, sprites, etc.
Tout est dans le titre, et c'est vraiment très sympa (belle démonstration des possibilités CSS3)
Tout est dans le titre (via inpixelwetrust)
Les media queries pour cibler les différentes versions de l'iPhone... c'est vraiment pénible qu'Apple considère que la barre d'URL et la barre de navigation font partie du viewport. Impossible d'utiliser une règle comme body { min-height: 100vh; } sans casser quelque chose... alors que ça marche parfaitement avec un Samsung Galaxy S3 par exemple :/
Au menu : media queries et em, flexbox (avec des pistes pour les navigateurs ne la supportant pas tout ou partie), transition, et une propriété CSS sur le scroll
Une démonstration impressionnante de l'utilisation des sélecteurs :nth-child et dérivés... La galerie de photo est juste bluffante
Un tuto impressionnant : créer une grille responsive avec le minimum de classes CSS...