SlideShare a Scribd company logo
1 of 144
Download to read offline
The Creative New World of CSS
@rachelandrew UX Immersion: Interactions
Box Alignment level 3
Lining things up with
This is the vertical-
centering module.
.box {
display: flex;
align-items: center;
justify-content: center;
}
<div class="box">
<img alt="balloon" src="square-
balloon.jpg">
</div>
Flexbox
Centre the content of .box.
http://codepen.io/rachelandrew/pen/XKaZWm
Flex
container
height
http://codepen.io/rachelandrew/pen/RavbmN
Flex
container
height
stretch flex-endflex-startcenter
.wrapper {
display: flex;
}
.wrapper li {
min-width: 1%;
flex: 1 0 25%;
}
.wrapper li:nth-child(2) {
align-self: center;
}
.wrapper li:nth-child(3) {
align-self: flex-start;
}
.wrapper li:nth-child(4) {
align-self: flex-end;
}
Flexbox
Aligning items within the flex
container
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
http://flexboxfroggy.com/
https://flexbox.webflow.com/
Box Alignment defines how
these properties work in
other layout methods.
This module contains the features of CSS relating to the
alignment of boxes within their containers in the various CSS
box layout models: block layout, table layout, flex layout, and
grid layout.
CSS BOX ALIGNMENT LEVEL 3
https://drafts.csswg.org/css-align/
CSS Grid Layout
A proper layout system with
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.wrapper li {
min-width: 1%;
}
.wrapper li:nth-child(2) {
align-self: center;
}
.wrapper li:nth-child(3) {
align-self: start;
}
.wrapper li:nth-child(4) {
align-self: end;
}
CSS Grid Layout
Aligning grid items with the Box
Alignment properties.
http://codepen.io/rachelandrew/pen/jqdNoL
Grid
container
height
stretch endstartcenter
“Unlike Flexbox, however, which is single-axis–oriented, Grid
Layout is optimized for 2-dimensional layouts: those in which
alignment of content is desired in both dimensions.”
CSS GRID LAYOUT
https://drafts.csswg.org/css-grid/
.cards {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
CSS Grid Layout
Defining a 3 column grid
http://codepen.io/rachelandrew/pen/qqdGOa
.cards {
display:flex;
flex-wrap: wrap;
}
.card {
flex: 1 1 250px;
margin: 5px;
}
Flexbox
Flexbox can wrap flex items onto
multiple rows.
A new row becomes a new flex
container for the purposes of
distributing space.
https://codepen.io/rachelandrew/pen/Gqvrwz
.cards {
display:grid;
grid-template-columns:
repeat(auto-fill, minmax(200px,1fr));
grid-gap: 10px;
}
CSS Grid Layout
Create as many columns as will fit
into the container with a minimum
width of 200px, and a maximum of
1fr.
https://codepen.io/rachelandrew/pen/Gqvrwz
minmax()
http://codepen.io/rachelandrew/pen/QKwvxJ
.home-hero {
display: grid;
grid-gap: 1px;
grid-auto-rows: minmax(150px,
auto);
}
minmax()
Rows should be a minimum of 150px
and a maximum of auto
CSS Grid auto-placement
<ul class="colors">
<li style="background-
color:#FFFFFF;color:black"
class="white">FFF FFF
</li>
<li style="background-
color:#CCCCCC;color:black">CCC CCC
</li>
<li style="background-
color:#999999;color:black"
class="span3">999 999
</li>
</ul>
Grid auto-placement
I have a list with all ye olde web safe
colours in it.
.colors {
display: grid;
grid-template-columns:
repeat(auto-fill,minmax(80px, 1fr));
grid-gap: 2px;
grid-auto-rows: minmax(80px, auto);
}
Grid auto-placement
I auto-fill columns and rows with
minmax()
http://codepen.io/rachelandrew/pen/LRWPNp/
.white {
grid-column: 1 / -1;
grid-row: 3;
}
.black {
grid-column: 1 / -1;
grid-row: 6;
}
.span2 {
grid-column-end: span 2;
grid-row-end: span 2;
}
.span3 {
grid-column-end: span 3;
grid-row-end: span 3;
}
.tall4 {
grid-row-end: span 4;
}
Grid auto-placement
Adding classes to some elements, by
setting the value of grid-column-end
and grid-row-end to span.
.colors {
display: grid;
grid-template-columns:
repeat(auto-fill,minmax(80px, 1fr));
grid-gap: 2px;
grid-auto-rows: minmax(80px, auto);
grid-auto-flow: dense;
}
Grid auto-placement
grid-auto-flow with a value of dense
The source and display
order disconnect.
https://caniuse.com/#feat=css-grid
http://cssgridgarden.com/
https://www.youtube.com/c/layoutland
https://gridbyexample.com/video/
display: contents
Vanishing boxes with
The element itself does not generate any boxes, but its children
and pseudo-elements still generate boxes as normal. For the
purposes of box generation and layout, the element must be
treated as if it had been replaced with its children and pseudo-
elements in the document tree.
DISPLAY: CONTENTS
https://drafts.csswg.org/css-display/#box-generation
allow indirect children to
become flex or grid items
<div class="wrapper">
<h1></h1>
<p></p>
<blockquote class="inset"></blockquote>
<p></p>
<ul class="images">
<li></li>
<li></li>
</ul>
<p></p>
</div>
display: contents
All elements are direct children of
‘wrapper’ except for the li elements.
.wrapper {
max-width: 700px;
margin: 40px auto;
display: grid;
grid-column-gap: 30px;
grid-template-columns:1fr 1fr;
}
.wrapper h1, .wrapper p {
grid-column: 1 / -1;
}
.inset {
grid-column: 1 ;
font: 1.4em/1.3 'Lora', serif;
padding: 0;
margin: 0;
}
.inset + p {
grid-column: 2;
}
display: contents
A two column grid. The h1, p and
blockquote with a class of inset are
all direct children.
http://codepen.io/rachelandrew/pen/gLborW
.images {
display: contents;
}
display: contents
The ul has a class of images. By
applying display: contents the ul is
removed and the li elements become
direct children.
http://codepen.io/rachelandrew/pen/gLborW
https://caniuse.com/#feat=css-display-contents
CSS Shapes
Getting curvy with
CSS Shapes describe geometric shapes for use in CSS. For Level
1, CSS Shapes can be applied to floats. A circle shape on a float
will cause inline content to wrap around the circle shape
instead of the float’s bounding box.
CSS SHAPES
https://drafts.csswg.org/css-shapes/
.balloon {
float: left;
width: 429px;
}
<div class="box">
<img class="balloon" src="round-
balloon.png" alt="balloon">
<p>...</p>
</div>
CSS Shapes
Shapes are applied to floats.
http://codepen.io/rachelandrew/pen/KrvyQq
.balloon {
float: left;
width: 429px;
shape-outside: circle(50%);
}
<div class="box">
<img class="balloon" src="round-
balloon.png" alt="balloon">
<p>...</p>
</div>
CSS Shapes
A simple shape using the 

shape-outside property
http://codepen.io/rachelandrew/pen/KrvyQq
.box::before {
content: "";
display: block;
float: left;
width: 429px;
height: 409px;
shape-outside: circle(50%);
}
CSS Shapes
Floating generated content to create
a shape
http://codepen.io/rachelandrew/pen/mErqxy
.balloon {
float: right;
width: 640px;
height: 427px;
shape-outside: ellipse(33% 50% at
460px);
-webkit-clip-path: ellipse(28% 50% at
460px);
clip-path: ellipse(28% 50% at 460px);
}
CSS Shapes
Using clip-path to cut away part of an
image
http://codepen.io/rachelandrew/pen/vKJmXR
http://caniuse.com/#feat=css-shapes
https://bennettfeely.com/clippy/
Feature Queries
Can I Use this with
The ‘@supports’ rule is a conditional group rule whose
condition tests whether the user agent supports CSS
property:value pairs.
FEATURE QUERIES
https://www.w3.org/TR/css3-conditional/#at-supports
http://caniuse.com/#feat=css-featurequeries
Anything new in CSS you
can use feature queries to
detect support.
@supports (display: grid) {
.has-grid {
/* CSS for grid browsers here */
}
}
Feature Queries
Checking for support of Grid Layout
@supports ((display: grid) and (shape-
outside: circle())) {
.has-grid-shapes {
/* CSS for these excellent browsers
here */
}
}
Feature Queries
Test for more than one thing
Using Feature Queries
▸ Write CSS for browsers without support
▸ Override those properties inside the feature queries
▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
.balloon {
border: 1px solid #999;
padding: 2px;
}
@supports ((shape-outside: ellipse()) and
((clip-path: ellipse()) or (-webkit-clip-
path:ellipse()))) {
.balloon {
border: none;
padding: 0;
float: right;
width: 640px;
min-width: 640px;
height: 427px;
shape-outside: ellipse(33% 50% at 460px);
-webkit-clip-path: ellipse(28% 50% at
460px);
clip-path: ellipse(28% 50% at 460px);
}
}
Feature Queries
Write CSS for browsers without
support, override that and add new
CSS inside the feature query.
http://codepen.io/rachelandrew/pen/vKJmXR
http://codepen.io/rachelandrew/pen/vKJmXR
Websites that enhance
themselves as the platform
improves.
Initial Letter
Fancy introductions with
Large, decorative letters have been used to start new sections
of text since before the invention of printing. In fact, their use
predates lowercase letters entirely.
This [initial-letter] property specifies styling for dropped, raised,
and sunken initial letters.
INITIAL LETTER
https://drafts.csswg.org/css-inline/#initial-letter-styling
h1+p::first-letter {
initial-letter: 4 3;
}
Initial Letter
Make the initial letter four lines tall,
one line above the content and 3 into
the content.
http://codepen.io/rachelandrew/full/WobvQq/
http://codepen.io/rachelandrew/full/WobvQq/
Currently Safari 9+ only.
h1+p::first-letter {
font-weight: bold;
initial-letter: 7 ;
background-color: rgb(114,110,151);
padding: 2em .5em;
margin: 0 5px 0 0;
color: #fff;
border-radius: 50% ;
float: left;
shape-outside: margin-box;
}
Initial Letter
Adding additional styling to the
initial letter.
http://codepen.io/rachelandrew/pen/LbEpPX
@supports (initial-letter: 3) or (-
webkit-initial-letter: 3) {
h1+p::first-letter {
font-weight: bold;
initial-letter: 7 ;
background-color: rgb(114,110,151);
padding: 2em .5em;
margin: 0 5px 0 0;
color: #fff;
border-radius: 50% ;
float: left;
shape-outside: margin-box;
}
}
Initial Letter
Using feature queries to test for
support before adding rules that
style the first letter.
http://codepen.io/rachelandrew/pen/LbEpPX
Writing modes
Upside down and back to front with
http://codepen.io/rachelandrew/pen/LbVQNW
.wrapper {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 40px;
}
h1 {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: right;
grid-column: 1;
align-self: start;
justify-self: start;
}
Writing Modes
Using vertical-rl then flipping the text
with a transform.
http://codepen.io/rachelandrew/pen/LbVQNW
http://caniuse.com/#feat=css-writing-mode
Custom properties
Variables in CSS with
This module introduces a family of custom author-defined
properties known collectively as custom properties, which allow
an author to assign arbitrary values to a property with an
author-chosen name, and the var() function, which allow an
author to then use those values in other properties elsewhere in
the document.
CSS CUSTOM PROPERTIES (CSS VARIABLES)
https://drafts.csswg.org/css-variables/
:root {
--primary: blue;
--secondary: orange;
}
h1 {
color: var(--primary);
}
Custom Properties
Define variables then use them in
CSS
:root {
--primary: blue;
--secondary: orange;
}
@supports (--primary: blue) {
h1 {
color: var(--primary);
}
h2 {
color: var(--secondary);
}
}
Custom Properties
Can be tested for using feature
queries
http://codepen.io/rachelandrew/pen/mErpZA
http://caniuse.com/#feat=css-variables
calc()
Adding things up with
Basic mathematics in CSS
<div class="wrapper">
<div class="box box1">
<p>…</p>
<div>height is defined by the flex
container.</div>
</div>
<div class="box box2">
<div>height is 140px</div>
</div>
<div class="box box3">
<div>height is 14em</div>
</div>
</div>
calc()
Three boxes, each with a div nested
inside.
.box2 {
height: 140px;
}
.box3 {
height: 14em;
transition: height 0.5s ease;
}
.box3:hover {
height: 30em;
}
calc()
Two of the outer boxes have a height,
box1 is the height of the content
inside.
Box3 will grow on hover.
.box > div {
color: #fff;
border-radius: 5px;
position: absolute;
bottom: 20px;
right: 20px;
width: 30%;
height: calc(50% - 20px);
}
calc()
In the CSS for the inner box, we
calculate the height as 50% - 20px.
http://codepen.io/rachelandrew/full/VmYYqM/
http://caniuse.com/#feat=calc
position: sticky
Staying put with
A stickily positioned box is positioned similarly to a relatively
positioned box, but the offset is computed with reference to
the nearest ancestor with a scrolling box, or the viewport if no
ancestor has a scrolling box.
POSITION: STICKY
https://drafts.csswg.org/css-position/#sticky-pos
<dl class="authors">
<dt>A</dt>
<dd>John Allsopp</dd>
<dd>Rachel Andrew</dd>
<dt>B</dt>
<dd>. . .</dd>
</dl>
position: sticky
A dl with dt elements followed by
multiple dd elements.
.authors dt {
position: sticky;
top: 0;
}
position: sticky
Applying position: sticky to the dt
http://codepen.io/rachelandrew/pen/NbPamG
http://caniuse.com/#feat=css-sticky
Scroll snapping
Snap to it with
https://drafts.csswg.org/css-scroll-snap-1/
http://caniuse.com/#feat=css-snappoints
.gallery {
scroll-snap-type: x mandatory;
}
.group {
scroll-snap-align: center none;
}
Scroll Snapping
This currently works in Safari only.
http://codepen.io/rachelandrew/pen/NbPGYg
.gallery {
scroll-snap-type: y mandatory;
}
.group {
scroll-snap-align: none start;
}
Scroll Snapping
On the y axis, again supported only
by Safari.
http://codepen.io/rachelandrew/pen/xRbXqr
Blend Modes & Filters
Beautiful images and text with
.image {
background-color: green;
background-image: url(my-image.jpg);
background-blend-mode: multiply;
}
background-blend-mode
normal, multiply, screen, overlay,
darken, lighten, color-dodge, color-
burn, hard-light, soft-light, difference,
exclusion, hue, saturation, color,
luminosity.
https://codepen.io/rachelandrew/pen/eVRxVW
.image {
background-image:
url(image.jpg),
url(circles-dark.png);
background-blend-mode: multiply;
}
background-blend-mode
Blend more than one image, images
plus a color.
https://codepen.io/rachelandrew/pen/EQXMjp
h1 {
background-color: rgb(0,0,0);
color: #fff;
mix-blend-mode: multiply;
}
mix-blend-mode
Blends an object or text with the
background.
https://codepen.io/rachelandrew/pen/MQEwEK
https://codepen.io/rachelandrew/pen/MQEwEK
.blur img {
filter: blur(2px);
}
.brightness img {
filter: brightness(0.3);
}
.contrast img {
filter: contrast(250%);
}
filter
Add filters to objects with a line of
CSS.
https://codepen.io/rachelandrew/pen/JprGYg
https://caniuse.com/#feat=css-backgroundblendmode
https://caniuse.com/#feat=css-mixblendmode
https://caniuse.com/#feat=css-filters
https://ilyashubin.github.io/FilterBlend/
Animation
Adding delight with
http://animista.net/
http://valhead.com/
CSS Transforms &
Animations have excellent
browser support.
The Web Animations API
https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
http://rachelnabors.com/
Variable Fonts
Many font styles one font file with
Variable fonts
▸ Part of the OpenType font file specification
▸ Available as .otf or .ttf files
▸ In CSS use the font-variation-settings property
▸ CSS Fonts Level 4 Spec adds additional values to existing font properties
https://caniuse.com/#feat=variable-fonts
https://www.axis-praxis.org
Getting our hands on all
the new shiny
Let browser vendors know
you want these features
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes
Thank you
https://rachelandrew.co.uk/speaking/event/uxi18

More Related Content

What's hot

DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayRachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Rachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSRachel Andrew
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatRachel Andrew
 
The Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the JobRachel Andrew
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS LayoutRachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS LayoutRachel Andrew
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Rachel Andrew
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real WorldRachel Andrew
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid LayoutRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel Andrew
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridRachel Andrew
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutRachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutRachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 

What's hot (20)

DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
The Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the Job
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS Layout
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real World
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 

Similar to The Creative New World of CSS

CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?Rachel Andrew
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship CourseZoltan Iszlai
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?Rachel Andrew
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceRachel Andrew
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldRachel Andrew
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldRachel Andrew
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldRachel Andrew
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutRachel Andrew
 
ConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS LayoutConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS LayoutRachel Andrew
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRachael L Moore
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSSRachel Andrew
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4Gheyath M. Othman
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutRachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsSolving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsFITC
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
 
Future Layout & Performance
Future Layout & PerformanceFuture Layout & Performance
Future Layout & PerformanceRachel Andrew
 

Similar to The Creative New World of CSS (20)

Next-level CSS
Next-level CSSNext-level CSS
Next-level CSS
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship Course
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real World
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS Layout
 
ConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS LayoutConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS Layout
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End Story
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSS
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsSolving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and Friends
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
 
Future Layout & Performance
Future Layout & PerformanceFuture Layout & Performance
Future Layout & Performance
 

More from Rachel Andrew

Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Rachel Andrew
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp KeynoteRachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel Andrew
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
 
Where does CSS come from?
Where does CSS come from?Where does CSS come from?
Where does CSS come from?Rachel Andrew
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFRachel Andrew
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NERachel Andrew
 

More from Rachel Andrew (8)

Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
 
Where does CSS come from?
Where does CSS come from?Where does CSS come from?
Where does CSS come from?
 
CSS Grid for html5j
CSS Grid for html5jCSS Grid for html5j
CSS Grid for html5j
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NE
 

Recently uploaded

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseWSO2
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهMohamed Sweelam
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringWSO2
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard37
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 

Recently uploaded (20)

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 

The Creative New World of CSS