Master CSS backgrounds and borders to enhance element visual appearance. Learn colors, gradients, images, and decorative border techniques.
Backgrounds and borders are the visual foundation that transforms plain HTML elements into rich, engaging interfaces. While content provides the information, backgrounds and borders provide the personality, branding, and visual hierarchy that make websites memorable and professional.
Modern CSS backgrounds go far beyond simple colors. You can create stunning gradients, use multiple background images, control precise positioning, and even blend colors with advanced modes. Borders have evolved from simple lines to sophisticated design elements with rounded corners, shadows, and creative styling.
In this lesson, you'll master the complete spectrum of background and border properties, from fundamental color application to advanced techniques used by top designers. These skills will enable you to create visually striking components, enhance user experience, and bring any design concept to life.
CSS backgrounds provide the canvas for your content. Understanding background properties gives you complete control over element appearance and visual depth.
Background Color Basics:
1. Solid Colors:
1.background-colors {
2 background-color: #3b82f6; /* Hex color */
3 background-color: rgb(59, 130, 246); /* RGB */
4 background-color: hsl(217, 91%, 60%); /* HSL */
5 background-color: rgba(59, 130, 246, 0.8); /* With transparency */
6 background-color: transparent; /* Transparent background */
7}2. Background Images:
1.background-images {
2 background-image: url('hero-bg.jpg');
3 background-image: url('data:image/svg+xml,...'); /* Inline SVG */
4 background-image: none; /* Remove background image */
5}Background Positioning and Sizing:
1. Background Position:
1.background-position {
2 background-position: center; /* Center both axes */
3 background-position: top left; /* Keywords */
4 background-position: 50% 25%; /* Percentages */
5 background-position: 100px 50px; /* Absolute positions */
6 background-position: right 20px top 30px; /* Offset from edges */
7}2. Background Size:
1.background-size {
2 background-size: auto; /* Default - original size */
3 background-size: cover; /* Cover entire container */
4 background-size: contain; /* Fit entire image in container */
5 background-size: 100% 100%; /* Stretch to exact dimensions */
6 background-size: 300px 200px; /* Specific width and height */
7}3. Background Repeat:
1.background-repeat {
2 background-repeat: no-repeat; /* Show once */
3 background-repeat: repeat; /* Default - tile both directions */
4 background-repeat: repeat-x; /* Repeat horizontally */
5 background-repeat: repeat-y; /* Repeat vertically */
6 background-repeat: space; /* Repeat with spacing */
7 background-repeat: round; /* Scale to fit without clipping */
8}4. Background Attachment:
1.background-attachment {
2 background-attachment: scroll; /* Default - scrolls with content */
3 background-attachment: fixed; /* Fixed to viewport (parallax) */
4 background-attachment: local; /* Scrolls with element content */
5}Background Shorthand Property:
1.background-shorthand {
2 /* background: color image repeat position / size attachment; */
3 background: #f0f0f0 url('pattern.png') repeat-x center top / contain fixed;
4
5 /* Common patterns */
6 background: url('hero.jpg') no-repeat center / cover;
7 background: linear-gradient(45deg, blue, purple) fixed;
8}Practical Background Examples:
1. Hero Section:
1.hero {
2 background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
3 url('hero-image.jpg');
4 background-size: cover;
5 background-position: center;
6 background-attachment: fixed; /* Parallax effect */
7 color: white;
8 text-align: center;
9 padding: 100px 20px;
10}2. Card with Pattern:
1.patterned-card {
2 background-color: #f8f9fa;
3 background-image: url('data:image/svg+xml,<svg>...</svg>');
4 background-size: 20px 20px;
5 background-repeat: repeat;
6 padding: 20px;
7 border-radius: 8px;
8}3. Split Background:
1.split-bg {
2 background: linear-gradient(90deg,
3 #3b82f6 0%,
4 #3b82f6 50%,
5 #f8f9fa 50%,
6 #f8f9fa 100%
7 );
8}Background Best Practices:
Modern Background Features:
1.modern-backgrounds {
2 /* CSS Gradients as backgrounds */
3 background: conic-gradient(from 45deg, red, yellow, green, blue, red);
4
5 /* Multiple backgrounds */
6 background:
7 url('overlay.png') repeat,
8 linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%),
9 #3b82f6;
10
11 /* Background blend modes */
12 background-blend-mode: multiply;
13 background-blend-mode: overlay;
14 background-blend-mode: screen;
15}CSS gradients create smooth transitions between colors, eliminating the need for gradient images and providing infinite customization possibilities.
Linear Gradients:
1. Basic Linear Gradients:
1.linear-gradients {
2 /* Top to bottom (default) */
3 background: linear-gradient(#ff6b6b, #4ecdc4);
4
5 /* Left to right */
6 background: linear-gradient(to right, #ff6b6b, #4ecdc4);
7
8 /* Diagonal */
9 background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
10
11 /* Specific angle */
12 background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
13}2. Multiple Color Stops:
1.multi-stop-gradients {
2 /* Three colors */
3 background: linear-gradient(45deg, #ff6b6b, #feca57, #4ecdc4);
4
5 /* With position percentages */
6 background: linear-gradient(90deg,
7 #ff6b6b 0%,
8 #feca57 25%,
9 #4ecdc4 100%
10 );
11
12 /* Sharp transitions */
13 background: linear-gradient(90deg,
14 #ff6b6b 50%,
15 #4ecdc4 50%
16 );
17}3. Transparent Gradients:
1.transparent-gradients {
2 /* Fade to transparent */
3 background: linear-gradient(to bottom,
4 rgba(59, 130, 246, 1) 0%,
5 rgba(59, 130, 246, 0) 100%
6 );
7
8 /* Overlay gradient */
9 background: linear-gradient(to bottom,
10 transparent 0%,
11 rgba(0, 0, 0, 0.8) 100%
12 );
13}Radial Gradients:
1. Basic Radial Gradients:
1.radial-gradients {
2 /* Center outward (default) */
3 background: radial-gradient(#ff6b6b, #4ecdc4);
4
5 /* Ellipse shape */
6 background: radial-gradient(ellipse, #ff6b6b, #4ecdc4);
7
8 /* Circle shape */
9 background: radial-gradient(circle, #ff6b6b, #4ecdc4);
10}2. Positioned Radial Gradients:
1.positioned-radials {
2 /* Custom center position */
3 background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4);
4
5 /* Percentage positioning */
6 background: radial-gradient(circle at 75% 25%, #ff6b6b, #4ecdc4);
7
8 /* Pixel positioning */
9 background: radial-gradient(circle at 100px 50px, #ff6b6b, #4ecdc4);
10}3. Sized Radial Gradients:
1.sized-radials {
2 /* Closest-side */
3 background: radial-gradient(closest-side at center, #ff6b6b, #4ecdc4);
4
5 /* Farthest-corner */
6 background: radial-gradient(farthest-corner at center, #ff6b6b, #4ecdc4);
7
8 /* Explicit size */
9 background: radial-gradient(100px 50px at center, #ff6b6b, #4ecdc4);
10}Conic Gradients (Modern CSS):
1.conic-gradients {
2 /* Color wheel effect */
3 background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
4
5 /* From specific angle */
6 background: conic-gradient(from 45deg, #ff6b6b, #4ecdc4);
7
8 /* At specific position */
9 background: conic-gradient(at 25% 75%, #ff6b6b, #4ecdc4, #feca57);
10}Advanced Gradient Techniques:
1. Multiple Gradients:
1.multiple-gradients {
2 background:
3 linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%),
4 radial-gradient(circle at top right, #ff6b6b, #4ecdc4),
5 linear-gradient(to bottom, #667eea, #764ba2);
6}2. Gradient Patterns:
1.gradient-patterns {
2 /* Stripes */
3 background: linear-gradient(90deg,
4 #ff6b6b 0px, #ff6b6b 20px,
5 #4ecdc4 20px, #4ecdc4 40px
6 );
7 background-size: 40px 40px;
8
9 /* Checkerboard */
10 background:
11 linear-gradient(45deg, #ff6b6b 25%, transparent 25%),
12 linear-gradient(-45deg, #ff6b6b 25%, transparent 25%),
13 linear-gradient(45deg, transparent 75%, #4ecdc4 75%),
14 linear-gradient(-45deg, transparent 75%, #4ecdc4 75%);
15 background-size: 30px 30px;
16 background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
17}Practical Gradient Applications:
1. Button Gradients:
1.gradient-button {
2 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
3 border: none;
4 color: white;
5 padding: 12px 24px;
6 border-radius: 25px;
7 cursor: pointer;
8 transition: all 0.3s ease;
9}
10
11.gradient-button:hover {
12 background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
13 transform: translateY(-2px);
14 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
15}2. Card Backgrounds:
1.gradient-card {
2 background: linear-gradient(145deg, #f0f0f0, #cacaca);
3 border-radius: 20px;
4 padding: 30px;
5 box-shadow:
6 20px 20px 40px #bebebe,
7 -20px -20px 40px #ffffff;
8}3. Text Effects:
1.gradient-text {
2 background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
3 -webkit-background-clip: text;
4 background-clip: text;
5 -webkit-text-fill-color: transparent;
6 color: transparent;
7 font-weight: bold;
8 font-size: 2rem;
9}Gradient Best Practices:
CSS borders provide structure, emphasis, and visual separation. Modern border properties offer extensive customization options for professional styling.
Basic Border Properties:
1. Border Width:
1.border-widths {
2 border-width: thin; /* Keyword: thin, medium, thick */
3 border-width: 2px; /* Specific pixel width */
4 border-width: 0.1em; /* Relative units */
5
6 /* Individual sides */
7 border-top-width: 3px;
8 border-right-width: 2px;
9 border-bottom-width: 1px;
10 border-left-width: 4px;
11
12 /* Shorthand: top right bottom left */
13 border-width: 3px 2px 1px 4px;
14}2. Border Style:
1.border-styles {
2 border-style: solid; /* Most common */
3 border-style: dashed; /* Dashed line */
4 border-style: dotted; /* Dotted line */
5 border-style: double; /* Two parallel lines */
6 border-style: groove; /* 3D grooved effect */
7 border-style: ridge; /* 3D ridged effect */
8 border-style: inset; /* 3D inset effect */
9 border-style: outset; /* 3D outset effect */
10 border-style: none; /* No border */
11 border-style: hidden; /* Hidden border (for tables) */
12}3. Border Color:
1.border-colors {
2 border-color: #3b82f6; /* Hex color */
3 border-color: rgb(59, 130, 246); /* RGB */
4 border-color: hsl(217, 91%, 60%); /* HSL */
5 border-color: rgba(59, 130, 246, 0.5); /* Transparent */
6 border-color: currentColor; /* Uses text color */
7
8 /* Different colors per side */
9 border-color: red green blue yellow; /* Top, right, bottom, left */
10
11 /* Individual sides */
12 border-top-color: #ff6b6b;
13 border-right-color: #4ecdc4;
14}Border Shorthand:
1.border-shorthand {
2 /* border: width style color; */
3 border: 2px solid #3b82f6;
4 border: thick dashed red;
5 border: 1px solid rgba(0, 0, 0, 0.1);
6
7 /* Individual sides */
8 border-top: 3px solid #ff6b6b;
9 border-right: 2px dashed #4ecdc4;
10 border-bottom: 1px dotted #feca57;
11 border-left: 4px solid #6c5ce7;
12}Border Radius (Rounded Corners):
1. Basic Border Radius:
1.border-radius-basic {
2 border-radius: 8px; /* All corners */
3 border-radius: 50%; /* Perfect circle/pill */
4 border-radius: 20px 10px; /* Horizontal and vertical */
5}2. Individual Corner Radius:
1.border-radius-individual {
2 border-top-left-radius: 10px;
3 border-top-right-radius: 20px;
4 border-bottom-right-radius: 15px;
5 border-bottom-left-radius: 5px;
6
7 /* Shorthand: top-left top-right bottom-right bottom-left */
8 border-radius: 10px 20px 15px 5px;
9}3. Elliptical Corners:
1.elliptical-corners {
2 /* Different horizontal and vertical radius */
3 border-radius: 20px / 10px; /* All corners */
4 border-radius: 10px 20px 15px 5px / 5px 10px 15px 20px;
5
6 /* Individual elliptical corners */
7 border-top-left-radius: 20px 10px; /* 20px horizontal, 10px vertical */
8}Advanced Border Techniques:
1. Gradient Borders:
1.gradient-border {
2 border: 3px solid transparent;
3 background:
4 linear-gradient(white, white) padding-box,
5 linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
6 border-radius: 10px;
7}
8
9/* Alternative method */
10.gradient-border-alt {
11 position: relative;
12 background: white;
13 border-radius: 10px;
14}
15
16.gradient-border-alt::before {
17 content: '';
18 position: absolute;
19 inset: 0;
20 padding: 3px;
21 background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
22 border-radius: inherit;
23 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
24 mask-composite: exclude;
25}2. Multiple Borders:
1.multiple-borders {
2 border: 3px solid #3b82f6;
3 box-shadow:
4 0 0 0 6px #ffffff, /* White middle border */
5 0 0 0 9px #ff6b6b; /* Red outer border */
6}
7
8/* Using outline for double border */
9.double-border {
10 border: 2px solid #3b82f6;
11 outline: 2px solid #ff6b6b;
12 outline-offset: 2px;
13}3. Border Images:
1.border-image {
2 border: 20px solid transparent;
3 border-image: url('border-pattern.png') 20 repeat;
4
5 /* Linear gradient border image */
6 border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
7}Practical Border Applications:
1. Card with Subtle Border:
1.subtle-card {
2 background: white;
3 border: 1px solid rgba(0, 0, 0, 0.1);
4 border-radius: 12px;
5 padding: 24px;
6 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
7 transition: border-color 0.3s ease;
8}
9
10.subtle-card:hover {
11 border-color: rgba(59, 130, 246, 0.3);
12}2. Form Input Borders:
1.form-input {
2 border: 2px solid #e5e7eb;
3 border-radius: 8px;
4 padding: 12px 16px;
5 font-size: 16px;
6 transition: all 0.3s ease;
7}
8
9.form-input:focus {
10 border-color: #3b82f6;
11 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
12 outline: none;
13}
14
15.form-input:invalid {
16 border-color: #ef4444;
17}
18
19.form-input:valid {
20 border-color: #10b981;
21}3. Navigation with Border Indicators:
1.nav-item {
2 padding: 12px 16px;
3 border-bottom: 3px solid transparent;
4 transition: border-color 0.3s ease;
5}
6
7.nav-item:hover {
8 border-bottom-color: #3b82f6;
9}
10
11.nav-item.active {
12 border-bottom-color: #1e40af;
13}4. Status Indicators:
1.status-indicator {
2 padding: 8px 16px;
3 border-radius: 20px;
4 font-weight: 600;
5 font-size: 14px;
6}
7
8.status-success {
9 background: rgba(16, 185, 129, 0.1);
10 border: 1px solid #10b981;
11 color: #065f46;
12}
13
14.status-warning {
15 background: rgba(245, 158, 11, 0.1);
16 border: 1px solid #f59e0b;
17 color: #92400e;
18}
19
20.status-error {
21 background: rgba(239, 68, 68, 0.1);
22 border: 1px solid #ef4444;
23 color: #991b1b;
24}Border Best Practices:
Box shadows and visual effects create depth, hierarchy, and professional polish. These properties transform flat designs into engaging, dimensional interfaces.
Box Shadow Fundamentals:
1. Basic Box Shadow Syntax:
1.box-shadow-basic {
2 /* box-shadow: offset-x offset-y blur-radius spread-radius color; */
3 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
4
5 /* Horizontal and vertical offset */
6 box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
7
8 /* With blur radius */
9 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
10
11 /* With spread radius */
12 box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.1);
13}2. Inset Shadows:
1.inset-shadows {
2 /* Inner shadow effect */
3 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
4
5 /* Combined inset and outset */
6 box-shadow:
7 inset 0 1px 2px rgba(0, 0, 0, 0.1),
8 0 2px 8px rgba(0, 0, 0, 0.05);
9}3. Multiple Box Shadows:
1.multiple-shadows {
2 box-shadow:
3 0 1px 3px rgba(0, 0, 0, 0.12), /* Close subtle shadow */
4 0 1px 2px rgba(0, 0, 0, 0.24), /* Closer dark shadow */
5 0 4px 12px rgba(0, 0, 0, 0.15); /* Far blur shadow */
6}Shadow Elevation System:
1/* Material Design inspired elevation */
2.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
3.elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
4.elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }
5.elevation-4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
6.elevation-5 { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); }Colored and Gradient Shadows:
1.colored-shadows {
2 /* Colored drop shadow */
3 box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
4
5 /* Brand color shadow */
6 box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
7
8 /* Multiple colored shadows */
9 box-shadow:
10 -5px -5px 10px rgba(255, 107, 107, 0.3),
11 5px 5px 10px rgba(78, 205, 196, 0.3);
12}Advanced Visual Effects:
1. Neumorphism (Soft UI):
1.neumorphism {
2 background: #e0e5ec;
3 border-radius: 20px;
4 padding: 30px;
5 box-shadow:
6 9px 9px 18px #a3a8b8,
7 -9px -9px 18px #ffffff;
8}
9
10.neumorphism-inset {
11 background: #e0e5ec;
12 border-radius: 20px;
13 padding: 30px;
14 box-shadow:
15 inset 9px 9px 18px #a3a8b8,
16 inset -9px -9px 18px #ffffff;
17}2. Glassmorphism:
1.glassmorphism {
2 background: rgba(255, 255, 255, 0.2);
3 backdrop-filter: blur(10px);
4 -webkit-backdrop-filter: blur(10px);
5 border: 1px solid rgba(255, 255, 255, 0.3);
6 border-radius: 16px;
7 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
8}3. Glow Effects:
1.glow-effect {
2 box-shadow:
3 0 0 5px rgba(59, 130, 246, 0.5),
4 0 0 10px rgba(59, 130, 246, 0.4),
5 0 0 15px rgba(59, 130, 246, 0.3),
6 0 0 20px rgba(59, 130, 246, 0.2);
7}
8
9.glow-hover:hover {
10 box-shadow:
11 0 0 10px rgba(59, 130, 246, 0.8),
12 0 0 20px rgba(59, 130, 246, 0.6),
13 0 0 30px rgba(59, 130, 246, 0.4);
14}Interactive Shadow Effects:
1. Hover Elevations:
1.interactive-card {
2 background: white;
3 border-radius: 12px;
4 padding: 24px;
5 transition: all 0.3s ease;
6 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
7}
8
9.interactive-card:hover {
10 transform: translateY(-4px);
11 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
12}2. Button Press Effects:
1.button-3d {
2 background: #3b82f6;
3 color: white;
4 border: none;
5 border-radius: 8px;
6 padding: 12px 24px;
7 cursor: pointer;
8 transition: all 0.15s ease;
9 box-shadow: 0 4px 0 #1e40af, 0 6px 12px rgba(0, 0, 0, 0.2);
10}
11
12.button-3d:active {
13 transform: translateY(2px);
14 box-shadow: 0 2px 0 #1e40af, 0 4px 8px rgba(0, 0, 0, 0.2);
15}Text Shadows:
1.text-shadows {
2 /* Basic text shadow */
3 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
4
5 /* Multiple text shadows */
6 text-shadow:
7 1px 1px 0px #ccc,
8 2px 2px 0px #999,
9 3px 3px 0px #666;
10
11 /* Glow text effect */
12 text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
13
14 /* Embossed text */
15 text-shadow:
16 0 1px 0 rgba(255, 255, 255, 0.8),
17 0 -1px 0 rgba(0, 0, 0, 0.3);
18}Practical Visual Effect Applications:
1. Card Collection:
1.card-minimal {
2 background: white;
3 border-radius: 8px;
4 padding: 20px;
5 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
6}
7
8.card-elevated {
9 background: white;
10 border-radius: 12px;
11 padding: 24px;
12 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
13}
14
15.card-floating {
16 background: white;
17 border-radius: 16px;
18 padding: 32px;
19 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
20}2. Form Input Effects:
1.input-shadow {
2 border: 1px solid #e5e7eb;
3 border-radius: 8px;
4 padding: 12px 16px;
5 transition: all 0.3s ease;
6 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
7}
8
9.input-shadow:focus {
10 border-color: #3b82f6;
11 box-shadow:
12 inset 0 1px 2px rgba(0, 0, 0, 0.05),
13 0 0 0 3px rgba(59, 130, 246, 0.1);
14}3. Navigation Shadows:
1.navbar {
2 background: white;
3 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
4 transition: box-shadow 0.3s ease;
5}
6
7.navbar.scrolled {
8 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
9}Shadow Performance Tips:
Modern Filter Effects:
1.modern-filters {
2 /* Backdrop blur for glassmorphism */
3 backdrop-filter: blur(10px) saturate(180%);
4
5 /* Drop shadow filter (different from box-shadow) */
6 filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
7
8 /* Multiple filters */
9 filter:
10 drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
11 blur(0.5px)
12 brightness(1.1);
13}A comprehensive demonstration of CSS backgrounds, gradients, borders, and shadows featuring modern design techniques and practical applications.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Backgrounds & Borders - Visual Effects Showcase</title>
7 <style>
8 /* =================
9 RESET AND BASE
10 ================= */
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16
17 body {
18 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19 line-height: 1.6;
20 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21 min-height: 100vh;
22 padding: 20px;
23 }
24
25 /* =================
26 ELEVATION SYSTEM
27 ================= */
28 :root {
29 --elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
30 --elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
31 --elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
32 --elevation-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
33 --elevation-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
34 }
35
36 /* =================
37 MAIN CONTAINER
38 ================= */
39 .container {
40 max-width: 1400px;
41 margin: 0 auto;
42 background: rgba(255, 255, 255, 0.95);
43 border-radius: 24px;
44 overflow: hidden;
45 box-shadow: var(--elevation-5);
46 backdrop-filter: blur(10px);
47 }
48
49 /* =================
50 HERO HEADER
51 ================= */
52 .hero {
53 position: relative;
54 background:
55 linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
56 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'),
57 linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
58 background-size: auto, 50px 50px, cover;
59 background-attachment: scroll, scroll, fixed;
60 color: white;
61 text-align: center;
62 padding: 80px 40px;
63 position: relative;
64 overflow: hidden;
65 }
66
67 .hero::before {
68 content: '';
69 position: absolute;
70 top: -50%;
71 left: -50%;
72 width: 200%;
73 height: 200%;
74 background: radial-gradient(circle at center,
75 rgba(255,255,255,0.1) 0%,
76 transparent 50%);
77 animation: rotate 20s linear infinite;
78 pointer-events: none;
79 }
80
81 @keyframes rotate {
82 to { transform: rotate(360deg); }
83 }
84
85 .hero-title {
86 position: relative;
87 font-size: clamp(2.5rem, 5vw, 4rem);
88 font-weight: 700;
89 margin-bottom: 1rem;
90 text-shadow:
91 2px 2px 0 rgba(0,0,0,0.3),
92 0 0 20px rgba(255,255,255,0.2);
93 }
94
95 .hero-subtitle {
96 position: relative;
97 font-size: 1.2rem;
98 opacity: 0.9;
99 max-width: 600px;
100 margin: 0 auto;
101 }
102
103 /* =================
104 MAIN CONTENT
105 ================= */
106 .main-content {
107 padding: 60px 40px;
108 }
109
110 .section {
111 margin-bottom: 60px;
112 background: white;
113 border-radius: 20px;
114 padding: 40px;
115 box-shadow: var(--elevation-2);
116 position: relative;
117 overflow: hidden;
118 }
119
120 .section::before {
121 content: '';
122 position: absolute;
123 top: 0;
124 left: 0;
125 right: 0;
126 height: 4px;
127 background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
128 }
129
130 .section:last-child {
131 margin-bottom: 0;
132 }
133
134 .section-title {
135 color: #1e293b;
136 font-size: 2.25rem;
137 font-weight: 700;
138 margin-bottom: 1.5rem;
139 text-align: center;
140 }
141
142 .section-description {
143 color: #64748b;
144 font-size: 1.1rem;
145 text-align: center;
146 margin-bottom: 2rem;
147 max-width: 800px;
148 margin-left: auto;
149 margin-right: auto;
150 }
151
152 /* =================
153 BACKGROUND SHOWCASE
154 ================= */
155 .background-grid {
156 display: grid;
157 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
158 gap: 30px;
159 margin: 2rem 0;
160 }
161
162 .bg-demo {
163 height: 200px;
164 border-radius: 16px;
165 padding: 30px;
166 color: white;
167 font-weight: 600;
168 font-size: 1.1rem;
169 display: flex;
170 align-items: center;
171 justify-content: center;
172 text-align: center;
173 position: relative;
174 overflow: hidden;
175 transition: transform 0.3s ease;
176 text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
177 }
178
179 .bg-demo:hover {
180 transform: translateY(-8px) scale(1.02);
181 }
182
183 .bg-solid {
184 background: #3b82f6;
185 }
186
187 .bg-linear {
188 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
189 }
190
191 .bg-radial {
192 background: radial-gradient(circle at center, #ff6b6b 0%, #4ecdc4 100%);
193 }
194
195 .bg-conic {
196 background: conic-gradient(from 180deg at center, #ff6b6b, #feca57, #4ecdc4, #6c5ce7, #ff6b6b);
197 }
198
199 .bg-pattern {
200 background:
201 linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%),
202 linear-gradient(135deg, #667eea 0%, #764ba2 100%);
203 background-size: 20px 20px, cover;
204 }
205
206 .bg-multi {
207 background:
208 radial-gradient(circle at 25% 25%, rgba(255,255,255,0.2) 0%, transparent 50%),
209 radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 0%, transparent 50%),
210 linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
211 }
212
213 /* =================
214 GRADIENT SHOWCASE
215 ================= */
216 .gradient-showcase {
217 display: grid;
218 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
219 gap: 24px;
220 margin: 2rem 0;
221 }
222
223 .gradient-card {
224 height: 160px;
225 border-radius: 20px;
226 padding: 24px;
227 color: white;
228 font-weight: 600;
229 display: flex;
230 align-items: end;
231 position: relative;
232 overflow: hidden;
233 text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
234 transition: all 0.3s ease;
235 }
236
237 .gradient-card:hover {
238 transform: translateY(-4px);
239 box-shadow: 0 15px 40px rgba(0,0,0,0.2);
240 }
241
242 .gradient-1 {
243 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
244 }
245
246 .gradient-2 {
247 background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
248 }
249
250 .gradient-3 {
251 background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
252 }
253
254 .gradient-4 {
255 background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
256 }
257
258 .gradient-5 {
259 background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
260 }
261
262 .gradient-6 {
263 background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
264 }
265
266 /* =================
267 BORDER SHOWCASE
268 ================= */
269 .border-grid {
270 display: grid;
271 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
272 gap: 24px;
273 margin: 2rem 0;
274 }
275
276 .border-demo {
277 background: #f8fafc;
278 padding: 24px;
279 text-align: center;
280 font-weight: 600;
281 color: #1e293b;
282 transition: all 0.3s ease;
283 }
284
285 .border-demo:hover {
286 transform: translateY(-2px);
287 box-shadow: 0 8px 25px rgba(0,0,0,0.1);
288 }
289
290 .border-solid {
291 border: 4px solid #3b82f6;
292 border-radius: 12px;
293 }
294
295 .border-dashed {
296 border: 4px dashed #10b981;
297 border-radius: 12px;
298 }
299
300 .border-dotted {
301 border: 4px dotted #f59e0b;
302 border-radius: 12px;
303 }
304
305 .border-double {
306 border: 6px double #8b5cf6;
307 border-radius: 12px;
308 }
309
310 .border-gradient {
311 border: 4px solid transparent;
312 background:
313 linear-gradient(white, white) padding-box,
314 linear-gradient(135deg, #ff6b6b, #4ecdc4) border-box;
315 border-radius: 12px;
316 }
317
318 .border-mixed {
319 border-top: 4px solid #ff6b6b;
320 border-right: 4px dashed #4ecdc4;
321 border-bottom: 4px dotted #feca57;
322 border-left: 4px double #6c5ce7;
323 border-radius: 12px;
324 }
325
326 .border-radius-demo {
327 display: grid;
328 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
329 gap: 20px;
330 margin: 2rem 0;
331 }
332
333 .radius-demo {
334 height: 100px;
335 background: linear-gradient(135deg, #667eea, #764ba2);
336 display: flex;
337 align-items: center;
338 justify-content: center;
339 color: white;
340 font-weight: 600;
341 font-size: 14px;
342 text-align: center;
343 transition: transform 0.2s ease;
344 }
345
346 .radius-demo:hover {
347 transform: scale(1.1);
348 }
349
350 .radius-small { border-radius: 4px; }
351 .radius-medium { border-radius: 12px; }
352 .radius-large { border-radius: 24px; }
353 .radius-pill { border-radius: 50px; }
354 .radius-circle { border-radius: 50%; }
355 .radius-custom { border-radius: 20px 5px 20px 5px; }
356
357 /* =================
358 SHADOW SHOWCASE
359 ================= */
360 .shadow-grid {
361 display: grid;
362 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
363 gap: 30px;
364 margin: 3rem 0;
365 }
366
367 .shadow-demo {
368 background: white;
369 padding: 24px;
370 border-radius: 16px;
371 text-align: center;
372 font-weight: 600;
373 color: #1e293b;
374 transition: all 0.3s ease;
375 }
376
377 .shadow-1 { box-shadow: var(--elevation-1); }
378 .shadow-2 { box-shadow: var(--elevation-2); }
379 .shadow-3 { box-shadow: var(--elevation-3); }
380 .shadow-4 { box-shadow: var(--elevation-4); }
381 .shadow-5 { box-shadow: var(--elevation-5); }
382
383 .shadow-colored {
384 box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
385 }
386
387 .shadow-inset {
388 box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
389 background: #f1f5f9;
390 }
391
392 .shadow-multiple {
393 box-shadow:
394 0 1px 3px rgba(0, 0, 0, 0.12),
395 0 1px 2px rgba(0, 0, 0, 0.24),
396 0 0 0 1px rgba(59, 130, 246, 0.1);
397 }
398
399 .shadow-glow {
400 box-shadow:
401 0 0 10px rgba(59, 130, 246, 0.4),
402 0 0 20px rgba(59, 130, 246, 0.2),
403 0 0 40px rgba(59, 130, 246, 0.1);
404 }
405
406 /* =================
407 ADVANCED EFFECTS
408 ================= */
409 .effects-grid {
410 display: grid;
411 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
412 gap: 30px;
413 margin: 2rem 0;
414 }
415
416 .effect-card {
417 height: 200px;
418 border-radius: 20px;
419 padding: 30px;
420 display: flex;
421 align-items: center;
422 justify-content: center;
423 font-weight: 600;
424 font-size: 1.1rem;
425 text-align: center;
426 position: relative;
427 transition: all 0.3s ease;
428 }
429
430 .effect-card:hover {
431 transform: translateY(-8px) scale(1.02);
432 }
433
434 .glassmorphism {
435 background: rgba(255, 255, 255, 0.25);
436 backdrop-filter: blur(10px);
437 -webkit-backdrop-filter: blur(10px);
438 border: 1px solid rgba(255, 255, 255, 0.18);
439 color: #1e293b;
440 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
441 }
442
443 .neumorphism {
444 background: #e0e5ec;
445 color: #1e293b;
446 box-shadow:
447 9px 9px 18px #a3a8b8,
448 -9px -9px 18px #ffffff;
449 }
450
451 .neumorphism-inset {
452 background: #e0e5ec;
453 color: #1e293b;
454 box-shadow:
455 inset 9px 9px 18px #a3a8b8,
456 inset -9px -9px 18px #ffffff;
457 }
458
459 .gradient-border-card {
460 background: white;
461 color: #1e293b;
462 border: 4px solid transparent;
463 background-clip: padding-box;
464 position: relative;
465 }
466
467 .gradient-border-card::before {
468 content: '';
469 position: absolute;
470 inset: 0;
471 padding: 4px;
472 background: linear-gradient(135deg, #667eea, #764ba2);
473 border-radius: inherit;
474 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
475 mask-composite: xor;
476 -webkit-mask-composite: xor;
477 }
478
479 /* =================
480 INTERACTIVE ELEMENTS
481 ================= */
482 .interactive-section {
483 text-align: center;
484 margin: 3rem 0;
485 }
486
487 .button-showcase {
488 display: flex;
489 gap: 20px;
490 justify-content: center;
491 flex-wrap: wrap;
492 margin: 2rem 0;
493 }
494
495 .demo-button {
496 padding: 16px 32px;
497 border: none;
498 border-radius: 12px;
499 font-weight: 600;
500 font-size: 1rem;
501 cursor: pointer;
502 transition: all 0.3s ease;
503 text-decoration: none;
504 display: inline-block;
505 }
506
507 .btn-gradient {
508 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
509 color: white;
510 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
511 }
512
513 .btn-gradient:hover {
514 transform: translateY(-2px);
515 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
516 }
517
518 .btn-3d {
519 background: #3b82f6;
520 color: white;
521 box-shadow: 0 4px 0 #1e40af, 0 6px 12px rgba(0, 0, 0, 0.2);
522 }
523
524 .btn-3d:active {
525 transform: translateY(2px);
526 box-shadow: 0 2px 0 #1e40af, 0 4px 8px rgba(0, 0, 0, 0.2);
527 }
528
529 .btn-neon {
530 background: transparent;
531 color: #00f5ff;
532 border: 2px solid #00f5ff;
533 text-shadow: 0 0 5px #00f5ff;
534 box-shadow:
535 inset 0 0 10px rgba(0, 245, 255, 0.1),
536 0 0 10px rgba(0, 245, 255, 0.4);
537 }
538
539 .btn-neon:hover {
540 background: rgba(0, 245, 255, 0.1);
541 box-shadow:
542 inset 0 0 20px rgba(0, 245, 255, 0.2),
543 0 0 20px rgba(0, 245, 255, 0.6),
544 0 0 40px rgba(0, 245, 255, 0.4);
545 }
546
547 /* =================
548 CARD COLLECTION
549 ================= */
550 .card-collection {
551 display: grid;
552 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
553 gap: 30px;
554 margin: 3rem 0;
555 }
556
557 .feature-card {
558 background: white;
559 border-radius: 20px;
560 padding: 32px;
561 box-shadow: var(--elevation-2);
562 transition: all 0.3s ease;
563 position: relative;
564 overflow: hidden;
565 }
566
567 .feature-card::before {
568 content: '';
569 position: absolute;
570 top: 0;
571 left: 0;
572 right: 0;
573 height: 4px;
574 background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
575 }
576
577 .feature-card:hover {
578 transform: translateY(-8px);
579 box-shadow: var(--elevation-4);
580 }
581
582 .card-icon {
583 width: 60px;
584 height: 60px;
585 border-radius: 16px;
586 background: linear-gradient(135deg, #667eea, #764ba2);
587 display: flex;
588 align-items: center;
589 justify-content: center;
590 font-size: 24px;
591 margin-bottom: 20px;
592 }
593
594 .card-title {
595 color: #1e293b;
596 font-size: 1.5rem;
597 font-weight: 600;
598 margin-bottom: 12px;
599 }
600
601 .card-description {
602 color: #64748b;
603 line-height: 1.6;
604 }
605
606 /* =================
607 RESPONSIVE DESIGN
608 ================= */
609 @media (max-width: 768px) {
610 body { padding: 10px; }
611 .main-content { padding: 30px 20px; }
612 .section { padding: 24px; }
613 .hero { padding: 60px 20px; }
614 .hero-title { font-size: 2.5rem; }
615 .button-showcase {
616 flex-direction: column;
617 align-items: center;
618 }
619 .demo-button {
620 width: 100%;
621 max-width: 300px;
622 }
623 }
624
625 /* =================
626 UTILITIES
627 ================= */
628 .text-center { text-align: center; }
629 .mb-2 { margin-bottom: 1rem; }
630 .mb-4 { margin-bottom: 2rem; }
631 .text-white { color: white; }
632 .text-gradient {
633 background: linear-gradient(135deg, #667eea, #764ba2);
634 -webkit-background-clip: text;
635 background-clip: text;
636 -webkit-text-fill-color: transparent;
637 font-weight: 700;
638 }
639 </style>
640</head>
641<body>
642 <div class="container">
643 <!-- Hero Section with Advanced Background -->
644 <header class="hero">
645 <h1 class="hero-title">🎨 Backgrounds & Borders</h1>
646 <p class="hero-subtitle">Master visual effects, gradients, shadows, and modern CSS styling techniques</p>
647 </header>
648
649 <main class="main-content">
650 <!-- Background Colors and Images -->
651 <section class="section">
652 <h2 class="section-title">🌈 Background Showcase</h2>
653 <p class="section-description">Explore different background techniques from solid colors to complex patterns and multi-layered effects.</p>
654
655 <div class="background-grid">
656 <div class="bg-demo bg-solid">
657 Solid Color<br>
658 <small style="opacity: 0.8;">#3b82f6</small>
659 </div>
660 <div class="bg-demo bg-linear">
661 Linear Gradient<br>
662 <small style="opacity: 0.8;">135deg, two colors</small>
663 </div>
664 <div class="bg-demo bg-radial">
665 Radial Gradient<br>
666 <small style="opacity: 0.8;">Circle at center</small>
667 </div>
668 <div class="bg-demo bg-conic">
669 Conic Gradient<br>
670 <small style="opacity: 0.8;">Color wheel effect</small>
671 </div>
672 <div class="bg-demo bg-pattern">
673 Pattern Overlay<br>
674 <small style="opacity: 0.8;">Multiple backgrounds</small>
675 </div>
676 <div class="bg-demo bg-multi">
677 Multi-layered<br>
678 <small style="opacity: 0.8;">Three gradients</small>
679 </div>
680 </div>
681 </section>
682
683 <!-- Gradient Collection -->
684 <section class="section">
685 <h2 class="section-title">✨ <span class="text-gradient">Gradient Collection</span></h2>
686 <p class="section-description">Beautiful gradient combinations for modern web design. Hover to see elevation effects.</p>
687
688 <div class="gradient-showcase">
689 <div class="gradient-card gradient-1">
690 <div>Blue Purple<br><small style="opacity: 0.8;">#667eea → #764ba2</small></div>
691 </div>
692 <div class="gradient-card gradient-2">
693 <div>Pink Red<br><small style="opacity: 0.8;">#f093fb → #f5576c</small></div>
694 </div>
695 <div class="gradient-card gradient-3">
696 <div>Blue Cyan<br><small style="opacity: 0.8;">#4facfe → #00f2fe</small></div>
697 </div>
698 <div class="gradient-card gradient-4">
699 <div>Green Mint<br><small style="opacity: 0.8;">#43e97b → #38f9d7</small></div>
700 </div>
701 <div class="gradient-card gradient-5">
702 <div>Sunset<br><small style="opacity: 0.8;">#fa709a → #fee140</small></div>
703 </div>
704 <div class="gradient-card gradient-6">
705 <div>Pastel Dream<br><small style="opacity: 0.8;">#a8edea → #fed6e3</small></div>
706 </div>
707 </div>
708 </section>
709
710 <!-- Border Styles -->
711 <section class="section">
712 <h2 class="section-title">🔲 Border Styles</h2>
713 <p class="section-description">Various border styles and techniques for framing content and creating visual separation.</p>
714
715 <div class="border-grid">
716 <div class="border-demo border-solid">
717 Solid Border<br>
718 <small style="color: #64748b;">4px solid #3b82f6</small>
719 </div>
720 <div class="border-demo border-dashed">
721 Dashed Border<br>
722 <small style="color: #64748b;">4px dashed #10b981</small>
723 </div>
724 <div class="border-demo border-dotted">
725 Dotted Border<br>
726 <small style="color: #64748b;">4px dotted #f59e0b</small>
727 </div>
728 <div class="border-demo border-double">
729 Double Border<br>
730 <small style="color: #64748b;">6px double #8b5cf6</small>
731 </div>
732 <div class="border-demo border-gradient">
733 Gradient Border<br>
734 <small style="color: #64748b;">Advanced technique</small>
735 </div>
736 <div class="border-demo border-mixed">
737 Mixed Styles<br>
738 <small style="color: #64748b;">Different per side</small>
739 </div>
740 </div>
741
742 <h3 style="text-align: center; margin: 3rem 0 1rem; color: #1e293b; font-size: 1.5rem;">Border Radius Variations</h3>
743 <div class="border-radius-demo">
744 <div class="radius-demo radius-small">4px</div>
745 <div class="radius-demo radius-medium">12px</div>
746 <div class="radius-demo radius-large">24px</div>
747 <div class="radius-demo radius-pill">50px</div>
748 <div class="radius-demo radius-circle">50%</div>
749 <div class="radius-demo radius-custom">Custom</div>
750 </div>
751 </section>
752
753 <!-- Shadow System -->
754 <section class="section">
755 <h2 class="section-title">🌟 Shadow & Elevation System</h2>
756 <p class="section-description">Professional shadow system for creating depth, hierarchy, and visual interest in your designs.</p>
757
758 <div class="shadow-grid">
759 <div class="shadow-demo shadow-1">
760 Elevation 1<br>
761 <small style="color: #64748b;">Subtle shadow</small>
762 </div>
763 <div class="shadow-demo shadow-2">
764 Elevation 2<br>
765 <small style="color: #64748b;">Card level</small>
766 </div>
767 <div class="shadow-demo shadow-3">
768 Elevation 3<br>
769 <small style="color: #64748b;">Modal level</small>
770 </div>
771 <div class="shadow-demo shadow-colored">
772 Colored Shadow<br>
773 <small style="color: #64748b;">Brand color</small>
774 </div>
775 <div class="shadow-demo shadow-inset">
776 Inset Shadow<br>
777 <small style="color: #64748b;">Inner depth</small>
778 </div>
779 <div class="shadow-demo shadow-glow">
780 Glow Effect<br>
781 <small style="color: #64748b;">Luminous border</small>
782 </div>
783 </div>
784 </section>
785
786 <!-- Advanced Effects -->
787 <section class="section">
788 <h2 class="section-title">🔮 Advanced Visual Effects</h2>
789 <p class="section-description">Modern CSS techniques including glassmorphism, neumorphism, and gradient borders.</p>
790
791 <div class="effects-grid">
792 <div class="effect-card glassmorphism">
793 Glassmorphism<br>
794 <small style="opacity: 0.7;">backdrop-filter: blur(10px)</small>
795 </div>
796 <div class="effect-card neumorphism">
797 Neumorphism<br>
798 <small style="opacity: 0.7;">Soft UI design</small>
799 </div>
800 <div class="effect-card neumorphism-inset">
801 Inset Neumorphism<br>
802 <small style="opacity: 0.7;">Pressed effect</small>
803 </div>
804 <div class="effect-card gradient-border-card">
805 Gradient Border<br>
806 <small style="opacity: 0.7;">Advanced masking</small>
807 </div>
808 </div>
809 </section>
810
811 <!-- Interactive Elements -->
812 <section class="section interactive-section">
813 <h2 class="section-title">⚡ Interactive Elements</h2>
814 <p class="section-description">Buttons and interactive elements showcasing various visual effects and hover states.</p>
815
816 <div class="button-showcase">
817 <button class="demo-button btn-gradient">Gradient Button</button>
818 <button class="demo-button btn-3d">3D Button</button>
819 <button class="demo-button btn-neon">Neon Button</button>
820 </div>
821 </section>
822
823 <!-- Feature Cards -->
824 <section class="section">
825 <h2 class="section-title">💎 Professional Card Design</h2>
826 <p class="section-description">Real-world application of backgrounds, borders, and shadows in modern card layouts.</p>
827
828 <div class="card-collection">
829 <div class="feature-card">
830 <div class="card-icon">🎨</div>
831 <h3 class="card-title">Visual Design</h3>
832 <p class="card-description">Master color theory, typography, and composition principles to create stunning visual hierarchies and user experiences.</p>
833 </div>
834 <div class="feature-card">
835 <div class="card-icon">⚡</div>
836 <h3 class="card-title">Performance</h3>
837 <p class="card-description">Optimize CSS for speed and efficiency. Learn to create beautiful effects without compromising page load times.</p>
838 </div>
839 <div class="feature-card">
840 <div class="card-icon">📱</div>
841 <h3 class="card-title">Responsive Design</h3>
842 <p class="card-description">Ensure your designs look perfect across all devices and screen sizes with modern responsive techniques.</p>
843 </div>
844 </div>
845 </section>
846
847 <!-- Mastery Summary -->
848 <section class="section text-center">
849 <h2 class="section-title">🎉 Backgrounds & Borders Mastery!</h2>
850 <p class="section-description">You've mastered the visual foundation of modern web design!</p>
851
852 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 2rem 0;">
853 <div style="padding: 20px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 16px; font-weight: 600;">
854 ✅ Background Mastery<br>
855 <small style="opacity: 0.8;">Colors, Images, Gradients</small>
856 </div>
857 <div style="padding: 20px; background: linear-gradient(135deg, #ff6b6b, #4ecdc4); color: white; border-radius: 16px; font-weight: 600;">
858 ✅ Border Techniques<br>
859 <small style="opacity: 0.8;">Styles, Radius, Effects</small>
860 </div>
861 <div style="padding: 20px; background: linear-gradient(135deg, #43e97b, #38f9d7); color: white; border-radius: 16px; font-weight: 600;">
862 ✅ Shadow Systems<br>
863 <small style="opacity: 0.8;">Depth & Elevation</small>
864 </div>
865 <div style="padding: 20px; background: linear-gradient(135deg, #fa709a, #fee140); color: white; border-radius: 16px; font-weight: 600;">
866 ✅ Visual Effects<br>
867 <small style="opacity: 0.8;">Modern CSS Magic</small>
868 </div>
869 </div>
870
871 <p style="color: #64748b; margin-top: 2rem; font-size: 1.1rem;">
872 Next: Master Display & Positioning to control element layout and create complex designs!
873 </p>
874 </section>
875 </main>
876 </div>
877</body>
878</html>This comprehensive demonstration showcases all aspects of CSS Backgrounds & Borders from Lesson 5:
🌈 Complete Background System Implementation:
1. Background Colors & Images:
2. Advanced Background Techniques:
3. Gradient Mastery:
🔲 Comprehensive Border System:
1. Border Properties:
2. Border Radius Mastery:
3. Advanced Border Techniques:
🌟 Professional Shadow System:
1. Elevation Hierarchy:
2. Advanced Shadow Effects:
3. Modern Visual Effects:
⚡ Interactive Design Elements:
1. Button Variations:
2. Card Design System:
3. Animation Integration:
📱 Responsive & Performance Considerations:
1. Mobile Optimization:
2. Performance Features:
3. Cross-browser Compatibility:
This demonstration provides a complete reference for modern CSS visual effects, showing both the technical implementation and practical application of backgrounds, borders, and shadows in professional web development.
Excellent work mastering backgrounds and borders! You now have the skills to create visually stunning and professional designs. Next, we'll dive into "Display & Positioning" where you'll learn how to control element layout, positioning, and create complex arrangements. Get ready to master the foundation of CSS layout systems!
Your progress is saved in this browser, on this device only.