Code Gallery http://zitrusfrisch.de/code-gallery/ The zitrusfrisch Code Gallery features some of my recent front-end development experiments – handcrafted with love using HTML5 and CSS3. en-us Copyright 2013 zitrusfrisch Sun Feb 01 2015 01:33:17 GMT+0100 (CET) Flyex Square Fri Jan 30 2015 21:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/pvrrdm http://codepen.io/zitrusfrisch/full/pvrrdm

Experimenting with flexible squares.]]> Responsive Background Video Thu Nov 06 2014 12:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/vymGI http://codepen.io/zitrusfrisch/full/vymGI

With color and dot-grid overlay effect]]> Extending search Mon Apr 28 2014 22:00:00 GMT+0200 (CEST) Daniel Riemer http://codepen.io/zitrusfrisch/full/xclfp http://codepen.io/zitrusfrisch/full/xclfp

Search field extends on focus state]]> CSS3 Loading Spinner Sun Dec 22 2013 23:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/DdBeK http://codepen.io/zitrusfrisch/full/DdBeK

Yet another CSS3 loading spinner.]]> Grid Blocks Sat Aug 24 2013 12:00:00 GMT+0200 (CEST) Daniel Riemer http://codepen.io/zitrusfrisch/full/EAfGz http://codepen.io/zitrusfrisch/full/EAfGz

A flexible grid using display: inline-block for floating blocks (no floats, no clearfix).]]> Flexible columns – fixed width gutter Tue Jul 16 2013 12:00:00 GMT+0200 (CEST) Daniel Riemer http://codepen.io/zitrusfrisch/full/cKDLj http://codepen.io/zitrusfrisch/full/cKDLj

Using a border as faux margin.]]> Unicons Tue Jun 25 2013 12:00:00 GMT+0200 (CEST) Daniel Riemer http://codepen.io/zitrusfrisch/full/pdvbg http://codepen.io/zitrusfrisch/full/pdvbg

Use unicode icons as CSS classnames and display them with pseudoclass and attr selector.]]> Paral & Lax Sat Jun 22 2013 12:00:00 GMT+0200 (CEST) Daniel Riemer http://codepen.io/zitrusfrisch/full/bJwhk http://codepen.io/zitrusfrisch/full/bJwhk

Easy peasy parallax effect.]]> Animated text fill Sat Apr 13 2013 12:00:00 GMT+0200 (CEST) Daniel Riemer http://codepen.io/zitrusfrisch/full/fjbal http://codepen.io/zitrusfrisch/full/fjbal

Fill your text with animated background images - no Javascript required.]]> Inline Block Grid Sat Apr 06 2013 12:00:00 GMT+0200 (CEST) Daniel Riemer http://codepen.io/zitrusfrisch/full/GzBCl http://codepen.io/zitrusfrisch/full/GzBCl

Centered floating elements with display: inline-block.]]> Masked Text-Shadow Sun Mar 24 2013 12:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/ClGLt http://codepen.io/zitrusfrisch/full/ClGLt

Using the CSS3 mask-image property to create a striped text-shadow.]]> Double Drop Shadow Sun Jan 06 2013 12:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/iequy http://codepen.io/zitrusfrisch/full/iequy

Framed flexible image with nice dropshadow at the bottom edges.]]> Pure CSS Marker Tue Jan 01 2013 12:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/wmApf http://codepen.io/zitrusfrisch/full/wmApf

Marker made with a single span-element and CSS – no images, obviously.]]> 3d Text II Mon Dec 31 2012 03:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/pvDnc http://codepen.io/zitrusfrisch/full/pvDnc

Another 3d text-effect, this one comes with CSS text-shadow and transforms.]]> Picture frame Mon Dec 31 2012 01:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/DeBom http://codepen.io/zitrusfrisch/full/DeBom

An image inside a figure tag mixed with box-shadow CSS results in a nice picture frame.]]> 3d Text Sun Dec 30 2012 22:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/wvcxy http://codepen.io/zitrusfrisch/full/wvcxy

3d text-effect using CSS text-shadow and RGBa values.]]> Vignette Sun Dec 30 2012 21:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/LeCjf http://codepen.io/zitrusfrisch/full/LeCjf

Focus areas on your images with this CSS-only vignette, no additional HTML required.]]> Blurred text Sun Dec 30 2012 20:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/FAplh http://codepen.io/zitrusfrisch/full/FAplh

Blur letters with the CSS text-shadow property.]]> Image Stack Sun Dec 30 2012 19:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/fAeLd http://codepen.io/zitrusfrisch/full/fAeLd

A stack of images – with actually one image plus :before and :after pseudo-class CSS magic.]]> zitrusfrisch CSS Sun Dec 30 2012 16:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/KnDdL http://codepen.io/zitrusfrisch/full/KnDdL

The zitrusfrisch logo without images, just a single div and a few lines of CSS.]]> Fading Colors Sun Dec 30 2012 12:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/zsqha http://codepen.io/zitrusfrisch/full/zsqha

Fading colors using CSS animations (WebKit only).]]> Masked Text Sun Dec 30 2012 09:00:00 GMT+0100 (CET) Daniel Riemer http://codepen.io/zitrusfrisch/full/vjwgl http://codepen.io/zitrusfrisch/full/vjwgl

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