Warning: Experimental stuff. Demos will only work in Chrome Canary (for now) The CSS3 Grid Layout Module has changed quite a lot since it’s incarnation when it shipped with IE10. At Responsive Day Out 2, Rachel Andrew gave an easy to follow practical talk of the current implementation (as it appears in Google Chrome Canary). …
Tag Archives: layout
Automatic Placement when using CSS Grid Layout
VLEX – Vector Layout Expressions
<html> <head> <script src="path/to/vlex.js"></script> </head> <body> <div id="vlexContainer" style="width:100%; height:100%;"> <svg id="vlex" width="100%" height="100%" onload="VLEX(vlex)"> <!– call VLEX inline –> <circle r="100" vlex="cx:{$cX};cy:{$cY}"></circle> <!– use vlex attribute –> </svg> </div> </body> </html> SVG is deemed to be the holy grail for graphics in resposive web design! But are they really?! In situations – where you …
Good-Looking Shapes Gallery
Layouts where content hugs the boundaries of illustrations are common in print and rare on the web. One of the reasons non-rectangular contour-hugging layouts are uncommon on the web is that they are difficult to produce. They are not difficult to produce anymore. And once again I have a flashback to (the now offline) The …
Using the :target pseudo-selector for alternative layouts
Sometimes I want to see all the images [of my site] on a grid [instead of the regular layout]. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple. Neat trick by Vasilis: give the root html element an …
Continue reading “Using the :target pseudo-selector for alternative layouts”
Creating Non-Rectangular Layouts with CSS Shapes
With the introduction of CSS Shapes into the web, wrapping content in custom non-rectangular shapes, and recreating print designs and layouts on the web becomes a piece of cake! In this article we’re going to go over the basics of declaring shapes, and creating some simple layouts using these new CSS technologies. Creating Non-Rectangular Layouts …
Continue reading “Creating Non-Rectangular Layouts with CSS Shapes”
Photoset Grid
CSSRegions.js
The Future of Responsive Digital Layout
Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters promises a hugely expanded creative landscape. National Geographic: Forest Giant (Demo) → Next Generation Web Layout: …