66 liens privés
Une explication interactive des FlexBox
Flexbox décortiqué à travers 18 vidéos
CSS3 Flexbox est l'une des dernières révolutions des spécifications CSS et nous facilite la vie tous les jours. Pourtant, il est parfois taquin et peu intuitif, notamment lorsque l'on s'attaque au trio de propriétés flex-grow, flex-shrink et flex-basis.
L'un de nos membres actifs du forum, lionel_css3, va devenir votre meilleur ami puisqu'il vient de publier une Série de vidéos d'apprentissage de Flexbox sur sa chaîne Youtube.
Durant 4h30 et près d'une vingtaine de vidéos, Lionel consolide petit à petit les bases de cette spécification plus complexe qu'il n'y paraît.
Une méthode pour avoir une taille de police fluide en fonction de la taille de l'écran.
Du CSS moderne qu'il faudrait utiliser plus souvent !
You can use “-webkit-line-clamp” property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped.
Soit une colonne centrale.
Comment afficher un bloc sur toute la largeur de l'écran ?
Des vidéos de formation par une crack des CSS !
Minimal snippets for modern CSS layouts and components
Un site qui montre comment faire avec des CSS modernes
Using padding-top
.container {
width: 100%;
padding-top: 56.25%;
}
Using aspect-ratio
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Méthode moderne pour faire des cards Responsive en HTML/CSS
Un outil pour fabriquer facilement des Clip-path (découpe d'un bloc CSS)
Un outil pour concevoir des ombres avancées sur une boite.
Pouvoir flouter une image derrière un bloc, c'est désormais possible presque partout dans le web (Firefox manque encore à l'appel)
Faire des formes triangulaires en CSS
Diagramme de Venn en CSS. Impressionnant !
Cet outil peut être utilisé afin de générer des valeurs pour la propriété border-image
Un tuto pour faire un tableau responsive (avec un peu de JS)
Ajouter un backdrop-filter: blur(5px) sur les éléments semi-transparent pour améliorer la lisibilité du texte en surface.
Préprocesseurs vs CSS natif : sachez les utiliser en comprenant ce que vous faites et les avantages des uns et des autres.