Back to Basics - CSS Animations 1
In this lesson, I would like to do a quick revision of a few CSS styles. These styles are commonly used during animations.
For beginners CSS, stands for Cascading Style Sheet and this defines how our webpage should like. CSS gives everything in the HTML part of the webpage, colors, fonts, animations etc. CSS can be used in three ways.
-
Inline CSS - We give the elements the styles, as its attribute. This can be
cluttering, when you have many styles.
<div style="background-color: blue;>Hello</div>
-
Internal CSS - We give the elements the style in the style tag, which put
inside the head tag. I recommend this only when you have very little HTML
code.
<head> <style> div { background-color: blue; } </style> </head> -
External CSS - We give the elements the styles in a stylesheet which is
linked to the main HTML file.
<head> <link rel="stylesheet" type="text/css" href="styles.css">
</head>div { background-color: blue; }
Shapes
Shapes can be created in CSS, using an empty div . We can refer to the div using a class or id, but I prefer using an id. The styles we will give to the div will be height, width and color.
#rect {
height: 100px;
width: 100px;
background-color: pink;
}
Now creating a circle is easy. We have to just make the border radius 100%
#rect {
height: 100px;
width: 100px;
background-color: pink;
border-radius: 100%;
}
Although creating a semi circle is quite tricky. We need first create a rectangle whose width is double its height (if we want the curved side facing up). Then we make the desired corners round, with the border radius equal to the height's length.
#semi {
height: 100px;
width: 200px;
border: 5px solid black;
border-radius: 100px 100px 0 0;
margin: 30px;
}
Z-Index
This helps in overlapping of the elements. High z-index's mean that the element will be on the top and low z-index mean that the element will be downstairs
#blue {
z-index: 1;
}
#green {
z-index: 2;
}
#blue {
z-index: 2;
}
#green {
z-index: 1;
}
Transparency
We know of 'rbg' colors but, there is also 'rgba' colors. The 'a' stands for 'alpha' and defines the transparency of the color.
#blue {
z-index:1;
background-color: rgba(0, 128, 0, 0.5);
}
#green {
z-index:2;
background-color: rgba(0, 0, 255, 0.5);
}
Transformation
Transformation allow us to move, rotate, scale and skew the elements.
#rotate {
transform: rotate(45deg);
}
#scale {
transform: scale(1.5);
}
#skew {
transform: skew(45deg);
}
That will be it for the first lesson. Next lesson, we will begin with some animations.
Comments