→ and → to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

Course Outline

  1. Selectors
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography
  8. Backgrounds & Borders
  9. Gradients
  10. Transforms
  11. Transitions & Animation
  12. Other Features

Part 8: Backgrounds and Borders

Backgrounds and Borders

  • Background properties
    • background-color
    • background-image'
    • background-repeat
    • background-attachment
    • background-position
    • background-clip
    • background-origin
    • background-size
    • background shorthand
  • Border properties
    • border-color
    • border-style
    • border-width
    • border shorthand
    • border-radius
  • Border Images
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repea
    • border-image shorthand

Background properties

background-color

  • Use any of the color types
  • Always declare when declaring background images
  • Declare only once in a shorthand declaration.
  • Nothing really new here
  background-color: white;
  background-color: #fff;
  background-color: #FFFFFF;
  background-color: rgb(255,255,255);
  background-color: rgb(100%,100%,100%);
  background-color: rgba(255,255,255,1);
  background-color: rgba(100%,100%,100%, 1);
  background-color: hsl(0, 100%, 100%);
  background-color: hsla(0, 100%, 100%, 1);
  background-color: transparent;
  background-color: currentColor;

Confused? See Part 6: Colors & Transparency

Old School: background-image

none | <url> | inherit 
background-image: url(path/aSingleLonelyCat);
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

multiple background-image

background-image: url(brown.gif), url(blue.gif);
  • Comma separated
  • layered front to back
  • Include background-color
  • Don't print
  • Not accessible
  • Chrome
  • Safari 1.3
  • Firefox 3.6
  • Opera
  • IE 9

CSS3 background-image value types

none | <url> | <image-list> | <element-reference>  | <gradient>
url(singleImage.png)
url(multipleImages.gif), url(otherGif.gif)
none
linear-gradient(top, red, blue)
radial-gradient(circle, red, blue)
url(data:image/gif;base64,fOulrS123hEAAa517sdfQfda...)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' /></svg>");
element('#someID')
image('ico_sprite.jpg#xywh=32,64,16,16')
image("try1.svg", 'try2.png' , "try3.gif")
image("leftArrow.png" ltr, "rightArrow.png" rtl)

url() values

url(singleImage.png)

url(multipleImages.gif), url(otherGif.gif)

url(SVGImages.svg);

