Day 5 - CSS Basics pt. 2
by aleteo946@ · 30 things on Twos
- CSS setting size and borders
- width, height = to change element dimensions property (px)
- border = adds border
- border: solid 10px red, adds thickness and color
- ✓ test value arrangements
- ✓ test border: red 10px solid
- border-radius: = adds round corner, circle
- Building with the box model
- Elements on a webpage are rectangular boxes with four layers: content, paddings, borders, and margins.
- padding: changes all four sides
padding-top: = changes top padding only
- text-align: center = align text center
- Shorthand
- button {
padding: 10px 20px; /* top, right, bottom, left */
}
// you can set padding uniform top & bottom without the positioning properties
- padding: 0 0 100px 0, only adds padding to bottom
- Rotating elements
- transform: rotate();
- | transform = property | rotate = function | 90deg = value |
- Building filters
- brightness(), saturate(), contrast() = support values over 100%
- filter: blur(#px); = blur effect
- filter: grayscale();
- filter: opacity();
- filter: brightness(100%);
- filter: saturate(50%);
- background: linear-gradient(45deg, red, blue, yellow)
- Mimo: finished (7. CSS Functions)
- Mimo: semi-completed (6. CSS Basics)