Michael Czechowski
c560676544
Rewrite ~120 validation error messages across 17 English lesson modules and their localized variants (ar, de, es, pl, uk) to use concept questions, property hints, and directional nudges instead of revealing the exact CSS property-value answers. Priority modules (flexbox, box-model, colors, positioning) fully rewritten. All remaining CSS modules updated. Only message strings changed — no validation logic modifications.
109 lines
5.0 KiB
JSON
109 lines
5.0 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": "Which CSS property applies visual effects like blur? Use the <kbd>blur()</kbd> function with a pixel value."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "What percentage value removes all color completely?"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "What percentage makes the element slightly brighter than normal? Normal is 100%."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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 the x-offset, y-offset, and blur radius. The task describes the exact values needed."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|