Skip to main content
100%

alt

✓ Published0🌍 Public
Aabernier
Last edited Mar 1, 2012
Created on Mar 1, 2012

A collection of sprite-based house icons demonstrates how CSS pseudo-elements and background positioning can create interactive states. Each house uses the `.house` class with `:before` and `:after` pseudo-elements, layering two background images from a single sprite sheet to render the house and its shadow. Hovering enlarges the element via a `transition`, while the `disabled` state reduces opacity. Variants like `.alt` shift the background horizontally and `.mirrored` applies `transform:scaleX(-1)` to flip the icon. The examples are plain HTML divs styled with plain CSS, with no JavaScript libraries involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 1057445

This example demonstrates a CSS sprite-based icon system where two distinct states—overview and demographics—are rendered as background images with active-state variations, using offset positioning to switch between icons. The code relies on Compass’s sprite helpers and a Sass `@each` loop to generate the `.icons-overview` and `.icons-demographics` classes, while manually specifying `background-position` values (e.g., `20px -70px` and `20px 12px`) to align the correct sprite icons. The active states toggle background positions via pseudo-classes like `:active` and custom classes such as `.overview_active`. The implementation uses the `icons-sprite` mixin from Compass, with the sprite file referenced from an external asset path. No data or interactive behavior is present; it purely showcases static UI icon styling.

CCaged
70% match
Loading thumbnail…

CSS Mask test

This example demonstrates CSS masking by using a sprite sheet of glyph icons as a mask image, with separate icon classes that shift the mask position to reveal different shapes. The code defines `.maskicon` and `.maskicon-alpha` classes that apply the `-webkit-mask-image` property with a Bootstrap halflings sprite, coloring the masked areas green or semi-transparent black, while a parallel `.icon` class shows the traditional background-position sprite technique. The example directly compares the two approaches, highlighting how CSS masks can recolor icons without altering the source image. It relies solely on CSS styling and the Bootstrap sprite asset, with no JavaScript libraries involved.

TThanaporn-sk
64% match
Loading thumbnail…

CSS Mask test

This example demonstrates how CSS masking can display icons from a sprite sheet in different colors and levels of transparency. It uses the `-webkit-mask-image` property with the Bootstrap glyphicons halflings sprite as the mask source, applying solid green and semi-transparent black background colors to the masked elements. The code also includes a traditional CSS sprite technique using `background-image` and `background-position` to show the same icons unmasked, allowing for a side-by-side comparison of the two rendering approaches.

TThanaporn-sk
63% match
Loading thumbnail…

house

A static SVG illustration of a house scene depicts a red building with a brown roof, yellow door, green ground, and a column of smoke rising from a chimney. The composition includes decorative stars, a whiskey label, and text reading “SMOKE NO FIRE.” The code applies a gooey filter effect to the smoke shapes using SVG filters and animates nothing. It is built with pure SVG markup inside an HTML file, using no JavaScript or D3 APIs, and renders entirely via inline SVG elements.

MMoximillian
61% match
Loading thumbnail…

http://slides.com/abernier/ifocop143?token=5Vsj3wn

This example is a slide-deck presentation that introduces fundamental HTML elements and syntax through a series of annotated code samples. It demonstrates how to structure a basic document with headings, paragraphs, lists, tables, definition lists, blockquotes, and preformatted text, alongside inline tags for emphasis and citations. The deck shows raw HTML code alongside live rendering, highlighting common pitfalls like character escaping and the importance of the `alt` attribute for images. It also includes a validator link and sample code blocks, serving as a tutorial on writing valid HTML5.

Aabernier
61% match
Loading thumbnail…

Gist 46b0bb5876d0834e1ab0114a60ea69d7

This example showcases a collection of CSS-styled buttons with diverse visual effects, built using the BonBon Buttons framework. The code defines a single button class with multiple modifiers for color (orange, blue, pink, green, transparent), shape (round, oval, brackets, skew, back, knife, shield, drop, morph), material (glossy, glass), and size (xs, xl). Each button features layered gradients, inset shadows, and border effects to create a polished, skeuomorphic appearance, with hover states that subtly shift background colors. The demonstration emphasizes how pure CSS can produce rich, interactive UI elements without JavaScript, making it a useful reference for web designers exploring button styling.

Aabernier
61% match
Loading thumbnail…

Intro to CSS Animations

This example demonstrates the flexibility of CSS animations and transitions for creating simple motion and interactive effects in web graphics. A static SVG hexagon is embedded as a base64 data URI, and its styling responds to user interaction—hovering causes the shape to scale up and rotate 45 degrees with a smooth two-tenths-second transition. The CSS also defines a slide keyframe animation that translates an element horizontally, though the active circles using this effect are commented out in the code. The example uses core CSS features including `@keyframes`, `transform` properties, and transition timing.

JJn1532
60% match
Loading thumbnail…

House / d3

A static SVG scene depicts a stylized house with a red roof, a yellow sun, a green lawn, and a white door, all composed of basic geometric shapes. The code uses d3.v4 to render the graphic, explicitly drawing each element with `<rect>`, `<circle>`, and `<path>` tags. Two rotated rectangles form the door, while a transparent path outlines the ground. The visualization relies on hard-coded coordinates and SVG styling, with no data or interaction.

CCharisma9
60% match