In this tutorial we will learn how to create a simple multi-layered illustration with depth that transitions into the content in a unique way. We’ll be using a technique that involves CSS and pure JS (no jQuery!).
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Auto Inherit Bootstrap Theme Vertical Sidebar
It is a ready to use component in any bootstrap website. It consists of a vertical navigation menu based on css3 and jQuery.
Features:
- Fully Resposive on all screens; Desktop, Tablet, Mobile
- Same Code for all devices and platforms
- Multiple Level Dropdown Menu (Unlimited)
- Glyphicons – Bootstrap version 3.3.5
- Inherit any theme look
- Collapsible Mobile Menu
Timon : jQuery Step Form Wizard
With Timon – Step Form Wizard you will have power combo of 21 different styles, 8 different transition effects, validation in your step form, titles and subtitles with multiple step. , also Timon – Step Form Wizard has predefined set of form sizes from tiny to large. You can easily create and customize any form to fit your needs.
Features:
- Step navigation
- Fully responsive
- Many options for design and function
- Can be used for tabs
- Step navigation
- 21 Style
- 8 transition effect
SlideMenu : jQuery Responsive Sliding Menu
SlideMenu is a solution for creation responsive slide navigations. It supports show and hide CSS3 animations, unlimited slides, custom themes and multiple instances. The plugin can be deployed easily. It runs on all modern browsers and mobile devices. You can customize the plugin by adding CSS or LESS code to the themes and also changing settings.
- Unlimited Number of Slides – you can use unlimited numbers of submenus
- CSS3 Animations – over 60+ CSS3 animations are available to give some stunning effects to the menu
- 5 Predefined Themes – included 5 skins, you can create your own theme containing custom colors, fonts, and effects by starting with a built-in themes and changing its settings
- Build with LESS – LESS and CSS files included
Bricklayer : Lightweight Cascading Grid Layout Library
Bricklayer is a lightweight & independent cascading grid layout library.
Features:
- Simpler than any other cascading grid layout tools.
- Lightweight, no fat. (1.5KB gzipped)
- No frameworks required.
- Responsive support with no glitches.
- Easy configuration.
- No inline styles, static positioning.
Interactive 3D Mall Map with CSS & SVG
Today we’d like to share a little 3D experiment with you. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators for the different stores/spaces. When clicking on a pin, we show some more details of that space. We’ve mostly used CSS trickery for this, applying transitions that will rotate and move the levels by adding or removing classes. The levels are represented by inline SVGs.
