CSS calc() performs simple calculations to determine CSS property values. The calc() function allows mathematical expressions with addition ( + ), subtraction ( – ), multiplication ( * ), and division ( / ) to be used to create a value. A useful feature of this function is the ability to mix percentages and absolute values or to mix different units. Pixels can be subtracted from percentages and viewport widths can be added to pixels, for example.

CSS calc() can be used anywhere there’s a css length or number in your stylesheet. .item { width: calc(100% - 60px);} Notice that the operator has a space on either side. That is a requirement for + and - . Leaving it out renders the calculation void. Dividing by 0 voids the result as well.

CSS Tricks has a Complete Guide to Calc

For those of you that are mathematically inclined, calculate sine, cosine, tangent. Check out this trig functions in CSS article.

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. Variables or CSS Custom Properties for Cascading Variables have a precursor of sorts in curentcolor. Currentcolor sets the current color as a variable with that name. It was originally introduced by Opera. Various CSS preprocessors are popular because they implemented variables.

Variables save time and help in the organization of complex documents. It is part of the computer programer’s ethic known as DRY or don’t repeat yourself. Create a variable for colors used in developing the website. To change a color only the definition has to be updated. CSS variables work like any other CSS custom property, like normal CSS properties. CSS variables can be used almost everywhere there are values, including in @media queries.
The variable is defined by -- dash dash, like an empty prefix. Think of it as -webkit- without webkit. The variable is case sensitive and defined as a :root pseudo-class . For example: :root { --main-color: orange;}.

The variable is then applied as a value: background-color: var(--main-bg-color);

Images and videos can be resized the same way that background images can be resized. Videos can maintain their proportion in what is a boon for responsive design. The object-fit and object-position properties define how an element responds to the height and width of its content box. The object-fit property implements cover and contain to determine the size of an image based on its longest or shortest length. There is also a scale-down value that keeps an image in proportion as it is resized (think video). The object-position property allows placement of the image in the box. The default is 50% 50% which centers the image. In the following demo, the images is enlarged to fill the box using cover, pinned to the left side center. The image will resize proportionally with a change in the box’s size.

Video

It is important to keep video ratio in proportion. Previous hacks used percentage based bottom padding of the parent container’s width and stretched the video to that ratio. It’s now possible to specify contain or scale-down.

CodePen has amazing examples that are an inspiration for how to use CSS3 in ways that will inspire you. The code at times needs to be compiled (so it looks like the HTML or CSS you are familiar with) Here are some examples. Poke around, and send me any additional examples you find compelling.

Pure CSS Parallax

See the Pen Pure CSS Parallax Scrolling by Keith Clark (@keithclark) on CodePen.

Animated Interfearence Patterns

See the Pen Single element Atari ST demo effect by Keith Clark (@keithclark) on CodePen.

CSS Shapes

See the Pen CSS Shapes by Bryan Robinson (@brob) on CodePen.

Playing with CSS Filters

See the Pen Playing with CSS Filters. by Sam Jarvis (@samthejarvis) on CodePen.

Google recently introduced Google Web Designer and Adobe has The Edge Suite and in particular Edge Animate. These tools produce interactive content for desktop and mobile devices. See the Adobe Edge tools used to showcasethemselves.

Flash used to dominate this domain, which was used primarily for ads, but was pushed out after stepping foul of Apple’s QuickTime and the popularity of the iPhone. Who wants to pay for ads that wealthy iPhone owners cannot see?

That left a vacuum that CSS3, HTML5 and Javascript are supposed to fill. CSS, HTML and Javascript are not Flash, and as you can see, even creating basic animation is challenging.

To solve this, both programs provide a drag-and-drop, easy-to-use user interface for creating animation and interactivity using HTML, CSS and JavaScript. Adobe wants to recapture the Flash market, and Google wants people to create ads, because that is where Google makes its money. Google is an expert at the commercialization of good will.

Though we have access to both programs, I like the way Google Designer allows me to switch to code view and edit the parameters directly. Adobe Edge Animate requires Edge Code to look at the underlying code, and may be more ambitious in the long run, but it is not nearly so interesting and useful for us as Google’s Web Designer.

Google Web Designer

Download a copy and use it to do your animatic or motion enabled ad. Instructions on how to use the program can be found on the original download page.
Google Web Designer tutorials

Pushing the boundaries of the original specification, CSS3 filters and blends can radically change the appearance of your HTML elements.

Filters

See the Pen Splash by Dirk Weber (@DirkWeber) on CodePen.

