Estelle Weyl · Standardista.com · @estellevw ·Press → key to advance. ·Press 2 for notes.

CSS3: A Not So Quick Overview

HTML5 & CSS3 for the Real World Mobile HTML5: Using the Latest Today by Estelle Weyl and Maximiliano Firtman

Estelle Weyl
www.standardista.com
@estellevw

Part 1: Selectors

Part 2: Media Queries

Part 3. Specificity

Part 4: Most properties

Part 5: The funnest stuff

Part 4: CSS3 Properties

CSS3 Properties

  • opacity
  • colors
  • border-radius
  • text-shadows
  • box-shadow
  • @font-face
  • box-sizing
  • columns
  • flexible box model
  • grids
  • background properties (multiple, clip, size, 4-positions)
  • border-image
  • text-overflow
  • word-wrap: breakword
  • calc()
  • rem
  • Masks
  • Reflections
  • text-stroke

Opacity

  • Chrome 1
  • Safari 1.2
  • Firefox 0.9
  • Opera 9
  • IE 4* / IE 9
opacity: 1;
opacity: 0.75;
opacity: 0.5;
opacity: 0.25;
opacity: 0;

AlphaTransparency

color: rgba(0, 0, 0, 1);
background-color: rgba(58, 103, 171, 1);
color: rgba(0, 0, 0, 0.75);
background-color: rgba(58, 103, 171, 0.75);
color: rgba(0, 0, 0, 0.5;
background-color: rgba(58, 103, 171, 0.5);
color: rgba(0, 0, 0, 0.25);
background-color: rgba(58, 103, 171, 0.25);
color: rgba(0, 0, 0, 0)
background-color: rgba(58, 103, 171, 0);
  • Chrome 1
  • Safari 1.2
  • Firefox 0.9
  • Opera 9
  • IE 9

HSLA

color:hsla(
   328, 	 H 
blah

   100%, 	 S 

   44%, 	 L 

   1.00 	 A 

);
HSLA Colors

AlphaTransparency Tips

  • Used in RGBA & HSLA colors 
    rgba(58, 103, 171, 0.5);
hsla(216, 49%, 45%, 0.5);
  • Transparent Shadows 
    .trans { box-shadow: -10px 10px rgba(0,0,0,0.3);
         text-shadow: 0 21px 1px rgba(0,0,0,0.3);}
  • Solid Shadows 
    .solid { box-shadow: -10px 10px #999;
         text-shadow: 0 21px 1px #999;}

border-radius

Border on slides, code & showflakes

border-radius: 0;
border-radius: 20px;
border-radius: 50%;
  • Chrome / Chrome 4
  • Safari 3 / Safari 5
  • Firefox 1 / Firefox 4

  • Opera 10.5

  • IE 9

% works correctly since Safari 5.1 and FF 4.0

border-radius

.circle {border-radius: 50%;}
.oval { border-radius: 50%;}
.different { border-radius: 10px 30px;}
.elliptical { border-radius: 10px / 30px;}

Text & Box Shadows

  • box-shadow: (inset) left top blur spread color;
text-shadow: left top blur spread color;
  • Transparent Shadows 
    .trans { box-shadow: -10px 10px rgba(0,0,0,0.3);
         text-shadow: 0 21px 1px rgba(0,0,0,0.3);}
  • Solid Shadows 
    .solid { box-shadow: -10px 10px #999;
         text-shadow: 0 21px 1px #999;}

Text Shadow

.textshadow {
    text-shadow: 
    0 1px #cccccc, 	
    0 2px #c9c9c9, 
    0 3px #bbbbbb, 
    0 4px #b9b9b9, 
    0 5px #aaaaaa, 
    0 6px  1px  rgba(0, 0, 0, 0.1), 
    0 0    5px  rgba(0, 0, 0, 0.1), 
    0 1px  3px  rgba(0, 0, 0, 0.3), 
    0 3px  5px  rgba(0, 0, 0, 0.2), 
    0 5px  10px rgba(0, 0, 0, 0.25), 
    0 10px 10px rgba(0, 0, 0, 0.2), 
    0 20px 20px rgba(0, 0, 0, 0.15);
}
  • Chrome
  • Safari
  • Firefox 3.5
  • Opera 9.5
  • IE 10?

text-shadow

Syntax

text-shadow:  0 2px 5px hsla(0, 0%, 0%, 0.2);
text-shadow: [horiz] [vert] [blur] [color];

box-shadow

box-shadow:  
    inset 3px -3px 0 3px green, 
    inset -3px 3px 0 3px yellow,
    3px 3px 0 3px blue, 
    -3px -3px 0 3px magenta; 
box-shadow: 
    inset? [horiz] [vert] [blur] [spread] [color];
  • Last shadow drawn 'first', under previous shadow
  • Should still be prefixed for best support
  • Chrome / Chrome 10
  • Safari 3 / Safari 5.1
  • Firefox 3.5 / Firefox 4.0
  • Opera 9 / Opera 10.5

  • IE 9

@font-face

@font-face {
    font-family: 'ChalkdusterRegular';
    src: url('chalkduster-webfont.eot');
    src: url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'),
         url('chalkduster-webfont.woff') format('woff'),
         url('chalkduster-webfont.ttf') format('truetype'),
         url('chalkduster-webfont.svg#ChalkdusterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'ChalkdusterRegular';
}

@font-face

@font-face {
  font-family: yourFontName;
  src: url(fontfile) [, url(fontfile)]*;
  [font-weight: bold|normal];
  [font-style: italic|normal];
  [charset: characterSet;]
}
File Chrome Firefox Opera Safari Internet Explorer
EOT Χ Χ Χ Χ ✓
TTF/OTF ✓ ✓ (3.5+) ✓ (10+) ✓ (iOS 4.2) (9)
SVG ✓ Χ ✓ ✓
WOFF ✓ (5+) ✓ (3.6+) ✓ (11.1+) ✓ (5.1) ✓ (9)

Columns

column-count: 1;      
column-width: 10em;   
column-rule: 1px solid #bbb;
column-gap: 2em;

Adipisicing rump nostrud exercitation turkey, bresaola deserunt ullamco beef ribs pork loin ball tip pig pork belly nisi. Cillum sunt officia deserunt, beef aliqua ham ut t-bone sed ut consequat shoulder. Nostrud excepteur biltong non, fatback salami incididunt beef cupidatat occaecat.

Reprehenderit ham hock labore tri-tip chuck, excepteur ut. Meatball sint enim beef ribs, mollit laborum flank commodo fatback pariatur tail rump eiusmod spare ribs dolore. Ut minim qui, tongue eu short ribs pancetta excepteur incididunt culpa consequat pastrami magna chuck. Flank sunt sint, occaecat ut adipisicing labore turkey laboris in magna.

Chicken bacon meatloaf minim meatball salami sunt spare ribs.

Bacon sed tail, pork loin pariatur meatloaf hamburger exercitation corned beef shank ex esse sirloin qui beef ribs. Consectetur anim corned beef, cupidatat ex enim tempor. Pariatur consectetur ad, enim ut quis consequat aliquip exercitation jowl tenderloin ham dolore.

Fugiat excepteur aliqua, cow dolor swine shoulder elit tri-tip shankle. Irure consectetur cow labore, cupidatat exercitation ea jerky ham officia dolore tongue eu aliqua. Ham hock irure beef ribs non, flank sausage eiusmod ham short loin nostrud.

  • Chrome
  • Safari 3.1
  • Firefox 2
  • Opera 11
  • IE 10
  • -webkit- and -moz-required

box-sizing

box-sizing: content-box | border-box
content-box
border-box
div {
width: 200px; 
height:100px; 
padding: 20px;
margin:20px;
border-width: 5px;
}
border-box
  • -webkit- Safari 5 and older
  • -moz- for all Firefox versions
  • Chrome
  • Safari 3.1/5.1
  • Firefox 2/8
  • Opera 9.5
  • IE 8

border-box replicates the old IE box model

Flexible Box Model

Used to position horizontal and vertical stacks.

.box {
  display: box;
  box-orient:;
}
.box .one, .box .two {
  box-flex: 1;
}
.box .three {
  box-flex: 3;
}
  • Chrome
  • Safari 3.1
  • Firefox 2
  • Opera 12
  • IE 10
  • -webkit-, -moz-, -ms- required
Box one
Box two
Box three

Flexible Box Model

.box {
  display: box;
  box-pack: ;
  box-align: ;
}

Old FlexBox Properties

display: box ;
box-orient:  horizontal | vertical | inherit;
      
box-pack: start | end | center | justify;

box-align: start | end | center | baseline | stretch;

box-flex: integer | 0;

box-flex-group

box-ordinal-group

box-direction: normal | reverse | inherit;

box-lines:

New FlexBox Properties

display: flexbox | inline-flexbox;
flex-direction: lr | rl | tb | bt | inline | 
    inline-reverse | block | block-reverse

flex-order: integer | 1;
      
flex-pack: start | end | center | justify;

flex-align: auto | baseline;
  • Chrome 14
  • Safari 5.1
  • Firefox 7
  • Opera 12
  • IE 10
  • so far no support

W3C specs

The spec syntax changed drastically. Chrome is currently changing over. Other browsers have it on their plans.

grid layout

Using grid system to lay out content, dividing available space into columns and rows

grid-columns:
grid-rows:
grid-column:
grid-row:
grid-cell:
grid-cell-stacking:
grid-template:
grid-column-span:
grid-row-span:
grid-column-sizing:
grid-row-sizing:
grig-flow:
grid-column-align:
grid-row-align:
grid-layer:

W3C Specifications

display: grid | inline-grid
  • Chrome
  • Safari 3.1
  • Firefox 2
  • Opera 12
  • IE 10
  • -ms- required

background properties

Avoid ‘background’ because it resets everything!

background-color: transparent;
background-image: none;
background-position: 0 0;
background-size: auto;
background-repeat: repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;

background-position

Can now set 4-value position!

background-position: bottom 20px right 20px;

Example

  • Chrome 14
  • Safari 5.1
  • Firefox 7
  • Opera 11
  • IE 10

background-size

background-size: auto | contain | cover | <length>
  • Use for creating gradients backgrounds
  • Needed for hiDPI images
  • ‘contain’ grows/shrinks to fully fit
  • ‘cover’ grows to min size that covers 100% of height & width
  • Chrome
  • Safari
  • Firefox 4
  • Opera 11
  • IE 9
  • add -moz- for FF 3.6 and earlier

background-clip

background-clip: border-box | padding-box | content-box
content-box
padding-box
border-box
  • Chrome
  • Safari
  • Firefox 4
  • Opera
  • IE 9
  • add -moz- for FF 3.6 and earlier

background-origin

background-origin: border-box | padding-box | content-box
content-box
padding-box
border-box
  • Chrome
  • Safari 5.1
  • Firefox 4
  • Opera
  • IE 9
  • add -moz- for FF 3.6, -webkit- for Safari 5

background property resources

background: 
 img position / size repeat attachment origin clip, 
 img position / size repeat attachment box{1,2} bgcolor;    
background: 
 url(topImg.jpg) 0 0 / 30px 30px repeat scroll border-box content-box, 
 url(botImg.jpg) 15px 15px / 30px 30px fixed border-box #609;

If one ‘box’ value is present then it sets both 'background-origin' and 'background-clip' to that value. If two values are present, then the first sets 'background-origin' and the second 'background-clip'

border-image

border-image: source || slice / width / outset  || repeat;
  • Chrome
  • Safari 3.1
  • Firefox 3.5
  • Opera 10.5
  • IE 10?
  • All vendor prefixed
  • Border image tool
  • border-image tutorial
  • border-image browser support

    • border-image

    border-image-source: none | url() | <image>

border-image-slice: <number> | XX% {1,4} && fill

border-image-width: <length> | XX% | <number> | 1 | auto {1,4}

border-image-outset: <length> | <number> {1,4}	

border-image-repeat: stretch | repeat | round {1,2}		
	

    S = 
W = 
 
    border-image: url(gradient.png) 34 / 34px stretch;

    text-overflow: ellipsis

    p {
  text-overflow: ellipsis; 
  white-space: nowrap;
  overflow: hidden;
}

    overflow-hidden only: Play with the slider to see what happens at the end of the line

    white-space: nowrap, overflow: hidden: Play with the slider to see what happens at the end of the line

    text-overflow: ellipsis; white-space: nowrap; and overflow: hidden: Play with the slider to see what happens at the end of the line

    Needs nowrap and overflow:hidden (anything other than visible) to work.
    Prefixed in Opera 9 and Opera 10.

    • Chrome
    • Safari
    • Firefox 7
    • Opera 11
    • IE 6

    word-wrap: breakword

    word-wrap:  normal | break-word
    Despite the old adage, smiles is not longer than supercalifragilisticexpialidocious.
    • Chrome 1
    • Safari 1
    • Firefox 3.5
    • Opera 10.5
    • IE 5.5

    calc()

    • Chrome
    • Safari
    • Firefox 4
    • Opera 11
    • IE 9
    .colA {
  width:50%;
  margin-right: 1em;
}
.colB {
  width: -moz-calc(50% - 1em);
}
    • +, -, *, /, mod, min, and max operators.
    • Vendor prefixed in Firefox
    • Not yet ready for production
    • Intro to calc()

    rem

    html { 
    font-size: 62.5%; 
} 
p { 
    font-size: 13px; 
    font-size: 1.3rem; 
} 
small { 
    font-size: 11px; 
    font-size: 1.1rem; 
}
    • Chrome 6
    • Safari 5
    • Firefox 3.6
    • Opera 12?
    • IE 9

    Part 5: The fun stuff

    Next ➹

    Thank you

    HTML5 & CSS3 for the Real World

    Estelle Weyl

    www.standardista.com

    @estellevw