Showing posts with label effects. Show all posts
Showing posts with label effects. Show all posts

Saturday, November 07, 2015

Animated Intro Section

Animated Intro Section

A collection of fancy text effects, to animate the tagline and action buttons of your website intro section.

Animations in web design are often used to drive the user's focus to a specific section. One section you want to make sure to highlight is the main tagline, with the action buttons.

Wednesday, November 06, 2013

Tinted Images with Multiple Backgrounds

Tinted Images with Multiple Backgrounds
The background property in CSS can accept comma separated values. "Multiple" backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can "tint" that image. But it's not quite as obvious as you might suspect.

Thursday, October 24, 2013

Create an animated download icon in CSS

animated download icon in CSS
When you place a call to action on a webpage you normally want the visitors to down something like sign up to your newsletter or download some of your content. All call to actions you should try to stand out so people focus on these areas of your website.

In this tutorial we are going to create a CSS animation download icon.

Thursday, October 24, 2013

Create stitched effect with CSS3

Create stitched effect with CSS3

There are many visual effect possibilities we can achieve with CSS - the limit only depends on our creativity and imagination. A simple effect on a site or site content can make a huge difference in terms of site engagement level. So, stuffing your site with too much design will only makes it look cluttered while a simple, sexy design is the frontrunner.

Tuesday, July 09, 2013

Caption Hover Effects

Caption Hover Effects

Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.

Thursday, May 30, 2013

Create An Animated CSS Box Menu

Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into the box to represent the page on the navigation.

Tuesday, December 18, 2012

Fly in newly added content to a page

Fly in newly added content to a page

Say that for any reason, a new module of content needs to appear on a page. By simply appending that new module into the DOM it will instantly appear. That might be enough of an "entrance" - or it might be too subtle. I'd think when you add new content to a page, you want people to see it. Animation might be the ticket. It technically slows down the entrance of the new content, but the visual effect will certainly make it more noticeable. Let's write some code to make all new modules added to a page "fly in".

Tuesday, December 18, 2012

The creation of a CSS3 clickable, rotating menu

CSS3 clickable, rotating menu

Over the past few days I've been messing around with transitions and transforms and managed to come up with this little menu. It incorporates a bunch of different CSS techniques, but is very experimental!

Friday, September 21, 2012

Timed notifications with CSS animations

notifications

A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear.

Friday, September 21, 2012

Nifty hover effects with CSS3 animations

hover effects

The idea was to create two different kinds of animations for both hover over and over out with just CSS3. The over out animation shouldn't be the reverse version of animation for hover over.

Friday, September 21, 2012

Animating CSS3 image filters

Animating CSS3 image filters

In recent articles I've shown how to create cross-browser image filter effects with CSS and SVG: converting color photographs to black and white and sepia-tone, as well as blurring them. The next obvious step is to animate these effects.

Monday, September 17, 2012

Thumbnail Proximity Effect with JQuery and CSS3

Thumbnail Proximity Effect with JQuery and CSS3

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.