Arrière-plans avec CSS3 Backgrounds
CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale background-image: url("image1"), url("image2"); background-position: x y, x y; background-repeat: no-repeat; Les différentes valeurs doivent être ajustées en fonction du nombre d'images à charger et de leurs positions respectives. L'ordre de déclaration est important : dans l'exemple ci-après, la position left top s'applique uniquement à la première image et "right bottom" s'applique uniquement à la deuxième image. Démonstration Prise en charge
Solved by Flexbox — Cleaner, hack-free CSS
All of the code samples on this site show how to solve a particular design problem with Flexbox. They show just the code that's needed to make the demos work in a spec-compliant browser. Some browsers do not fully comply with the latest version of the spec, so sadly, a few workarounds were necessary. Workarounds for non-compliant browsers are not shown in the code samples, but if you're curious about those implementation details, you can check out the source files. The vendor prefixing and translating of current flex properties to their legacy equivalents is all handled by autoprefixer. The class naming convention used in the code samples and source files is taken from SUIT CSS, which is based on BEM methodologies. If you find a mistake or would like to suggest an additional example, feel free to open an issue or submit a pull request on Github.
Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)
Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meilleure implémentation de Grid Layout. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Le concept de grille produite permettra de gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), les différentes tailles d’écran et d’être automatisable. Le tout en un minimum de code et un maximum de propreté HTML. Voir le résultat final en ligne Le fondement : Flexbox Layout Les bases de la grille .container-grid-4 { }.container-grid-4 > * { } Ébauche de grille en flexbox Gérer la gouttière Bonus : “à la Une”
sergeche/emmet-sublime
Flexy Boxes — CSS flexbox playground and code generation tool
Flexbox browser support Three versions of the flexbox spec – each with different syntax – have been implemented in browsers. The two 2012 specs are roughly equivilant in terms of features, differing mainly in syntax. The earlier 2009 spec is less comprehensive though covers a lot of the same ground. Flexbox 2012 — W3C Candidate Recommendation, September 2012 Opera 12.1+, Firefox 22+. More browser support info available on caniuse.com. Known issues Flexbox early 2012 Flexbox early 2012 (Internet Explorer 10) align-content (equiv. flex-line-pack) doesn't work if the cross axis dimension is set with min-width or min-height Flexbox 2009 Box wrapping is not supported. box-lines is the property in this spec to achieve wrapping, though unfortunately no browser implemented it. Flexbox 2009 (Firefox) Firefox has a number of non-trivial issues with its 2009 implementation: The setting display: box is treated as display: inline-box if there is no width set. Further reading Code and design by @pete_b.
Flexbox Cheatsheet Cheatsheet
While I am no stranger to the magic of Flexbox, I find that I am not using it very often just yet. As a result I end up pausing and referring back to this post at CSS-Tricks whenever an opportunity to utilize its powers presents itself. I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? Anyway, I thought I would share it just in case others may find such a resource beneficial as well. If you would prefer to have this guy as a PDF you can grab that here.
How to install & use Package Control
What is it? According to its webpage: A full-featured package manager that helps discovering, installing, updating and removing packages for Sublime Text 2. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system. What's it mean? It's a Sublime Text package that makes it super-easy & convenient to install & manage all your other Sublime Text packages. Install the Package Control package Follow these steps: Go to & copy the long command there.Open the Sublime Text 2 console by pressing Ctrl+`.Paste the command you copied into the Sublime Text console.Press Enter.After Package Control installs, restart Sublime Text. Usage Press Command-Shift-P (Mac OS X) or Ctrl-Shift-P (Windows) to open the Command Palette.Start typing Package Control until you see the appropriate commands. Some of the possible commands are: On other pages, I'll talk about some of the other packages you should install.
Working with flexbox
Flexible layouts. Equal height columns. Presentation independence from your HTML source order. These things haven't been so easy to achieve with CSS—until now. The flexible box layout, the new flexbox specification, makes creating any of these layouts easy, and much more. In this article I'll walk you through the latest flexbox specification and use a simple demo to show you how to create a layout that's flexible, and has equal height columns and elements that you can arrange in any order, regardless of their order in the HTML source. There is some bad news with regard to flexbox and browser support. Opera (12.1) - Supports the latest specification without the need for vendor prefixes.Chrome (23.0) - Supports the latest specification, but requires the -webkit vendor prefix.Safari (5.1) - Supports an older version of the specification with the -webkit vendor prefix.Internet Explorer (10) - Supports an older version of the specification with the -ms vendor prefix. Figure 1. Figure 2.
