ISTA 230

ISTA 230 - Introduction to Web Design

More CSS 3 – Transforms, Transitions, and Filters

CSS

CSS

Rendering

<html>
   <head>
     <title>My Web Page</title>
     <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit...
     </p>

     <div style="display: none">
       This text shouldn't be displayed.
     </div>

     <div><img src="cat.jpg" alt='My cat' /></div>
   </body>
</html>

CSS

CSS

Rendering

Diagram of DOM tree process

CSS

CSS

Rendering

Diagram of DOM tree process

CSS

CSS

Rendering

Diagram of CSS style structure

CSS

CSS

Rendering

Diagram of  RenderTree process

CSS

CSS

Rendering

Stacking order

CSS

CSS

Rendering

Diagram of  RenderTree process

CSS

CSS

Rendering

Diagram of "paint" process

The browser takes the RenderTree and processes it on the central processing unit (CPU), converting it to a 'texture' or 'layer'. A layer is basically a bitmap image representation of the elements being displayed. Layers are then passed to the graphics processing unit (GPU).

Hardware acceleration allows us to keep some layers on the GPU and perform changes there rather than on the CPU.

CSS

CSS

Rendering

CPU/GPU Architecture

CSS

CSS

Rendering

div
{
   background-color: #0cf;
   border-radius: 15px;
}
      
CSS to Pixels

CSS

CSS

Rendering

CPU/GPU Architecture CSS to Pixels

CSS

CSS

Repaints

CSS

CSS

Reflows

CSS

CSS

Reflows

CSS

CSS

CSS 3 - Transforms

CSS

CSS

CSS 3 - Scale Transform

div
{
   width:200px;
   height:200px;

}
      

CSS

CSS

CSS 3 - Scale Transform

div
{
   width:200px;
   height:200px;
   transform: scale(1.2);
}
      

CSS

CSS

CSS 3 - Scale Transform

CSS

CSS

Stacking Contexts

Stacking order

CSS

CSS

Stacking Contexts

Stacking order

CSS

CSS

CSS 3 - CSS3 Stacking Contexts

CSS

CSS

CSS 3 - Scale Transform

CSS

CSS

CSS 3 - Scale Transform

div
{
   width:200px;
   height:200px;
   transform: scale(1.2);
}
      

CSS

CSS

CSS 3 - Scale Transform

div
{
   width:200px;
   height:200px;

}
      
My Text

CSS

CSS

CSS 3 - Scale Transform

div
{
   width:200px;
   height:200px;
   transform: scale(1, 2); /* horiz, vertical */
}
      
My Text

CSS

CSS

CSS 3 - Scale Transform

div
{
   width:200px;
   height:200px;

}
      
My Text

CSS

CSS

CSS 3 - Scale Transform

div
{
   width:200px;
   height:200px;
   transform: scale(-1, 1);
}
      
My Text

CSS

CSS

CSS 3 - Rotate Transform

div
{
   width:200px;
   height:200px;

}
      

CSS

CSS

CSS 3 - Rotate Transform

div
{
   width:200px;
   height:200px;
   transform: rotate(45deg);
}
      

CSS

CSS

CSS 3 - Rotate Transform

CSS

CSS

CSS 3 - Rotate Transform

div
{
   width:200px;
   height:200px;

}
      

CSS

CSS

CSS 3 - Rotate Transform

div
{
   width:200px;
   height:200px;
   transform: rotate(45deg);
}
      

CSS

CSS

CSS 3 - Combining Transform

div
{
   width:200px;
   height:200px;
   transform: rotate(45deg) scale(.7071);
}
      

CSS

CSS

CSS 3 - Transform Origin

div
{
   width:200px;
   height:200px;


}
      

CSS

CSS

CSS 3 - Transform Origin

div
{
   width:200px;
   height:200px;
   transform: scale(.5);

}
      

CSS

CSS

CSS 3 - Transform Origin

div
{
   width:200px;
   height:200px;
   transform: scale(.5);
   transform-origin: 0 0;
}
      

CSS

CSS

CSS 3 - Transform Origin

div
{
   width:200px;
   height:200px;
   transform: rotate(45deg);

}
      

CSS

CSS

CSS 3 - Transform Origin

