CSS3 slider show animation

Wed, 11 Jan 2012 16:28:52 +0530

Hi every this is my first tutorial on CSS3 slide show animation i have used CSS3 slide the images by using the following code: just copy & paste the below code into your text editor & replace the images & enjoy….thanks

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

* {

margin: 0;

padding: 0;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#slider {

width: 930px;

height: 500px;

overflow: hidden;

background: #fff url(images/back.jpg) no-repeat;

box-shadow: 0 0 20px #aeaeae;

position: relative;

top: 20px;

}

#sl1 {

position: absolute;

left: 530px;

transition: left 1s, z-index 1s, transform 1s;

-moz-transition: left 1s, z-index 1s, -o-transform 1s;

-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;

-o-transition: left 1s, z-index 1s, -moz-transform 1s;

transform: rotate(-10deg);

-o-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

}

#sl2 {

position: absolute;

left: 630px;

transition: left 1s, z-index 1s, transform 1s;

-moz-transition: left 1s, z-index 1s, -o-transform 1s;

-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;

-o-transition: left 1s, z-index 1s, -moz-transform 1s;

transform: rotate(-7deg);

-o-transform: rotate(-7deg);

-webkit-transform: rotate(-7deg);

-moz-transform: rotate(-7deg);

}

#sl3 {

position: absolute;

left: 730px;

transition: left 1s, z-index 1s, transform 1s;

-moz-transition: left 1s, z-index 1s, -o-transform 1s;

-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;

-o-transition: left 1s, z-index 1s, -moz-transform 1s;

transform: rotate(-4deg);

-o-transform: rotate(-4deg);

-webkit-transform: rotate(-4deg);

-moz-transform: rotate(-4deg);

}

#sl4 {

position: absolute;

left: 830px;

transition: left 1s, z-index 1s, transform 1s;

-moz-transition: left 1s, z-index 1s, -o-transform 1s;

-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;

-o-transition: left 1s, z-index 1s, -moz-transform 1s;

transform: rotate(-2deg);

-o-transform: rotate(-2deg);

-webkit-transform: rotate(-2deg);

-moz-transform: rotate(-2deg);

}

#sl1:hover {

left: 0;

z-index: 5;

transform: rotate(0deg);

-o-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

}

#sl2:hover {

left: 0;

z-index: 5;

transform: rotate(0deg);

-o-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

}

#sl3:hover {

left: 0;

z-index: 5;

transform: rotate(0deg);

-o-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

}

#sl4:hover {

left: 0;

z-index: 5;

transform: rotate(0deg);

-o-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

}

</style>

<title>CSS slider test</title>

</head>

<body>

</div>

</body>

</html>

How to make a business website stand out

Sat, 07 Jan 2012 15:50:52 +0530

bitshare:

When creating your business website, you want to make sure it’s not like other sites. You don’t want to create something generic that will be forgotten as soon as the viewer leaves the site. Instead, you should make sure they see something interesting that will keep them coming back and encourage them to tell others about the site. With the right strategy, you can easily create a website that promotes your business and generates positive word of mouth that will draw in many new customers.

Read More

Photo

Sat, 07 Jan 2012 15:19:51 +0530

Hi all these are my works all done in Photoshop (matte painting,...

Sat, 07 Jan 2012 15:16:17 +0530

Hi all these are my works all done in Photoshop (matte painting, digital painting etc.) hope u all like it.

Arshad Design

CSS3 slider show animation

How to make a business website stand out

Photo

Hi all these are my works all done in Photoshop (matte painting,...