View
358
Download
1
Category
Preview:
DESCRIPTION
Curious to know what this CSS3 hype is all about? Visit this presentation to learn that it isn't just a hype. CSS3 adds awesome new capabilities to a front-end developer's palette of tools to create a beautiful (and functional) website. Learn more about several of the best new options that CSS3 is giving us, the current level of browser support for CSS3, and lots of useful resources to keep yourself up-to-date and learn more. If you want to learn how to style your website using CSS3, then this is a presentation you don't want to miss! Video of JandBeyond 2012: http://www.youtube.com/watch?feature=player_embedded&v=EAKxs2ixsBY
Citation preview
Robin Poort (@rhcpoort)
CEO & co-founder ThemePartner (@theme_partner)
Joomla! day Deutschland, Berlin, oktober 2012
Learn to love CSS3
1993
Robert Raisch proposed "named Stylesheets"
Source: http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html
1994
Håkon Wium Lie & Bert Bos create CSS1
Source: http://www.w3c.de/Events/2006/images/PrintSymposium/slides/_DSC0209.JPG
Source: http://upload.wikimedia.org/wikipedia/commons/5/54/H%C3%A5kon_Wium_Lie.jpg
CSS1 in development
h1.font.size = 24pt 100%
40%font.family = timesh1.font.family = helvetica 100%
60%AGE > 3d ? background.color = pale_yellow : background.color = whiteDISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style
1996
CSS1 recommended by the W3C
1998
CSS2 recommended by the W3C
1999
CSS3 mentioned for the first time
1999?!
Using CSS3
Where & when?
Not on the critical layers
don't use it on branding, layout & usability
Progressively enhance!
Make sure the website works in older browsers
Performance problems
Make your website fast!
Some examples!
p.rgba1 {
color: #000000;
color: rgba(0,0,0,1);
}
p.rgba2 {
color: #FF0000;
color: rgba(255,0,0,.5);
}
p.rgba3 {
color: #1ebdbe;
color: rgba(30,189,190,.25);
}
Always put the non-rgba color for older browsers before the rgba color
div.rgba1 {
background: #000000;
background: rgba(0,0,0,.8);
color: #FFF;
}
div.rgba2 {
background: #FFF;
background: rgba(255,255,255,.25);
}
div.rgba3 {
background: #1ebdbe;
background: rgba(30,189,190,.5);
}
div.rgba1 {
background: #555;
border: 5px solid;
border-color: #000;
border-color: rgba(0,0,0,.3);
}
div.rgba2 {
background: #3d3877;
border: 5px solid;
border-color: #9d9bba;
border-color: rgba(255,255,255,.5);
}
div.rgba3 {
background: url(seaguls.png);
border: 10px solid;
border-color: #black;
border-color: rgba(0,0,0,.5);
}
<p class=”shadow1”>Lorem ipsum</p>
p.shadow1 {
font-weight: bold;
font-size: 75px;
line-height: 1em;
color: #137576;
text-shadow:
1px 1px 0 #42d5d6,
-1px -1px 0 #084a4a,
-2px -2px 1px rgba(0,0,0,.2),
2px 2px 1px rgba(255,255,255,.2);
}
<p class=”shadow2”>Lorem ipsum</p>
p.shadow2 {
font-weight: bold;
font-size: 75px;
line-height: 1em;
color: #FFF;
text-shadow:
0 1px 0 #96e0e0,
0 2px 0 #86e0e0,
0 3px 0 #76e0e0,
0 4px 0 #56e0e0,
0 5px 5px rgba(0,0,0,.3),
0 10px 10px rgba(0,0,0,.2);
}
<p class=”shadow3”>Lorem ipsum</p>
p.shadow3 {
font-weight: bold;
font-size: 75px;
line-height: 1em;
color: #FFF;
background: #222;
text-shadow:
0 0 4px black,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
<div class=”shadow1”>Lorem ipsum</div>
div.shadow1 {
background: #FFF;
text-align: center;
-webkit-box-shadow: ...;
-moz-box-shadow: ...;
box-shadow:
5px 5px 0 rgba(0,0,0,.3);
}
<div class=”shadow2”>Lorem ipsum</div>
div.shadow2 {
background: #FFF;
text-align: center;
-webkit-box-shadow: ...;
-moz-box-shadow: ...;
box-shadow:
0 0 1px black,
0 0 15px white;
}
<div class=”shadow3”>Lorem ipsum</div>
div.shadow3 {
background: #FFF;
text-align: center;
-webkit-box-shadow: ...;
-moz-box-shadow: ...;
box-shadow:
5px 5px 0 white inset,
-5px -5px 0 white inset,
6px 6px 0 rgba(0,0,0,.15) inset,
-6px -6px 0 rgba(0,0,0,.15) inset,
0 0 20px rgba(0,0,0,.5) inset,
0 0 7px rgba(0,0,0,.2),
0 10px 10px -10px black;
}
<div class=”radius1”>Lorem ipsum</div>
div.radius1 {
background: #FFF;
text-align: center;
-webkit-border-radius: ...;
-moz-border-radius: ...;
border-radius: 20px;
}
<div class=”radius2”>Lorem ipsum</div>
div.radius2 {
background: #FFF;
text-align: center;
width: 200px;
height: 200px;
font-size: 20px;
line-height: 200px;
-webkit-border-radius: ...;
-moz-border-radius: ...;
border-radius: 9999px;
}
<div class=”radius3”>Lorem ipsum</div>
div.radius3 {
background: #FFF;
text-align: center;
-webkit-border-radius: ...;
-moz-border-radius: ...;
border-radius: 20px 60px;
}
<div class=”gradient1”></div>
div.gradient1 {
/* Basic color */
background-color: #183c7a;
/* Chrome, Safari4+ */
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#183c7a), color-stop(100%,#84b6f4));
/* Chrome10+, Safari5.1+ & The rest */
background-image: -webkit-linear-gradient(top, #183c7a 0%,#84b6f4 100%);
background-image: -moz-linear-gradient(top, #183c7a 0%, #84b6f4 100%);
background-image: -o-linear-gradient(top, #183c7a 0%,#84b6f4 100%);
background-image: -ms-linear-gradient(top, #183c7a 0%,#84b6f4 100%);
background-image: linear-gradient(top, #183c7a 0%,#84b6f4 100%);
}
Always start with a solid color for older browsers
<div class=”gradient2”></div>
div.gradient2 {
/* Basic color */
background-color: #183c7a;
/* Chrome, Safari4+ */
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(24,60,122,1)),
color-stop(100%,rgba(132,182,244,0.5)));
/* Chrome10+, Safari5.1+ & The rest */
background: -webkit-radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
background: -moz-radial-gradient(Same as webkit)
background: o-radial-gradient(Same as webkit)
background: radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
}
<div class=”gradient3”></div>
div.gradient3 {
/* Basic color */
background-color: red;
/* Chrome, Safari4+ */
background-image: -webkit-gradient(radial, center center, 0px, center
center, 100%, color-stop(0%,rgba(24,60,122,1)),
color-stop(100%,rgba(132,182,244,0.5)));
background-image: -webkit-radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
background-image: -moz-radial-gradient(Same as webkit)
background-image: o-radial-gradient(Same as webkit)
background-image: radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
}
body {
background: url(../images/pattern2.png) repeat-x top left,
url(../images/pattern.png),
linear-gradient(top, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);
background-color: #1EBDBE;
}
By setting background-color last you can simply only change the color
div.wordwrap1 {
word-wrap: normal;
}
div.wordwrap2 {
word-wrap: break-word;
}
div.textoverflow1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.textoverflow2 {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
:hover {overflow:visible} makes the text visible again
a.transition1 {
background: #FFF;
color: #000;
-webkit-transition: background .5s ease-in-out,color .5s ease-in-out;
-moz-transition: background .5s ease-in-out,color .5s ease-in-out;
-ms-transition: background .5s ease-in-out,color .5s ease-in-out;
-o-transition: background .5s ease-in-out,color .5s ease-in-out;
transition: background .5s ease-in-out,color .5s ease-in-out;
}
a.transition1:hover {
background: #000;
color: #FFF;
}
transition: all .5s ease-in-out;
img.transform1 {
border: 5px solid white;
box-shadow: 5px 5px 5px rgba(0,0,0,.2);
transform: rotate(5deg);
}
img.transform2 {
border: 5px solid white;
box-shadow: 5px 5px 5px rgba(0,0,0,.2);
transform: skew(10deg) scale(1.1,1.1) rotate(-5deg)
translate(10px, 20px);
}
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:
@keyframes animate {
0% {
width: 300px;
height: 100px;
}
25% {
width: 600px;
background: black;
color: #FFF;
height: 200px;
}
100% {
width: 300px;
height: 100px;
}
}
@-webkit-keyframes animate {...}
@-moz-keyframes animate {...}
@-ms-keyframes animate {...}
@-o-keyframes animate {...}
div.animate1 {
width: 300px;
height: 100px;
background: #FFF;
padding: .5em;
}
div.animate1:hover {
-webkit-animation: animate 3s infinite;
-moz-animation: animate 3s infinite;
-ms-animation: animate 3s infinite;
-o-animation: animate 3s infinite;
animation: animate 3s infinite;
}
table {
border-collapse: collapse;
width: 400px;
}
table th {
background: #555;
color: #FFF;
padding: 5px;
border: 1px solid #AAA;
text-align: left;
font-weight: bold;
}
table td {
border: 1px solid #CCC;
padding: 5px;
}
table tr:nth-child(odd) {
background: #DDD;
}
table tr:nth-child(odd) {
background: #DDD;
}
table tr:nth-child(5) {
background: #fcf79f;
}
table tr:nth-child(odd) {
background: #DDD;
}
table tr:nth-child(5) {
background: #fcf79f;
}
table tr:first-of-type {
background: #9fecf9;
}
table tr:nth-child(odd) {
background: #DDD;
}
table tr:nth-child(5) {
background: #fcf79f;
}
table tr:first-of-type {
background: #9fecf9;
}
table tr:last-child {
background: #9fecf9;
}
Useful websites
Because we're not encyclopedias
CSS3.info
HTML5please.com
CSS3please.com
colorzilla.com/gradient-editor
w3.org/TR/selectors
Questions?
Don't let it take over
CSS3
Use it today, but be careful where to use it
Put users first!
Progressively enhance!
Robin Poort (@rhcpoort)
ThemePartner (@theme_partner)
Time up
Recommended