Stephanie Rewis - css-startech

CSS3

The web’s Swiss Army Knife updated and improved

Thursday, October 27, 2011

http://south11.webdirections.org/program/design#css3-the-webs-swiss-army-knife-updated-and-improved

http://south11.webdirections.org/program/design#css3-the-webs-swiss-army-knife-updated-and-improved

Stephanie (Sullivan) RewisFront-‐end developerPrincipal w3conversions.comWrote the CSS Layouts in DreamweaverWaSP corporate liaison to AdobeCustomized corporate training & mentoringAuthor & SpeakerTwiFer addict (@stefsull)


http://www.w3conversions.com

http://www.w3conversions.com

If we use these techniques right [HTML and CSS3], we can get rid of half of the images on the web, because they're used for styling.

— Håkon Wium Lie


Benefits of CSS3Reduced development and maintenance 0me Increased usability & accessibilityBe8er search engine placement due to real text and faster pagesOp0mized styles based on device capabili0esIncreased page performanceReducing the number of HTTP requests...is the most important guideline for improving performance for first 0me visitors.

Yahoo! Excep,onal Performance Team, h8p://developer.yahoo.com/performance/rules.html


http://www.filamentgroup.com/dwpe

http://www.filamentgroup.com/dwpe

CSS is Modular

It will never be done

Modules are in varied states of compleVon


http://www.w3.org/Style/CSS/current-work

http://www.w3.org/Style/CSS/current-work

CSS3 PrefixesYou can use it today—but know your prefixes

-‐moz-‐ Mozilla (Gecko browsers)

-‐webkit-‐ Safari (plus WebKit browsers)

-‐o-‐ Opera So\ware

-‐ms-‐ Microso\

-‐khtml-‐ Konqueror browser (plus Safari 1)


http://peter.sh/examples/?/css/vendor-prefix.html

http://peter.sh/examples/?/css/vendor-prefix.html

When Can I Use...CompaVbility tables for features in HTML5, CSS3, SVG and other upcoming web technologies


http://www.caniuse.com

http://www.caniuse.com

Modernizr — My Hero!hFp://www.modernizr.comFeature-‐detecVon library for HTML5 and CSS3Modernizr creates the HTML5 elements in the DOM


http://www.modernizr.com

http://www.modernizr.com

http://modernizr.com

http://modernizr.com

Modernizr - Feature DetectionLink to the script & add <html class=”no-‐js”>Modernizr changes the no-‐js class to a long string of classes that you can use to serve different CSS or JS to a browser depending on its lack of capabiliVes. ie:<html class=” js canvas canvastext geolocaVon crosswindowmessaging no-‐websqldatabase no-‐indexeddb hashchange no-‐historymanagement draganddrop no-‐websockets rgba hsla mulVplebgs backgroundsize borderimage borderradius boxshadow opacity no-‐cssanimaVons csscolumns cssgradients no-‐cssreflec8ons csstransforms no-‐csstransforms3d no-‐csstransi8ons video audio localstorage sessionstorage webworkers applicaVoncache svg no-‐smilsvgclippaths foniace”>


