background preloader

CSS Shadow Experiments

CSS Shadow Experiments

http://zurb.com/playground/css-boxshadow-experiments

Related:  Adornments

Pure CSS Folded Corner Effect With Animations Folded Corners Effect with CSS3 Animations made by Charlotte Dann and inspired by this tutorial. I have improved the markup and CSS code a bit to make it more usable. We could use the ::before or ::after pseudo elements instead of the extra span elements but unfortunately transitions on pseudo elements arn't widely supported. For example I tried pseudo elements in this item but the animation failed to work in Chrome 17, while worked fine in Firefox 11. Liquid Crystals Lists of Nobel Prizes and Laureates Liquid Crystals Play the Crystallite Game Play the Mainstream Game About the game A liquid crystal is a substance that flows like a liquid but maintains some of the ordered structure characteristic of crystals. Under certain circumstances, phases, liquid crystals have a liquid-like behaviour and during others they have the opposite behaviour.

How to Create 3D Text With CSS3 We’ve already seen how the CSS3 text-shadow property can be used to create glowing and blurred text. Today, we’re going to push the property to its limits and enter the realm of 3D: This is achieved without graphics, plugins, or canvas trickery. Don’t believe me? Take a look at the example page in Firefox, Chrome, Safari or Opera (sorry IE users — you’ll need to wait for version 10). Perfect Dropdown Login Box like Twitter using jQuery Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips.

jQuery Fancy Switch I wrote a post a while back on coding an iPhone style switch using jQuery. I’ve now put together a simple tutorial demonstrating how simple it is to build a switch that triggers two radio buttons in a field set. It also degrades gracefully if JavaScript is disabled just displaying the two radio buttons with labels. This tutorial is aimed at users just stepping on the jQuery ladder, and hopefully this will demonstrate how simple some techniques are.

Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.

Laser Lists of Nobel Prizes and Laureates Laser Play the Laser Challenge Game About the game Lasers have a remarkable range of uses - from measuring distances to precision surgery for repairing vision defects. Read More » box-shadow - MDN Docs This article is in need of a technical review. The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element.

Simple and effective dropdown login box Web users log in every day, so imagine how many times log in forms are being used in a single day. Usually, it don't take too much to fill a form like this, but using a dropdown solution will speed up things for you. In this article, you will see how to create a good looking dropdown login form using CSS3 and a bit of jQuery. View demo Orman Clark’s Vertical Navigation Menu: The CSS3 Version Next in the Orman Clark's coded PSD series is his awesome looking Vertical Navigation Menu. We'll recreate it with CSS3 and jQuery while using the minimal amount of images possible. The only images we'll be using are for the icons - I'll be creating a sprite using a new tool called SpriteRight, but this is optional. Additionally, I'll be using GradientApp to create my CSS3 gradients, but again this is optional.

Related:  css,html and xhtmlData vizualisation