Final Exam Project Part 2

EFFECTS CHEATSHEET

Graphic Effects

Property Property Value
filter: url url("filters.svg#filter-id");
filter: blur blur(5px)
filter: contrast contrast(200%)
filter: grayscale grayscale(100%)
filter: hue-rotate hue-rotate(90deg)
filter: drop-shadow drop-shadow(16px 16px 10px black)
mask: clip content-box; padding-box; border-box; fill-box;
mask: composite add; subtract; intersect; exclude;
mask: image url(masks.svg#mask1); linear-gradient(rgba(0, 0, 0, 1.0), transparent)
mask: mode alpha; luminance; match-source;
mask: origin content-box; padding-box; border-box; margin-box; view-box, fill-box, border-box;
mask: position top; bottom; left; right; center;
mask: repeat repeat-x; repeat-y, space; round;
mask: size cover; contain;
blend: normal mix-blend-mode: normal;
blend: multiply mix-blend-mode: multiply;
blend: lighten mix-blend-mode: lighten;
blend: difference mix-blend-mode: difference;

Media Elements

Property Property Value Attributes
Figures figure, figcaption class, id, title
Pictures picture, source, img class, id, title, src:URL
Audio audio, source url("filters.svg#filter-id");
Video video, source, track autoplay, controls, loop, muted, muted, src:URL
Canvas canvas, width, height height, width
Other Digital Media iframe, embed, object src:URL, height, width

W3C GRAPHICS

Terminology

Animations

Animations let us decide if and how an animation repeats, give us granular control over what happens throughout the animation, and more.

Keyframes

Keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for waypoints along the animation sequence.

Transforms

Transforms let us rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Transitions

Transitions allow us to animate CSS properties from an original value to a new value over time when a property value changes.

Easing

Easing accounts for the rate at which a transition occurs.

Rotation

A rotation function causes an element to be rotated around an axis, or around an arbitrary vector in 3D space.

Scale

The scale function defines a transformation that resizes an element on the 2D plane.

Skew

The skew function defines a transformation that skews an element on the 2D plane.

Delay

The transition-delay property specifies the duration to wait before starting a property's transition effect when its value changes.

Transition Timing

The transition-timing-function property sets how intermediate values are calculated for CSS properties being affected by a transition.

CSS Transforms Module Level 1

Transform properties

Rotates an element around a fixed point on the 2D plane.
Example Code
HTML Code
         
<ha>transform: rotate(20deg):</h2>
<div class="a">Rotate20</div>
CSS Code
         
 .a {
width: 100px;
height: 80px;
background-color:var(--main-color-600);
 -ms-transform: rotate(20deg);
transform: rotate(20deg);
}
Rotate20

Transform Skew

Defines a 2D skew transformation along the Y-axis.
Example Code
HTML Code
            
<h2>transform: skewY(20deg):</h2>
<div class="b">skew20</div>
CSS Code
            
.b {
width: 100px;
height: 80px;
background-color:var(--main-color-600);
-ms-transform: skewY(20deg); 
transform: skewY(20deg);
}
skew20
CSS Transforms Module Level 1

Transform Scale

Defines a scale transformation by giving a value for the Y-axis.
Example Code
HTML Code
                  
<h2>transform: scaleY(1.5):</h2>
<div class="c">scale1.5</div>
CSS Code
                  
 .c {
width: 100px;
height: 80px;
background-color:var(--main-color-600);
 -ms-transform: scaleY(1.5); 
transform: scaleY(1.5);
}
scale1.5

Transform Matrix

Defines a scale transformation by giving a value for the Y-axis.
Example Code
HTML Code
                  
<div id="d">
Using the matrix() method.
</div>
CSS Code
                  
.d {
width: 120px;
height: 80px;
background-color: var(--main-color-600);
border: 1px solid var(--main-color-800);
}
Matrix
CSS Transforms Module Level 1

Transform Scale

The scale() method increases or decreases the size of an element.
Example Code
HTML Code
                     
 <div="e">
This div element is two times of its 
original width,
and three times of its original height.
</div>
CSS Code
                     
 .e {
margin: 80px;
width: 90px;
height: 80px;
background-color:var(--main-color-600);
border: 1px solid var(--main-color-800);
transform: scale(1,2);
}
Scale

Transform Translate

Repositions an element in the horizontal and/or vertical directions.
Example Code
HTML Code
                           
<div="f">
This div element is two times 
of its original width, and three 
  times of its original height.
</div>
CSS Code
                           
 .f {
width: 100px;
height: 80px;
background-color:var(--main-color-600);
border: 1px solid var(--main-color-800);
transform: translate(50px,100px);
}
Translate
CSS Transforms Module Level 1

Transition Properties

The transition-delay property specifies a delay
(in seconds) for the transition effect.
HTML Code
    
<div class="g"></div>
CSS Code
    
.g {
width: 60px;
height: 60px;
background: var(--main-color-600);
transition: width 3s;
transition-delay: 1s;
}
                      
.g:hover {
width: 300px;
}
Delay

Transition Duration

Specifies how many seconds or milliseconds
a transition effect takes to complete.
HTML Code
  
<div class="h></div>
CSS Code
  
 .h {
width: 100px;
height: 100px;
background: var(--main-color-600);
transition-property: width;
transition-duration: 5s;
}
                            
.h:hover {
width: 300px;
}
Duration
CSS Transforms Module Level 1https://www.w3.org/TR/css-transitions-1/

Transition Properties

Specifies the name of the CSS property the transition effect is for.
HTML Code
    
<div class="i></div>
CSS Code
    
 .i {
width: 100px;
height: 100px;
background: var(--main-color-600);
transition-property: width;
transition-duration: 2s;
}
                                      
.i:hover {
width: 300px;
}
Timing Function

Transition Timing

Specifies the speed curve of the transition effect.
HTML Code
  
<div class="j"></div>
CSS Code
  
.j {
width: 100px;
height: 100px;
background: var(--main-color-600);
transition: width 2s;
transition-timing-function: linear;
}
                                    
.j:hover {
width: 300px;
}
Timing Function
CSS Transforms Module Level 1

Animation Properties

It is the required value that defines the name of the animation.
HTML Code
    
<div class="k"></div>
CSS Code
    
 .k {
width: 100px;
height: 100px;
background: var(--main-color-600);
position: relative;
animation: mymove 5s infinite;
}
                                              
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
Animation-Name

Keyframes-Selector

It is the required value that defines the name of the animation.
HTML Code
  
<div class="L"></div>
CSS Code
  
.L {
width: 100px;
height: 100px;
background: var(--main-color-600);
position: relative;
animation: mymove 5s infinite;
}
                                            
@keyframes mymove {
from {left: 0px;}
to {left: 100px;}
}
Selector
CSS Animations Level 1

Keyframes-Css-Styles

It defines one or more than one CSS style properties.
HTML Code
  
<div class="M"></div>
CSS Code
  
    .M {
      width: 100px;
      height: 100px;
      background: var(--main-color-600);
      position: relative;
      animation: mymove 5s infinite;
      }
                                                
      @keyframes mymove {
      from {left: 0px;}
      to {left: 200px;}
      }
Css-Styles
CSS Animations Level 1