Hello everyone!! I am back with another blog Applied Visual Design. This is Day 4 and 5 of my 30DaysofCodeChallenge.
Today I completed AVD from Free Code Camp Responsive Web Design Course. It was all about position, colors and animations.
I am covering all the important points I learnt today, hope you guys find it useful.
Applied Visual Design-
Visual design in a combination of typography, color theory, graphics, animation, page layout and more to help deliver your unique message. There are different CSS properties used for this and we will be discussing all the important one in this article.
Creating Visual Balance-
Text-Align Property- This property is used for aligning the text. By default, the alignment of the text is set to be left. It can be used as :
<h4 style = "text-align: justify"> HII THERE </h4>
Horizontal Line- hr tag is used to add horizontal line across the width of its containing elements. It is a self-closing tag.
Background-Color - We can use background-color property to adjust the background color of text. It uses rgba where a stands for alpha or level of opacity. Alpha value range from 0 to 1.
background-color: rgba(45, 45, 45, 0.1);
Text-Transform- This is used to change the appearance of the text. It takes values as lowercase, uppercase, capitalize and many others. the default value for this is set to initial.
text-transform: uppercase;
This will convert the required text into uppercase letters.
Position of the Element-
This property says how many pixels, percentages or ems to move the item away from where it is normally positioned. Positioning gives you lots of flexibility and power over the visual layout of the page.
Position of an element can be relative, absolute or fixed depending upon the requirements.
p{
position: relative;
bottom: 10px;
}
This example moves the paragraph 10 pixels away from the bottom.
Move a relatively positioned element with CSS offsets- The CSS offsets of top or bottom, and left or right tells the browser how far to offset an item relative to where it would sit in the normal flow of document. For example, using the top offset will move the element downward.
Lock an element to it's parent using absolute positioning- Absolute positioning lacks the element in place relative to it's parent container. Unlike relative position, it removes the element from the normal flow of the document. It will be locked relative to its closest positioned ancestor.
Fixed position- Element with a fixed position won't move when the user scrolls. It is used with CSS offset properties(top, bottom, right or left).
Learn about colors-
Complimentary Colors- Color wheel is a useful tool to visualize how colors relate to each other. Similar hues are neighbors and different hues are apart.
When two colors are opposite each other on the wheel they are called Complimentary Colors. They have the characteristics if they combine they cancel each other and create a gray color.
Hue of a Color- CSS3 introduced the property of hsl() as a way to pick a color by directly stating these characteristics:
- HUE- It uses color wheel concept where the angle of the color on the circle is given as a value between 0 and 360.
- Saturation- It is the amount of gray in a color. This is given as a percentage of 100% being fully saturated.
- Lightness- It is the amount of white or black in a color, 50% is the normal color.
hsl(0, 100%, 50%);
The tone of the color can also be adjusted by mixing white with a pure hue and creating tint of that color.
Gradients using CSS-
CSS provides the ability to use color transitions known as gradients. This can be done suing background property's linear gradient function.
background: linear-gradient(gradient_direction, color1, color2, .....);
Example which shows how to use CSS linear gradient property to create a striped element-
repeating-linear-gradient(45 deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px);
Angle value is the direction of the gradient. Color stops are like width values that moves where a transition takes place and are given with a percentage or no. of pixels.
Create Texture by adding a Subtle Pattern as a Background Image-
Background property supports the url function in order to link an image of the chosen texture or pattern.
{
background: url(" LINK OF THE PATTERN ");
}
Transform Property of CSS-
- With Scale Function- CSS has transform property along with scale function to change the size of an element.
p{
transform: scale(2);
}
- It has different functions such as skewX, skewY and many others which helps in transforming element size.
Creating Graphics using CSS-
It can be done using box-shadow property that sets the shadow of an element, along with the border radius property that controls the roundness of element's corner. We can create different shape elements.
KeyFrames and Animation properties-
Animation properties control how the animation should behave.
keyframes controls what happen during that animation.
There are 8 properties of animations in total. We will see few here.
- Animation-name: It sets the name which is later used by the keyframes to tell CSS which rules go with animations.
- Animation-duration: It sets the length of time for the animation.
#anim{
animation-name: colourful;
animation-duration: 3s;
}
@keyframes colourful{
0%
{
background-color: blue;
}
100%
{
background-color: yellow;
}
}
Keyframes is a CSS property for specific frame during animation, with percentage ranging from 0 to 100.
- Animation-iteration-count- This property allows you to control how many times you would like to loop through the animation.
animation-iteration-count: infinite;
It will animate elements continually using an infinite animation count.
- Animation-timing-function- It helps in changing the animation timing with keywords. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.
In CSS animations, Bezier curves are used with the cubic-bezier function.
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
animation-timing-function: linear;
This animation is a linear change of an element during the length of an animation, and is the same as using the linear keyword. In other words, it changes at a constant speed.
I have covered all the important aspects of AVD in this article. I hope you guys find it useful!!