Use CSS3 to Create a Dynamic Stack of Index Cards | DesignLovr. Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3. Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us. We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
Let’s start with the simple HTML-markup, which consists of simple, unordered list, filled with random content. If you want you can download the icons I used at Tutorial 9. Now the CSS. The fonts Note This and Kulminoituva, both of which are available in @font-face kits (with all necessary font-formats and preformatted CSS-file) on Font Squirrel, are the ones used in my example design. Remark Quicktip. 47 Amazing CSS3 Animation Demos. Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). CSS3 Clock With jQuery Analogue Clock 3D Cube That Rotates Using Arrow Keys Multiple 3D Cubes (Slide In/Out) CSS3 Accordion Auto-Scrolling Parallax Isocube Image Gallery Matrix 7 Javascript-effect Alternatives Using CSS3 Image Hover Effects Turning Coke Can (Control With Scrollbar) 3D Meninas Polaroid Gallery Space Note: this one is graphic intense and takes a while to load, but the result is crazy!
Mac Dock Drop-In Modals Sliding Vinyl Zooming Polaroids Animated Rocket Poster Circle Morphing Cubes Falling Leaves Animated Polaroid Gallery Spotlight Cast Shadow Colorful Clock Lightbox Gallery (Draggable) Elastic Thumbnail Menu Coverflow Snowflakes. Example five. Nat & Simon in New Zealand This breathtaking volcanic lake is at Wai-O-Tapu Thermal Wonderland This lovely waterfall was at Rotorua in Rainbow Springs Ferntastic At Kaikoura we went whale watching! Found this little cutie on a walk in New Zealand! An amazing bubbling volcanic spring, a bit muddy Simon in a giant Kiwi, pretending to be a Kiwi (the bird) Albatross in Dunedin White water rafting in Queenstown White Island Sulphurous Sea lions! Horse riding Stewart Island Us in a blue cave on the Franz Josef glacier.
HTML5 Rubik's cube (CSS3 + JS) - Tutorial. : Motivation : Perspective3D : Modeling the cube : The movements : Rotation : JavaScript cross-platform : Introduction This webpage was built entirely using only HTML5, basically CSS3 and JavaScript (with the power of YUI Library). With this project, I wanted to show using a real and interesting example, how we can combine the power of CSS3 3D transforms, with some of the new features and API's that HTML5 provides. You can find the code under my Github user. Feel free to fork, pull, comment or whatever other things you like! Motivation This part is non-tecnical stuff, so you can skip it if you like ;) I've decided to create this webpage after my girlfriend's sister challenged me to solve a Sudoku Rubik's cube.
After some research I find out, that most of the websites were really old (with a really ugly UI), and the instructions to solve the cube weren't intuitive at all. Step 1: Perpective 3D The first thing I needed to do is to create the cube model in 3D. Step 2: Modeling the cube Done!