CSS Based Web Design Gallery

designers love nature

Design Resources

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. Ultra efficient CSS3 transitions & transforms. It’s designed to slide. No less, no more. It works on smartphones, tablets and desktops.

The Float Label Pattern found his success after Brad Frost wrote a blog post about Float Label Patterns. The idea is based on a Dribbble Shot by Matt D Smith. The Pattern is easy to explain. On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text. This Plugin offers you the possibility to upgrade your forms with this famous pattern.

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar.
It's the plugin for you, if you want to ...
... start an animation at a specific scroll position.
... synchronize an animation to the scrollbar movement.
... pin an element at a specific scroll position (sticky elements).
... pin an element for a limited amount of scroll progress (sticky elements).
... easily add a parallax effect to your website.
... create an inifinitely scrolling page (ajax load of additional content).
... call functions when the user hits certain scroll positions or react in any other way to the current scroll position.

MixItUp is a jQuery plugin providing animated filtering and sorting.
Great for managing any categorised or ordered content like portfolios, galleries and blogs, MixItUp can also function as a powerful tool for engaging application UI and data-visualisation.
MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts.
MixItUp works with your layout. Want to use percentages, media queries, inline-block, CSS3 columns or even flex box? No problem.

Croppic is an free and opensource image cropping jquery plugin that will satisfy your needs and much more. Simply upload an image, and then you are able to crop the image as you like with the zooming in and out functionality.Supports IE 10+, Chrome, and Firefox.

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
PNG is useful because it's the only widely supported format that can store partially transparent images. The format uses compression, but the files can still be large. Use TinyPNG to shrink images for your apps and sites. It will use less bandwidth and load faster.
TinyPNG now offers developer api to automate your image optimization.

extractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you!

nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .content. The other scrollbar div elements .pane > .slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

Hover.css is a collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.