#basket
New messages Members Forum rules Search RSS
  • Page 1 of 1
  • 1
Forum » For webmasters » HTML / CSS / Javascript » CSS Slideup Box (Tutorial)
CSS Slideup Box
SirDarknight(Tonmoy)Date: Saturday, 07.05.2011, 06:52 | Message # 1
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Slideup Boxes

This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+

Code
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/css/style.css'>
<style>
.slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
.slide-up-boxes h5 {
color: #333;
text-align: center;
height: 65px;
font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(/images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(/images/diw.png) 21px 10px no-repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url(/images/qod.png) 14px 16px no-repeat; padding-left: 133px; }
</style>
</head>
<body>
<div id="page-wrap">
<section class="slide-up-boxes">
<a href="[color=green]http://ucoztemplates.com[/color]">
<h5>[color=red]uCoz Templates[/color]</h5>
<div>[color=blue]Free uCoz Designs,Themes,Support and Lot. Full Free[/color]</div>
</a>
<a href="[color=green]http://ucoztemplates.com/dir[/color]">
<h5>[color=red]Lot Of Features[/color]</h5>
<div>[color=blue]There Are Template Contests In Every Month and A Lot Of Features Are Available Here[/color]</div>
</a>
<a href="[color=green]http://ucoztemplates.com/load[/color]">
<h5>[color=red]More Than 150 Designs[/color]</h5>
<div>[color=blue]This Site Contains More Than 150 Themes[/color]</div>
</a>
</section>
</div>
</body>
</html>


Downloads :

http://depositfiles.com/files/ap79ez0vg

Note : You Can Edit The Red,Blue and Green Letters Only
Please Give Me A Reputation or Award If My Post Helps You
 
SirDarknight(Tonmoy)Date: Saturday, 07.05.2011, 06:56 | Message # 2
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Complete Tutorial :

1.Download This Zipped Archive
2.Extract
3.Create Two Folder Named : "css" and "images" in Your File Manager
3.Upload the style.css into the css folder
4.Upload The images on your images folder
5.Paste The index.html code Where You Want the Slide to be appear

Please Give Me A Reputation or Award If My Post Helps You
 
SirDarknight(Tonmoy)Date: Sunday, 26.06.2011, 19:42 | Message # 3
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Quote
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/css/style.css'>
<style>
.slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
.slide-up-boxes h5 {
color: #333;
text-align: center;
height: 65px;
font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(/images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(/images/diw.png) 21px 10px no-repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url(/images/qod.png) 14px 16px no-repeat; padding-left: 133px; }
</style>
</head>
<body>
<div id="page-wrap">
<section class="slide-up-boxes">
<a href="http://ucoztemplates.com">
<h5>uCoz Templates</h5>
<div>Free uCoz Designs,Themes,Support and Lot. Full Free</div>
</a>
<a href="http://ucoztemplates.com/dir">
<h5>Lot Of Features</h5>
<div>There Are Template Contests In Every Month and A Lot Of Features Are Available Here</div>
</a>
<a href="http://ucoztemplates.com/load">
<h5>More Than 150 Designs</h5>
<div>This Site Contains More Than 150 Themes</div>
</a>
</section>
</div>
</body>
</html>
Please Give Me A Reputation or Award If My Post Helps You
 
Forum » For webmasters » HTML / CSS / Javascript » CSS Slideup Box (Tutorial)
  • Page 1 of 1
  • 1
Search: