background preloader

Original Hover Effects with CSS3

Original Hover Effects with CSS3
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use. The Markup The structure of markup is very simple and intuitive. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. <div class="view"><img src="image.gif" /><div class="mask"><h2>Title</h2><p>Your Text</p><a href="#" class="info">Read More</a></div></div> The CSS After creating our markup we’re going to set our style. And now we’ll look at the ten effects. Example 1 And now comes the heart of our effect. Example 2 Example 3 Example 4

http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

Related:  Plugins/codes

Caption Hover Effects A tutorial on how to create some subtle and modern caption hover effects. View demo Download source Today we want to show you how to create some simple, yet stylish hover effects for image captions. CSS3 Loading Animation Loop Hi folks, this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see how to create it. First Example CSS3 Loading Animation Loop In this first example, create only two div and thanks to the border-radius property, they will take the circle shape. For the CSS style is very simple, just play with the parameters for the graphic you want, as regards the animation simply use the transform:rotateproperty.

How To Create Loading Spinners Using CSS3 Animations Giving feedback to the visitors is a massive part of the user experience, if the user clicks a button they would expect to see something happen. An example of this is uploading an image to a website, it may take some time for the server to upload the image, but when the user clicks the upload button they would expect the page to do something. If the page doesn’t give any feedback that the image is currently being uploaded, the visitor could get impatient and either repeatedly click the upload button or navigate away from the page before the upload is complete, for this reason you should always give feedback to your visitors. A common approach is to use a spinner graphic which is either done with a gif image or with Javascript. But in this tutorial you are going to learn how you can create this same effect by using just CSS3 animations. We are going to look at 4 common loading images and turn them into CSS3.

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. The fabulous photography used in the demo is by Bartek Lurka and it is licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported License. So, let’s do it! Circle Hover Effects with CSS Transitions A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. View demo Download source In today’s tutorial we’ll experiment with hover effects on circles.

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. CSS3 Hover Effects Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops. In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

Bulletproof @font-face syntax Let me introduce you to the best way to do your @font-face definitions: This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf.

Related:  CSS3 tutorialsCss/HTMLJQuery