FreeCodeCamp: Applied Visual Design

animations

#anim { animation-name: colorful; animation-duration: 3s; } @keyframes colorful { 0% { background-color: blue; } 100% { background-color: yellow; } } For the element with the anim id, the code snippet above sets the animation-name to colorful and sets the animation-duration to 3 seconds. Then the @keyframes rule links to the animation properties with the name colorful. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.

fading out during animation

@keyframes fade { 50% { opacity:0.1; left: 60%; } } You can set a fade out using opacity.

pseudoclasses

A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element. This can be used to change a color of a link when hovered over. The syntax usually appears in style section and is: selector:pseudoclass { normal styling rules Ex: p1:hover {color:red;}

Opacity Property

A value of 1 is opaque, which isn't transparent at all. A value of 0.5 is half see-through. A value of 0 is completely transparent.

CSS Box Model and Normal Flow

Box level items automatically start new lines: Ex: p, h1 ,dev Inline items sit within the surrounding content like (img or span) Normal flow is the default layout of the items. position property for example will override the normal flow.

Using pseudo-classes with transform for interactive sites.

Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them: p:hover { transform: scale(2.1); }

position:fixed;

Is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. key difference from the absolute position is that the element won't move when the user scrolls

Text-transform Property

It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements. takes values of: lowercase, uppercase, capitalize (first letter of each word), initial(use default value), inherit (from parent element), none(use original text)

position:absolute;

Locks the element in place relative to its parent container. This removes the element from the normal flow so other elements will ignore it. absolute positioning is locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the ancestral chain and ultimately default to the body tag.

position:relative;

Pairs with CSS offset properties: left or right, top or bottom. Changing a position to relative does not override all normal flow. other elements around the positioned element still follow normal flow. Ex: h2 { position:relative; top:15px; moves h2 15px away from the top

animation-timing-function

Prebuilt animation timing functions The default value is ease, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include ease-out, which is quick in the beginning then slows down, ease-in, which is slow in the beginning, then speeds up at the end, or linear, which applies a constant animation speed throughout.

Computer Light Colors; Secondary (3), Tertiary(def)

Primary in CPU: RGB Secondary: Cyan = Blue + Green Magenta = Blue + Red Yellow = Red + Green Tertiary colors: Primary with a secondary Ex: Red + Yellow = orange This makes total of 12 colors in color wheel.

Box-shadow Property

The box-shadow property applies one or more shadows to an element. The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional. {box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}

Animations at different rates

This can be accomplished by using different values in the @keyframes and then looping the animations. The same thing can be accomplished by using animation-durations and looping.

transform:scale();

To change the scale of an element, CSS has the transform property, along with its scale() function. p { transform:scale(2); } code example doubles the size of all the paragraph elements on the page

Italics

To emphasize text, you can use the em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element.

Strong tag

To make text bold, you can use the strong tag. With the strong tag, the browser applies the CSS of font-weight: bold; to the element. <strong>Stanford University.</strong> can be declared inline

Strikethrough

To strikethrough text, which is when a horizontal line cuts across the characters, you can use the del tag. It shows that a section of text is no longer valid. With the del tag, the browser applies the CSS of text-decoration: line-through; to the element.

Underlining

To underline text, you can use the u tag. This is often used to signify that a section of text is important, or something to remember. With the u tag, the browser applies the CSS of text-decoration: underline; to the element.

Overlap and z-index

When elements are positioned to overlap the element later in the HTML markup will appear by default on top of the other element. z-index values must be integers. They specify the order of stacking with the highest numbers on top of the stack.

Movement with offset

When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement. @keyframes rainbow { 0% { background-color: blue; top: 0px; } 50% { background-color: green; top: 50px; } 100% { background-color: yellow; top: 0px; } } Add a horizontal motion to the div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%. Don't replace the top property in the editor - the animation should have both vertical and horizontal motion.

Width/height

You can specify the width of an element using the width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element.

animation-fill-mode

You can use animation-fill-mode: forwards in the button section to make sure the highlighted stays highlighted as long as hovered. button:hover { animation-name: background-color; animation-duration: 500ms; /* add your code below this line */ animation-fill-mode:forwards; /* add your code above this line */ } @keyframes background-color { 100% { background-color: #4791d0; } }

Horizontal Line

You can use the hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content. <hr> is self-closing

line-height

a CSS property that allows you to specify the vertical space between each line of text. The pixel value supplied is actually the height of the full text block not just the space in between

this will allow you to specify a certain amount of animation loops or just infinite looping for a constantly animated element.

animation-iteration-count: infinite;

cubic bezier

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); the cubic bezier takes (x1,y1,x2,y2) and creates a curve from those points) The bezier is represented by a 1:1 grid.

Make a Crescent

background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0px blue; }

linear-gradient()

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

repeating-linear-gradient()

background: repeating-linear-gradient( 45deg, yellow 0px, yellow 40px, black 40px, black 80px ); 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px For this example, it helps to think about the color stops as pairs where every two colors blend together.

Using URL Backgrounds

background:url("https://i.imgur.com/MJAkxbh.png");

Font-size styling key

h1 { font-size:68px; } h2 { font-size:52px; } h3 { font-size:40px; } h4 { font-size:32px; } h5 { font-size:21px; } h6 { font-size:14px; } You can declare header styles all intitially and then you can just call them using the header type.

hsl()

hue,saturation,lightness Alternative way to give a color .cyan { background-color: hsl(180, 100%, 50%) } makes it easy to adjust the tone of a color, by adjusting s and l

Centering block with Margin

margin:auto; this can also work for images (which are typically inline elements) Change the image to a block element with display:block; then margin:auto;

skewX() and skewY()

p { transform: skewX(-32deg); } Useful for making slanted boxes

float property

removes element from normal flow and pushes it to left or right of their containing parent element. Commonly used with width property to specify how much horizontal space the floated element requires

RGBA

rgba stands for: r = red g = green b = blue a = alpha/level of opacity from clear 0-1 opaque

Text Alignment

text-align: justify; causes all lines of text except the last line to meet the left and right edges of the line box. text-align: center; centers the text text-align: right; right-aligns the text And text-align: left; (the default) left-aligns the text.

before: and after: selectors

used to add something before or after a selected element. before and after selectors must have a defined "content" property. Note for shapes this is usually set as the empty string. .heart:before { content: ""; background-color: yellow; border-radius: 25%; position: absolute; height: 50px; width: 70px; top: -50px; left: 5px; } In the above example, the element with the class of heart has a :before selector that produces a yellow rectangle with height and width of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left and 50px above the top of the element.

rotate()

works the same way skewX and skewY works. .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform:rotate(-45deg) ; }