and to change slides. 2 for comments. estelle.github.com/cssmastery

CSS Mastery

◈ Estelle Weyl

@estellevw

www.standardista.com

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-repeat
    • border-image shorthand

Background properties

background-color property

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: #FFFFFFFF;
  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 Colors & Transparency

background-image property

Old School: background-image

background-image: none | <uri> | inherit 
background-image: url(path/aSingleImage.jpg);

Often part of background shorthand with:

  • background-repeat
  • background-attachment
  • background-position
  • background-color

Don't use background shorthand for risk of setting any of 8 properties to default values

background image tips

  • Make sure there's enough contrast with text
    • add drop shadow
  • Include a background color
  • Doesn't print by default
  • Not accessible

multiple background-image

none | [<image>]# | inherit 
<image> = <url> | <image()> | <image-set()> | 
          <element()> | <cross-fade()> | <gradient>
background-image: url(green.gif), url(blue.gif);
  • Comma separated
  • layered front to back
  • Include background-color

cross-fade()

image-set()

background-image value types

none | <url>  | <gradient> | 
  <image()> | <element()> | <image-set()>  | <cross-fade()> 
none

url(singleImage.png)
url(firstImage.jpg), url(secondImage.jpg)
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>");

linear-gradient(to bottom, green, blue)
radial-gradient(circle, green, blue)
image('ico_sprite.jpg#xywh=32,64,16,16')
image("try1.svg", 'try2.png' , "try3.gif")

element('#someID')

See image() notation

url() values

url(singleImage.png)

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

url(SVGImages.svg);

url(sprite.png#xywh=40,0,20,20)
image(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

media fragments

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");

background-repeat property

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 property

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.

background-position property

% based background-position (old )

Try it out

background-position

Positioning relative to any corner

background-position: right 50px bottom 50px;

4-value background-position

Try it out

background-clip & background-origin property

background-clip

background-clip: border-box | padding-box | content-box
content-box
padding-box
border-box

background-origin

background-origin: border-box | padding-box | content-box
content-box
padding-box
border-box

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

background-size

background-size

background-size: auto | contain | cover | 100px 200px
auto
image is actual size
cover
image maintains aspect ratio, covering entire element even if that means part of the image is cut off.
contain
image maintains aspect ratio, fitting the entire image into the element even if that means part of the background is showing or the image repeats.
length
image maintains aspect ratio, growing or shrinking so that the width is the length defined
auto length
image maintains aspect ratio, growing or shrinking so that the height is the length defined
length length
image DOES NOT NECESSARILY maintain its aspect ratio, height and width both grow or shrink to the length defined

background shorthand property

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'

Play with background properties

Try it out

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: #FFFFFFFF;
  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

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

border-radius

border-radius

border-radius: 0;
border-radius: 20px;
border-radius: 50%;
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

DO NOT PREFIX

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

border-image: source || slice / width / outset  || repeat;

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

Gradients

Next ➹