RSS

Category Archives: CS Style

How to Create a CSS3 Mega Drop-Down Menu

By: Valeriu Timbuc

Preview

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 found on the The Bricks UI. Let’s start with the HTML markup…

HTML Markup

Create an unordered list with the class “nav” (<ul>), then for each menu item we will add a new list item (<li>) with an anchor tag (<a>) inside. If you want the menu item to be a mega menu just add a <div> inside of the <li>.

SEE ALSO: Animating SVG Gradients

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul class="nav">
    <li>
        <a href="#">What's new</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Top rated</a></li>
    <li>
        <a href="#">Earnings</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">All Categories</a></li>
    <li class="nav-search">
        <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
        </form>
    </li>
</ul>

Reset and Container Basic Styles

As the default styles of the browsers differ from each other, we’ll add some reset styles to keep consistency between them and avoid future issues.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin0;
    padding0;
    bordernone;
    outlinenone;
}
.nav a { text-decorationnone; }
.nav li { list-stylenone; }

Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line.

1
2
3
4
5
6
7
8
9
10
11
.nav {
    display: inline-block;
    positionrelative;
    cursordefault;
    z-index500;
}
.nav > li {
    displayblock;
    floatleft;
}

Styling the Menu Links

We will start with the common styles like padding, height, position, etc. Then we’ll set the typography styles such as font size, color, text shadow, etc. We’ll also set a background color and a left and right border. To keep the styles transitions smooth we’ll add a CSS3 transition. Note that we set the same property five times, this is required because this property is not fully implemented in all browsers yet, and as this property is on testing, all the different browsers use a prefix before the property. So if you want to support some current and older browsers use this prefixes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.nav > li > a {
    positionrelative;
    displayblock;
    z-index510;
    height54px;
    padding0 20px;
    line-height54px;
    font-familyHelveticaArialsans-serif;
    font-weightbold;
    font-size13px;
    color#fcfcfc;
    text-shadow0 0 1px rgba(0,0,0,.35);
    background#372f2b;
    border-left1px solid #4b4441;
    border-right1px solid #312a27;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

For the hover state we will only change the background color. To finish the menu links styling we will add rounded corners to the first link using the :first-child pseudo selector and remove the left border.

1
2
3
4
5
6
.nav > li:hover > a { background#4b4441; }
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-leftnone;
}

Styling the Search Form

We’ll start with the form container: set the position to relative, add a left border like we have on the menu links and set the width to inherit. By setting the width to inherit it will use the width from the child inputs.

1
2
3
4
5
6
7
.nav > li.nav-search > form {
    positionrelative;
    width: inherit;
    height54px;
    z-index510;
    border-left1px solid #4b4441;
}

Then we will style the text input: float it to the left, set the height, padding, etc. To hide the text input we will set the width to 1px and remove the left and right padding. On the :hover and :focus state we will update the width and padding values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.nav > li.nav-search input[type="text"] {
    displayblock;
    floatleft;
    width1px;
    height24px;
    padding15px 0;
    line-height24px;
    font-familyHelveticaArialsans-serif;
    font-weightbold;
    font-size13px;
    color#999999;
    text-shadow0 0 1px rgba(0,0,0,.35);
    background#372f2b;
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
.nav > li.nav-search input[type="text"]:focus { color#fcfcfc; }
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width110px;
    padding15px 20px;
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}

The styles for the submit input are similar to the text input, we’ll only set a fixed width and height, add a background icon and rounded corners using the border-radiusproperty. We have also set transitions for both inputs in order to have some smooth and nice animations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.nav > li.nav-search input[type="submit"] {
    displayblock;
    floatleft;
    width20px;
    height54px;
    padding0 25px;
    cursorpointer;
    background#372f2b url(../img/search-icon.png) no-repeat center center;
    border-radius: 0 3px 3px 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.nav > li.nav-search input[type="submit"]:hover { background-color#4b4441; }

 

 

Copy from: http://designmodo.com/create-css3-mega-menu/

 
Leave a comment

Posted by on June 18, 2014 in CS Style

 

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 layout.

Positioning DIV element at center of screen

Centre Div in Middle of Screen

You can solve it in a simple way.

margin: 0 auto;

The above code states that the TOP margin and Bottom margin are set to 0 and LEFT margin and Right margin set to auto (automatic). Here the automatic left and right margins push the element into the center of its container.

How to display div in center of screen

mergin : 0 auto

From the above picture you can understand how it display at the center of the screen.

margin: 0 auto;

is equal to

margin 0 auto 0 auto;

or you can write like the following:

margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;

The following source code shows how to center Div in the middle of browser.

<!DOCTYPE html> <html > <head> <style type=”text/css”> .centerDiv { width: 60%; height:200px; margin: 0 auto; background-color:#FFA500 ; } </style> </head> <body> <div class=”centerDiv”> </div> </body> </html>

Two column layout Div at the center of the screen

Center Floated Divs in a Container

Center a Floating div

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .centerDiv { width: 60%; height:200px; margin: 0 auto; background-color:#FFA500 ; } .div1 { width: 50%; height:200px; background-color:#A52A2A ; float:left; } .div2 { width: 50%; height:200px; background-color:#FFA500 ; float:left; } </style> </head> <body> <div class=”centerDiv”> <div class=”div1″> </div> <div class=”div2″> </div> </div> </body> </html>

Position Div Exactly at the center of the screen

Center div on page vertically , Center div on page horizontally

Exactly center means, position Div horizondaly and virtically at the center of the screen.

div vertcally center horizondally center

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .exactCenter { width:200px; height:200px; position: fixed; background-color: #00FF00; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } </style> </head> <body> <div class=”exactCenter”> </div> </body> </html>

Horizontal Divs at the center of the browser

Show div on center of screen

center floating div elements

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .div1 { width: 50%; height:70px; background-color:#A52A2A ; margin: 0 auto; } .div2 { width: 50%; height:70px; background-color:#FFA500 ; margin: 0 auto; } .div3 { width: 50%; height:70px; background-color:#008000 ; margin: 0 auto; } </style> </head> <body> <div class=”div1″> </div> <div class=”div2″> </div> <div class=”div3″> </div> </body> </html>

Three column layout Div at the center of the screen

Place div on center of screen

Center Floated DIVS In Container

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .centerDiv { width: 60%; height:200px; margin: 0 auto; background-color:#FFA500 ; } .div1 { width: 33%; height:200px; background-color:#A52A2A ; float:left; } .div2 { width: 34%; height:200px; background-color:#FFA500 ; float:left; } .div2 { width: 33%; height:200px; background-color:#008000 ; float:left; } </style> </head> <body> <div class=”centerDiv”> <div class=”div1″> </div> <div class=”div2″> </div> <div class=”div3″> </div> </div> </body> </html>

Copy from: http://www.corelangs.com/css/box/center-div.html

 
Leave a comment

Posted by on June 9, 2014 in CS Style

 

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 obvious how this can be done.

A diagram describing the footer problem and the ideal solution

When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn’t do it. Now, after a few years of practice I have finally figured out a neat way to do it. My method uses 100% valid CSS and it works in all standards compliant browsers. It also fails gracefully with older browsers so it’s safe to use on any website.

 

See it in action: View my demo with the footer at the bottom

The main features

  • Works in all modern, standards compliant browsers

    Compatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8

  • Fails gracefully on older browsers

    Older non-standards compliant browsers position the footer under the content as per normal. We can’t help it if people are using an out of date browser, all we can do is reward people who have upgraded by giving them a better browsing experience through progressive enhancement.

  • Longer content pushes the footer off the page

    On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space.

  • 100% valid CSS with no hacks

    The CSS used in this demo is 100% valid and contains no hacks.

  • No JavaScript

    JavaScript is not necessary because it works with pure CSS.

  • iPhone compatible

    This method also works on the iPhone and iPod Touch in the mobile Safari browser.

  • Free to download

    Simply save the source code of my demo page and use it however you like.

There is only one limitation

You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.

If you have a lot of text in your footer then it’s also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there’s nothing to worry about – just set your footer height to a pixel value and away you go.

So how does it work?

It’s actually not that complicated. There are two parts to it – the HTML and the CSS.

The HTML div structure

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That’s it, all the magic happens in the CSS.

The CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

And one simple CSS rule for IE 6 and IE 5.5:

#container {
   height:100%;
}

The html and body tags

The html and body tags must be set to height:100%; this allows us to set a percentage height on our container div later. I have also removed the margins and padding on the body tag so there are no spaces around the parameter of the page.

The container div

The container div has a min-height:100%; this will ensure it stays the full height of the screen even if there is hardly any content. Many older browsers don’t support the min-height property, there are ways around it with JavaScript and other methods but that is out of scope for this article. The container div is also set to position:relative; this allows us to absolutely position elements inside it later.

The header div

There is nothing unusual with the header. Make it whatever colour and size you like.

The body div

The body is quite normal too. The only important thing is it must have a bottom padding that is equal to (or slightly larger than) the height of the footer. You can also use a bottom border if you prefer but a margin won’t work.

The footer div

The footer has a set height in pixels (or ems). The div is absolutely positioned bottom:0; this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser viewport (because of the min-height:100%;) and the footer sits neatly at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the viewport – the footer is still positioned at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page.

The IE 6 & IE 5.5 CSS

Older versions of Internet Explorer don’t understand the min-height property but lucky for us the normal height property behaves exactly the same way in these old Microsoft browsers, that is, it will stretch to 100% height of the viewport but if the content is longer it will stretch even further. We simply expose this 100% height rule to Internet Explorer only by using IE conditional comments. View the source on the demo to see how this is done.

 

So there you have it… A simple, valid way to make the footer get down! I hope you find it useful.

Copy from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

 
Leave a comment

Posted by on August 2, 2013 in CS Style

 

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.
Postcard from Paris css3 reframes animation preview

Download the source files

(.psd file included)
Postcard from Paris
.zip 1.9MB

The css3 animations are supported by : Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ and
Android 2.1+ (source Smashing Magazine).
We are going to animate 3 elements : the clouds (there are three layers of clouds), the rotating phare light and the Eiffel Tower sparkling.

The html structure is very simple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Greetings from Paris</title>
</head>
<body>
   <div id="wrap">
      <h1>Bonne Nuit <em>PARIS !</em></h1>
      <div id="phare"></div>
      <div id="eiffel"></div>
      <div id="eiffel_wrap">
         <div id="sparkling1"></div>
         <div id="sparkling2"></div>
      </div>
      <div id="roofs"></div>
      <footer>by PeHaa, Paris 2011</footer>
   </div>
</body>
</html>

We will use the following images (I will discuss the sparkling effect a little bit later)
used images
Let’s start to complete the css stylesheet :
ccs part 1

Animating clouds

To animate the three layers of clouds independently we use the following keyframes. (Notice that each time I use the -webkit- and -moz- prefixes).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* will be applied to #wrap that has 3 backgrounds layers */
    @-webkit-keyframes wind  {
             0% {background-position: 0px 200px,0px 350px, left top;}
            50% {background-position500px 40px,600px 450px, left top;}
            100% {background-position: 1000px 200px,1200px 350px, left top}
    }
    @-moz-keyframes wind  {
             0% {background-position: 0px 200px,0px 350px, left top;}
            50% {background-position500px 40px,600px 450px, left top;}
            100% {background-position: 1000px 200px,1200px 350px, left top}
    }
/* will be applied to #roofs that has 2 backgrounds layers */
    @-webkit-keyframes wind1 {
             0% {background-position: 100px 250px, left bottom;}
            50% {background-position650px 150px, left bottom;}
            100% {background-position: 1300px 250px, left bottom}
    }
    @-moz-keyframes wind1 {
             0% {background-position: 100px 250px, left bottom;}
            50% {background-position650px 150px, left bottom;}
            100% {background-position: 1300px 250px, left bottom}
    }

This way we have defined the property of background-position for the beginning, middle and end of our animation. Next we add :

1
2
3
4
#wrap {-webkit-animation: wind 80s linear infinite;
       -moz-animation: wind 80s linear infinite;}
#roofs {-webkit-animation: wind 80s linear infinite;
       -moz-animation: wind 80s linear infinite; }

to associate the animations with the proper elements and to define the duration, timing-function and iteration count, respectively (I use the shorthand notation).

Animating phare light

This time we are going to simultaneously animate the opacity and rotate the phare light with the rotation origin in its top center point (as in the image above).

1
2
3
4
5
6
7
@-webkit-keyframes phare {
         0% { -webkit-transform:rotate(0deg); opacity:0}
    50% { -webkit-transform:rotate(180deg); opacity:1}
        100% { -webkit-transform:rotate(360deg); opacity:0;}
}
    #phare {-webkit-transform-origin: center top;
        -webkit-animation: phare 15s linear infinite;}

(here and further, repeat the same with -moz- prefixes).

Adding sparkles

We will use two different images with sparkling effect
Sparkling
Below is the styling :

1
2
3
4
5
6
#eiffel_wrap { position:absolute; width:240px;
              height:462px; right:10px; top: 180px; opacity:0;}
#sparkling1 { position:absolute; background: url('images/sparkling1.png') no-repeat;
              width:240px; height:462px; opacity:0;}
#sparkling2 { position:absolute; background: url('images/sparkling2.png') no-repeat;
              width:240px; height:462px;  opacity:0;}

We will animate the #eiffel_wrap#sparkling1 and #sparkling2.

1
2
3
4
5
@-webkit-keyframes sparkling {
        0% {opacity:0;}
        50%{opacity:1;}
        100% {opacity:0;}
    }

The idea is to use the sparkling animation to turn out and in the #sparkling1 and #sparkling2 elements within the 0.4s cycle, with the first in/out when the second is out/in. To achieve that we will delay the sparkling animation of 0.2s on #sparkling1.

1
2
3
>
#sparkling1 {-webkit-animation: sparkling .4s .2s  infinite;}
#sparkling2 {-webkit-animation: sparkling .4s  infinite;}

In Paris this beautiful evening spectacle may be seen for several minutes every full hour. We will use the#eiffel_wrap element and eiffel_wrap animation to recreate this effect (not literarily though – I will not make you wait an hour long).

1
2
3
4
5
6
#eiffel_wrap { -webkit-animation: eiffel_wrap 30s 1s  infinite;}
@-webkit-keyframes eiffel_wrap {
            0% {opacity:1;-webkit-animation-timing-function: steps(1);}
            40%{opacity:0;}
            100% {opacity:0;}
            }

With -webkit-animation-timing-function: steps(1); the transition is instantaneous with no fading out effect.

And here we are.
I hope you found this tutorial useful and got inspired. Please share and bookmark if you like it.
As always I’m looking forward to your comments and… see you in Paris !

 
Leave a comment

Posted by on May 16, 2012 in CS Style

 

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 actually needing Photoshop anymore.

View demo

box-shadow property

The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Rocket science?

Not at all, here’s an quick example:

box-shadow: 3px 3px 10px 5px #000;

This CSS declaration will generate the following shadow:

  • A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative
    length to the left.
  • The second length is the vertical offset. A positive value for the vertical offset basically offsets the
    shadow down, a negative one up.
  • You’re not allowed to use negative values for blur radius. The larger
    the value, the more the shadow’s edge is blurred, as it can be seen above.
  • Spread distance positive values cause the
    shadow shape to expand in all directions by the specified radius.
    Negative ones cause the shadow shape to contract.
  • The color is the color of the shadow.
  • The inset keyword (missing above), if present,
    changes the drop shadow from an outer shadow to an inner
    shadow

The above theory it’s just a small amount, if you want to read more, than be my guest and check the W3C specs.

Enough theory, let’s see some stuff!

Now let’s see how can you take advantage of this wonderful CSS3 feature. Below I’ll show you how to enhance your designs with the coolest box-shadow techniques!

Add depth to your body

Reference URL

body:before
{
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

Drop shadows

Here are the articles that inspired me, and not only:

#box
{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

#box:before, #box:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Quick tips

Try spicing up shadows with RGBa color. The box-shadow property can be used using CSS3 RGBa colors to create shadows with differing levels of opacity. If your browsers supports thebox-shadow property, then it will definitively support the RGBa color mode.

Use multiple shadows in one CSS declaration:

  box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;

Browser Support

  • Internet Explorer 9/10
  • Firefox (from 3.5)
  • Safari/Chrome
  • Opera (from 10.5)
 
Leave a comment

Posted by on May 16, 2012 in CS Style

 

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 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!

 

More Infomation

 
Leave a comment

Posted by on February 16, 2011 in CS Style

 

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 the PNG transparency recovers.

Let’s take a look at the difference of PNG images (with transparency) on both major browsers: Mozilla Firefox and Internet Explorer 6

Solution

Create a container to store your image. In this case I use a <div>.
Create your <div> inside your <body>, just like this.

<body> <div></div> </body>

Next, create a <style> if you dont have one. Make sure they are between your <head> </head>. Put the following css inside.

<style>
body {background-color:#000}
div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
</style>

The CSS codes above displays your PNG image in a <div>. Works fine for Mozilla Firefox, but not for Internet Explorer. To get it working cross browser, create another set of css just for Internet Explorer right below your <style> </style>. Insert the following codes.

<!–[if gte IE 5]>
<style type=”text/css”>
div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
}
</style>
<![endif]–>

Your IE should now give you a perfect blend like the picture below.

PNG image in Internet Explorer

Download my working example.

 
Leave a comment

Posted by on August 5, 2010 in CS Style, Javascript