Slide Down Box Menu with jQuery and CSS3
In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.
Apple Navigation with CSS3
Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
CSS3 Flying Menu
Create dropdown menus with CSS only
jSlickmenu: A jQuery plugin for slick CSS3 menus
The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.
Awesome Cufonized Fly-out Menu with jQuery and CSS3
In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.
We will use jQuery for the effect and some CSS3 properties for the style. We are not going to use any images.
CSS3 Dropdown Menu
Elegant Accordion with jQuery and CSS3
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.
Make An Elastic Thumbnail Menu
In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu.
What does it do exactly?
- Magnifies menu items when they are hovered over.
- Menu items expand upwards.
Create a Fun Animated Navigation Menu With Pure CSS
Your website’s navigation can communicate a lot about your business or service. Clean, usable navigation is a staple in good web design and is always your safest bet.
However, if you’re ever creating a site that doesn’t necessarily have to be so professional, the navigation provides a great place to have a little fun and insert some personality.
CSS3 Minimalistic Navigation Menu
As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).
But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.
So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
A jQuery & CSS3 Drop-Down Menu With Integrated Forms
When designing the layout for a website there’s one thing that we as designers are always conscious of – making things easier for users. No matter what it is your site offers, you’re still going to need to balance the interface in a way that keeps it very easy for users to find and perform core site functions around your site or service, ideally without having to load up a completely different page.
Some of these common functions are logging in, registering or even resetting a password, yet quite often in many cases we still provide users the same old experience – a separate page for logging in, another for signing-up and yet again another if you’ve forgotten what your login details were. Today I would like to present a project that tries to streamline this experience – FormBox.
Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
RocketBar – A jQuery And CSS3 Persistent Navigation Menu
Everyday on the web there’s something that we all do, almost regardless of the site that we’re on – we scroll down. If we’re reading a blog post, looking through a product description or even just scouring through eBay listings..in every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.
Sweet tabbed navigation using CSS3
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.
Build Awesome Practical CSS3 Buttons
What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons!
Fading Button Background Images With CSS3 Transitions
Roll Your Own Google Buttons
Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.
The buttons use the -webkit-gradient function, which takes in arguments for the gradient start and stop points as well as color and then creates what the browser basically considers an image. That means we can use gradients anywhere we could use images, including backgrounds and even borders (with border-image).
CSS3 Animated Bubble Buttons
Make CSS3 buttons that are extremely fancy
Have you ever looked at a button and thought: “This button looks like crap!” This is the kind of thing that keeps me up at night. That’s why I made some snazzy buttons that I’ve dubbed “fancy buttons.” Fancy buttons are already in use in our web editor, and we will be adding these buttons throughout the site very soon. Why are these buttons fancy? Well they’re fancy for these reasons:
Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy.
CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
How to create depth and nice 3d ribbons only using CSS3
How to Create Inset Typography with CSS3
In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”
That is correct, but this time we are going to do it using only CSS.
Subtle CSS3 Typography that you’d Swear was Made in Photoshop
Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!
Text Rotation with CSS
Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask? Okay,
The Easiest Way to Create Vertical Text with CSS
Earlier this morning, I needed to create vertical text for a project I’m working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we’ll go over today!
Create Beautiful CSS3 Typography
In this tutorial, we’ll look at how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic. We’ll also touch on some general typographical concepts along the way.
Pure CSS Text Gradients
With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers!
Text Embossing Technique With CSS
If you’re like me, you love embossed text like it is going out of fashion. In fact, it’s liked so much right now by many web designers that it featured in Smashing Magazines “Web Design Trends for 2009″ article which firmly puts it up there! In this article I will show you a couple of real world examples of this, as well as describing how to implement this effect with CSS. More importantly, I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.
CSS3 Background-Clip: Text
Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
How to Create a Cool Anaglyphic Text Effect with CSS
Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.
Adding An Outline To Your Text Using the CSS3 text-stroke Property
In this tutorial I’ll show you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.
Matrix Animation with WebKit CSS3
CSS Gradient Text Effect
Gallery and Animations tutorials
Creating a polaroid photo viewer with CSS3 and jQuery
Easily Turn Your Images Into Polaroids with CSS3
Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman!
3d animation using pure CSS3
The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.
Build a Kickbutt CSS-Only 3D Slideshow
Coding a Rotating Image Slideshow w/ CSS3 and jQuery
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime
jQuery & CSS3 3D Interactive Photo Stack
CSS3 has a lot of hidden power in it’s transform function including the ability to do really neat things like skewing an image, rotating it or scaling it, all in just one or two lines of code. You probably know what rotating an image does but how about skewing?
Well, think of skewing as a way to transpose an image at particular angles – basically, pulling the X axis at one angle and the Y axis in another. It sounds a little complicated, but this technique is really great for simulating 3D perspective effects.
In today’s demo, I’ve taken a gallery of images of the jQuery team and transformed them into an interactive 3D stack. CSS3 provides the underlying styling for this whilst jQuery is used for calculations and positioning.
ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects
The idea behind a Shine Effect is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.
Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
Super Cool CSS Flip Effect with Webkit Animation
There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.
Greyscale Hover Effect w/ CSS & jQuery
A few months ago, James Padolsey introduced a cool greyscale technique for non-IE browsers. His technique inspired me to come up with a workaround with a similar effect.
My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.
Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
CSS Fundamentals: CSS 3 Transitions
As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.
Related Posts Slide Out Boxes with jQuery and CSS3
The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.
Lightbox effect in CSS3 through transition
iPhone “slide to unlock” Text in WebKit/CSS3
Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin’, if we made a made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, we could make the iPhone/iPad’s “slide to unlock” screen with no images at all!
Fancy Image Hover Using CSS3
So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.
Animated Sprites with CSS3 Transitions
Combining the two methods, we can create a simple animated rollover effect with endless possibilities. Check out the demo page using the button below to see four somewhat silly examples that I created. The examples are not necessarily the most attractive or practical, but they’re just some over-the-top examples to demonstrate what’s possible when you combine these two CSS techniques.
A Colorful Clock With CSS & jQuery
This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own).
OSX Fan Effect Using CSS3 Animations
Pretty Simple Content Slider with jQuery and CSS3
Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.
WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface
A hover-based interface is one where the majority (or all) of the user interaction on the page can be controlled by a user hovering over an element with their cursor. Hover-based interfaces require less work to see more content than a typical click based page, but do need some thought to be put into their design and structure so that the user knows how to navigate around. WanderWall uses a hover-based interface.
CSS3 Progress Bars
They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience.
Multiple Backgrounds (CSS3)
Now that Safari announced there support of CSS3′s multiple backgrounds developers can have a taste of the future. In this article I will describe how multiple backgrounds work, how you can profit from them and how to do the fix for browsers who don’t support it.
src: url('myfont-webfont.eot?') format('eot'),
font-family: 'MyFontFamily', Fallback, sans-serif;
CSS3 Multiple Columns
Use CSS3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column.
Along with multiple background images, this following piece of CSS3 is among my favourites list. I think there is a lot of great potential for this CSS and in ways more than just a news paper/magazine layouts too!
Design a Prettier Web Form with CSS 3
Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort.
Zebra striping tables with CSS3
Zebra striping—or, coloring or shading alternate rows on a table—is thought to enhance the usability of a table by guiding the user’s eye along a row. This method has been used in print for years, and many designers try to emulate this technique when making tables for the Web. CSS has made achieving zebra striping easier, but, up until CSS3, it still involved a bit of cumbersome coding.
With the advent of CSS3′s nth-child selector, we are able to target multiple elements in a document by creating a “counter” that skips over specified children in the document tree. This allows us, specifically, to style only the odd or even rows of a table. This article details how to use nth-child successfully.
11 Classic CSS Techniques Made Simple with CSS3
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
Using CSS 3 selectors to apply link icons
You don’t need to limit yourself to just the href attribute; with CSS 3 selectors, you can use the same technique for any tag which has an attribute.
Making a Sleek Feed Widget With YQL, jQuery & CSS3
You will be surprised at how much data is made available on the web through RSS or ATOM feeds – twitter searches, your latest diggs, Google Search alerts, your own blog categories and so much more. You just have to look for that orange icon and you’ll surely find a lot more precious data, just waiting to be put into use.
Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.
Working With RGBA Colour
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.
Pure CSS3 bokeh effect with some jQuery help
Bokeh – In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or “the way the lens renders out-of-focus points of light.” (from Wikipedia). I’m pretty sure you’ve seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -kol.
Today, I want to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. With some help from jQuery, we can add some randomness in colour, size and position for the effect.
Cross-Browser CSS Gradient
The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.
Styling Full Width Tabs with CSS3
In this article I will demonstrate how to create full width “browser-like” tabs using pure CSS3 and some HTML5 markup. This article includes whole lot of new CSS properties such as box and text shadows, border radius and CSS gradients. That means a lot of vendor prefixes in the code
CSS 3 selectors explained
In this article, the specification I am referring to is the Selectors W3C Working Draft 15 December 2005. The new selectors described in the document will be used by CSS level 3, but may also be used by other languages. If you are reading this article months, or even years after that date it may be worth checking if a more recent version is available.
Pure CSS speech bubbles
CSS: Transition Timing Functions
This article follows on from the related article on Animation using CSS Transforms and investigates the transition-duration and transition-timing-function properties which control, respectively, the duration and speed at which a transition is carried out.
Animated CSS3 cube using 3D transforms
Getting Clever with CSS3 Shadows
As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways.
Better Check Boxes with jQuery and CSS
Stronger, Better, Faster Design with CSS3
CSS3 HSL & HSLA
A guide to using css3 ‘HSL’ & ‘HSLA’, giving us not only the ability to set HSL color/colour but also apply a level of opacity.
The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L).
Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between
Saturation is a percentage: 0% being grayscale and 100% in full color
Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest
Overview of CSS3 Structural pseudo-classes
CSS’s goal of “separating style from content” relies heavily on its ability to reach that content first. Well, in CSS3, that mission is bolstered by the addition of Structural pseudo-classes. These selectors let you select child elements of a parent based on a variety of generic criteria, such as the 3rd child, even/odd child elements, the nth child within each group of children of a certain type (ie: LI) within the parent, and more. A little overwhelming, yes, but it’s sure better than underwhelming, right?
@font-face in IE: Making Web Fonts Work
All Hallows’ Eve seems the perfect time for something a little spooky. Getting @font-face working in IE may just be spooky enough. As you probably know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. Fontin is one of them and I’ve built it into this example page:
Overriding The Default Text Selection Color With CSS
One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those “forward-enhancement” techniques. It’s a nice touch for those using modern browsers, but it just gets ignored in other browsers and it’s not a big deal.
The Power of HTML 5 and CSS 3
As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.
CSS 3 Cheat Sheet (PDF)
In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).
Rounded Corners, Drop Shadows, Opacity & CSS3
There are some very cool features that have come along with HTML5 and CSS3. Generally, alot are only able to be displayed in Firefox and Webkit-based browsers like Chrome and Safari. Here, I’ll show you an example of how to implement drop shadows, rounded corners and opacity in your designs using CSS3. The first example is from an article by Divya Manian. Really cool designer that one. As usual, IE doesn’t support these features, but there are a few hacks that need to be implemented to get these same effects to work in IE
Drawing Calendar Icon With CSS3
In this article I am going to use some of the CSS tricks to create a calendar icon you can use for your blog posts or something similar. It is important to notify that there are no images used here and the markup couldn’t be simpler than it is.
How to create a kick-ass CSS3 progress bar
As I’ve shown you in some of my recent posts, the new features introduced in CSS3 allows developers to create stunning visual effects. Today, let’s create a fancy progress bar using CSS3 and jQuery, but no Flash or even images.
How to Create A Multi-Step Signup Form With CSS3 and jQuery
In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.
Animated wicked CSS3 3d bar chart
The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a “stacked” one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.
Sticky Notes with CSS3