The zitrusfrisch Code Gallery features my recent front-end development experiments – handcrafted with love using HTML5 and CSS3.


Teaser image for Responsive Background Video

Responsive Background Video

With color and dot-grid overlay effect

Teaser image for Grid Blocks

Grid Blocks

A flexible grid using display: inline-block for floating blocks (no floats, no clearfix).

Teaser image for Flexible columns – fixed width gutter

Flexible columns – fixed width gutter

Using a border as faux margin.

Teaser image for Unicons


Use unicode icons as CSS classnames and display them with pseudoclass and attr selector.

Teaser image for Animated text fill

Animated text fill

Fill your text with animated background images - no Javascript required.

Teaser image for Inline Block Grid

Inline Block Grid

Centered floating elements with display: inline-block.

Teaser image for Masked Text-Shadow

Masked Text-Shadow

Using the CSS3 mask-image property to create a striped text-shadow.

Teaser image for Double Drop Shadow

Double Drop Shadow

Framed flexible image with nice dropshadow at the bottom edges.

Teaser image for Pure CSS Marker

Pure CSS Marker

Marker made with a single span-element and CSS – no images, obviously.

Teaser image for 3d Text II

3d Text II

Another 3d text-effect, this one comes with CSS text-shadow and transforms.

Teaser image for Picture frame

Picture frame

An image inside a figure tag mixed with box-shadow CSS results in a nice picture frame.

Teaser image for 3d Text

3d Text

3d text-effect using CSS text-shadow and RGBa values.

Teaser image for Vignette


Focus areas on your images with this CSS-only vignette, no additional HTML required.

Teaser image for Blurred text

Blurred text

Blur letters with the CSS text-shadow property.

Teaser image for Image Stack

Image Stack

A stack of images – with actually one image plus :before and :after pseudo-class CSS magic.

Teaser image for zitrusfrisch CSS

zitrusfrisch CSS

The zitrusfrisch logo without images, just a single div and a few lines of CSS.

Teaser image for Fading Colors

Fading Colors

Fading colors using CSS animations (WebKit only).

Teaser image for Masked Text

Masked Text

Apply texture using a dirty Alpha-PNG and the CSS3 mask-image property (WebKit only).