div
{
   width:200px;
   height:200px;
   transform: rotate(45deg);
   transform-origin: 0 0;
}
      

CSS

CSS

CSS 3 - Translate Transform

div
{
   width:200px;
   height:200px;

}
      

CSS

CSS

CSS 3 - Translate Transform

div
{
   width:200px;
   height:200px;
   transform: translate(100px, 20px);
}
      

CSS

CSS

CSS 3 - Translate Transform

CSS

CSS

CSS 3 - Skew Transform

div
{
   width:200px;
   height:200px;

}
      
Some example text here.

CSS

CSS

CSS 3 - Skew Transform

div
{
   width:200px;
   height:200px;
   transform: skew(30deg);
}
      
Some example text here.

CSS

CSS

CSS 3 - Skew Transform

CSS

CSS

CSS 3 - Skew Transform

<div id="container">
   <div id="top">CSS3</div>
   <div id="left">is</div>
   <div id="right">fun!</div>
</div>
#container { position:relative; }

#container div
{
   width:100px;
   height:100px;
   line-height:100px;
   text-align:center;
}
      

CSS

CSS

CSS 3 - Skew Transform

      
CSS3
is
fun!

CSS

CSS

CSS 3 - Skew Transform

#container div { position:absolute; }

#top
{
   top:0; left:56px;
   transform: rotate(-45deg) skew(15deg, 15deg);
}

#left
{
   top:100px; left:0;
   transform: rotate(15deg) skew(15deg, 15deg);
}

#right
{
   top:100px; left:0;
   transform: rotate(-15deg) skew(-15deg, -15deg);
}

CSS

CSS

CSS 3 - Skew Transform

      
CSS3
is
fun!

CSS

CSS

transform Property

div { transform: translate(100px, 20px); }
div { transform: rotate(45deg), skew(30deg) ; }
div {
   transform: scale(0.5);
   transform-origin: 0 0;
}
/*
 * Allows us to grow, shrink, rotate, skew,
 *  and move elements in place.
 * 
 * Default Value: none
 * Inherited: No
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

CSS 3 - Application

Example of CSS 3 transforms

CSS

CSS

CSS 3 - Application

<div class='coupon'>
   <h1>Current Coupon</h1>
   <p>
      Buy 1 Breakfast or Lunch Entree...
   </p>
</div>

CSS

CSS

CSS 3 - Application

.coupon
{
   max-width: 50%;
   min-height: 100px;
   background-color: #f4e9d3;
   border: 1px dashed #c88282;
   border-radius: 10px;
   text-align: center;

   position: relative;
   z-index: 1000;
}

CSS

CSS

CSS 3 - Application

.coupon:before, .coupon:after
{
   content: '';
   background-color: #f4e9d3;
   border: 1px dashed #c88282;
   border-radius: 10px;

   position: absolute;
   width: 100%;
   height: 100%;
}

CSS

CSS

CSS 3 - Application

.coupon:before
{
   transform: rotate(6deg);
   z-index: -1000;
}

.coupon:after
{
   transform: rotate(8deg);
   z-index: -1001;
}

CSS

CSS

CSS 3 - Application

Example of CSS 3 transforms

CSS

CSS

CSS 3 - Application

Example of a page curl using CSS 3

CSS

CSS

CSS 3 - Application

<li class='slide'>
   <img src='...' alt='...' />
</li>

CSS

CSS

CSS 3 - Application

li.slide
{
   border: 1px solid #999;
   position: relative;
   z-index: 1000;
}

CSS

CSS

CSS 3 - Application

li.slide:before, li.slide:after
{
   content: '';
   position: absolute;
   z-index: -1000;
   width: 80%;
   max-width: 250px;
   height: 55%;
   max-height: 100px;
   box-shadow: 0 0 8px 32px rgba(0, 0, 0, 0.25);
}

CSS

CSS

CSS 3 - Application

li.slide:before
{
   transform: skew(-15deg) rotate(-6deg);
   left:45px;
   bottom: 20px;
}
li.slide:after
{
   transform: skew(15deg) rotate(6deg);
   right: 45px;
   bottom: 20px;
}

CSS

CSS

CSS 3 - Application

Example of a page curl using CSS 3

CSS

CSS

CSS 3 - Transitions

a 
{
   background-color:#000;
   color:#fff;

}

a:hover 
{
   background-color:#0ad;
}
      
Click me

CSS

CSS

CSS 3 - Transitions

CSS

CSS

CSS 3 - Transitions

   transition: property duration;

CSS

CSS

CSS 3 - Transitions

a 
{
   background-color:#000;
   color:#fff;
   transition: background-color 2s;
}

a:hover 
{
   background-color:#0ad;
}
      
Click me

CSS

CSS

CSS 3 - Transitions

a 
{
   background-color:#000;
   color:#fff;
   transition: all 2s;
}

a:hover 
{
   background-color:#0ad;

}
      
Click me

CSS

CSS

CSS 3 - 'Animatable' Properties - Cheap

CSS

CSS

CSS 3 - Hardware Acceleration

div
{
   /*** Force hardware acceleration! ***/
   transform: translateZ(0);
}

