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.
Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Alternative/complément à CSS.
Expressive, dynamic, robust CSS — expressive, robust, feature-rich CSS preprocessor.
Alternative/complément à CSS.
Sur CodePen.
Documentation française de la MDN.
Sur Stack Overflow.
Ça à l'air d'être un peu de la bricole.
Site à garder sous le coude concernant le CSS.
- Un guide pour flexbox.
Sur w3schools
Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Tout est dans le titre.
Where we feast on CSS Selectors !
Petit jeu pour apprendre les sélecteurs CSS.
Via Bronco.
The idea was to create a playground of a sorts where a collection of pre-made animations could be tested and tweaked before actually using them. Seeing how various options like easing, delay, duration and others affect the animation proved to be very useful. And basically that is how Animista was born.
Via Korben.
- "Disponible sous Linux ou Windows, ce soft est gratuit et permet d’exporter des fichiers CSS propres, que vous pourrez bien évidemment compléter ensuite à la main, avec des choses un peu plus travaillées."
JS Fiddle est un outil de test et de partage de codes sources. Simple d’utilisation, Son interface se compose principalement de 5 zones dont 3 sont utilisées pour la rédaction de votre codes (HTML, CSS, JS).
Sur Identitools.
Liste de liens : Intégration, HTML, CSS.
"CodePen is a playground for the front end web.
Show off your latest creation and get feedback. Build a test case for that pesky bug. Find example design patterns and inspiration for your projects."
Sur Web-imaginative.
"Dans ce tutoriel Html & Css, nous allons vous montrer comment créer un très beau menu déroulant. Nous allons bien évidemment utiliser les nouveau attributs des langages HTML & CSS qui enjolivent toujours plus nos sites web."
Sur Pompage.net.
CSS, Html et Javascript pour menu déroulant.
Tutoriels, références et articles sur HTML, CSS, JavaScript.
"Welcome to HTML Dog, the web designer’s resource for everything HTML, CSS, and JavaScript, the most common technologies used in making web pages."
Sur Mammouthland.
Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web