Example of a SVG filter created by Dirk Weber

CSS Filters has its origin in a SVG (Scalable Vector Graphics) feature for applying image processing effects to vector graphics. Robert O’Callahan figured out how to apply the filters effects to HTML content via CSS.

How Filters Work

Before the rendered page loads, the filter takes a snapshot of the page as a bitmap. The effects are then applied to the HTML elements, which are rendered and composited into a finished page. There are many filters.

It is possible to animate the effects as well, as you can see in the following demo. Filter values are mostly between 0 and 100%, or 0 to 1.0, some go higher.

• blur(0px) A unit number to determines the amount of gaussian blur.
• brightness(0-1-10) 0 darkens the picture to black, 1 is normal and up to 10 increased the brightness.
• contrast(0-1-10) where 0 is solid grey, 1 is normal and up to 10 increased the contrast.
• drop-shadow(15px 15px 20px silver)
• grayscale(0-1) Reduce chroma gradually to none at all.
• hue-rotate(0- 360deg) Rotate the hue through all the colors.
• invert(0-1) Inverts the colors, .5 is solid grey.
• opacity(0-1) Where 0 is transparent and 1 is opaque, and everything in between is translucent.
• saturate(0-1-10) Saturates the colors, where 0 is greyscale, 1 is normal saturation and up to 10 increases the saturation
• sepia(0-1) Increase in sepia toning of the print;

Lively Grid/compositing demo

Blending Modes

The CSS composting and blending modes feature lets us blend an element’s background layer with another background layer, to blend between background images, gradients, and background colors, or to blend one element with another element.

How Blend Modes Work

Just like in Photoshop, two layers are usually added, with the top layer replacing the bottom layer. The blend modes lets you specify other mathematical relations between the two layers. For example, the multiply mode multiplies the two layers together, with the result that is darker than either layer.

The power of background blend modes can be seen in this compositing blends demo

Background Blending

Background blending blends the layers within a background. This is useful for blending a picture with a background color.

The following blending modes are implemented in webkit and follow those found in Photoshop:

A more complicated example blends multiple layers. Change the blending mode of each background with varying results.

Blending Elements

Blending between background layers is all very fine but blending between HTML elements is accumulative, that is, the blend blends the blending associated with each element in the element stack.

There are four elements in the following demo, once container and three children. The blend of each child plays a roll in the final outcome. You can play with the stacking order z-index or change the blending modes to see how these elements interact

Complex Blend Effects

Complex Blend Effects

Masks

Masks allow you to use an image or a polygon clip path to reveal only part of an element. Just like in Photoshop, the white areas display and the black areas do not.
peace

• Demonstration

Take the HTML5 template from the class website.
1. remove the <nav> and <ul> so only the <header> and <h1> are left.
2. Enter “CSS3 Exercise” in h1
3. Remove the <p> and <figure> <img> and <figcaption> from the <article> tag.
4. remove the <footer> tag.
5. We will manipulate the HTML using only CSS styling. Remove the .example {} in the embedded style sheet.
6. Give the section —the holding container — 100px margins on top and left to push the content away from the ends, and position it relative, in case you want to use absolute position at a later date.
7. Give the header a 60 pixel margin at the bottom.
8. The article will be given the style that will change as we move the window. The default style is a 200px square with a background color and a 1px border, positioned absolutely.
9. Include a div element inside of the article element. Make sure you close the div. This div will be targeted by the transition from one picture to the other.
10. We want to annotate what we are doing and will use the pseudo element header:after to tack on the word plain and set it below the header using relative positioning.
11. header:after {content:”plain”; position: relative; top: 0px; color: hsla(0,100%,50%,.7); font-size: 1.2em;}
12. Now comes the fun part. We are going to make this responsive, so that as we pull it past 400px, the style of the <article> element and the description in the title will change.
13. First we make the @media block set to trigger at a window with greater than 400px: @media all and (min-width: 401px) {
    }
