Flexy Square
Experimenting with flexible squares.
The zitrusfrisch Code Gallery features my recent front-end development experiments – handcrafted with love using HTML5 and CSS3.
Responsive Background Video
With color and dot-grid overlay effect
Extending search
Search field extends on focus state
CSS3 Loading Spinner
Yet another CSS3 loading spinner.
Grid Blocks
A flexible grid using display: inline-block for floating blocks (no floats, no clearfix).
Flexible columns – fixed width gutter
Using a border as faux margin.
Unicons
Use unicode icons as CSS classnames and display them with pseudoclass and attr selector.
Paral & Lax
Easy peasy parallax effect.
Animated text fill
Fill your text with animated background images - no Javascript required.
Inline Block Grid
Centered floating elements with display: inline-block.
Masked Text-Shadow
Using the CSS3 mask-image property to create a striped text-shadow.
Double Drop Shadow
Framed flexible image with nice dropshadow at the bottom edges.
Pure CSS Marker
Marker made with a single span-element and CSS – no images, obviously.
3d Text II
Another 3d text-effect, this one comes with CSS text-shadow and transforms.
Picture frame
An image inside a figure tag mixed with box-shadow CSS results in a nice picture frame.
3d Text
3d text-effect using CSS text-shadow and RGBa values.
Vignette
Focus areas on your images with this CSS-only vignette, no additional HTML required.
Blurred text
Blur letters with the CSS text-shadow property.
Image Stack
A stack of images – with actually one image plus :before and :after pseudo-class CSS magic.
zitrusfrisch CSS
The zitrusfrisch logo without images, just a single div and a few lines of CSS.
Fading Colors
Fading colors using CSS animations (WebKit only).
Masked Text
Apply texture using a dirty Alpha-PNG and the CSS3 mask-image property (WebKit only).