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.
CSS Image Filters Learning Guides CSS3 Image Filter Tutorial By Paul Underwood CSS3 Image Filter Tutorial is a quick and simple look at how to apply filters to your images and/or HTML elements. Understanding CSS Filter Effects By Alex Danilo. 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. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”. There are examples of how to trigger the opening and closing of the menus and some example media queries. The HTML The CSS Note: Classie is being used here – class helper functions by @desandro. 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. 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. Creative Link Effects. Blueprint: On-Scroll Animated Header. 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. Tab Styles Inspiration. 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. After the great custom drop-down list styles made by Hugo in his tutorial Custom Drop-Down List Styling, we wanted to make it simple to create a custom structure from a normal select input (without multiple option selection). Please note that the CSS transforms and transitions only work in browsers that support them.
Without JavaScript, the normal select input will simply be shown. The icon font was created with IcoMoon. 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. An element can be unfolded in 3D in order to reveal some other content. The idea is to have several levels of folding, where each step of opening will double the element size, hence imitating a folded paper being opened. A couple of options are available, such as the unfolding direction for each step and the number of folding steps. Ideas for Subtle Hover Effects. From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave. 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. From our sponsor: Create spectacular WordPress sites with ease.
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. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes. The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app. Please note: this only works as intended in browsers that support the respective CSS properties.
The markup of a button is really simple. <button class="btn btn-6 btn-6d">Button</button>