Estelle Weyl http://standardista.com http://evotech.net/blog @estellevw CSS3: Si se pued http://findmebyip.com/litmus/
Open Web Camp: CSS3 Implementable Features
Dec 05, 2014
CSS3: You can use CSS3 selectors to target almost any item on the page without adding markup. Rounded corners, tilted images. Drop shadows. CSS3 is the latest and greatest and all the cool kids are doing it. But there is a lot of crazy syntax to memorize and what happens when all browsers are not capable of the effects you are after?
In this session we will learn which CSS3 selectors and design features are supported in modern browsers, and tips and tricks for handling browsers that aren't quite there yet. Welcome to the next generation of web design!
In this session we will learn which CSS3 selectors and design features are supported in modern browsers, and tips and tricks for handling browsers that aren't quite there yet. Welcome to the next generation of web design!
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Estelle Weylhttp://standardista.comhttp://evotech.net/blog
@estellevw
CSS3: Si se puede
htt
p:/
/findm
eb
yip
.com
/lit
mu
s/
CSS2.1
CSS3Unfinished, but well supported
Graceful Degradation /Progressive Enhancement
Don’t need to be identical
Don’t need to be identical
Sites need to be usable and look as good as possible to as many people as
possible.
Modernizr
<html class=“js canvas canvastext geolocation crosswindowmessaging no-websqldatabase no-indexeddb hashchange no-historymanagement draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio localstorage sessionstorage webworkers applicationcache svg no-smil svgclippaths input-multiple video-ogg audio-ogg audio-wav fontface”>
Implementable Features CSS3 Selectors.
Text Shadow (2.0).
Box Shadow (prefixed)
Rounded Corners (prefixed).
@font-face
Alpha Transparency (hsla, rgba).
Opacity.
Rotation.
Implementable Features Multiple background images
Text-overflow
Gradients
Transforms
Background size
Implementable Features?
Multi-column layout
Animations
Transitions
Border-image
Reflections
CSS3 Selectors
E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value] E[attribute^=value] E[attribute$=value] E[attribute*=value]:not([attribute])
CSS3 Selectors
:last-child:only-child :nth-child() :nth-last-child():first-of-type :last-of-type :only-of-type :nth-of-type()
:nth-last-of-type():empty :not() :target :enabled:disabled:checked
http://www.standardista.com/css3/css3-selector-browser-support
CSS3 Selectors
:nth-of-type()
tr:nth-of-type(even) td{ background-color: #dedede;}http://www.standardista.com/sandbox/nthoftype.html
CSS3 Selectors
:nth-of-type()
$(‘tr:nth-of-type(even)’).addClass(‘evenrow’)
tr:nth-of-type(even) td, tr.evenrow td{ background-color: #dedede;}
+ jQuery
CSS3 Selectors Hack
selector:nth-of-type(n) { /* hide from IE */}
Alpha Tranparency
rbga( red, green, blue, opacity);
.blackfilter{ background-color: rgba(0, 0, 0, 0.4);}
http://www.standardista.com/articles/rgba.html
Alpha Tranparency
.blackfilter{ background:transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000000,endColorstr=#99000000);
zoom: 1; background-color: rgba(0,0,0,0.4);}
Opacity
Doesn’t have the impact you intended
.halfthere { opacity: 0.4;}
http://www.standardista.com/articles/rgba_notopacity.html
Opacity
Doesn’t have the impact you intended
.halfthere { opacity: 0.4; filter: alpha(opacity=0.4)}
http://www.standardista.com/articles/rgba_notopacity.html
Opacity
Doesn’t have the impact you intended
.halfthere { opacity: 0.4; filter: alpha(opacity=0.4)}
Coming in Opera 10
http://www.standardista.com/articles/rgba_notopacity.html
HSL(A)
Hue, saturation, lightness, alpha-transparency
http://www.standardista.com/sandbox/hsl.php
http://www.standardista.com/sandbox/hsl360.php
Rounded Corners
.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
Order: topleft, topright, bottomright, bottomleft.
Rounded Corners
.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; position: relative;}
$(‘.rounded’).append(‘<b class=“tr”></b> <b class=“tl”></b><b class=“br”></b> <b class=“bl”></b>’);
Text Shadow .shadowed {
text-shadow: 3px 3px 3px rgba(0,0,0,0.4);}
leftOffset rightOffset blur Color
Box Shadow -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4),
inset -5px -24px 24px rgba(255, 206, 168, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4),
inset -5px -24px 24px rgba(255, 206, 168, 0.6);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4), inset -5px -24px 24px rgba(255,
206, 168, 0.6); /* Opera 10.5, IE 9.0 */
Box Shadow -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4),
inset -5px -24px 24px rgba(255, 206, 168, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4),
inset -5px -24px 24px rgba(255, 206, 168, 0.6);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4), inset -5px -24px 24px rgba(255,
206, 168, 0.6); /* Opera 10.5, IE 9.0 */
filter: Shadow(Color=#000000,Direction=220,Strength=8);
Text Shadow Cut out text
.shadowed { color: #CCCCCC; text-shadow: 3px 3px 3px rgba(0,0,0,0.4); color: rgba(255,255,255,1)}
http://www.standardista.com/articles/text_shadow.html
Rotation
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
1=90, 2=180, 3=270
http://standardista.com/sandbox/rotation.html
Rotation
-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455)";
http://css3please.com/
Gradients.
background-image:url(svgsprite.svg); /* because opera doesn't yet support gradients */
background-image: -moz-linear-gradient(-90deg, #FFCCCC, #E71616 50%, #D40009);
background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#FFCCCC), color-stop(50%, #E71616), to(#D40009));
http://standardista.com/sandbox/opera_logo.html
Thanks.
Estelle Weyl
Twitter: @estellevw
Blog: http://www.standardista.com
http://evotech.net/blog
Prizes
Ticket the FrontEndDesign Conference
Ticket to CSSSummit (online)
Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069
Related Documents
