Tag: CSS3

CSS Loading Icons

Posted in Experiments.

CSS Loading Icons · CodePen

Played around at lunchtime with some different styles for CSS-based animated loading icons. For each of these I used one HTML element and added some CSS keyframe animation to get them moving. This has only been tested in Google Chrome. It should work to a certain extent in Firefox, and probably not at all in… Read more »

Playing around with CSS image filters and transforms

Posted in Experiments.

Today at lunch, I decided to play around with what CSS image filters and transformations can do. CSS filters will bring “Photoshop-like” styles to the web, easily editable and very interactive. In this experiment, I tried making a basic image gallery example, playing around with simulating depth-of-field. Images that are not being hovered appear in… Read more »

Animated Coming Soon Page

Posted in Experiments.

Get Around Maine - Coming Soon

A while back, I needed to create a “coming soon” page for a client, Get Around Maine. Their domain was active and they had started promoting the website a bit, but the full website was still in development. I put together a basic style to match their website, but then decided it needed something more… Read more »

Polaroid Photo Gallery Experiment

Posted in Experiments.

Polaroid photo gallery experiment

In today’s experiment, I explore creating a photo gallery resembling a pile of polaroid photos. I used some CSS3 transforms and transitions to create the effect. As with most CSS3-based work, this looks the best in Chrome, Firefox, or IE9+. Click through to view the example and source code. Credit for the photos I used… Read more »

Skyrim-Inspired Drop Down Menu Experiment

Posted in Experiments.

Skyrim-inspired Drop Down Menu

Anyone who has played the popular video game Skyrim has seen their unique flyout menu system. I decided to attempt to recreate a similar style for the web. With the exception of the background image, the entire experiment is CSS-based. I used some radial gradients, pseudo elements, and CSS transforms to achieve the effect. Click… Read more »

Page Curl Box Shadow Experiment

Posted in Experiments.

Page Curl Box Shadow

I’ve seen this effect done plenty of times using images, so I set out to create the “page curl” shadow effect using only CSS. I like the depth it creates, giving the illusion that the corners of the box are slightly lifting off the page. To achieve the effect, I used the :before and :after… Read more »