Advanced CSS Styling - Complete Guide

Advanced CSS Styling

Master advanced CSS properties including backgrounds, borders, shadows, gradients, transforms, and transitions. Interactive demos help you understand each concept visually.

Background Properties

🎨 Multiple Backgrounds & Background Blend Mode

CSS Background Magic

Background Properties:

Background Blend Mode:

/* Multiple Backgrounds Example */
.element {
    /* Gradient overlay */
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.3), transparent),
                /* Image background */
                url('background.jpg') center/cover,
                /* Solid color fallback */
                linear-gradient(rgba(16, 185, 129, 0.4), rgba(245, 158, 11, 0.4));
    
    /* Background properties */
    background-size: cover, contain, auto;
    background-position: center, top left, bottom right;
    background-repeat: no-repeat, repeat-x, repeat-y;
    background-attachment: fixed, scroll, local;
    background-blend-mode: overlay, multiply;
}

/* Individual background properties */
.bg-example {
    background-color: #6366f1;
    background-image: url('pattern.png'), url('main-bg.jpg');
    background-position: 0 0, center;
    background-size: 50px 50px, cover;
    background-attachment: scroll, fixed;
    background-clip: border-box;
    background-origin: padding-box;
}
            

Borders & Outlines

🖼️ Border Styles & Radius

Border Demo

Border Styles:

Border Colors:

Border Radius:

0px

Border Width:

5px

Border vs Outline

Border Element

Outline Element

/* Border takes up space in layout */
.border-example {
    border: 3px solid #6366f1;
    border-radius: 8px;
    /* Border is part of element's dimensions */
}

/* Outline doesn't affect layout */
.outline-example {
    outline: 3px solid #10b981;
    outline-offset: 5px;
    /* Outline is drawn outside border */
}
                    

Border Images

Gradient Border

/* Border Image Example */
.gradient-border {
    border: 20px solid transparent;
    border-image: linear-gradient(45deg, #6366f1, #10b981) 1;
    /* '1' is the slice value */
}

/* Pattern border image */
.pattern-border {
    border: 15px solid transparent;
    border-image: url('border-pattern.png') 30 round;
    /* '30' is slice, 'round' is repeat */
}
                    

Shadows & Effects

🌫️ Box Shadow & Text Shadow

Shadow Demo

Box Shadow Type:

Opacity & RGBA:

100%

Text Shadow Effects

Simple Shadow

Glow Effect

3D Effect

RGBA Colors

/* RGBA Color Examples */
.rgba-example {
    /* Red, Green, Blue, Alpha (transparency) */
    color: rgba(99, 102, 241, 0.8); /* 80% opacity */
    background-color: rgba(16, 185, 129, 0.3); /* 30% opacity */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Last value controls transparency (0-1) */
}
                    

CSS Gradients

🌈 Gradient Types

Gradient Type:

/* Linear Gradient */
.linear-gradient {
    background: linear-gradient(45deg, #6366f1, #10b981);
    /* Angle or direction, color stops */
}

/* Radial Gradient */
.radial-gradient {
    background: radial-gradient(circle at center, #6366f1, #10b981);
    /* Shape, position, color stops */
}

/* Conic Gradient */
.conic-gradient {
    background: conic-gradient(
        #6366f1 0deg,
        #10b981 90deg,
        #f59e0b 180deg,
        #ef4444 270deg,
        #6366f1 360deg
    );
    /* Color stops at specific angles */
}

/* Repeating Gradient */
.repeating-gradient {
    background: repeating-linear-gradient(
        45deg,
        #6366f1,
        #6366f1 10px,
        #10b981 10px,
        #10b981 20px
    );
}

/* Multiple Color Stops */
.multi-stop {
    background: linear-gradient(
        to right,
        #6366f1 0%,
        #8b5cf6 25%,
        #ec4899 50%,
        #f59e0b 75%,
        #10b981 100%
    );
}
            

CSS Transforms

🔄 Transform Operations

Transform Me!

Transform Type:

Transform Origin:

3D Transform:

/* 2D Transforms */
.translate {
    transform: translate(50px, 100px);
    /* Move element */
}

.rotate {
    transform: rotate(45deg);
    /* Rotate clockwise */
}

.scale {
    transform: scale(1.5);
    /* Scale uniformly */
}

.scaleXY {
    transform: scale(1.5, 0.5);
    /* Scale X and Y differently */
}

.skew {
    transform: skew(20deg, 10deg);
    /* Skew element */
}

/* Transform Origin */
.origin-example {
    transform-origin: top left;
    /* Default is center */
}

/* Multiple Transforms */
.multiple-transforms {
    transform: translate(50px, 50px) rotate(45deg) scale(1.2);
    /* Applied in order */
}

/* 3D Transforms */
.transform-3d {
    transform: perspective(500px) rotateX(45deg) rotateY(30deg);
    transform-style: preserve-3d;
}
            

CSS Transitions

⏱️ Transition Properties

Click Me!

Transition Properties:

Timing Function:

Duration:

500ms

Delay:

0ms

Hover Transition Example

Hover Me

Multiple Transitions

Click Me

/* Basic Transition */
.element {
    background-color: #6366f1;
    transition: background-color 0.3s ease;
}

.element:hover {
    background-color: #10b981;
}

/* Multiple Properties */
.box {
    transition: all 0.5s ease;
    /* Shorthand for all properties */
}

.box:hover {
    transform: scale(1.1);
    background-color: #f59e0b;
    border-radius: 20px;
}

/* Individual Properties */
.detailed {
    transition-property: transform, opacity, background-color;
    transition-duration: 0.5s, 0.3s, 0.4s;
    transition-timing-function: ease-in-out, linear, ease;
    transition-delay: 0s, 0.1s, 0s;
}

/* Shorthand Syntax */
.shorthand {
    /* property duration timing-function delay */
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.1s;
}

/* Different Timing Functions */
.timing-examples {
    transition: transform 1s;
}

.linear { transition-timing-function: linear; }
.ease { transition-timing-function: ease; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
            

No title