CSS based on abilitiesWrite CSS for browsers missing support:.no-‐cssgradients .element { background-‐color: #value; /*or*/ background-‐image: url(img/gradient.jpg);}

Or write CSS so it’s only shown to capable browsers:. cssgradients .element { background-‐image: -‐webkit, -‐moz, -‐ms, -‐o, etc;}


Backgrounds


border

Three Boxes (Box Model)


background-position (CSS3)Four values are now possible:

boFom 10px le\ -‐15px

boFom 10px le\ -‐15px

x-‐axis y-‐axis


background-repeat (CSS3)Double values can now be used:

background-‐repeat: repeat no-‐repeat;Using a single “repeat” assumes a repeat in both direcVons.Two new values:

space -‐ repeat as many Vmes as will fit with equal spacing between imagesround -‐ rescales the image so it fits an equal number of Vmes

x-‐axis y-‐axis


Flexible ControlNew levels of control with new combinaVons

background-‐repeat: no-‐repeat space;

background-‐repeat: space round;


background-originBackground-‐origin specifies the star-ng point for the background image

border-‐box -‐ posiVons the background image relaVve to the outer edge of the borderpadding-‐box (default) -‐ posiVons the background image relaVve to the outer edge of the padding (inner edge of the border)content-‐box -‐ posiVons the background image relaVve to the outer edge of the content (inner edge of the padding)


background-clip

border-‐box (default) -‐ clips backgrounds relaVve to the outer edge of the borderpadding-‐box -‐ clips backgrounds relaVve to the outer edge of the padding (inner edge of the border)content-‐box -‐ clips backgrounds relaVve to the outer edge of the content (inner edge of the padding)

Background-‐clip hides a porVon of your background


background-sizeBackground-‐size lets you specify the size of a background image — either as a fixed value, or relaVve to the background posi0oning area

pixels -‐ define one or both valuespercents -‐ define one or both valuescover -‐ covers the enVre space using the lesser width or height. Warning: Clipping may occur.contain -‐ shows the enVre image based on the greater height or width of the image. This means the image may not completely fill the background posiVoning area.When using cover/contain on the body element, set the height of the html element to 100%



http://assortedgarbage.com/presario/background-size-simple.html

http://assortedgarbage.com/presario/background-size-simple.html

.freshest { /* contains awning background */! width: 33.375em; ! background-size: 100% auto; /* this allows the background image to scale on the x-axis WITH larger text sizes */! font-size: 1em;}.homeLogo { /* logo base of the vege stand */! width: 33.75em; !! height: 18.75em;! font-size: 1em; /* this causes image in the page to scale up as well */! -ms-interpolation-mode: bicubic; /* this helps IE to play nice when scaling */}.navMain li { /* vege baskets */! height: 11.25em;! background-size: 100% 100%; /* this allows navigation images to scale both directions WITH larger text */}


http://www.netmagazine.com/tutorials/take-advantage-css-background-size-property





































































































































More Images - More BetterSyntax (comma separated):background-‐image: url(“image01.jpg”), url(image02.jpg”);

Subsequent background properVes, such as background-‐repeat and background-‐posiVon, use a comma-‐delimited list of values which correspond to the individual background images

background-‐image: url(“image01.jpg”), url(image02.jpg”);background-‐posiVon: le\ top, right boFom;background-‐repeat: repeat-‐x, no-‐repeat;background-‐size: 250px, cover;


Shorthand Ain’t So ShortBackground shorthand should be avoided because it resets everything!

background-‐color: transparent;background-‐image: none;background-‐posi0on: 0 0;background-‐size: auto; background-‐repeat: repeat;background-‐clip: border-‐box;background-‐origin: padding-‐box;background-‐a8achment: scroll;


Alpha GradientsGradients are applied to an element as abackground-‐imageCreate an rgba or hsla black or white gradientsVary the opacity instead of the color for a more so\, flexible effect that can be applied over any color on the page


Combined Backgrounds


http://assortedgarbage.com/odyssey/



Background Combined

background-‐color: rgb(96,147,201);background-‐image: url(../images/santorini.jpg), -‐webkit-‐linear-‐gradient(top, rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 100%);background-‐image: url(../images/santorini.jpg), -‐moz-‐linear-‐gradient(top, rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 100%);background-‐repeat: no-‐repeat, repeat-‐x;background-‐posiVon: center boFom, le\ top;-‐webkit-‐background-‐size: contain, 250px; -‐moz-‐background-‐size: contain, 250px; background-‐size: contain, 250px;

Background-‐image GradientBackground-‐colorBackground-‐image


Pseudo-elements


Pseudo-element selectorsAlso called generated content

place content into your CSS and have it appear in HTML using the content property

should not be used for essenVal content

specify where it should appear, :before or :a\er the content of the element

8+Thursday, October 27, 2011

Pseudo-element selectorsgenerated content

.capVon:before { content: “Figure: “; font-‐weight: bold;}

<img src=”img/baths.jpg><p class="capVon">The Baths at Virgin Gorda</p>


We can create whole elementsdiv { width: 700px; height: 400px; posi8on: rela8ve;}div:before, div:aDer { /* the common proper0es for both selectors */ content:""; posi8on: absolute;}div:before { top: 25px; leU: 25px; right: 25px; bo8om: 25px;}div:aDer { top: 50px; leU: 50px; right: 50px; bo8om: 50px;}


Every element gets two!


Negative edge absolute positioning


Pseudo-elements with buttonsMulVple layering is one method to apply mulVple borders on buFons


Create multiple wrappers


Overlay gradients, borders & rgba


Add decorative images.prof .hd:before { content: ""; posiVon: absolute; le\: -‐15px; top: 11px; width: 16px; height: 24px; background: url(../img/point.png) no-‐repeat 0 0;}


Creating Shapes


Border TipBorders meet with diagonalintersecVonsheight: 0;width: 0;border-‐width determines size of the trianglevary border widths to change triangle shapeuse transparency on 3 sides


border-radiusComplete circle:Width and height are equalRadius equals half of width/height plus full paddingUse em units if circle contains text.reminder { height: 9em; width: 9em; padding: 2em; -‐webkit-‐border-‐radius: 6.5em; -‐moz-‐border-‐radius: 6.5em border-‐radius: 6.5em;}Can use percentages if older browsersupport is not required: border-‐radius: 50%;


keynote:/Users/stefsull/Documents/files/business/presentations/html5-css3-sessions/Wharton2011/css3/00-CSS3-index.key
























































































































border-radiusEllip-cal corners:border-‐radius: x-‐axis/y-‐axis;First value extends the x-‐axis Second value extends the y-‐axis

-‐webkit-‐border-‐radius: 100px/40px; -‐moz-‐border-‐radius: 100px/40px; border-‐radius: 100px/40px;

(Safari 3 & 4 used non-‐standard: border-‐radius: 25px 10px;)


transformSkewed shapes:

-‐webkit-‐transform: skew(-‐45deg); -‐moz-‐transform: skew(-‐45deg); -‐ms-‐transform: skew(-‐45deg); -‐o-‐transform: skew(-‐45deg); transform: skew(-‐45deg);


The lowly squareYou can do this, right?

element { height: 150px; width: 150px;}


Shapes as Pseudo-elements


Add trianglesdiv:before { content: ""; posiVon: absolute; height: 0; width: 0; le\: -‐30px; top: 30px; border-‐right: 30px solid skyblue; border-‐top: 15px solid transparent; border-‐boFom: 15px solid transparent;; }


Triangles for ribbonsPseudo-‐element triangles added as the top and boFom of a ribbon


Speech bubblesRound pseudo-‐elementsAbsolutely posiVoned belowtheir parent element.Or overlapped so that the top pseudo-‐elementobscures a porVon of the lower


Pulling the shapes together


http://nicolasgallagher.com/pure-css-gui-icons/

http://nicolasgallagher.com/pure-css-gui-icons/

Box-shadow


box-shadow as bordersSyntax:values -‐ x offset, y offset, blur, spread, color

box-‐shadow: 0 0 0 5px #6CC, 0 0 0 10px #69C, 0 0 0 15px #66C, 0 0 0 20px #63C, 0 0 0 25px #60C;

Tips:Borders are placedon elements from theinside to the outside.


box-shadow on one side onlyNegaVve spread value can be used to make the box-‐shadow show on only one side of the element.


http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/



box-shadow on pseudo-elementsPlace box-‐shadows on pseudo-‐elements to create avariety of effects.

.shadow:before { content: “”; posiVon: absolute; z-‐index:-‐1; le\:10px; width:50%; height:20%; box-‐shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-‐3deg);}

