RSS

Category Archives: CS Style

postcard from Paris – css3 keyframes animations in use

16 May

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-position:  500px 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-position:  500px 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-position:  650px 150px, left bottom;}
            100% {background-position: 1300px 250px, left bottom}
    }
    @-moz-keyframes wind1 {
             0% {background-position: 100px 250px, left bottom;}
            50% {background-position:  650px 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

16 May

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!

16 Feb

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

05 Aug

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

 
 
Follow

Get every new post delivered to your Inbox.