Morphing Buttons Concept. CSS Image Filter Tools & Resources. CSS Image Filters are a simple, lightweight method of adding some unique looks to your site’s images.
Effects that once were the sole realm of image editors like Photoshop can now be achieved through CSS. They not only look great, but they can also save you time by not having to individually open up images to apply effects. Let’s have a look at some resources to help you learn and implement CSS Image Filters into your next project. Quick Jump: Learning Guides, Libraries, Web-Based Tools, jQuery Plugins and Additional Tools.
Slide and Push Menus. Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.
View demo Download source A set of fixed menus that will slide out from any of the edges of the page. Dot Navigation Styles. Today we'd like to share some subtle effects and styles for simple dot navigation with you.
These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source. My Weebly Tricks: Weebly Tricks #21 - Flipping Animation Effects on Photos. 1.
Ok, the code we will be using comes from one of the comment on David Walsh's article, it was modified to be compatible with chrome and I did a little editing to fit in Weebly. 3. Once you've seen it, just below it or inside its box paste the following code: Creative Link Effects. An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.
View demo Download source Today we’d like to share some experimental and creative link effects with you. Creative Link Effects. Blueprint: On-Scroll Animated Header. A fixed header that will animate its size on scroll.
The inner elements will also adjust their size with a transition. View demo Download source. Text Input Effects. Recreating the "Design Samsung" Grid Loading Effect. A tutorial on how to achieve the grid loading effect seen on the "Design Samsung" site.
The effect will show a colored element sliding in first and then sliding out again, revealing the image. View demo Download source If you already come across the Samsung Corporate Design Center, you certainly have noticed the stylish grid loading effect. The colored background of an item slides in first and when it slides out again to the opposite side, the image is revealed. The color of the sliding element represents the image, i.e. it is colored in the dominant color of the picture. Arrow Navigation Styles. Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.
View demo Download source Today we’d like to share some inspiration for arrow navigation styles with you. Tab Styles Inspiration. A couple of modern and subtle tab styles and effects for your inspiration.
We use pseudo-elements, SVGs and CSS transitions for some of the techniques. View demo Download source Today we’d like to share a couple of tab styles with you. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Simple Effects for Drop-Down Lists. A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.
View demo Download source Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects. PFold: Paper-Like Unfolding Effect. A highly experimental jQuery plugin that let's you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified. View demo Download source PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. Ideas for Subtle Hover Effects. Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. View demo Download source It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects.
With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise. Creative Button Styles. Some creative and modern button styles and effects for your inspiration. View demo Download source Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others.