(.shadow:a\er is the same, but reversed)


box-shadow on pseudo-elementsNicolas Gallagher’s drop-‐shadows


http://nicolasgallagher.com/css-drop-shadows-without-images/

http://nicolasgallagher.com/css-drop-shadows-without-images/

CSS Regions& Exclusions


CSS RegionsCSS Regions bring new properVes to CSS that provide:

text containers with custom shapes.exclusion shapes which text will wrap around.text that flows from one area into another.


Single Thread


http://labs.adobe.com/technologies/cssregions/

http://labs.adobe.com/technologies/cssregions/

Content Shape


Dynamic Exclusion



http://labs.adobe.com

http://labs.adobe.com

Variables


CSS Variables “defines a new type of primi8ve value, the Variable, which is accepted by all proper8es.”

@var $header-‐color color #000066;@var $link-‐color color #0066CC;@var $secondary-‐color color #CC0066;

a { color: $link-‐color; }a:visited { color: $secondary-‐color; }h1 { color: $header-‐color; background-‐image: linear-‐gradient(leU, $main-‐color, transparent 25%);}


Mixins (not accepted yet)Mixins are blocks of rules that can be "mixed in" with normal blocks of rules.

@mixin ‘alert’ { background: #FF0000; color: #FFFFF; text-‐shadow: 0 0 3px rgba(0,0,0,0.4); anima0on: ‘a8en0ongrab’ 300ms;}input:invalid:focus:aUer { content: “INVALID”; @mixin ‘alert’;}.alert { @mixin ‘alert’; text-‐decora0on: underline;}


CSS Filters


CSS FiltersA filter effect consists of a series of graphics operaVons that are applied to a given source graphic (client-‐side) to produce a modified graphical result. The result of the filter effect is rendered to the target device instead of the original source graphic.Based on SVG filters.


Example filtersgreyscale(amount)sepia(amount)saturate(amount)hue-‐rotate(angle)invert(amount)opacity(amount)gamma(amplitude exponent offset)blur(radiusX radiusY)sharpen(amount radius threshold)drop-‐shadow(<shadow>)


Also being considered...brightness, contrast, exposurehalUonemo0on-‐blur(radius, angle)posterize(levels)bump(x, y, radius, intensity)generatorscircle-‐crop(x, y, radius)affine-‐transform(some matrix)

crop(x, y, w, h)bloom(radius, intensity)gloom(radius, intensity)mosaic(w,h)displace(url, intensity)edge-‐detect(intensity)pinch(x, y, radius, scale)twirl(x, y, radius, angle)


Thank you!


Resourcesw3conversions.com/resources.html

FleeVng Epiphanies -‐ My blog

Box shadow on one side blog post

CSS background-‐size property at .netmagazine

Create flexible imagery for the web -‐ Computer Arts

Mastering CSS with Dreamweaver CS4 [New Riders Voices that MaFer]Stephanie Sullivan & Greg Rewis

twiFer: @stefsull

[email protected]


http://w3conversions.com/resources.html

http://w3conversions.com/resources.html

http://blog.w3conversions.com/

http://blog.w3conversions.com/





http://www.computerarts.co.uk/tutorials/create-flexible-imagery-web

http://www.computerarts.co.uk/tutorials/create-flexible-imagery-web

mailto:[email protected]

mailto:[email protected]

Technology

Stephanie Rewis - css-startech