CSS3 Overview
Standard Information
CSS3 (2001-present)
W3C Recommendation
Universal
Quick Summary
CSS3 represents a major evolution in web styling, introducing powerful layout systems, smooth animations, responsive design capabilities, and modern visual effects. It provides developers with tools to create sophisticated, accessible, and performant web experiences.
Key CSS3 Benefits
CSS3 Features & APIs
Flexbox Layout
CSS Flexbox provides a one-dimensional layout method for arranging items in rows or columns, making it easier to design flexible responsive layouts.
Flex Container Properties
Properties that control the flex container and how flex items are laid out.
Benefits:
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}Flex Item Properties
Properties that control individual flex items within a flex container.
Benefits:
.flex-item {
flex: 1 1 auto;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
order: 1;
}CSS Grid Layout
CSS Grid is a two-dimensional layout system that allows you to create complex web layouts with rows and columns.
Grid Container
Define a grid container and its layout structure.
Benefits:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1rem;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}Grid Items
Position and size grid items within the grid layout.
Benefits:
.grid-item {
grid-column: 1 / 3;
grid-row: 1 / 2;
grid-area: header;
justify-self: center;
align-self: start;
}CSS Transforms
CSS transforms allow you to modify the coordinate space of the CSS visual formatting model, enabling 2D and 3D transformations.
2D Transforms
Transform elements in two-dimensional space with translate, rotate, scale, and skew.
Benefits:
.transform-2d {
transform: translate(50px, 100px);
transform: rotate(45deg);
transform: scale(1.5);
transform: skew(10deg, 20deg);
transform: translateX(50px) rotate(45deg) scale(1.2);
}3D Transforms
Create three-dimensional transformations for more complex visual effects.
Benefits:
.transform-3d {
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: translateZ(100px);
transform: perspective(1000px) rotateY(45deg);
}CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties, creating smooth state changes.
Transition Properties
Define how CSS properties transition from one value to another over time.
Benefits:
.transition {
transition: all 0.3s ease-in-out;
transition-property: background-color, transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
}Transition Timing Functions
Control the acceleration curve of transitions for different animation effects.
Benefits:
.timing-functions {
transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}CSS Animations
CSS animations allow you to create complex animations by defining keyframes and applying them to elements.
Keyframe Animations
Define custom animations using @keyframes with multiple stages.
Benefits:
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(-50%);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.animated-element {
animation: slideIn 1s ease-out;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
}Animation Properties
Control various aspects of CSS animations including timing, direction, and state.
Benefits:
.animation-controls {
animation-name: bounce;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
}CSS Variables (Custom Properties)
CSS custom properties allow you to define reusable values that can be used throughout your stylesheets.
Defining Variables
Create and use CSS custom properties for consistent theming and maintainable code.
Benefits:
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
--spacing-unit: 1rem;
--border-radius: 4px;
}
.component {
color: var(--primary-color);
font-size: var(--font-size-base);
padding: var(--spacing-unit);
border-radius: var(--border-radius);
background-color: var(--secondary-color);
}Dynamic Variables
Use CSS variables with fallbacks and dynamic values for responsive design.
Benefits:
.dynamic-styles {
--dynamic-size: calc(var(--base-size) * 2);
--responsive-padding: clamp(1rem, 5vw, 3rem);
--theme-color: var(--user-theme, #007bff);
--opacity: var(--hover-opacity, 0.8);
background-color: color-mix(in srgb, var(--theme-color) var(--opacity), transparent);
}CSS Selectors
Advanced CSS selectors provide powerful ways to target and style specific elements based on various criteria.
Attribute Selectors
Select elements based on their attributes and attribute values.
Benefits:
/* Exact match */
input[type="text"] { }
/* Contains word */
a[href*="example"] { }
/* Starts with */
a[href^="https"] { }
/* Ends with */
a[href$=".pdf"] { }
/* Contains word in space-separated list */
div[class~="highlight"] { }
/* Starts with word followed by hyphen */
div[class|="prefix"] { }Pseudo-classes
Target elements based on their state, position, or other characteristics.
Benefits:
/* State-based */
button:hover { }
input:focus { }
a:visited { }
input:checked { }
/* Position-based */
li:first-child { }
li:last-child { }
li:nth-child(odd) { }
li:nth-child(3n+1) { }
/* Form-based */
input:required { }
input:invalid { }
input:disabled { }
input:placeholder-shown { }Pseudo-elements
Create virtual elements that don't exist in the DOM but can be styled.
Benefits:
.element::before {
content: "→ ";
color: var(--accent-color);
}
.element::after {
content: "";
display: block;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.element::first-line {
font-weight: bold;
color: var(--highlight);
}
.element::first-letter {
font-size: 3em;
float: left;
margin-right: 0.1em;
}CSS Gradients
CSS gradients create smooth transitions between two or more colors, providing rich visual backgrounds.
Linear Gradients
Create gradients that transition along a straight line in any direction.
Benefits:
.linear-gradient {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(90deg,
#ff0000 0%,
#ff8000 25%,
#ffff00 50%,
#00ff00 75%,
#0000ff 100%
);
}Radial Gradients
Create circular or elliptical gradients that radiate from a center point.
Benefits:
.radial-gradient {
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
background: radial-gradient(ellipse at center, #667eea 0%, #764ba2 100%);
background: radial-gradient(circle at 20% 80%, #ff6b6b, transparent 50%);
background: radial-gradient(circle,
#ff0000 0%,
#ff8000 25%,
#ffff00 50%,
#00ff00 75%,
#0000ff 100%
);
}Conic Gradients
Create gradients that rotate around a center point, creating pie-chart-like effects.
Benefits:
.conic-gradient {
background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
background: conic-gradient(from 45deg,
#ff0000 0deg,
#ff8000 90deg,
#ffff00 180deg,
#00ff00 270deg,
#0000ff 360deg
);
background: conic-gradient(from 0deg at 50% 50%,
#ff6b6b 0deg,
transparent 60deg,
#4ecdc4 120deg,
transparent 180deg,
#45b7d1 240deg,
transparent 300deg,
#ff6b6b 360deg
);
}CSS Filters
CSS filters apply visual effects like blur, brightness, contrast, and more to elements.
Visual Filters
Apply various visual effects to elements for enhanced design and user experience.
Benefits:
.filters {
filter: blur(5px);
filter: brightness(150%);
filter: contrast(200%);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: sepia(100%);
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}Filter Combinations
Combine multiple filters for complex visual effects and transformations.
Benefits:
.filter-combinations {
filter: brightness(1.2) contrast(1.1) saturate(1.3);
filter: grayscale(50%) sepia(25%) hue-rotate(30deg);
filter: blur(2px) brightness(0.8) contrast(1.2);
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3))
brightness(1.1)
saturate(1.2);
}CSS Media Queries
CSS media queries allow you to apply different styles based on device characteristics and user preferences.
Responsive Breakpoints
Create responsive designs that adapt to different screen sizes and orientations.
Benefits:
/* Mobile first approach */
.container {
width: 100%;
padding: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 960px;
}
}
/* Large screens */
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}Feature Queries
Apply styles based on browser support for specific CSS features.
Benefits:
/* Check for CSS Grid support */
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
/* Fallback for older browsers */
@supports not (display: grid) {
.layout {
display: flex;
flex-wrap: wrap;
}
}
/* Check for custom properties */
@supports (--custom-property: value) {
.theme {
--primary-color: #007bff;
}
}Media Features
Target specific device characteristics and user preferences for enhanced accessibility.
Benefits:
/* Dark mode preference */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.button {
border: 2px solid currentColor;
}
}
/* Print styles */
@media print {
.no-print {
display: none;
}
}CSS Logical Properties
CSS logical properties provide a way to control layout based on the logical flow of content rather than physical directions.
Logical Dimensions
Use logical properties for sizing that adapt to text direction and writing mode.
Benefits:
.logical-dimensions {
/* Instead of width/height */
inline-size: 200px;
block-size: 100px;
/* Instead of margin/padding */
margin-inline: 1rem;
margin-block: 0.5rem;
padding-inline: 1rem;
padding-block: 0.5rem;
/* Instead of border */
border-inline: 1px solid #ccc;
border-block: 2px solid #333;
}Logical Positioning
Position elements using logical properties that work with different text directions.
Benefits:
.logical-positioning {
/* Instead of left/right/top/bottom */
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 0;
inset-block-end: 0;
/* Logical float */
float: inline-start;
float: inline-end;
/* Logical text alignment */
text-align: start;
text-align: end;
}