By Robert Sedovšek (@sedovsek)
inline-block
Value: | inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
Initial: | inline |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | see text |
Source: http://www.w3.org/TR/CSS2/visuren.html
SMACK! MEGA MESS!
margin-top: -50px;
Source: Mr. Simon Collison's webpage, images from mediaqueri.es
Source: "Award-Winning Newspaper Designs", Smashing Magazine
Source: "Award-Winning Newspaper Designs", Smashing Magazine
Source: "Award-Winning Newspaper Designs", Smashing Magazine
Source: "Award-Winning Newspaper Designs", Smashing Magazine
Source: "Award-Winning Newspaper Designs", Smashing Magazine
Source: "Award-Winning Newspaper Designs", Smashing Magazine
Source: "Award-Winning Newspaper Designs", Smashing Magazine
WorldWideWeb (1990) was the first web browser, later renamed to Nexus to avoid confusion between the software and the World Wide Web.
Tim Berners-Lee's original WorldWideWeb browser in 1993
A later (1992) copy of the original pages.
And it's source code.
At that point, the avaliable HTML tags were:
Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
Pixar's website in 2012
Expectation! vs. Reality
<div id="header">
<div id="hgroup">
<h1>Site title</h1>
<h2>Site Description</h2>
</div>
</div>
<div id="nav">
<ul>
<li><a href="home">Home</a></li>
</ul>
</div>
<div class="article">blog post 1</div>
<div class="article">blog post 2</div>
<div id="aside">Ads</div>
<div id="section">widget</div>
<div id="footer">Copyrights 2012</div>
Popularity | Value | Frequency |
---|---|---|
1 | footer | 179528 |
2 | menu | 146673 |
3 | style1 | 138308 |
4 | msonormal | 123374 |
5 | text | 122911 |
6 | content | 113951 |
7 | title | 91957 |
8 | style2 | 89851 |
9 | header | 89274 |
10 | copyright | 86979 |
Popularity | Value | Frequency |
---|---|---|
11 | button | 81503 |
12 | main | 69620 |
13 | style3 | 69349 |
14 | small | 68995 |
15 | nav | 68634 |
16 | clear | 68571 |
17 | search | 59802 |
18 | style4 | 56032 |
19 | logo | 48831 |
20 | body | 48052 |
Source: http://devfiles.myopera.com/articles/572/classlist-url.htm
<header>
<hgroup>
<h1>Site title</h1>
<h2>Site Description</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
</ul>
</nav>
<article>blog post 1</article>
<article>blog post 2</article>
<aside>Ads</aside>
<section>widget</section>
<footer>Copyrights 2012</footer>
For Internet Explorer 6-8: Javascript hack for the rescue
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Allowing long chunks of text to wrap to multiple columns. This technique is widely popular in editorial design of magazines and newspapers.
W3.org: CSS Multi-column Layout Module, http://www.w3.org/TR/css3-multicol/
element {
(-prefix-)column-width: <length unit> | auto; // or
(-prefix-)column-count: <integer> | auto;
(-prefix-)column-gap: <length unit> | normal;
(-prefix-)column-rule-color: <color>;
(-prefix-)column-rule-style: <border-style>;
(-prefix-)column-rule-width: <border-width>;
}
element {
/* Control how the content displays within each column. */
break-before: auto | always | avoid | left | right |
page | column | avoid-page | avoid-column;
break-after: auto | always | avoid | left | right |
page | column | avoid-page | avoid-column;
break-inside: auto | avoid | avoid-page | avoid-column;
}
Self explanatory? Ok, Ok!
element {
/* none: The element does not span multiple columns. */
/* all: The element spans across all columns. */
column-span: none | all;
/* balance: Balance content equally between columns, if possible. */
/* auto: Fills columns sequentially. */
column-fill: auto | balance;
}
Source: W3C Editor’s Draft — CSS Multi-column Layout Module.
Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.
Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.
Adjust me, please! I am a very laaarge introduction text that needs to be spanned
The relaunch of Smashing Magazine has sparked quite a discussion in the community. Some of you feel that the design is "too responsive", others feel that the ads are too prominent, but most of you liked the lean, clean new layout. We hope that the new design makes reading more enjoyable — which is what any online magazine should aspire to, right? We are still working on fixing minor bugs, and we’re continually testing minor layout changes. We encourage you to send us feedback or comments — we'd sincerely appreciate that!
Allows content to flow across multiple areas called regions. It provides an advanced content flow mechanism.
W3.org: CSS Regions Module Level 3, http://www.w3.org/TR/css3-regions/
The following HTML code snippet shows the content to flow between the regions 1, 2, 3 and 4. Region A represents an image.
<article id="article">
<h1>Introduction</h1>
<p>This is an example ...</p>
<h1>More Details</h1>
<p>This illustrates ...</p>
<p>Then, the example ...</p>
<p>Finally, this ...</p>
</article>
Examples of HTML elements, used as regions.
<div id="region1"></div>
<div id="region2"></div>
<div id="region3"></div>
<div id="region4"></div>
#article {
(-prefix-)flow-into: article_flow;
}
#region1, #region2, #region3, #region4 {
(-prefix-)flow-from: article_flow;
}
Source: Adobe: CSS3 regions: Rich page layout with HTML and CSS3.
.circle {
/* shape the element as a circle */
wrap-shape: polygon(0px, 150px /* ...more points */);
wrap-shape-mode: content;
}
.heart {
/* shape the element as a heart */
wrap-shape: polygon(150px, 32px /* ...more points */);
wrap-shape-mode: content;
}
Source: Adobe: CSS3 regions: Rich page layout with HTML and CSS3.
W3.org: CSS Exclusions and Shapes Module Level 3, http://www.w3.org/TR/css3-exclusions/
An element becomes an "exclusion element" when wrap-flow is set to a value that is not auto. The following values are avaliable:
#exclusion {
(-prefix-)wrap-flow: auto | both | start | end | maximum | clear;
}
Hey!
Noone will read this!
A note to self
The following CSS code snipplet shows the use of exclusions.
#exclusion {
position: absolute;
background: lightblue;
wrap-flow: auto | both | start | end | maximum | clear;
}
The example of HTML to form the following examples.
<article>
<section id="exclusion">Donec metus messa, mollis...</section>
Lorem ipsum dolor sit amet...
</article>
Source: W3C Working Draft — CSS Exclusions and Shapes Module.
Source: W3C Working Draft — CSS Exclusions and Shapes Module.
Source: W3C Working Draft — CSS Exclusions and Shapes Module.
Source: W3C Working Draft — CSS Exclusions and Shapes Module.
Source: W3C Working Draft — CSS Exclusions and Shapes Module.
Source: W3C Working Draft — CSS Exclusions and Shapes Module.
Source: W3C Working Draft — CSS Exclusions and Shapes Module.
Other avaliable properties:
#exclusion {
wrap-flow: auto | both | start | end | maximum | clear;
wrap-margin: <length>;
wrap-padding: <length>;
wrap-through: wrap | none;
/* shorthand property */
wrap: <wrap-flow> || <wrap-margin> [ / <wrap-padding>];
}
#exclusion {
shape-inside: outside-shape | auto | <shape> | <uri>;
shape-outside: auto | <shape> | <uri>;
shape-image-threshold: <alphavalue>;
}
The ‘shape-outside’ property changes the geometry of an exclusion element‘s exclusion are.
The ‘shape-inside’ modifies the shape of the inner inline flow content from rectangular content box to an arbitrary geometry.
Defining shapes by specifying a source image and using its alpha channel threshold shape-image-threshold
to compute (extract) the inside or outside shape.
Values: 0-1, default 0.5:
Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.
W3.org: Grid Layout, http://www.w3.org/TR/css3-grid-layout/
body {
display: grid;
grid-columns: 150px 1fr; /* two columns */
grid-rows: 50px 1fr 50px; /* three rows */
}
Once the grid is created, we can position GRID ITEMS on it. Grid items are HTML5 sectioning elements.
#header { grid-column: 1; grid-row: 1; }
#nav { grid-column: 1; grid-row: 3; }
#article { grid-column: 2; grid-row: 1; grid-row-span: 2; }
#aside { grid-column: 1; grid-row: 2; grid-row-align: start; }
#footer { grid-column: 2; grid-row: 2; grid-column-align: center; }
SMACK! A bit MESSY?
Grid Lines are the horizontal or vertical dividing lines. They may be referred to by their number (example 1), or named by the author (example 2).
#grid {
display: grid;
grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px;
}
#item1 {
grid-column: 2;
grid-row: 1 4;
}
#grid {
display: grid;
grid-columns: 150px "item1-start" 1fr "item1-end";
grid-rows: "item1-start" 50px 1fr 50px "item1-end";
}
#item1 {
grid-column: "item1-start" "item1-end";
grid-row: "item1-start" "item1-end";
}
body {
display: grid;
grid-template: "ab"
"cd"
"ef";
}
#header { grid-cell: "a"; }
#copyright { grid-cell: "e"; }
Other avaliable properties:
grid-column-span: <integer>;
grid-row-span: <integer>;
grid-column-align: 'start' | 'end' | 'center' | 'stretch';
grid-row-align: 'start' | 'end' | 'center' | 'stretch';
grid-layer: <integer>;
W3.org: CSS Flexible Box Layout Module, http://www.w3.org/TR/css3-flexbox/
Flexbox is an element with display: flexbox
or display: inline-flexbox
.
p {
width: 500px; padding: 5px;
display: flexbox;
flex-pack: distribute;
flex-align: center;
}
button { width: 100px; }
.bigger { width: 200px; }
<p>
<button class="bigger">Child 1<br>Another Line</button>
<button>Child 2</button>
<button>Child 3</button>
</p>
CSS Flexible Box Layout Module, http://www.w3.org/TR/css3-flexbox/.
Other avaliable properties:
flex-flow: row | row-reverse | column | column-reverse
flex-order: <number>;
flex-align: start | end | center | baseline | stretch;
flex-item-align: auto | start | end | center | baseline | stretch;
<!DOCTYPE html>
<header>...</header>
<div id='main'>
<article>...</article>
<nav>...</nav>
<aside>...</aside>
</div>
<footer>...</footer>
#main { display: flexbox; }
#main > article { flex:1; flex-order: 2; }
#main > nav { width: 200px; flex-order: 1; }
#main > aside { width: 200px; flex-order: 3; }
CSS Flexible Box Layout Module, Editor's Draft, 12 March 2012http://dev.w3.org/csswg/css3-flexbox/#flex-order0.