Elysia Tools
Navegación
CSS Frameworks
Ejemplos del Framework CSS Milligram
Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes
Ejemplos
Entradas de esta colección
CódigohtmlSimple
Guía de Inicio de Milligram
Configuración básica e introducción al framework CSS Milligram
Dificultad
1/10
Tiempo estimado
10 min
Etiquetas
milligram, css, framework, getting-started
Requisitos previos
Basic HTML knowledge
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Milligram Getting Started</title>
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
<!-- Google Fonts: Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
/* Custom styles */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
.header {
text-align: center;
margin: 40px 0;
}
.demo-section {
margin: 40px 0;
}
.color-demo {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.color-box {
width: 100px;
height: 100px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
text-align: center;
}
.primary { background-color: #9b4dca; }
.secondary { background-color: #606c76; }
.success { background-color: #3cb43c; }
.warning { background-color: #ff6347; }
.error { background-color: #ff4136; }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<h1>Milligram CSS Framework</h1>
<p>A minimalist CSS framework</p>
</header>
<!-- Typography Demo -->
<section class="demo-section">
<h2>Typography</h2>
<h1>Heading 1 - The main heading</h1>
<h2>Heading 2 - Subheading</h2>
<h3>Heading 3 - Section heading</h3>
<h4>Heading 4 - Subsection</h4>
<h5>Heading 5 - Minor heading</h5>
<h6>Heading 6 - Smallest heading</h6>
<p>This is a paragraph. Milligram provides clean, readable typography with optimal line height and spacing.</p>
<p>You can use <strong>strong text</strong> for important content and <em>emphasis</em> for stressed content.</p>
<blockquote>
<p><em>"Simplicity is the ultimate sophistication."</em></p>
<footer>— Leonardo da Vinci</footer>
</blockquote>
</section>
<!-- Links Demo -->
<section class="demo-section">
<h2>Links</h2>
<p>
This is a <a href="#">default link</a> in Milligram.
</p>
<p>
You can also create <a href="#" class="button">button links</a>.
</p>
</section>
<!-- Lists Demo -->
<section class="demo-section">
<h2>Lists</h2>
<h3>Unordered List</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
</ul>
</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
</section>
<!-- Buttons Demo -->
<section class="demo-section">
<h2>Buttons</h2>
<p>Default buttons and variations:</p>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<input type="button" value="Input Button">
<h3>Button Styles</h3>
<button>Button</button>
<button class="button-outline">Outline Button</button>
<button class="button-clear">Clear Button</button>
<h3>Button Colors</h3>
<button class="button">Primary</button>
<button class="button">Success</button>
<button class="button">Warning</button>
<button class="button">Error</button>
<h3>Button Sizes</h3>
<button class="button">Small</button>
<button>Default</button>
<button class="button">Large</button>
</section>
<!-- Forms Demo -->
<section class="demo-section">
<h2>Forms</h2>
<form>
<fieldset>
<legend>Form Example</legend>
<label for="name-field">Name</label>
<input type="text" id="name-field" placeholder="Enter your name">
<label for="email-field">Email</label>
<input type="email" id="email-field" placeholder="Enter your email">
<label for="message-field">Message</label>
<textarea id="message-field" placeholder="Enter your message"></textarea>
<label for="select-field">Select Option</label>
<select id="select-field">
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div class="form-group">
<label>
<input type="checkbox" name="newsletter">
<span class="label-body">Subscribe to newsletter</span>
</label>
</div>
<div class="form-group">
<label>
<input type="radio" name="gender" value="male">
<span class="label-body">Male</span>
</label>
<label>
<input type="radio" name="gender" value="female">
<span class="label-body">Female</span>
</label>
</div>
<input type="submit" class="button" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</section>
<!-- Grid Demo -->
<section class="demo-section">
<h2>Grid System</h2>
<p>Milligram uses a flexible grid system based on Flexbox:</p>
<div class="row">
<div class="column">
<div class="demo-box">Column 1</div>
</div>
<div class="column">
<div class="demo-box">Column 2</div>
</div>
<div class="column">
<div class="demo-box">Column 3</div>
</div>
</div>
<div class="row">
<div class="column column-50">
<div class="demo-box">50% Width</div>
</div>
<div class="column column-50">
<div class="demo-box">50% Width</div>
</div>
</div>
<div class="row">
<div class="column column-33">
<div class="demo-box">33% Width</div>
</div>
<div class="column column-67">
<div class="demo-box">67% Width</div>
</div>
</div>
<style>
.demo-box {
background: #f4f5f6;
border: 1px solid #d1d1d1;
padding: 20px;
text-align: center;
margin-bottom: 10px;
}
</style>
</section>
<!-- Code Demo -->
<section class="demo-section">
<h2>Code</h2>
<p>You can display inline code like this: <code>.container { max-width: 960px; }</code></p>
<pre><code>// JavaScript code example
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Milligram'));</code></pre>
</section>
<!-- Tables Demo -->
<section class="demo-section">
<h2>Tables</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>32</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>25</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</section>
<!-- Colors Demo -->
<section class="demo-section">
<h2>Color Palette</h2>
<p>Milligram's default color scheme:</p>
<div class="color-demo">
<div class="color-box primary">#9b4dca</div>
<div class="color-box secondary">#606c76</div>
<div class="color-box success">#3cb43c</div>
<div class="color-box warning">#ff6347</div>
<div class="color-box error">#ff4136</div>
</div>
</section>
<!-- Responsive Demo -->
<section class="demo-section">
<h2>Responsive Design</h2>
<p>Milligram is mobile-first and responsive by default. Resize your browser to see the responsive behavior.</p>
<div class="row">
<div class="column column-100 column-md-50 column-lg-33">
<div class="demo-box">100% on mobile, 50% on tablet, 33% on desktop</div>
</div>
<div class="column column-100 column-md-50 column-lg-33">
<div class="demo-box">100% on mobile, 50% on tablet, 33% on desktop</div>
</div>
<div class="column column-100 column-md-100 column-lg-33">
<div class="demo-box">100% on mobile, 100% on tablet, 33% on desktop</div>
</div>
</div>
</section>
<!-- Utilities Demo -->
<section class="demo-section">
<h2>Utility Classes</h2>
<div>
<p><strong>Float:</strong></p>
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
<div class="clearfix"></div>
</div>
<p><strong>Text Alignment:</strong></p>
<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
</section>
</div>
</body>
</html>CódigohtmlIntermedio
Componentes Milligram
Componentes avanzados y layouts usando el framework CSS Milligram
Dificultad
4/10
Tiempo estimado
25 min
Etiquetas
milligram, components, ui, layout
Requisitos previos
HTML, CSS basics, Milligram fundamentals
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Milligram Components</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.header {
text-align: center;
margin: 40px 0;
}
.demo-section {
margin: 60px 0;
padding: 40px;
border: 1px solid #d1d1d1;
border-radius: 5px;
}
.card {
background: white;
border: 1px solid #d1d1d1;
border-radius: 5px;
padding: 20px;
margin: 10px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
border-bottom: 1px solid #d1d1d1;
padding-bottom: 10px;
margin-bottom: 20px;
}
.nav {
background: #9b4dca;
padding: 10px 0;
}
.nav .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-brand {
color: white;
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
}
.nav-links a {
color: white;
text-decoration: none;
margin: 0 10px;
padding: 5px 10px;
border-radius: 3px;
transition: background 0.3s;
}
.nav-links a:hover {
background: rgba(255,255,255,0.1);
}
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 80px 20px;
text-align: center;
margin: 0 -20px 40px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 40px 0;
}
.feature-icon {
font-size: 3em;
margin-bottom: 20px;
}
.stats {
display: flex;
justify-content: space-around;
background: #f4f5f6;
padding: 40px 20px;
margin: 40px -20px;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 2.5em;
font-weight: bold;
color: #9b4dca;
}
.testimonial {
background: #f8f9fa;
border-left: 4px solid #9b4dca;
padding: 20px;
margin: 20px 0;
}
.pricing-card {
text-align: center;
border: 2px solid #d1d1d1;
border-radius: 5px;
padding: 30px;
margin: 10px;
}
.pricing-card.featured {
border-color: #9b4dca;
transform: scale(1.05);
}
.pricing-price {
font-size: 3em;
font-weight: bold;
color: #9b4dca;
}
.step {
display: flex;
align-items: flex-start;
margin: 20px 0;
}
.step-number {
background: #9b4dca;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
}
.badge {
display: inline-block;
padding: 3px 8px;
border-radius: 3px;
font-size: 0.8em;
font-weight: bold;
color: white;
background: #9b4dca;
}
.badge.success { background: #3cb43c; }
.badge.warning { background: #ff6347; }
.badge.error { background: #ff4136; }
.progress {
width: 100%;
height: 20px;
background: #d1d1d1;
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
.progress-bar {
height: 100%;
background: #9b4dca;
transition: width 0.3s ease;
}
.sidebar {
background: #f4f5f6;
padding: 20px;
border-radius: 5px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
margin: 10px 0;
}
.sidebar a {
color: #606c76;
text-decoration: none;
}
.sidebar a:hover {
color: #9b4dca;
}
.tag {
display: inline-block;
padding: 5px 10px;
background: #f4f5f6;
border: 1px solid #d1d1d1;
border-radius: 3px;
margin: 2px;
font-size: 0.8em;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
padding: 40px;
border-radius: 5px;
max-width: 500px;
width: 90%;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="container">
<a href="#" class="nav-brand">Milligram</a>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#about">About</a>
<button class="button-clear" style="color: white;">Sign Up</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Build Beautiful Websites</h1>
<p>Milligram provides the essential building blocks for modern web development</p>
<button class="button">Get Started</button>
<button class="button-clear" style="color: white; border-color: white;">Learn More</button>
</div>
</section>
<div class="container">
<!-- Feature Cards -->
<section id="features" class="demo-section">
<h2>Features</h2>
<div class="feature-grid">
<div class="card">
<div class="feature-icon">🚀</div>
<h3>Lightweight</h3>
<p>Only 2kb gzipped. Super fast and optimized for performance.</p>
</div>
<div class="card">
<div class="feature-icon">📱</div>
<h3>Responsive</h3>
<p>Mobile-first design that works perfectly on all devices.</p>
</div>
<div class="card">
<div class="feature-icon">🎨</div>
<h3>Customizable</h3>
<p>Easy to customize and extend with your own styles.</p>
</div>
<div class="card">
<div class="feature-icon">🔧</div>
<h3>Modern</h3>
<p>Built with modern CSS features like Flexbox and Grid.</p>
</div>
<div class="card">
<div class="feature-icon">♿</div>
<h3>Accessible</h3>
<p>Follows accessibility best practices and guidelines.</p>
</div>
<div class="card">
<div class="feature-icon">🌐</div>
<h3>Cross-browser</h3>
<p>Works seamlessly across all modern browsers.</p>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="stat">
<div class="stat-number">10K+</div>
<p>Downloads</p>
</div>
<div class="stat">
<div class="stat-number">2KB</div>
<p>File Size</p>
</div>
<div class="stat">
<div class="stat-number">100%</div>
<p>Responsive</p>
</div>
<div class="stat">
<div class="stat-number">MIT</div>
<p>License</p>
</div>
</section>
<!-- Testimonials -->
<section class="demo-section">
<h2>What People Say</h2>
<div class="testimonial">
<p>"Milligram is exactly what I needed - simple, clean, and gets out of your way. Perfect for projects that need a solid foundation without the bloat."</p>
<footer>— Sarah Johnson, Frontend Developer</footer>
</div>
<div class="testimonial">
<p>"The simplicity of Milligram is its strength. I can build professional-looking websites in minutes."</p>
<footer>— Mike Chen, UI/UX Designer</footer>
</div>
<div class="testimonial">
<p>"As a backend developer, I appreciate how Milligram lets me create decent-looking interfaces without deep CSS knowledge."</p>
<footer>— Alex Rodriguez, Full Stack Developer</footer>
</div>
</section>
<!-- Pricing Tables -->
<section id="pricing" class="demo-section">
<h2>Pricing Plans</h2>
<div class="row">
<div class="column column-33">
<div class="pricing-card">
<h3>Basic</h3>
<div class="pricing-price">$0</div>
<p>Perfect for small projects</p>
<ul>
<li>✓ Basic Components</li>
<li>✓ Responsive Grid</li>
<li>✓ Documentation</li>
<li>✓ Community Support</li>
</ul>
<button class="button">Get Started</button>
</div>
</div>
<div class="column column-33">
<div class="pricing-card featured">
<span class="badge">POPULAR</span>
<h3>Professional</h3>
<div class="pricing-price">$19</div>
<p>Best for growing businesses</p>
<ul>
<li>✓ Everything in Basic</li>
<li>✓ Premium Components</li>
<li>✓ Advanced Grid System</li>
<li>✓ Priority Support</li>
<li>✓ Custom Themes</li>
</ul>
<button class="button">Get Started</button>
</div>
</div>
<div class="column column-33">
<div class="pricing-card">
<h3>Enterprise</h3>
<div class="pricing-price">$49</div>
<p>For large organizations</p>
<ul>
<li>✓ Everything in Pro</li>
<li>✓ Unlimited Projects</li>
<li>✓ Custom Development</li>
<li>✓ Dedicated Support</li>
<li>✓ Training & Workshops</li>
</ul>
<button class="button">Contact Sales</button>
</div>
</div>
</div>
</section>
<!-- Timeline/Steps -->
<section class="demo-section">
<h2>Getting Started Guide</h2>
<div class="step">
<div class="step-number">1</div>
<div>
<h3>Download Milligram</h3>
<p>Get the latest version from npm, CDN, or download directly.</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div>
<h3>Include in Your Project</h3>
<p>Add the CSS file to your HTML or import it in your CSS.</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div>
<h3>Start Building</h3>
<p>Use Milligram classes to create responsive layouts and components.</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div>
<h3>Customize</h3>
<p>Override variables and add your own styles as needed.</p>
</div>
</div>
</section>
<!-- Badges and Tags -->
<section class="demo-section">
<h2>Badges and Tags</h2>
<div>
<h3>Status Badges:</h3>
<span class="badge">Default</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge error">Error</span>
<h3 style="margin-top: 20px;">Tags:</h3>
<span class="tag">CSS</span>
<span class="tag">Framework</span>
<span class="tag">Responsive</span>
<span class="tag">Minimal</span>
<span class="tag">Modern</span>
</div>
</section>
<!-- Progress Bars -->
<section class="demo-section">
<h2>Progress Indicators</h2>
<div>
<p>Skills:</p>
<label>HTML/CSS</label>
<div class="progress">
<div class="progress-bar" style="width: 95%"></div>
</div>
<label>JavaScript</label>
<div class="progress">
<div class="progress-bar" style="width: 80%"></div>
</div>
<label>Design</label>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
</div>
</section>
<!-- Layout with Sidebar -->
<section class="demo-section">
<h2>Layout Examples</h2>
<div class="row">
<div class="column column-75">
<div class="card">
<div class="card-header">
<h3>Main Content</h3>
</div>
<p>This is the main content area with more space. Perfect for articles, blog posts, or detailed information.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="column column-25">
<div class="sidebar">
<h4>Sidebar</h4>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Form -->
<section class="demo-section">
<h2>Contact Form</h2>
<div class="row">
<div class="column column-60">
<form>
<div class="row">
<div class="column column-50">
<label for="first-name">First Name</label>
<input type="text" id="first-name" placeholder="John">
</div>
<div class="column column-50">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" placeholder="Doe">
</div>
</div>
<label for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]">
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="How can we help?">
<label for="message">Message</label>
<textarea id="message" placeholder="Your message here..."></textarea>
<div class="form-group">
<label>
<input type="checkbox" name="copy">
<span class="label-body">Send me a copy of this message</span>
</label>
</div>
<button type="submit" class="button">Send Message</button>
</form>
</div>
<div class="column column-40">
<div class="card">
<h4>Contact Information</h4>
<p><strong>Email:</strong> hello@milligram.io</p>
<p><strong>Phone:</strong> +1 (555) 123-4567</p>
<p><strong>Address:</strong> 123 Web Street, Internet City, IC 12345</p>
</div>
</div>
</div>
</section>
</div>
<!-- Modal Example -->
<div id="exampleModal" class="modal">
<div class="modal-content">
<h3>Modal Title</h3>
<p>This is a modal dialog. You can put any content here.</p>
<button onclick="document.getElementById('exampleModal').style.display='none'" class="button">Close</button>
</div>
</div>
<script>
// Example modal trigger
document.querySelectorAll('[data-modal]').forEach(trigger => {
trigger.addEventListener('click', () => {
const modalId = trigger.getAttribute('data-modal');
document.getElementById(modalId).style.display = 'flex';
});
});
// Close modal when clicking outside
document.querySelectorAll('.modal').forEach(modal => {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
});
</script>
</body>
</html>CódigocssComplejo
Técnicas Avanzadas de Milligram
Personalización avanzada, animaciones y extensiones para Milligram
Dificultad
7/10
Tiempo estimado
40 min
Etiquetas
milligram, css, advanced, customization
Requisitos previos
Advanced CSS knowledge, Milligram basics, CSS variables
css
/* Milligram Advanced Techniques and Customization */
/* 1. CSS Variables for Easy Theming */
:root {
/* Primary Colors */
--primary-color: #9b4dca;
--primary-color-light: #b58cd9;
--primary-color-dark: #8238a7;
/* Secondary Colors */
--secondary-color: #606c76;
--secondary-color-light: #8b95a1;
--secondary-color-dark: #4a5259;
/* Status Colors */
--success-color: #3cb43c;
--warning-color: #ff6347;
--error-color: #ff4136;
--info-color: #0074d9;
/* Neutrals */
--white: #ffffff;
--black: #000000;
--gray-light: #f4f5f6;
--gray: #d1d1d1;
--gray-dark: #606c76;
/* Typography */
--font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-size-base: 1.6rem;
--line-height-base: 1.5;
/* Spacing */
--spacing-xs: 0.8rem;
--spacing-sm: 1.6rem;
--spacing-md: 3.2rem;
--spacing-lg: 4.8rem;
--spacing-xl: 6.4rem;
/* Border Radius */
--border-radius-sm: 3px;
--border-radius-md: 5px;
--border-radius-lg: 10px;
--border-radius-full: 999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
/* Breakpoints */
--breakpoint-sm: 40rem; /* 640px */
--breakpoint-md: 64rem; /* 1024px */
--breakpoint-lg: 90rem; /* 1440px */
--breakpoint-xl: 120rem; /* 1920px */
}
/* 2. Enhanced Button Styles */
.button {
transition: all var(--transition-base);
border-radius: var(--border-radius-md);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-slow);
}
.button:hover::before {
left: 100%;
}
.button-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
color: var(--white);
border: none;
}
.button-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--primary-color);
}
.button-3d {
box-shadow: 0 4px 0 var(--primary-color-dark);
transform: translateY(0);
transition: all var(--transition-fast);
}
.button-3d:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--primary-color-dark);
}
.button-3d:active {
transform: translateY(4px);
box-shadow: none;
}
/* 3. Enhanced Card Components */
.card {
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
overflow: hidden;
position: relative;
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.card-header {
padding: var(--spacing-md);
background: linear-gradient(135deg, var(--gray-light), var(--white));
border-bottom: 1px solid var(--gray);
}
.card-body {
padding: var(--spacing-md);
}
.card-footer {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--gray-light);
border-top: 1px solid var(--gray);
}
.card-interactive {
cursor: pointer;
}
.card-interactive .card-body {
transition: all var(--transition-base);
}
.card-interactive:hover .card-body {
background: var(--gray-light);
}
/* 4. Advanced Form Styles */
.form-group {
margin-bottom: var(--spacing-sm);
position: relative;
}
.form-control {
border: 2px solid var(--gray);
border-radius: var(--border-radius-md);
padding: var(--spacing-xs);
transition: all var(--transition-base);
width: 100%;
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(155, 77, 202, 0.1);
}
.form-floating {
position: relative;
}
.form-floating .form-control {
padding: var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
}
.form-floating label {
position: absolute;
top: var(--spacing-xs);
left: var(--spacing-xs);
background: var(--white);
padding: 0 5px;
transition: all var(--transition-fast);
pointer-events: none;
}
.form-floating .form-control:focus + label,
.form-floating .form-control:not(:placeholder-shown) + label {
top: -10px;
left: 10px;
font-size: 0.8em;
color: var(--primary-color);
}
.form-error {
border-color: var(--error-color);
}
.form-error:focus {
box-shadow: 0 0 0 3px rgba(255, 65, 54, 0.1);
}
.error-message {
color: var(--error-color);
font-size: 0.8em;
margin-top: 5px;
}
/* 5. Advanced Grid System */
.container-fluid {
width: 100%;
padding: 0 var(--spacing-sm);
}
.container-custom {
max-width: var(--breakpoint-lg);
margin: 0 auto;
padding: 0 var(--spacing-sm);
}
.grid {
display: grid;
gap: var(--spacing-sm);
}
.grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-auto-fill {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
/* 6. Animation Classes */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.animate-fade-in {
animation: fadeIn var(--transition-slow) forwards;
}
.animate-fade-in-up {
animation: fadeInUp var(--transition-slow) forwards;
}
.animate-slide-in-left {
animation: slideInLeft var(--transition-slow) forwards;
}
.animate-bounce {
animation: bounce 1s infinite;
}
.animate-pulse {
animation: pulse 2s infinite;
}
.animate-hover:hover {
animation: pulse 1s infinite;
}
/* 7. Loading States */
.loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--gray-light);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.skeleton {
background: linear-gradient(90deg, var(--gray-light) 25%, var(--gray) 50%, var(--gray-light) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 8. Advanced Navigation */
.nav {
background: var(--white);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
transition: all var(--transition-base);
}
.nav.scrolled {
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.nav-brand {
font-size: 1.8em;
font-weight: bold;
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-fast);
}
.nav-brand:hover {
color: var(--primary-color-dark);
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.nav-link {
color: var(--secondary-color);
text-decoration: none;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-md);
transition: all var(--transition-fast);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--primary-color);
transform: translateX(-50%);
transition: width var(--transition-fast);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 80%;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color);
background: rgba(155, 77, 202, 0.1);
}
/* 9. Dark Theme Support */
@media (prefers-color-scheme: dark) {
:root {
--white: #1a1a1a;
--black: #ffffff;
--gray-light: #2d2d2d;
--gray: #4a4a4a;
--gray-dark: #b0b0b0;
}
.card {
background: var(--white);
color: var(--black);
}
.nav {
background: var(--white);
}
.form-control {
background: var(--gray-light);
color: var(--black);
border-color: var(--gray);
}
.skeleton {
background: linear-gradient(90deg, var(--gray) 25%, var(--gray-light) 50%, var(--gray) 75%);
}
}
/* 10. Responsive Utilities */
.hide-sm { display: none; }
.show-sm { display: block; }
.hide-md { display: none; }
.show-md { display: block; }
.hide-lg { display: none; }
.show-lg { display: block; }
@media (min-width: 40rem) {
.hide-sm { display: block; }
.show-sm { display: none; }
}
@media (min-width: 64rem) {
.hide-md { display: block; }
.show-md { display: none; }
}
@media (min-width: 90rem) {
.hide-lg { display: block; }
.show-lg { display: none; }
}
/* 11. Accessibility Enhancements */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.focus-visible:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-color);
color: var(--white);
padding: 8px;
text-decoration: none;
z-index: 9999;
}
.skip-link:focus {
top: 6px;
}
/* 12. Print Styles */
@media print {
.no-print {
display: none !important;
}
.container {
max-width: none;
margin: 0;
padding: 0;
}
.card {
box-shadow: none;
border: 1px solid var(--gray);
}
.button {
display: none;
}
a[href]:after {
content: " (" attr(href) ")";
font-size: 0.8em;
}
}
/* 13. Utility Classes */
.text-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-hover:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.border-gradient {
border: 2px solid;
border-image: linear-gradient(135deg, var(--primary-color), var(--primary-color-light)) 1;
}
.backdrop-blur {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8);
}
.scroll-smooth {
scroll-behavior: smooth;
}
.select-none {
user-select: none;
}
.pointer-events-none {
pointer-events: none;
}
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-photo { aspect-ratio: 4 / 3; }Herramientas
Herramientas que suelen usarse con este ejemplo
Relacionado