14. Inside the @media block, we change the article using border radius to 50%. That turns a square into a circle.
15. article {border: 20px solid #666; border-radius: 50%;}
16. We want to change the description from plain to “border radius” header:after {content:”border radius”;}
17. and finally, place a number 1 in front of “CSS Exercise” header to keep track of the number that we complete.
18. h1:before {content:”1. “;}
19. Go back to your document and move the page width beyond the 400px threshold, and you should see the square change.
20. You are now where you were in last week’s exercise, with the additional div element placed inside of the article element. This week we apply transitions, transformations and animation.
21. You can get the different properties for the demonstrations on the website.
22. The procedure remains the same, with an incremental 100px jump with each new media query.
23. Notice that there is no need to repeat properties if they are already defined. There is only a need to overwrite properties that will change.
24. The next media query looks like @media (min-width: 500px) {
    }
25. article {background: purple; -webkit-transition: all 2s ease-in-out;background-size: cover;}
26. article:hover { background: blue;}
27. header:after {content:”transition background color”;}
28. h1:before {content:”2. “;}
29. @media all and (min-width: 600px) {
    }
30. article {background: url(http://a.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 1;
    -webkit-transition: all 2s ease-in-out;background-size: cover; border: none; border-radius: 0;}
31. article:hover {background: url(http://a.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 0; background-size: cover;}
32. div {width: 400px; height: 400px; background: url(http://a.parsons.edu/~dejongo/12-fall/stuff/08_transition-1.jpg) center center; border: 1px solid silver; position: absolute; left; 0; opacity: 1.0; background-size: cover; }
33. header:after {content:”transition between pictures”;}
34. h1:before {content:”3. “;}
35. @media all and (min-width: 700px) {
    }
36. article, div {-webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: scale(1) rotate(45deg)
    translate(100px, 0px) skew(0deg, 0deg);
    -moz-transform: scale(1) rotate(45deg)
    translate(100px, 0px) skew(0deg, 0deg);}
37. header:after {content:”2D (z-axis) rotate”;}
38. h1:before {content:”4. “;}
39. @media all and (min-width: 800px) {
    }
40. article, div {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: perspective(305)
    translate3d(100px, 0px, 30px)
    scale3d(.5, .5, .7)
    rotate3d(51, 49, 60, 49deg);
    -webkit-transform-origin: 9% 51% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform: perspective(305)
    translate3d(100px, 0px, 30px)
    scale3d(.3, .3, .5)
    rotate3d(51, 49, 60, 49deg);
    -moz-transform-origin: 9% 51% 50%;
    -moz-transform-style: preserve-3d;}
41. header:after {content:”3D Transform”;}
42. h1:before {content:”5. “;}

    @media all and (min-width: 900px) {
    }

43. article, div {
    -webkit-transform: none;
    -moz-transform: none;}
44. header:after {content:”back to normal coordinates”;}
45. h1:before {content:”6. “;}
46. @media all and (min-width: 1000px) {
    }

47. @-webkit-keyframes name-for-animation {
    0% { top: 30px; left: 100%; }
    10% { top: 100px; left: 90%; }
    20% { top: −200px; left: 80%; }
    30% { top: 100px; left: 70%;
    width: 200px; height: 200px;
    border-width: 100px;
    }
    40% { top: −200px; left: 60%;
    width: 200px; height: 200px;
    border-radius: 100%;
    border-width: 0px;
    }
    50% { top: 50px; left: 50%;
    width: 400px; height: 400px;
    border-radius: 0%;
    border-width: 100px;
    }
    60% { top: −200px; left: 40%; }
    70% { top: 200px; left: 30%; }
    80% { top: -200px; left: 20%; }
    90% { top: 500px; left: 10%; }
    100% { top: 30px; left: -10%; }
    }
    @-moz-keyframes name-for-animation {
    0% { top: 30px; left: 100%; }
    10% { top: 100px; left: 90%; }
    20% { top: −200px; left: 80%; }
    30% { top: 100px; left: 70%;
    width: 200px; height: 200px;
    border-width: 100px;
    }
    40% { top: −200px; left: 60%;
    width: 200px; height: 200px;
    border-radius: 100%;
    border-width: 0px;
    }
    50% { top: 50px; left: 50%;
    width: 400px; height: 400px;
    border-radius: 0%;
    border-width: 100px;
    }
    60% { top: −200px; left: 40%; }
    70% { top: 200px; left: 30%; }
    80% { top: -200px; left: 20%; }
    90% { top: 500px; left: 10%; }
    100% { top: 30px; left: -10%; }
    }
48. article, div {
    -webkit-animation: name-for-animation 10s linear infinite;
    -moz-animation: name-for-animation 10s linear infinite;
    position: absolute;
    top: 30px;
    left: 100%;
    z-index: 50;
    width: 400px;
    height: 20px;
    border: 4px solid yellow;
    text-overflow: hidden;
    text-align: center;}
49. header:after {content:”animation (hover over picture to transition to other picture)”;}
50. h1:before {content:”6. “;}
51. You can explore this further in class or at home.