CSS

CSS

CSS 3 - 'Animatable' Properties - Less Cheap

CSS

CSS

CSS 3 - 'Animatable' Properties - Less Cheap

CSS

CSS

CSS 3 - 'Animatable' Properties - Expensive

CSS

CSS

CSS 3 - 'Animatable' Properties - Expensive

CSS

CSS

CSS 3 - Transitions

a
{
   background-color:#000;
   color:#fff;
   transition: background-color 2s, color 1s;
}

a:hover 
{
   background-color:#0ad;
   color:#000;
}
      
Click me

CSS

CSS

CSS 3 - Transitions

   transition: property duration timing-function;

CSS

CSS

CSS 3 - Transitions

CSS

CSS

CSS 3 - 'ease' Timing Functions

Graph of the ease function

CSS

CSS

CSS 3 - 'linear' Timing Functions

Graph of the linear function

CSS

CSS

CSS 3 - 'ease-in' Timing Functions

Graph of the ease-in function

CSS

CSS

CSS 3 - 'ease-out' Timing Functions

Graph of the ease-out function

CSS

CSS

CSS 3 - Transitions

CSS

CSS

CSS 3 - Transitions

   transition: property duration timing-function delay;

CSS

CSS

CSS 3 - Transitions

   transition: background-color 2s linear 2s;
Click me

CSS

CSS

CSS 3 - Transitions

a 
{
   background-color:#000;
   border:3px solid #000;
   border-radius:15px;
   color:#fff;
   transition: all 1s;
}

a:hover
{
   transform: rotate(720deg) scale(2);
   background-color:#999;
}

CSS

CSS

CSS 3 - Transitions

   
Click me

CSS

CSS

transition Property

div { transition: all 1s; }
div { transition: background-color 2s linear 2s; }
/*
 * Allows for simple animations of certain element
 * properties.
 *
 * 
 * Default Value: all 0 ease 0
 * Inherited: No
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 9 only

CSS

CSS

CSS 3 - Filters

CSS

CSS

CSS 3 - Filters

<div>
   This is my content, just waiting to be filtered.
</div>

<img src='coffee.png' alt='Coffee' />
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: grayscale(100%);
}

img
{
   filter: grayscale(100%);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: saturate(50%);
}

img
{
   filter: saturate(50%);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: sepia(100%);
}

img
{
   filter: sepia(100%);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: brightness(50%);
}

img
{
   filter: brightness(50%);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: contrast(50%);
}

img
{
   filter: contrast(50%);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: invert(100%);
}

img
{
   filter: invert(100%);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: hue-rotate(120deg);
}

img
{
   filter: hue-rotate(120deg);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: hue-rotate(240deg);
}

img
{
   filter: hue-rotate(240deg);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

div
{
   filter: invert(100%) brightness(80%);
}

img
{
   filter: invert(100%) brightness(80%);
}
   
This is my content, just waiting to be filtered.
Coffee

CSS

CSS

CSS 3 - Filters

Newspapers

CSS

CSS

filter Property

div { filter: grayscale(100%); }
img { filter: invert(100%); }
/*
 * Allow us to apply an effect to an
 * element before it is rendered
 * 
 * Default Value: none
 * Inherited: No
 * Animatable: Yes
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: No

CSS

CSS

CSS 3 - Useful Resources