Les liens de GuePE
Block Element Modifier
Block
Standalone entity that is meaningful on its own.
Element
A part of a block that has no standalone meaning and is semantically tied to its block.
Modifier
A flag on a block or element. Use them to change appearance or behavior.
Sur freeCodeCamp.
Dimensions define the primary demarcation between Flexbox and CSS Grid. Flexbox was designed specifically for one-dimensional layouts, while CSS Grid is engineered to enable two-dimensional layouts. Therefore, CSS Grid can easily render rows and columns simultaneously.
Un peu de tout sur CSS, HTML, SVG, JavaScript et le reste.
Just-add-water CSS animations
Sur la MDN.
La pseudo-classe :first-of-type permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).
Sur CSS-Tricks.
If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one.
—Josh Brewer, March 10, 2010
@media only screen and (orientation: landscape) {
}Sur CSS-Tricks.
La propriété speak en CSS permet de spécifier comment un navigateur doit prononcer le contenu lu, par exemple via un lecteur d'écran.
Sur CSS-Tricks.
La propriété all dans CSS réinitialise toutes les propriétés de l'élément sélectionné, à l'exception des propriétés
directionetunicode-bidiqui contrôlent la direction du texte.
We are a community of talented developers who learn together. We have an ever-growing library of high-quality tutorials and articles that you can read completely for free !
Super newsletter pour front et inté.
Sur Learn the Web.
Cheatsheet sur l'affichage et le positionnement CSS
Sur la MDN.
Les sélecteurs de voisin direct
A + B
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
Les sélecteurs de voisins
A ~ B
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
Les sélecteurs d'éléments fils
A > B
Le combinateur '>' permet de sélectionner les selects nœuds qui sont des fils directs d'un élément donné.
Les sélecteurs d'éléments descendants
A B
Le combinateur (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
Le combinateur de colonne
A || B
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne.
background-image: radial-gradient(at center, #A70079, #411980);Flexbox is incredibly powerful. But it's also crazy hard to master. So we all end up depending on a cheat sheet and some mad guessing in the dev tools. Enough of that! Time for you to:
- Become a master of layout with flexbox
- Internalize flexbox in a ridiculously unforgettable way so you can drop the cheat sheet crutch
- Create any layout you can imagine, without wasting time guessing or looking up syntax
This is a Mastery Game. Each section unravels part of the plot, gives you mastery over a new flexbox concept, and presents zombie survival challenges that force you to solidify your new skills like your life depends on it.
CSS clip-path maker
De Nils Binder sur 9elements via Maëlle LaLicorne.
When you use eight values specifying border-radius in CSS, you can create organic looking shapes. WOW. No time to read it all ?— we made a visual tool for you. Find it here.
De Vissanu.S sur Medium via Mathieu ?
If you’re familiar working with SCSS in Angular CLI 1.x before and now you’re wondering how to use it in version 6, a brand new version that comes with Angular 6, I’m here to help.
Sur Alsacreations par Gili.
SVG est un format d'images vectorielles basé sur le langage de balisage XML. Il répond parfaitement à des besoins graphiques légers, qu'ils soient statiques, dynamiques ou interactifs.
div.a {
text-transform: uppercase;
}
div.b {
text-transform: lowercase;
}
div.c {
text-transform: capitalize;
}Via Alex M et Mathieu.
Bulma is an open source CSS framework based on Flexbox.
Trop le turfu !
De Vincent De Oliveira.
Les fonctions hsl() ou hsla() reposent sur un mode de représentation des couleurs différent, basé sur une Teinte (H), la Saturation (S) et la Lumière (L):
- Teinte: valeur de couleur sur un cercle chromatique de 0° (Rouge) à 360° (Rouge). A 60°: Jaune, à 120°: Vert, à 180°: Cyan, à 240°: Bleu, à 300°: Magenta.
- Saturation: de 0 à 100%
- Lumière ou Luminance: de 0 (entièrement noir) à 100% (entièrement blanc). 50% correspond à la teinte de base.