(use arrow keys or click on viewport edges to navigate)
This presentation is split in two categories: "The Present" and "The Future".
* Originally proposed in CSS2.
#rounded {
border-radius: 10px;
}
#mixedRounded {
border-radius: 20px 0px 5px 10px;
}
#mixedRounded2 {
border-radius: 20px 0px 5px 10px / 20px;
}
The border-image property allows using images as border. Also border-corner-image property exists, which can be used for setting corners of the element.
The border-fit property determine how the border-image(s) will tile. Following values are possible:clip, repeat, scale, stretch, overwrite, overflow and space.
#borderImage {
border-width: 32px;
border-image: url(star.png) 32 32 repeat stretch;
}
The box-shadow property allows implementing both outer and inner drop-shadows on box elements.
#withShadow {
box-shadow: inset 1px 1px 10px rgba(255,255,255,0.75),
2px 2px 5px rgba(32,32,32,0.5);
}
The box-sizing property allows changing the behavior of how browser is calculating the element dimensions. It allows three values: content-box (default), padding-box (removed from spec?) and border-box.
#contentBox {
box-sizing: content-box;
}
#paddingBox {
box-sizing: padding-box;
}
#borderBox {
box-sizing: border-box;
}
The text-shadow property is similar to box-shadow, but it's applied to text elements.
#redTextShadow {
text-shadow: 2px 2px 5px rgba(192,32,32,0.5);
}
I have red text-shadow applied.
The text-stroke property adds an outline around the characters in text element.
#textStroke {
color: #6699CC;
text-stroke: 1px #202020;
I have black text-stroke applied.
The text-overflow property allows two values: clip and ellipsis. In order to work, text-overflow also requires properties overflow and white-space set to 'hidden' and 'nowrap'.
#textOverflowClip {
width:600px;
overflow:hidden;
white-space:nowrap;
text-overflow: clip;
}
I am very long text paragraph, which is clipped after 600px.
#textOverflowClip {
[...]
text-overflow: ellipsis;
}
I am very long text paragraph, which has ellipsis after 600px.
The appearance property can be used for displaying an element using platform-native styling. Property allows several possible values, including all the form elements used in HTML5.
div#appearAsButton {
appearance: button;
}
The function calc() can be used as any value of a property where length is required. Currently only Firefox supports this function properly.
#brickInTheWall {
width: 150px;
height: 150px;
float: left;
background-color:#C02020;
}
#anotherBrickInTheWall {
width: calc(100% - 150px - 20px);
margin-left:20px;
[...]
}
The hyphens property makes possible splitting words with hyphenation. It allows three values: none, manual and auto, where 'manual' requires splitting words with entity ­.
#hyphenation {
hyphens: auto;
}
This is a long paragraph with extraordinary long words that are hyphenated whenever there is need for hyphenation.
The mask-image property can be used for setting a mask for element, similary way as Photoshop's masks work. Also using gradients instead of images are allowed.
Currently masks are only supported in WebKit browsers, where properties are eg. -webkit-mask-image and -webkit-mask-box-image.
#withMask {
-webkit-mask: [<mask-image> || <mask-repeat> || <mask-attachment>
|| <mask-position> || <mask-origin> || <mask-clip>
}
The pointer-events property allows to control under what circumstances an element can become the target of mouse events. It allows two values: auto (default) and none.
a#noPointer {
pointer-events: none;
}
Selectors allow the representation of an element's attributes. When a selector is used as an expression to match against an element, attribute selectors must be considered to match an element if that element has an attribute that matches the attribute represented by the attribute selector.
An E element whose "foo" attribute value begins exactly with the string "bar"
An E element whose "foo" attribute value ends exactly with the string "bar"
An E element whose "foo" attribute value contains the substring "bar"
Selectors introduces the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.
Selector E:nth-child(n) is the n-th child of it's parent element, and E:nth-last-child(n) is the n-th child of it's parent, counting from the last element.
Selector E:only-child is an E element which is an only child of its parent, and E:last-child is an E element which is a last child of its parent.
Selector E:nth-of-type(n) is an E element, the n-th sibling of its type, and E:nth-last-of-type(n) is an E element, the n-th sibling of its type, counting from the last element.
Selector E:first-of-type is an E element, first sibling of its type, E:only-of-type is an E element, only sibling of its type, and E:last-of-type is an E element, last sibling of its type.
An E element that has no children (including text nodes).
Some URIs refer to a location within a resource. This kind of URI ends with "#", followed by an anchor identifier.
#highlight:target {
background-color: yellow;
}
<div id='highlight'>This element is highlighted with yellow
when anchor identifier is 'highlight'.</div>
An F element preceded by an E element. Notice that element F doesn't have to precede element E immediately.
CSS3 allows defining stylesheets with different conditional expressions. For example, you can have one stylesheet for large screens and a different stylesheet for smaller screens.
Media Queries also allow detecting pixel-ratio and orientation of a device. This makes media queries especially useful when designing for mobile devices.
This space is reserved for Web Fonts (content not finished yet).
* Proposed in CSS3.
The background-clip property determines the background painting area. Possible values are same as in box-sizing: content-box, padding-box and border-box (default).
The background-origin property determines the background positioning area. Possible values are same as in background-clip. The default value is padding-box.
The background-size property determines how background-image is scaled to the content. Possible values are: auto (default), contain, cover and length values.
Value contain will scale the image while preserving its aspect ratio, so background can fit in element area. Value cover will scale the image to cover the whole element area. Length values can be defined without restrictions.
A gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and many other things.
Gradients are a type of image, and can be used anywhere an image can, such as in the background-image or list-style-image properties.
In CSS3 there are two types of gradients: linear gradients and radial gradients.
A linear gradient is created by specifying a gradient-line and then several colors placed along that line.
The syntax for linear gradient is following: linear-gradient([ [ <angle> | to [left | right] || [top | bottom]> ] ,]? <color-stop>[, <color-stop>]+).
#linearGradient {
background-image: linear-gradient(left top,
rgb(55,85,150) 1%,
rgb(72,130,224) 50%,
rgb(255,255,255) 90%);
}
Radial gradient emerge from a single point and smoothly spread outward in a circular or elliptical shape. A radial gradient is specified by indicating the center of the gradient and the size and shape of the ending shape.
The syntax for radial gradients is following: radial-gradient([<position>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*);.
#radialGradient {
background-image: radial-gradient(50% 50%,
ellipse closest-corner,
#2977ab, #c7dfff 75%);
}
CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space.
#scaleRotateSkewAndTranslate {
transform: scale(1.25, 1.25) rotate(15deg)
skew(-10deg) translate(20px, 20px);
transform-origin: 50% 50%;
}
Use mouse x-axis + shift for scale, ctrl for rotate or alt for skew.
CSS 3D Transforms extends CSS Transforms to allow elements rendered by CSS to be transformed in three-dimensional space.
It's important to notice that using 3D Transforms enables hardware-acceleration on the device when applicable.
In addition to declaring transforms, it's good to declare perspective property, which enables 3D space. The greater the value, the further the distance, so the less intense the visual effect.
#scaleRotateAndTranslate {
transform: scale3d(1.25, 1.25, 1.0) rotate3d(0.33, 1.0, 0.0, 45deg)
translate3d(20px, 20px, 0px);
perspective: 800;
}
#basicElement {
[...]
transition: transform 1200ms ease-out 600ms;
}
#basicElement.changedState {
transform: rotate(45deg) translate3d(0px, 0px, 0px);
}
Animations are created by defining keyframe rules. These rules are set with @keyframes rule, which takes timing positions as sub-selectors.
For creating animations we can declare following properties:
@keyframes moving {
0% {
transform:rotate(0deg) translate3d(0px, 0px, 0px);
}
50% {
transform:rotate(30deg) translate3d(250px, -200px, 0px);
}
100% {
transform:rotate(0deg) translate3d(0px, 0px, 0px);
}
}
#keepMoving {
animation: moving 2000ms infinite both ease-in-out;
}
A Grid element is declared in markup by setting the display property of an element to 'grid'. Columns and rows are defined either in fixed or percental values, or in fractions.
Child elements of the Grid are termed Grid Items and may be positioned and sized by the Grid element by leveraging the following logical concepts:
Grid Tracks are the columns and rows of the Grid defined with the grid-rows and grid-columns properties on the Grid element.
#grid {
display: grid;
grid-columns: 150px 1fr; /* Two columns */
grid-rows: 50px 1fr 50px; /* Three rows */
}
Grid Items are placed into Grid Cells. A Grid Cell defines the available space for a Grid Item. The dimensions of the Grid Cell are specified by naming the starting and ending lines which define the columns and rows that the Grid Cell occupies.
Grid Lines are the horizontal or vertical dividing lines that exist on either side of a column or row. Grid Lines may be referred to by their Grid Line number, or they may be named by the author.
Grid Cells are the logical space used to lay out one or more Grid Items. Grid Cells may be defined explicitly using the grid-template property or the grid-cell pseudo-element.
Grid Cells can also be defined explicitly using one-letter names via the grid-template property. The grid-template property provides a visualization of the Grid element's structure while simultaneously defining the Grid Cells which can be used to layer or stack the child elements of the Grid.
#grid {
display: grid;
grid-template: "hh"
"nm"
"ff";
}
Where 'h' stands for header, 'n' for navigation, 'm' for main content and 'f' for footer.
Regions can be used in cases where we want to represent text content that flows from one area into another. Additionally content can be styled differently based on which region it's displayed. This is useful when creating more complex layouts.
Defines the element that will flow into regions.
Defines the element regions that are used for displaying the source element's content.
Defines the order of flow.
This is basic example on how regions work.
#source {
flow-into: main-thread;
flow: "main-thread";
-ms-flow-into: main-thread;
}
.region {
flow-from: main-thread;
content: from(main-thread);
-ms-flow-from: main-thread;
}
<div id="source"> <p>A long article text [...]</p> </div> <div class="region"></div> <div class="region"></div> <div class="region"></div>
Exclusion elements define exclusion areas that contribute to their containing block's wrapping context. As a consequence, exclusions impact the layout of their containing block's descendants.
The following SVG shapes are supported by the CSS shapes module:
#exclusion {
wrap-flow: both;
-webkit-wrap-shape-mode: around;
shape-outside: circle(50%, 50%, 50%);
-webkit-wrap-shape: circle(50%, 50%, 50%);
}
<div>
<div id="exclusion"></div>
This is a long paragraph [...]
</div>
Works as a general syntax for defining a filter by assembling filter primitives in a graph. A filter effect consists of a series of graphics operations that are applied to a given source graphic to produce a modified graphical result.
The filter property can use a number of predefined filter functions: blur, drop-shadow, gamma, grayscale, hue-rotate, invert, opacity, saturate, sepia, and sharpen.
#grayscaleAndBlur {
filter: grayscale(0) blur(0px);
transition: filter 360ms ease-in;
}
#grayscaleAndBlur:hover {
filter: grayscale(1) blur(2px);
}
Describes the properties of a vertex (the points at the corners of geometric shapes, usually triangles). These include the position and colour of the vertex, and the texture mapping.
The vertex shader will transform these vertices, such as change the position in 3D space, the colour, or the depth. This could for example transform a flat shape into something that looks like it has a 3D perspective, such as the curved page of a book. The spec includes examples such as a page curl, waving flag or wobble effect.
#myElement {
filter:custom(url('myVertexShader.vs'), 10 10, someParameter someValue);
}
Fragment shaders (also known as pixel shaders) extends the capability of Filters so that you can define your own pixel manipulations. They describe the properties of pixel, such as the colour, opacity, and bit-depth and can be used for things such as lighting effects or colour manipulation such as changing an image to grayscale or sepia tone.
CSS Filters includes a number of pre-defined ones, but fragment shaders will allow you to define your own.
#myElement {
filter:custom(url('myFragmentShader.fs'));
}
CSS Working Group has published a first working draft of CSS4 Selectors. Work on CSS4 specifications will go on in parallel with CSS3 modules.
Earlier there was no option to select the parent of an element in CSS (not even in CSS3). With CSS4, the most important news for many developers in the current W3C draft is that support for the parent selector exists.
fieldset! > input:focus {
background-color:#F8F0B0;
}
The @namespace declares a namespace prefix and associates it with a given namespace name. This namespace prefix can then be used in namespace-qualified names such as the CSS qualified names.
A CSS qualified name is a name explicitly located within (associated with) a namespace. Qualified name is a namespace prefix prepended to an element or attribute name, separated by a vertical bar.
CSS Namespace Module was introduced already as a part of CSS3.
@namespace "http://www.example.com";
@namespace foo "http://www.example.com/foo";
h1 { font-size: 42px; } /* Belongs in example.com */
|h1 { font-size: 36px; } /* Belongs eg. in example.com/bar */
*|h1 { font-size: 32px; } /* Belongs in both namespaces */
foo|h1 { font-size: 28px; } /* Belongs in example.com/foo */
* Originally proposed in CSS3
* Originally proposed in CSS3
Logical Combinations stands for combining a group of selectors into one list.
The matches-any pseudo-class is a functional notation taking a selector list as its argument. It represents an element that is represented by its argument.
:matches(section, article, aside) h1 {
font-size: 2em;
}
The negation pseudo-class is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument. This selector was originally proposed in CSS3.
:not(nav, aside) a {
color: #336699;
}