Michael Czechowski
9cf313001b
New CSS Modules: - Gradients (3 lessons): linear-gradient, radial-gradient, direction - Filters (4 lessons): blur, grayscale, brightness, drop-shadow - Positioning (4 lessons): relative, absolute, offset properties - Pseudo-elements (4 lessons): ::before, ::after, content, decorative New HTML Module: - Semantic HTML (3 lessons): article, section, aside Expanded Existing Modules: - Typography: +2 lessons (text-decoration, text-shadow) - Tables: +2 lessons (thead/tbody/tfoot, colspan) Total lessons: 101 (up from ~66) - Enables full milestone system (1, 5, 10, 20, 30, 50, 75, 100) - All modules added to all 6 language stores with EN fallback
109 lines
4.8 KiB
JSON
109 lines
4.8 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "css-filters",
|
|
"title": "CSS Filters",
|
|
"description": "Apply visual effects like blur, brightness, and shadows with CSS filters.",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "filters-1",
|
|
"title": "Blur Filter",
|
|
"description": "The <kbd>filter</kbd> property applies visual effects to elements. The <kbd>blur()</kbd> function creates a Gaussian blur effect.<br><br><pre>filter: blur(4px);</pre><br>Higher values create more blur. This is great for backgrounds or creating depth.",
|
|
"task": "Blur the background image using <kbd>filter: blur(4px)</kbd>.",
|
|
"previewHTML": "<div class=\"bg\"></div><div class=\"content\"><h2>Welcome</h2></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; height: 200px; position: relative; overflow: hidden; } .bg { position: absolute; inset: 0; background: linear-gradient(45deg, coral, gold, steelblue); } .content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; } .content h2 { color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3); margin: 0; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".bg {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "filter: blur(4px);",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "filter", "expected": "blur(4px)" },
|
|
"message": "Set <kbd>filter: blur(4px)</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "filters-2",
|
|
"title": "Grayscale Filter",
|
|
"description": "The <kbd>grayscale()</kbd> function removes color from an element. Use values from <kbd>0%</kbd> (full color) to <kbd>100%</kbd> (fully grayscale).<br><br><pre>filter: grayscale(100%);</pre><br>Great for hover effects or disabled states.",
|
|
"task": "Make the image grayscale with <kbd>filter: grayscale(100%)</kbd>.",
|
|
"previewHTML": "<div class=\"photo\"></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .photo { width: 200px; height: 150px; background: linear-gradient(135deg, coral 0%, gold 50%, steelblue 100%); border-radius: 8px; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".photo {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "filter: grayscale(100%);",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "grayscale",
|
|
"message": "Use <kbd>grayscale()</kbd> filter"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "100%",
|
|
"message": "Set to <kbd>100%</kbd> for full grayscale"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "filters-3",
|
|
"title": "Brightness Filter",
|
|
"description": "The <kbd>brightness()</kbd> function adjusts how bright an element appears. Values below <kbd>100%</kbd> darken, above <kbd>100%</kbd> brighten.<br><br><pre>filter: brightness(150%);</pre>",
|
|
"task": "Brighten the card with <kbd>filter: brightness(120%)</kbd>.",
|
|
"previewHTML": "<div class=\"card\"><span>Featured</span></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #1a1a2e; } .card { padding: 2rem; background: linear-gradient(135deg, #4a4a6a, #2a2a4a); border-radius: 12px; text-align: center; } .card span { color: gold; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".card {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "filter: brightness(120%);",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "brightness",
|
|
"message": "Use <kbd>brightness()</kbd> filter"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "120%",
|
|
"message": "Set to <kbd>120%</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "filters-4",
|
|
"title": "Drop Shadow",
|
|
"description": "The <kbd>drop-shadow()</kbd> filter creates a shadow that follows the shape of the element, including transparency. Unlike <kbd>box-shadow</kbd>, it works on images with transparent backgrounds.<br><br><pre>filter: drop-shadow(2px 4px 6px black);</pre>",
|
|
"task": "Add a drop shadow with <kbd>filter: drop-shadow(4px 4px 8px gray)</kbd>.",
|
|
"previewHTML": "<div class=\"icon\">★</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 2rem; display: flex; justify-content: center; } .icon { font-size: 4rem; color: gold; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".icon {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "filter: drop-shadow(4px 4px 8px gray);",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "drop-shadow",
|
|
"message": "Use <kbd>drop-shadow()</kbd> filter"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "4px 4px 8px",
|
|
"message": "Set shadow offset and blur"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|