CSS3

What is CSS3? When is CSS4?

  • CSS is controlled by the CSS Working Group
  • They are various luminaries and browser maker staff
  • They decide what we do next, etc?
  • What they are currently looking at you can see here
  • There are blocks of work, called 'specs' (specifications)
    • They are all at different 'levels'/iterations
    • With CSS3 they launched a group of level 3s at once and the misnomer was that it's versions of css rather than versions of specific specs
    • An example of a spec would be 'CSS Text Level 3' or 'CSS Box Sizing Level 4'

What we'll cover:

  • Text Shadow
  • Box Shadow
  • Border Radius
  • Multiple Backgrounds
  • Gradient Backgrounds
  • Radial Gradient Backgrounds
  • Transform
  • Transition
  • Animation

First Question: Can I use these things?

http://caniuse.com/

Vendor Prefixes

Some advanced features are not implemented the same way by every browser maker, so to get their version of it you use a 'vendor prefix'.

 

  • -webkit-<property> : For Safari & Chrome
  • -moz-<property>: For Firefox
  • -o-<property>: For Opera
  • -ms-<property>: For Internet Explorer & Edge

 

You can get programs called 'auto-prefixers' to assist you, so that you don't have to remember.

usage example

Shadows

Text Shadow

Adds a drop shadow to text. (Multiple shadows in comma separated list)

 

Requires:

  1. Offset-x
    • A positive value pushes the shadow to the right
  2. Offset-y
    • A positive value pushes the shadow downwards
  3. Blur radius
    • bigger number = wider and lighter
  4. Colour (default = text color)
.white-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 
        0 0 1em blue;
}

Box Shadow

Same as text shadow, except:

  1. Spread radius
    • How big is the shadow
  2. inset keyword
    • Puts the shadow inside the box.
.white-with-blue-shadow {
   box-shadow: 1px 1px 2px 5px black;
}

Rounded Corners

Border Radius

The properties go in the same order as margins for 1,2,3 & 4 values.

 

Think of it as 45 degrees back, so instead of 'top', it's 'top left'.

 

1 property will make an equal circle, 2 make an elepsis (e.g. border-radius: <horizontal> / <vertical>)

PIG

http://codepen.io/zastrow/pen/kLeDa

Background enhancements

Multiple Backgrounds

Allows multiple images in your backgrounds. Just declare the backgrounds with a comma separated list.

div {
    background: url(./images/img1.jpg) top left no-repeat, 
        url(./images/img2.jpg) top right no-repeat #f00;
}

More background-options

  • attachment: local
  • repeat:
  • clip (which parts of the box model have background)
  • origin (where 0, 0 is when doing position)

Gradient Backgrounds

MDN Guide

Linear Gradient Backgrounds

Makes a background-image of a colour gradient

div {
  background: linear-gradient(135deg, red, blue);
}
/* A gradient on 45deg axis starting blue and finishing red */
linear-gradient( 45deg, blue, red );           

/* A gradient going from the bottom right to the top left 
starting blue and finishing red */
linear-gradient( to left top, blue, red);      

/* A gradient going from the bottom to top, starting blue,
 being green after 40% and finishing red */
linear-gradient( 0deg, blue, green 40%, red );
  • direction ('to <side or corner>') - optional
    • side - left, right, top or bottom
    • corner - bottom left, top right (order not important)
    • OR Angle (e.g. 45deg). Default 0, so bottom to top!
  • Colors (comma separated list)
    • start color 
    • any number of 'color stops'
    • stop color
    • see next slide for more detail
  • Gradient Hints 
    • If you put a unit between 2 stops then it shows when the previous step of the blend should be completed by

Syntax

  • A basic gradient:
    • linear-gradient(red, green);
  • A basic gradient with hint:
    • ​linear-gradient(red, 80%, green);
  • A basic gradient with colour stop:
    • ​linear-gradient(red, green, blue);
  • A basic colour stop with position:
    • ​linear-gradient(red, green 80%, blue);
  • Creating hard lines:
    • ​linear-gradient(red 33%, green 33%, green 66%, blue 66%);
  • Double-position color stop syntax:
    • ​linear-gradient(red 33%, green 33% 66%, blue 66%);

Color Stop Syntax

Radial Gradient Backgrounds

When a linear gradient is painted in rotation around a point

div {
  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , 
    #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
}
  • By default is ellipse (Can use circle to force)
  • Extent (closest-side (contain) to farthest-corner (cover))
  • Center is the origin by default. This can be changed, as above.

Conic Gradient Backgrounds

  • Conics go around rather than outwards, like a linear gradient being bent around a point and that circle being printed outward
  • defaults to center origin and 0deg start point
  • can be overridden with from and at (in that order)
div {
  background-image:  conic-gradient(red, orange, yellow, green, blue);
}

generator

Repeating!!

Border Image

  • border-image-source: url of the image
  • -slice: which parts of the image you wish to use as a bg.
    • fill keyword means use center of image (goes above normal bg)
  • -width: How much of the border does it cover?
  • -outset: painting the image in a different place. 0+ and moves it outwards from the element
  • -repeat: you'll likely to need the image to repeat along the sides. You can repeat, stretch or round like background-repeat 'space' and 'round'

Tranforms

Transformations

  • Visual only (actual size/position of element doesn't change!)
  • Allows you to change properties, such as:
    • translate (x, y, z) or translateX(x), translateY(y) & translateZ(z)
      • e.g. translateX(50%) or translateY(50px)
    • rotate (x, y, z) e.g. rotate(45deg)
    • scale (multiplier), e.g. scale(2) doubles it
    • skew(number + 'deg), e.g. skew(30deg)
  • transform: none; will override.
div {
    transform: scale(2) translateX(15px);
}
  • All, but skew, are now available as properties, and that's better!

Transitions

  • Allows you to change the state of a css property gradually.
  • An example might be 'changing the margin from 20px to 50px over 30 seconds
/* transition single properties */
a {
    transition: margin-left 4s ease-in-out 1s;
    margin-left: 0;
}

a:hover {
    margin-left: 50px;
}

/* transition all properties */

div {
    transition: all 6s ease-out 5s;
}

Easing

  • Linear - it happens at the same speed
  • ease-in - starts slow, gets faster
  • ease-out - starts fast, gets slower
  • ease-in-out - slow at the ends, fast in the middle

 

https://matthewlein.com/ceaser/

&

http://cubic-bezier.com/

Animation

Like transitions, but more control-able.

/* Target the element 8 */
.element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;
}

/* Set up and control your animation in % keyframes */
@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

This is a cycle. It attempts to reach a stage by certain point. Point 0 is where it starts and unless you specify otherwise each property will head back there by the end of the animation. You must specify the state you wish it to reach by each stage of the animation.

What can you animate?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

article

Animation Creator Tools & Libs

http://daneden.github.io/animate.css/

 

Animate.css

 

is a library of pre-made CSS classes that you can either manually or programmatically attach to an element with JavaScript.

Dev Tools

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

Advanced CSS3

By James Sherry

Advanced CSS3

CSS3 Introduction

  • 2,129

More from James Sherry