How to Create a CSS3 Mega Drop-Down Menu

By: Valeriu Timbuc Topic: CSS3 Difficulty: Intermediate Estimated Completion Time: 1 hour Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. The design of this mega menu can be

Float div on center of page

By: corelangs.com Div on center of screen In CSS, float-based layouts are not much flexible, however, a float is somewhat more difficult to center. Is there any way to center floating elements? Floated div centered This is an age old question. You can float left or right, but there’s no way to float center in CSS

How to keep footers at the bottom of the page

By: MATTHEW JAMES TAYLOR When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately

postcard from Paris – css3 keyframes animations in use

I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :). Click here or on the image to view the animation demo. Download the source files (.psd file included) Postcard from

How to create slick effects with CSS3 box-shadow

Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.Getting Started The following instructions should get you up and running with PIE in most circumstances. If you run into problems along the way, consult our known issues page, or ask for help in the forums. Step 1: Download it Download the PIE distribution and unzip it somewhere. Step 2: Upload it Inside the unzipped directory, you will find a file named PIE.htc. This is the behavior file for IE, and is what does all the magic. Upload this file to the server where you’re going to serve pages using CSS3. It doesn’t matter where exactly, as long as you know where it is. Step 3: Write some CSS3 Assuming you already have a HTML document, let’s say you want to give one of its elements rounded corners. Create a CSS rule for that element and give it a border-radius style like so: #myAwesomeElement { border: 1px solid #999; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } (Note the -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in WebKit and Mozilla-based browsers.) Step 4: Apply PIE In that same CSS rule, add the following style line: behavior: url(path/to/PIE.htc); Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from. Step 5: View it in IE If all went well, at this point you should be able to load the page in IE and see the CSS3 rounded corners rendered just like other browsers. Now you can play around with some of the other supported CSS3 decorations like box-shadow. See the documentation on supported CSS3 features to see exactly what PIE can do. Have fun!

Getting Started The following instructions should get you up and running with PIE in most circumstances. If you run into problems along the way, consult our known issues page, or ask for help in the forums. Step 1: Download it Download the PIE distribution and unzip it somewhere. Step 2: Upload it Inside the unzipped

Make PNG transparency work in Internet Explorer

Directly inserting images in PNG format with transparency will leave you with a white spot when display in Internet Explorer. It makes your image looks ugly and this is really the last thing any web designer or webmaster would want on their website. Here’s a solution on how to solve this white spot and let