372 lines
14 KiB
HTML
372 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>CSS Sprite Showcase</title>
|
||
|
|
<link rel="stylesheet" href="/static/css/04-interactive/_sprites.css">
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem;
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #333;
|
||
|
|
border-bottom: 2px solid #333;
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
color: #666;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
color: #888;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
.sprite-full {
|
||
|
|
background: white;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
|
|
margin: 1rem 0;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
.sprite-full img {
|
||
|
|
display: block;
|
||
|
|
height: 48px;
|
||
|
|
image-rendering: crisp-edges;
|
||
|
|
}
|
||
|
|
.icon-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
.icon-item {
|
||
|
|
background: white;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.icon-item label {
|
||
|
|
display: block;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: #666;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
.zoom-test {
|
||
|
|
background: white;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
.zoom-test div {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
}
|
||
|
|
.zoom-test span:first-child {
|
||
|
|
width: 60px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.retina-test {
|
||
|
|
background: white;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
|
|
margin: 1rem 0;
|
||
|
|
display: flex;
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
.retina-test div {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.retina-test label {
|
||
|
|
display: block;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
.summary {
|
||
|
|
background: #e8f5e9;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
.summary ul {
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
padding-left: 1.5rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>CSS Sprite Showcase</h1>
|
||
|
|
|
||
|
|
<div class="summary">
|
||
|
|
<strong>Summary:</strong>
|
||
|
|
<ul>
|
||
|
|
<li>Companies: 23 icons</li>
|
||
|
|
<li>Projects: 12 icons</li>
|
||
|
|
<li>Courses: 9 icons</li>
|
||
|
|
<li><strong>Total: 44 icons</strong></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Companies (Full Sprite)</h2>
|
||
|
|
<div class="sprite-full">
|
||
|
|
<img src="/static/images/sprites/sprite-companies.png" alt="companies sprite">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Individual Icons</h3>
|
||
|
|
<div class="icon-grid">
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 0;"></span>
|
||
|
|
<label>0: accenture</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 1;"></span>
|
||
|
|
<label>1: aena-long</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 2;"></span>
|
||
|
|
<label>2: aena</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 3;"></span>
|
||
|
|
<label>3: clicplan-short</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 4;"></span>
|
||
|
|
<label>4: clicplan</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 5;"></span>
|
||
|
|
<label>5: drolosoft</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 6;"></span>
|
||
|
|
<label>6: drosoloft-plain</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 7;"></span>
|
||
|
|
<label>7: ebantic</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 8;"></span>
|
||
|
|
<label>8: emailing-network</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 9;"></span>
|
||
|
|
<label>9: everis</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 10;"></span>
|
||
|
|
<label>10: gigya</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 11;"></span>
|
||
|
|
<label>11: indra</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 12;"></span>
|
||
|
|
<label>12: insa</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 13;"></span>
|
||
|
|
<label>13: livgolf</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 14;"></span>
|
||
|
|
<label>14: megabanner</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 15;"></span>
|
||
|
|
<label>15: olympic-broadcasting</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 16;"></span>
|
||
|
|
<label>16: pentamsi-long</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 17;"></span>
|
||
|
|
<label>17: pentamsi</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 18;"></span>
|
||
|
|
<label>18: sap</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 19;"></span>
|
||
|
|
<label>19: twentic</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 20;"></span>
|
||
|
|
<label>20: uex</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 21;"></span>
|
||
|
|
<label>21: webratio</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-companie" style="--icon-index: 22;"></span>
|
||
|
|
<label>22: webratioa</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Projects (Full Sprite)</h2>
|
||
|
|
<div class="sprite-full">
|
||
|
|
<img src="/static/images/sprites/sprite-projects.png" alt="projects sprite">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Individual Icons</h3>
|
||
|
|
<div class="icon-grid">
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 0;"></span>
|
||
|
|
<label>0: HERRUMBRE_NEGATIVO VER 2@4x</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 1;"></span>
|
||
|
|
<label>1: deliverybikes</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 2;"></span>
|
||
|
|
<label>2: herrumbre-vivo</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 3;"></span>
|
||
|
|
<label>3: jorpack</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 4;"></span>
|
||
|
|
<label>4: laporra-doc</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 5;"></span>
|
||
|
|
<label>5: laporra</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 6;"></span>
|
||
|
|
<label>6: lidering</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 7;"></span>
|
||
|
|
<label>7: ola-logo-squared-blue</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 8;"></span>
|
||
|
|
<label>8: sap</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 9;"></span>
|
||
|
|
<label>9: somosunaola#</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 10;"></span>
|
||
|
|
<label>10: somosunaola</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 11;"></span>
|
||
|
|
<label>11: twentic</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Courses (Full Sprite)</h2>
|
||
|
|
<div class="sprite-full">
|
||
|
|
<img src="/static/images/sprites/sprite-courses.png" alt="courses sprite">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Individual Icons</h3>
|
||
|
|
<div class="icon-grid">
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 0;"></span>
|
||
|
|
<label>0: camaracomercio</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 1;"></span>
|
||
|
|
<label>1: codecademy</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 2;"></span>
|
||
|
|
<label>2: forem</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 3;"></span>
|
||
|
|
<label>3: linkedin-blue</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 4;"></span>
|
||
|
|
<label>4: linkedin</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 5;"></span>
|
||
|
|
<label>5: servoy-logo</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 6;"></span>
|
||
|
|
<label>6: servoy</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 7;"></span>
|
||
|
|
<label>7: udemy</label>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 8;"></span>
|
||
|
|
<label>8: uex</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Zoom Test</h2>
|
||
|
|
<div class="zoom-test">
|
||
|
|
<div style="zoom: 1;"><span>100%:</span><span class="icon-sprite icon-company" style="--icon-index: 0;"></span></div>
|
||
|
|
<div style="zoom: 2;"><span>200%:</span><span class="icon-sprite icon-company" style="--icon-index: 0;"></span></div>
|
||
|
|
<div style="zoom: 3;"><span>300%:</span><span class="icon-sprite icon-company" style="--icon-index: 0;"></span></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Retina Test</h2>
|
||
|
|
<p>On retina displays, the @2x sprite should load automatically for crisp rendering.</p>
|
||
|
|
<div class="retina-test">
|
||
|
|
<div>
|
||
|
|
<span class="icon-sprite icon-company" style="--icon-index: 0;"></span>
|
||
|
|
<label>Should be crisp on retina</label>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="icon-sprite icon-project" style="--icon-index: 0;"></span>
|
||
|
|
<label>Project icon</label>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="icon-sprite icon-course" style="--icon-index: 0;"></span>
|
||
|
|
<label>Course icon</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Network Verification</h2>
|
||
|
|
<p>Open DevTools (Network tab, filter by Images) to verify:</p>
|
||
|
|
<ul>
|
||
|
|
<li>Only 3 sprite images should load (not 44+ individual images)</li>
|
||
|
|
<li>On retina displays, @2x versions should load</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|