Group items tagged

"Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions. "

Web designer Mary Lou shares another helpful jQuery tutorial. Here, she demonstrates how to solve circle hovering problem by creating a plugin that will take care of the 'mouseenter', 'mouseleave' and 'click' events.

Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.

A jQuery Plugin for no-click two-level menus.

"Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks."

Roll over a link, watch the image above change. That's what we build in this screencast, only we don't use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning.

A really elegant CSS3 dropdown which has elements that grow on hover

The tabs in this demo are image-less tabs with 4 different CSS3 enhancements: Rounded Corners (border-radius) Box Shadow (bottom of inactive tabs) Transitions (the glow on hover) Gradients (the active tab)

"Convert otf to woff how many times ,after you finished the sites mockup, you wanted your site to actually use the fonts in your beautiful mockup, instead of making pictures for all of them (and don't get me started on the hover effect pictures)? you can make your font (OpenType Font) to a woff and via css make it show on the site! This tool will convert .ttf , .otf , .ttc file type since they are all OTF format (which stands for Open Type Font). OTF is the most common font type for windows/macintosh based systems. The woff format is the mozilla foundation format for a "compressed" Open Type Font (OTF) so it can be of use in web-sites. And thus giving the user much richer visual content and the developer more freedom in design of a web-site. "

Transitions (basic animations) are one of the most popular additions in CSS3, and one of the easiest to implement for big gains on your site. A transition is simply an animation from one set of CSS properties to another. So for example; whilst before you may have had links with blue text, which suddenly turned orange when you hovered on them, you would now replace that sudden jump with a more graceful animation.

WHAT ARE CSS TRANSITIONS? Well, transitions smooth out value change by allowing elements to gently change from one style to the next; it's adding an effect to the change. Take for instance a link, where you set its style to have a pink background on hover. What typically happens is that, on mouse over, the colour rapidly changes to pink and rapidly changes back on mouse out. With a transition, the processes can be smoothed out so that the colour change faces in and out.

"A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it) "

Online Shopping Site for Domain Name, Web Hosting, Cloud Hosting, Server, Email, SSL Certificate, SEO, Website Builder Software