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

CSS Mastery

◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

Backgrounds & Borders

https://estelle.github.io/cssmastery/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-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
    
    Syntax for non-prefixed differs
    Must also declare border-style
    Border image tool
    border-image tutorial
    border-image browser support
    
      
        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 ➹


  Table of Content
  
    
    Introduction
    Selectors
    Specificity
    Generated Content
    Media Queries
    Best Practices
    Debugging
    Colors & Transparency 
    Flexbox
    
    Tables

    Grids
    Backgrounds & Borders 
    Gradients
    Transforms
    Transitions & Animation
  Other Features

  





  Links
  
    
      
        W3C Background and Borders Specification
      
      image() notation