Skip to main content
100%

Gist 2828269

✓ Published0🌍 Public
Aabernier
Last edited May 29, 2012
Created on May 29, 2012

This example uses a stylish.css user style to alter the VeoDay website’s logo, overlaying a coffee-mug image on top of the existing logo via a CSS `:before` pseudo-element. The mug’s dimensions are set in em units, and the background image is scaled with `background-size: cover`. The code relies on standard CSS positioning and the `@-moz-document` rule to target the site, with no JavaScript or data visualization libraries involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 280440

This visualization demonstrates a custom hover effect for navigation links, where each link reveals a small dot marker on its left side. The effect is implemented using CSS pseudo-elements, specifically `:hover:before`, which injects the dot image via the `content` property. The dot is positioned absolutely using `top: 6px` and `left: 4px` relative to the link, and the rule applies only when the user hovers over the link. No JavaScript or data libraries are involved; the example relies purely on CSS styling. The `gistfile1.css` file contains the styling, and the dot image is loaded from an external path.

CCaged
64% match
Loading thumbnail…

Gist 8c151c128174d8bef51ffcbe4ba2f0dc

This example demonstrates a lecture-style data visualization that uses CSS to prepend the text “hello” to elements with the class `alert.lecture`, as defined in the `lecture.css` file. The code employs standard CSS selectors and the `:before` pseudo-element to inject content dynamically into the page. It illustrates how lightweight styling rules can alter visual presentation without JavaScript libraries or complex APIs, relying solely on native CSS features to modify the rendered output. The effect is immediate and purely style-based, with no interaction or data processing involved.

Aabernier
63% match
Loading thumbnail…

Gist 4e2713779a93371b2ba61c7cf3c0841b

This example shows a custom stylesheet for the note-taking and knowledge-management app Roam Research, which uses the app’s CSS variables and element selectors to alter the interface’s typography, spacing, and visual hierarchy. It sets the main font to Roboto, then applies the monospaced Fira Code font to headings and page titles, adjusts the weight and letter-spacing of different heading levels, and reduces spacing below the page title. The code also lightens bullets, vertical guides, and sidebar backgrounds, hides the “SHORTCUTS” heading, and truncates breadcrumb text with ellipses, using selectors like `.roam-block-container h1` and `.rm-reference-main button` to target specific components. The styles rely on standard CSS, including pseudo-elements and attribute selectors, and do not use any JavaScript libraries or data APIs.

HHerbCaudill
59% match
Loading thumbnail…

Html_VizHub

This example shows a web page that summarizes a curated CSV dataset of global coffee varieties. It presents a text-based dashboard displaying the total number of coffee types, the file size of the source data, and the dataset's row and column counts. The page loads its data from a GitHub Gist via a `fetch` request, parses the CSV using `d3.csvParse`, and then injects the calculated statistics into the HTML. The presentation uses custom CSS for a coffee-themed color scheme and includes a hand-drawn SVG coffee mug icon.

Sshaikfayazfz64@gmail.com
59% match
Loading thumbnail…

Gist 7acc476942fa72698250

This example displays a CSS-based baseline grid overlay designed for aligning web layouts to a 16-column, 22-pixel vertical rhythm across a 960-pixel total width. The code uses linear gradients in WebKit, Mozilla, and Opera vendor prefixes to render red vertical column lines at 60-pixel intervals and cyan horizontal baseline lines at 22-pixel intervals. It relies on background-size and background-position properties to position the grid precisely, with the columns offset 10 pixels from the left edge. The visualization demonstrates a reusable CSS class for visual debugging of typographic and layout alignment in responsive design workflows.

Aallyraza
59% match
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
59% match
Loading thumbnail…

Gist 442639

This HTML page presents a styled newsletter layout for June 18, 2010, featuring embedded images hosted on Facebook and Fast Company. The document uses plain HTML tables and inline CSS for typography and structure, with a dark background, white text, and Garamond/Trebuchet MS fonts. It includes a sidebar with linked section headings and a main content column containing articles about YouTube’s cloud-based video editor and social media features, though no interactive data visualization or JavaScript libraries are present in the code.

XXXX
58% 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
58% match