url(sprite.png#xywh=40,0,20,20)

url(data:image/gif;base64,fOulrS123hEAAa517sdfQfdafsPFRjuy187xxRM221...)

url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' />^lt;path d='M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z' fill='#666'/><path d='M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z' fill='#666'/></svg>"); SVG Example

Media fragment will not break backwards... hash will be ignored

Other background-image syntax

Allows the use of any element, including <canvas> where images can be used.

  • Firefox 4
background-image: -moz-element('#someID');
background-image: element('#someID')

Define which portion of the image to show:

  • Firefox 4
background-image:
    -moz-image-rect(url(ico_sprite.jpg), 32, 64, 16, 16);
background-image: image('ico_sprite.jpg#xywh=32,64,16,16')

Unsupported Syntax (future!!)

Fallback in case your images doesn't load:

background-image:
     image("try1.svg", "try2.png", "try3.gif", blue)

Flip the image if the direction is rtl.

background-image: image("arrow.png" rtl)

background-image

background-image: url(myGif.gif), url(otherGif.gif);

background-image: none;

background-image: linear-gradient(top, red, blue);

background-image: url(data:image/gif;base64,fOulrShEAAQ...);

background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' /></svg>");

background-image: element('#myID');

background-image: image('ico_sprite.jpg#xywh=32,64,16,16');

background-image: image("try1.svg", 'try2.png' , "try3.gif");

Browser Support

Feature / Browser Firefox Chrome Internet Explorer Opera Safari
Basic support 1 1 4 3.5 1
Multiple backgrounds 3.6 1 9 yes 1.3
Gradients (prefixed) 3.6 1 11+  4
Gradients 16 10 26 12.1 6.1
SVG images 4 8 9 9.5 5
element()  -moz        
image() -moz-image-rect()        

background-repeat

background-repeat:
  repeat | repeat-x | repeat-y | no-repeat | space | round;
repeat
Tiled as often as needed to cover background
no-repeat
Placed once, not tiled or repeated
repeat-x
Tiled along X axis only (Equivalent to repeat no-repeat)
repeat-y
Tiled along Y axis only (Equivalent to no-repeat repeat)
space
Repeated as often as will fit without being clipped, spaced out evenly
round
Repeated as often as will fit without being clipped then scaled so no space in between
background-repeat: no-repeat;

Should accept 2 values (H & V)
Tip: Include background-repeat: no-repeat; in your reset CSS

background-attachment

background-attachment: fixed | local | scroll
background-attachment: scroll

Filet mignon kielbasa pork chop short ribs short loin shank hamburger. Bresaola hamburger venison shankle pork andouille. Pastrami venison andouille pancetta sausage chicken biltong. Tri-tip jerky short loin tenderloin pork chop. Shoulder frankfurter turkey ribeye, jowl tail leberkase brisket sausage boudin ham hock shankle ground round short loin.

% based background-position (old )

Try it out

background-position

New in CSS3: Positioning relative to any corner

background-position: right 50px bottom 50px;
  • Chrome 25
  • Safari 6
  • Firefox 13
  • Opera 10.5
  • IE 9

4-value background-position

Try it out

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-clip / background-origin

Try it out

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-size

background-size: auto | contain | cover | 100px 200px

background shorthand

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;

DO NOT USE BACKGROUND SHORTHAND!!!

  • Border properties & browser support
  • 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 properties

border-color

  • Use any of the color types
  • Nothing really new here
  border-color: white;
  border-color: #fff;
  border-color: #FFFFFF;
  border-color: rgb(255,255,255);
  border-color: rgb(100%,100%,100%);
  border-color: rgba(255,255,255,1);
  border-color: rgba(100%,100%,100%, 1);
  border-color: hsl(0, 100%, 100%);
  border-color: hsla(0, 100%, 100%, 1);
  border-color: transparent;
  border-color: currentColor; /* default */

border-style

  • Up to 4 values (TRouBLe)
  • Old Webkit browsers ignored color for groove, inset, outset & ridge. Fixed!
  • IE6 & IE7 do not understand 'hidden', and inherit.
none
No border. As if border-width: 0; except with border-image
hidden
Same as none, but relevant in border-collapsed tables
dotted
Round dots.
dashed
Square-ended dashes.
solid
a single solid line.
double
Two parallel solid lines. Only relevant if border-width >= 3px. line + space + line = border-width value.
groove
Shadow effect using two colors on each side, with a slightly lighter and darker than the border-color value. Top / left half of each side darker.
ridge
Looks as if it were coming out of the canvas. Bottom / Right darker
inset
Looks sunken into page. Top and left border are made darker, bottom and right are lighter.. Treated as ridge in border-collapsed tables.
outset
Looks as if popping out of page. Bottom and right are darker. Top and left border are lighter.. Treated as groove in border-collapsed tables. 

border-width

border-width: (length) | thin | medium | thick | inherit {1,4};
  • Up to 4 values (TRouBLe)
  • Nothing new here

border shorthand

border: width style color;
border-left: width style color;
border-top: 5px dashed rgba(217,68,11, 0.8);
  • style is REQUIRED.
  • width defaults to medium
  • color defaults to currentColor
  • IE up to 8 is buggy

border-radius

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
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
  • -moz- prefix for 3.6 and earlier
  • longhand syntax in FF3.6
  • % works 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;}
.uglier {
  border-radius: 10px 35px 20px 15px /
                 30px 35px 5px 5px;}

Play with border-radius

Try it out

Border Images

What is Border Image

border-image

border-image: source || slice / width / outset  || repeat;
  • Chrome 1/16
  • Safari 3.1/6
  • Firefox 3.5/15
  • Opera 10.5
  • IE 11

Underlying Properties

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
  • border-image

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;

Play with border-image

Try it out

Part 9: Gradients

Next ➹