Learn about an element's background, borders, shadows, and basic transition effects.
The properties covered in this lesson are essential for UI components such as buttons, cards, and banners.
1. Background
Background color
.box {
background-color: #3498db;
background-color: rgba(52, 152, 219, 0.5); /* semi-transparent */
}
Background image
.hero {
background-image: url('image.jpg');
background-size: cover; /* fills the element completely (may be cropped) */
background-size: contain; /* the whole image is visible (may leave empty space) */
background-position: center; /* centered */
background-position: top right; /* anchored to the top right */
background-repeat: no-repeat; /* no repetition */
background-repeat: repeat; /* repeat (default) */
}
Gradient background
.gradient {
/* linear gradient */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
/* radial gradient */
background: radial-gradient(circle, #f093fb, #f5576c);
}
Background shorthand
.hero {
background: url('image.jpg') center/cover no-repeat;
/* url position/size repeat */
}
2. Border
.box {
border: 2px solid #333; /* width style color */
border-style: solid; /* solid, dashed, dotted, double */
border-width: 1px 2px 1px 2px; /* top right bottom left */
border-color: #3498db;
border-top: 3px dashed red; /* per-side settings */
border-radius: 8px; /* same for all four corners */
border-radius: 50%; /* makes a circle (when width == height) */
border-radius: 10px 0 10px 0; /* different radius per corner */
}
3. Box Shadow
.card {
/* offset-x | offset-y | blur | color */
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
/* offset-x | offset-y | blur | spread | color */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* inner shadow */
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
/* multiple shadows */
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
}
4. outline
Unlike border, it does not affect the size of the element.
It is mainly used for accessibility (indicating focus).
button:focus {
outline: 3px solid #3498db;
outline-offset: 2px; /* the gap between the outline and the element */
}
/* Removing the focus ring (be careful with accessibility) */
button:focus {
outline: none;
}
5. opacity & cursor
.dim {
opacity: 0.5; /* 0 (fully transparent) to 1 (fully opaque) */
}
.clickable {
cursor: pointer; /* hand-shaped cursor */
cursor: not-allowed; /* forbidden sign */
cursor: crosshair; /* crosshair */
}
6. transition
transition makes CSS property changes animate smoothly.
.button {
background-color: #3498db;
/* property | duration | timing-function | delay */
transition: background-color 0.3s ease;
transition: all 0.3s ease; /* applies to all properties */
transition: transform 0.2s ease-out, box-shadow 0.2s ease;
}
.button:hover {
background-color: #2980b9; /* changes smoothly over 0.3 seconds */
}
Types of timing-function:
ease— starts slowly, speeds up, ends slowly (default)linear— constant speedease-in— starts slowlyease-out— ends slowlyease-in-out— starts slowly and ends slowly
Example files
Open button-styles.html in the examples/ folder to see a variety of button styles.
Assignment
Read assignment.md and build an image card gallery.