CSS Typography & Text Effects
Implement gradient text, text shadows, clipping masks, and animated text reveal effects.
CSSTypographyText EffectsGradients
Overview
Implement gradient text, text shadows, clipping masks, and animated text reveal effects.
HTML Structure
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Typography & Text Effects</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<header class="header">
<h1>CSS Typography & Text Effects</h1>
</header>
<main class="content">
<div class="card">
<div class="card-body">
<h2 class="card-title">Example Component</h2>
<p class="card-text">Demonstrating modern CSS techniques.</p>
</div>
</div>
</main>
</div>
</body>
</html>Core Styles
css
/* Custom Properties */
:root {
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
--color-surface: #ffffff;
--color-text: #1e293b;
--radius: 12px;
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Base Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Card Component */
.card {
background: var(--color-surface);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}
.card-body {
padding: 1.5rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 0.5rem;
}
/* Responsive Grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--color-surface: #1e293b;
--color-text: #f8fafc;
}
}Advanced Techniques
css
/* Animated gradient border */
.gradient-border {
position: relative;
padding: 3px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
filter: blur(12px);
opacity: 0;
transition: opacity var(--transition);
z-index: -1;
}
.gradient-border:hover::before {
opacity: 0.6;
}
/* Scroll-driven animation */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}Browser Support
- Modern Evergreen browsers
- CSS custom properties: 95%+ support
- Container queries: 90%+ support
- \@layer\ cascade layers: 93%+ support
Tags
- CSS - Typography - Text Effects - Gradients
Related Projects
CSSNov 19, 2024
CSS Responsive Email Template
Build a cross-client email template with table layouts, inline styles, and media queries.
CSSEmailResponsiveTemplate
Read more → Source
CSSNov 15, 2024
CSS Clip-Path Shape Morphing
Create animated shape transitions using clip-path polygons and CSS transitions.
CSSClip-PathShapesAnimation
Read more → Source
CSSNov 11, 2024
CSS Gradient Pattern Backgrounds
Generate repeating geometric patterns using CSS gradients without any image files.
CSSGradientsPatternsBackgrounds
Read more → Source
Comments (0)
No comments yet. Be the first to comment!