Compress javascript and css. Amazing code compression. Quick,easy and free! CleanCode.jpg (JPEG Image, 1652x1275 pixels) - Scaled (50%) The W3C Markup Validation Service. Circle Hover Effects with CSS Transitions. From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles.
Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.
We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Example 1 And now, the interesting hover action! 35+ Useful jQuery Menu Plugins. With the right jQuery menu plugin your website visitors may get the best and most dynamic navigation available. jQuery is a lightweight, cross-browser compliant, incredibly awesome and extremely powerful JavaScript framework (library) that emphasizes and simplifies interaction between JavaScript, CSS and HTML.
With jQuery, you can change the look and feel of your website into something extraordinary, and it is easier than you think. This way you are providing a different and very dynamic look and feel that users will typically love. Navigation is one of the most important elements in web design. It has to be neat, usable and creative at the same time in order not to drive your visitors away because they cannot find what they are looking for. jQuery is one of the most powerful tools to enhance your navigation and make it stand out and there are many cool scripts to help you do magic in minutes and not hours. Mac Style Dock Menu in jQuery and CSS – MORE INFO / DEMO Dropp – MORE INFO. Perfect Full Page Background Image. Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised.
Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3.
Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version.