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.
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.
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.
Installation - Package Control
Simple The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console. Sublime Text 3Sublime Text 2 import urllib.request,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh ! This code creates the Installed Packages folder for you (if necessary), and then downloads the Package Control.sublime-package into it. Warning: Please do not redistribute the install code via another website. Manual
Advanced Cross-Browser Flexbox
Introduction The CSS Flexible box module level 3 — or Flexbox for short — brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly, and dispensing with some of the illogical hacks and kludges that we’ve traditionally used. I dealt with the basics of Flexbox in my article Flexbox: fast track to layout nirvana? Introducing the example The example I have built for this article looks like Figure 1: This has multiple levels of Flexboxes contained within it. The overall layout The basic layout of the site is like this: The <section> is set to display as a flexible box like so: Note: Different IE-specific properties are specified at the top of the rule because IE10 currently supports different Flexbox syntax (from 2011) to the latest spec supported by Opera and Chrome. I am making the flow horizontal, but forcing the <nav> to sit on its own line using the following rule: Child flexboxes Conclusion
