Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস৩ দিয়ে তৈরি করুন এনিম্যাটেড ওয়েব অথবা অ্যাডস ব্যানার

2,326 দেখা 3 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

44 টিউনস 25 টিউমেন্টস 0 ফলোয়ার

আজ আমি আপনাদের কে দেখাব কি করে একটি এনিম্যাটেড ওয়েব ব্যানার  তৈরি করবেন সিএসএস৩ দিয়ে । এর জন্য আপনাকে একটি এইচটিএমএল ফাইল তৈরি করতে হবে তারপর একটি সিএসএস ফাইল তৈরি করবেন এবং তারপর একটি images নামে একটি ফোলডার তৈরি করতে হবে ।

আর এই সকল কিছু করা হয়ে গেলে আপনাকে কাজে নেমে পরতে হবে । প্রথমেই আমরা কাজ করবো এইচটিএমএল ফাইল টি নিয়ে তো এজন্য এইচটিএমএল ফাইল টিতে কিছু কোড লিখতে হবে ।

 

কোড গুলু নিচে দেয়া হলঃ


<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Web Banners With CSS3</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
</head>
<body>

</header>
<section class="wrapper">
<div id="ad-1">
<div id="content">
<h2>Lost at sea?</h2>
<h3>Relax - we've got your rudder.</h3>
<form>
<input type="text" id="email" value="Email address..." />
<input type="submit" id="submit" value="Guide me" />
</form>
</div>
<div id="clouds">
<ul id="cloud-group-1">
<li class="cloud-1"></li>
<li class="cloud-2"></li>
<li class="cloud-3"></li>
</ul>
<ul id="cloud-group-2">
<li class="cloud-1"></li>
<li class="cloud-2"></li>
<li class="cloud-3"></li>
</ul>
</div>
<ul id="boat">
<li>
<div id="question-mark"></div>
</li>
</ul>
<ul id="water">
<li id="water-back"></li>
<li id="water-front"></li>
</ul>
</div>
</section>
</div>
</body>
</html>

এই এইচটিএমএল ফাইলটি তে যে ইমেজ গুলু ব্যাবহার করা হয়েছে তা আমি আপনাদেরকে জিপ ফাইল এ দিয়ে দিব ।

এখন আমারা সিএসএস নিয়ে কাজ করবো । এনিম্যাটেড ব্যানার এর জন্য সিএসএস টা সব চেয়ে গুরত্ত পূর্ণ । এখন আপনি সিএসএস টুকু একটু দেখে নিনঃ


/* Begin Ad 1 */

#ad-1 {
width: 720px;
height: 300px;
margin: 40px auto 0;
background-image: url(../images/ad-1/background.png);
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#ad-1 #content {
width: 325px;
float: right;
margin: 40px;
text-align: center;
z-index: 4;
position: relative;
overflow: visible;
}
#ad-1 #content h2 {
font-family: 'Alfa Slab One', cursive;
color: #137dd5;
font-size: 50px;
line-height: 50px;
text-shadow: 0px 0px 4px #fff;
-webkit-animation: h2-animation 7s 1 ease-in-out;
-moz-animation: h2-animation 7s 1 ease-in-out;
-o-animation: h2-animation 7s 1 ease-in-out;
-ms-animation: h2-animation 7s 1 ease-in-out;
animation: h2-animation 7s 1 ease-in-out;
}
#ad-1 #content h3 {
font-family: 'Boogaloo', cursive;
color: #202224;
font-size: 31px;
line-height: 31px;
text-shadow: 0px 0px 4px #fff;
-webkit-animation: h3-animation 10s 1 ease-in-out;
-moz-animation: h3-animation 10s 1 ease-in-out;
-o-animation: h3-animation 10s 1 ease-in-out;
-ms-animation: h3-animation 10s 1 ease-in-out;
animation: h3-animation 10s 1 ease-in-out;
}
#ad-1 #content form {
margin: 30px 0 0 6px;
position: relative;
-webkit-animation: form-animation 12s 1 ease-in-out;
-moz-animation: form-animation 12s 1 ease-in-out;
-o-animation: form-animation 12s 1 ease-in-out;
-ms-animation: form-animation 12s 1 ease-in-out;
animation: form-animation 12s 1 ease-in-out;
}
#ad-1 #content #email {
width: 158px;
height: 48px;
float: left;
padding: 0 20px;
font-size: 16px;
font-family: 'Lucida Grande', sans-serif;
color: #fff;
text-shadow: 1px 1px 0px #a2917d;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border:1px solid #a2917d;
outline: none;
box-shadow: -1px -1px 1px #fff;
background-color: #c7b29b;
background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
background-image: -o-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
background-image: -moz-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
background-image: -ms-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
}
#ad-1 #content #email:focus {
background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
background-image: -o-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
background-image: -moz-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
background-image: -ms-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);

}
#ad-1 #content #submit {
height: 50px;
float: left;
padding: 0 20px;
font-size: 20px;
font-family: 'Boogaloo', cursive;
color: #137dd5;
text-shadow: 1px 1px 0px #fff;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border:1px solid #bcc0c4;
border-left: none;
background-color: #fff;
background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
cursor: pointer;
}
#ad-1 #content #submit:hover {
background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
}
#ad-1 ul#water{
}
#ad-1 li#water-back {
width: 1200px;
height: 84px;
background-image: url(../images/ad-1/water-back.png);
background-repeat: repeat-x;
z-index: 1;
position: absolute;
bottom: 10px;
left: -20px;
-webkit-animation: water-back-animation 3s infinite ease-in-out;
-moz-animation: water-back-animation 3s infinite ease-in-out;
-o-animation: water-back-animation 3s infinite ease-in-out;
-ms-animation: water-back-animation 3s infinite ease-in-out;
animation: water-back-animation 3s infinite ease-in-out;
}
#ad-1 li#water-front {
width: 1200px;
height: 158px;
background-image: url(../images/ad-1/water-front.png);
background-repeat: repeat-x;
z-index: 3;
position: absolute;
bottom: -70px;
left:-30px;
-webkit-animation: water-front-animation 2s infinite ease-in-out;
-moz-animation: water-front-animation 2s infinite ease-in-out;
-o-animation: water-front-animation 2s infinite ease-in-out;
-ms-animation: water-front-animation 2s infinite ease-in-out;
animation: water-front-animation 2s infinite ease-in-out;
}
#ad-1 ul#boat {
width: 249px;
height: 215px;
z-index: 2;
position: absolute;
bottom: 25px;
left: 20px;
overflow: visible;
-webkit-animation: boat-in-animation 3s 1 ease-out;
-moz-animation: boat-in-animation 3s 1 ease-out;
-o-animation: boat-in-animation 3s 1 ease-out;
-ms-animation: boat-in-animation 3s 1 ease-out;
animation: boat-in-animation 3s 1 ease-out;
}
#ad-1 ul#boat li {
width: 249px;
height: 215px;
background-image: url(../images/ad-1/boat.png);
position: absolute;
bottom: 0px;
left: 0px;
overflow: visible;
-webkit-animation: boat-animation 2s infinite ease-in-out;
-moz-animation: boat-animation 2s infinite ease-in-out;
-o-animation: boat-animation 2s infinite ease-in-out;
-ms-animation: boat-animation 2s infinite ease-in-out;
animation: boat-animation 2s infinite ease-in-out;
}
#ad-1 #question-mark {
width: 24px;
height: 50px;
background-image: url(../images/ad-1/question-mark.png);
position: absolute;
right: 34px;
top: -30px;
-webkit-animation: question-mark-animation 4s 1 ease-in-out;
-moz-animation: question-mark-animation 4s 1 ease-in-out;
-o-animation: question-mark-animation 4s 1 ease-in-out;
-ms-animation: question-mark-animation 4s 1 ease-in-out;
animation: question-mark-animation 4s 1 ease-in-out;
}
#ad-1 #clouds {
position: absolute;
top: 0px;
z-index: 0;
}
#ad-1 #cloud-group-1 {
width:720px;
position: absolute;
left:0px;
-webkit-animation: cloud-group-1-animation 30s infinite linear;
-moz-animation: cloud-group-1-animation 30s infinite linear;
-o-animation: cloud-group-1-animation 30s infinite linear;
-ms-animation: cloud-group-1-animation 30s infinite linear;
animation: cloud-group-1-animation 30s infinite linear;
}
#ad-1 #cloud-group-2 {
width: 720px;
position: absolute;
left: 720px;
-webkit-animation: cloud-group-2-animation 30s infinite linear;
-moz-animation: cloud-group-2-animation 30s infinite linear;
-o-animation: cloud-group-2-animation 30s infinite linear;
-ms-animation: cloud-group-2-animation 30s infinite linear;
animation: cloud-group-2-animation 30s infinite linear;
}
#ad-1 .cloud-1 {
width: 172px;
height: 121px;
background-image: url(../images/ad-1/cloud-1.png);
position: absolute;
top: 10px;
left: 40px;
}
#ad-1 .cloud-2 {
width: 121px;
height: 75px;
background-image: url(../images/ad-1/cloud-2.png);
position: absolute;
top: -25px;
left: 300px;
}
#ad-1 .cloud-3 {
width: 132px;
height: 105px;
background-image: url(../images/ad-1/cloud-3.png);
position: absolute;
top: -5px;
left: 530px;
}

/* WebKit Animations */

@-webkit-keyframes h2-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes h3-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes form-animation {
0%   {opacity: 0; right: -400px;}
90%  {opacity: 0; right: -400px;}
95%  {opacity: 0.5; right: 20px;}
100% {opacity: 1; right: 0px;}
}
@-webkit-keyframes boat-in-animation {
0%   {left: -200px;}
100% {left: 20px;}
}
@-webkit-keyframes boat-animation {
0%   {bottom: 0px; left: 0px;}
25%  {bottom: -2px; left: -2px;}
70%  {bottom: 2px; left: -4px;}
100% {bottom: -1px; left: 0px;}
}
@-webkit-keyframes question-mark-animation {
0%   {opacity:0;}
80%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes cloud-group-1-animation {
0%       {left: 0px;}
99.9999%   {left: -720px;}
100%     {left: 0px;}
}
@-webkit-keyframes cloud-group-2-animation {
0%       {left: 720px;}
99.9999%   {left: 0px;}
100%     {left: 720px;}
}
@-webkit-keyframes water-back-animation {
0%   {bottom: 10px; left: -20px;}
25%  {bottom: 8px; left: -22px;}
70%  {bottom: 12px; left: -24px;}
100% {bottom: 9px; left: -20px;}
}
@-webkit-keyframes water-front-animation {
0%   {bottom: -70px; left: -30px;}
25%  {bottom: -68px; left: -32px;}
70%  {bottom: -72px; left: -34px;}
100% {bottom: -69px; left: -30px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes h3-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes form-animation {
0%   {opacity: 0; right: -400px;}
90%  {opacity: 0; right: -400px;}
95%  {opacity: 0.5; right: 20px;}
100% {opacity: 1; right: 0px;}
}
@-moz-keyframes boat-in-animation {
0%   {left: -200px;}
100% {left: 20px;}
}
@-moz-keyframes boat-animation {
0%   {bottom: 0px; left: 0px;}
25%  {bottom: -2px; left: -2px;}
70%  {bottom: 2px; left: -4px;}
100% {bottom: -1px; left: 0px;}
}
@-moz-keyframes question-mark-animation {
0%   {opacity:0;}
80%   {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes cloud-group-1-animation {
0%       {left: 0px;}
99.9999%   {left: -720px;}
100%     {left: 0px;}
}
@-moz-keyframes cloud-group-2-animation {
0%       {left: 720px;}
99.9999%   {left: 0px;}
100%     {left: 720px;}
}
@-moz-keyframes water-back-animation {
0%   {bottom: 10px; left: -20px;}
25%  {bottom: 8px; left: -22px;}
70%  {bottom: 12px; left: -24px;}
100% {bottom: 9px; left: -20px;}
}
@-moz-keyframes water-front-animation {
0%   {bottom: -70px; left: -30px;}
25%  {bottom: -68px; left: -32px;}
70%  {bottom: -72px; left: -34px;}
100% {bottom: -69px; left: -30px;}
}

/* Opera Animations */

@-o-keyframes h2-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes h3-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes form-animation {
0%   {opacity: 0; right: -400px;}
90%  {opacity: 0; right: -400px;}
95%  {opacity: 0.5; right: 20px;}
100% {opacity: 1; right: 0px;}
}
@-o-keyframes boat-in-animation {
0%   {left: -200px;}
100% {left: 20px;}
}
@-o-keyframes boat-animation {
0%   {bottom: 0px; left: 0px;}
25%  {bottom: -2px; left: -2px;}
70%  {bottom: 2px; left: -4px;}
100% {bottom: -1px; left: 0px;}
}
@-o-keyframes question-mark-animation {
0%   {opacity:0;}
80%   {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes cloud-group-1-animation {
0%       {left: 0px;}
99.9999%   {left: -720px;}
100%     {left: 0px;}
}
@-o-keyframes cloud-group-2-animation {
0%       {left: 720px;}
99.9999%   {left: 0px;}
100%     {left: 720px;}
}
@-o-keyframes water-back-animation {
0%   {bottom: 10px; left: -20px;}
25%  {bottom: 8px; left: -22px;}
70%  {bottom: 12px; left: -24px;}
100% {bottom: 9px; left: -20px;}
}
@-o-keyframes water-front-animation {
0%   {bottom: -70px; left: -30px;}
25%  {bottom: -68px; left: -32px;}
70%  {bottom: -72px; left: -34px;}
100% {bottom: -69px; left: -30px;}
}

/* IE Animations */

@-ms-keyframes h2-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-ms-keyframes h3-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@-ms-keyframes form-animation {
0%   {opacity: 0; right: -400px;}
90%  {opacity: 0; right: -400px;}
95%  {opacity: 0.5; right: 20px;}
100% {opacity: 1; right: 0px;}
}
@-ms-keyframes boat-in-animation {
0%   {left: -200px;}
100% {left: 20px;}
}
@-ms-keyframes boat-animation {
0%   {bottom: 0px; left: 0px;}
25%  {bottom: -2px; left: -2px;}
70%  {bottom: 2px; left: -4px;}
100% {bottom: -1px; left: 0px;}
}
@-ms-keyframes question-mark-animation {
0%   {opacity:0;}
80%   {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes cloud-group-1-animation {
0%       {left: 0px;}
99.9999%   {left: -720px;}
100%     {left: 0px;}
}
@-ms-keyframes cloud-group-2-animation {
0%       {left: 720px;}
99.9999%   {left: 0px;}
100%     {left: 720px;}
}
@-ms-keyframes water-back-animation {
0%   {bottom: 10px; left: -20px;}
25%  {bottom: 8px; left: -22px;}
70%  {bottom: 12px; left: -24px;}
100% {bottom: 9px; left: -20px;}
}
@-ms-keyframes water-front-animation {
0%   {bottom: -70px; left: -30px;}
25%  {bottom: -68px; left: -32px;}
70%  {bottom: -72px; left: -34px;}
100% {bottom: -69px; left: -30px;}
}

/* Animations */

@keyframes h2-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@keyframes h3-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}
@keyframes form-animation {
0%   {opacity: 0; right: -400px;}
90%  {opacity: 0; right: -400px;}
95%  {opacity: 0.5; right: 20px;}
100% {opacity: 1; right: 0px;}
}
@keyframes boat-in-animation {
0%   {left: -200px;}
100% {left: 20px;}
}
@keyframes boat-animation {
0%   {bottom: 0px; left: 0px;}
25%  {bottom: -2px; left: -2px;}
70%  {bottom: 2px; left: -4px;}
100% {bottom: -1px; left: 0px;}
}
@keyframes question-mark-animation {
0%   {opacity:0;}
80%   {opacity:0;}
100% {opacity:1;}
}
@keyframes cloud-group-1-animation {
0%       {left: 0px;}
99.9999%   {left: -720px;}
100%     {left: 0px;}
}
@keyframes cloud-group-2-animation {
0%       {left: 720px;}
99.9999%   {left: 0px;}
100%     {left: 720px;}
}
@keyframes water-back-animation {
0%   {bottom: 10px; left: -20px;}
25%  {bottom: 8px; left: -22px;}
70%  {bottom: 12px; left: -24px;}
100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
0%   {bottom: -70px; left: -30px;}
25%  {bottom: -68px; left: -32px;}
70%  {bottom: -72px; left: -34px;}
100% {bottom: -69px; left: -30px;}
}

/* End Ad 1 */

/* Begin Ad 2 */

#ad-2 {
width: 160px;
height: 600px;
margin: 40px auto 40px;
background-image: url(../images/ad-2/background.png);
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
text-align: center;
}
#ad-2 h2 {
font-family: 'Alfa Slab One', cursive;
color: #137dd5;
font-size: 50px;
line-height: 50px;
text-shadow: 0px 0px 4px #fff;
margin-top: 110px;
-webkit-animation: h2-animation-2 10s 1 ease-in-out;
-moz-animation: h2-animation-2 10s 1 ease-in-out;
-o-animation: h2-animation-2 5s 1 ease-in-out;
-ms-animation: h2-animation-2 5s 1 ease-in-out;
animation: h2-animation-2 5s 1 ease-in-out;
}
#ad-2 ul#boat {
width: 96px;
height: 84px;
overflow: visible;
z-index: 2;
position: absolute;
top: 326px;
left: 10px;
-webkit-animation: boat-in-animation-2 15s 1 ease-in-out;
-moz-animation: boat-in-animation-2 15s 1 ease-in-out;
-o-animation: boat-in-animation-2 15s 1 ease-in-out;
-ms-animation: boat-in-animation-2 15s 1 ease-in-out;
animation: boat-in-animation-2 15s 1 ease-in-out;
}
#ad-2 ul#boat li {
width: 96px;
height: 84px;
z-index: 2;
position: relative;
top: 0px;
left: 0px;
background-image: url(../images/ad-2/boat.png);
-webkit-animation: boat-animation-2 2.5s infinite ease-out;
-moz-animation: boat-animation-2 2.5s infinite ease-out;
-o-animation: boat-animation-2 2.5s infinite ease-out;
-ms-animation: boat-in-animation-2 2.5s infinite ease-out;
animation: boat-animation-2 2.5s infinite ease-out;
}
#ad-2 #water {
position: absolute;
top: 382px;
-webkit-animation: water-in-animation-2 2s 1 ease-out;
-moz-animation: water-in-animation-2 2s 1 ease-out;
-o-animation: water-in-animation-2 2s 1 ease-out;
-ms-animation: water-in-animation-2 2s 1 ease-out;
animation: water-in-animation-2 2s 1 ease-out;
}
#ad-2 #water-back {
width: 200px;
height: 75px;
background-image: url(../images/ad-2/water-back.png);
background-repeat: repeat-x;
z-index: 1;
position: absolute;
top: 0px;
left: -22px;
-webkit-animation: water-back-animation-2 3s infinite ease-in-out;
-moz-animation: water-back-animation-2 3s infinite ease-in-out;
-o-animation: water-back-animation-2 3s infinite ease-in-out;
-ms-animation: water-back-animation-2 3s infinite ease-in-out;
animation: water-back-animation-2 3s infinite ease-in-out;
}
#ad-2 #water-front {
width: 200px;
height: 368px;
background-image: url(../images/ad-2/water-front.png);
background-repeat: repeat-x;
z-index: 3;
position: absolute;
top: 2px;
left:-30px;
-webkit-animation: water-front-animation-2 2s infinite ease-in-out;
-moz-animation: water-front-animation-2 2s infinite ease-in-out;
-o-animation: water-front-animation-2 2s infinite ease-in-out;
-ms-animation: water-front-animation-2 2s infinite ease-in-out;
animation: water-front-animation-2 2s infinite ease-in-out;
}
#ad-2 #content {
width: 100%;
position: absolute;
bottom: 0px;
z-index: 4;
-webkit-animation: content-in-animation-2 15s 1 ease-in-out;
-moz-animation: content-in-animation-2 15s 1 ease-in-out;
-o-animation: content-in-animation-2 15s 1 ease-in-out;
-ms-animation: content-in-animation-2 15s 1 ease-in-out;
animation: content-in-animation-2 15s 1 ease-in-out;
}
#ad-2 #content h3 {
color: #fff;
font-family: 'Boogaloo', cursive;
font-size: 30px;
line-height: 32px;
text-shadow: 0px 0px 4px #137dd5;
}
#ad-2 #content a:link, #ad-2 #content a:visited {
display: inline-block;
height: 20px;
padding: 15px;
font-family: 'Boogaloo', cursive;
font-size: 20px;
line-height: 20px;
color: #137dd5;
text-shadow: 1px 1px 0px #fff;
background-color: #fff;
border-radius: 5px;
margin: 20px 0px;
box-shadow: 2px 2px 0px #137dd5;
border: 1px solid #fff;
background-image: linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
background-image: -o-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
}
#ad-2 #content a:hover, #ad-2 #content a:active {
background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
}

/* WebKit Animations */

@-webkit-keyframes h2-animation-2 {
0%   {opacity: 0; font-size: 0px;}
90%  {opacity: 0; font-size: 0px;}
95%  {opacity: 1; font-size: 60px;}
100% {font-size: 50px;}
}
@-webkit-keyframes content-in-animation-2 {
0%   {opacity: 0;}
90%  {opacity: 0;}
95%  {opacity: 1;}
100% {opacity: 1;}
}
@-webkit-keyframes water-in-animation-2 {
0%   {top: 600px; left: -10px;}
100% {top: 380px; left: 0px;}
}
@-webkit-keyframes water-front-animation-2 {
0%   {top: 2px; left: -30px;}
25%  {top: 0px; left: -32px;}
70%  {top: 4px; left: -34px;}
100% {top: 1px; left: -30px;}
}
@-webkit-keyframes water-back-animation-2 {
0%   {top: 0px; left: -20px;}
25%  {top: -2px; left: -22px;}
70%  {top: 2px; left: -24px;}
100% {top: -1px; left: -20px;}
}
@-webkit-keyframes boat-in-animation-2 {
0%       {left: -150px;}
7%       {left: -150px;}
75%      {left: 310px;}
75.0001% {left: -100px;}
90%      {left: 10px;}
100%     {left: 10px;}
}
@-webkit-keyframes boat-animation-2 {
0%   {top: 0px; left: 0px;}
25%  {top: -2px; left: -2px;}
70%  {top: 2px; left: -2px;}
100% {top: -1px; left: -1px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation-2 {
0%   {opacity: 0; font-size: 0px;}
90%  {opacity: 0; font-size: 0px;}
95%  {opacity: 1; font-size: 60px;}
100% {font-size: 50px;}
}
@-moz-keyframes content-in-animation-2 {
0%   {opacity: 0;}
90%  {opacity: 0;}
95%  {opacity: 1;}
100% {opacity: 1;}
}
@-moz-keyframes water-in-animation-2 {
0%   {top: 600px; left: -10px;}
100% {top: 380px; left: 0px;}
}
@-moz-keyframes water-front-animation-2 {
0%   {top: 2px; left: -30px;}
25%  {top: 0px; left: -32px;}
70%  {top: 4px; left: -34px;}
100% {top: 1px; left: -30px;}
}
@-moz-keyframes water-back-animation-2 {
0%   {top: 0px; left: -20px;}
25%  {top: -2px; left: -22px;}
70%  {top: 2px; left: -24px;}
100% {top: -1px; left: -20px;}
}
@-moz-keyframes boat-in-animation-2 {
0%       {left: -150px;}
7%       {left: -150px;}
75%      {left: 310px;}
75.0001% {left: -100px;}
90%      {left: 10px;}
100%     {left: 10px;}
}
@-moz-keyframes boat-animation-2 {
0%   {top: 0px; left: 0px;}
25%  {top: -2px; left: -2px;}
70%  {top: 2px; left: -2px;}
100% {top: -1px; left: -1px;}
}

/* Opera Animations */

@-o-keyframes h2-animation-2 {
0%   {opacity: 0; font-size: 0px;}
90%  {opacity: 0; font-size: 0px;}
95%  {opacity: 1; font-size: 60px;}
100% {font-size: 50px;}
}
@-o-keyframes content-in-animation-2 {
0%   {opacity: 0;}
90%  {opacity: 0;}
95%  {opacity: 1;}
100% {opacity: 1;}
}
@-o-keyframes water-in-animation-2 {
0%   {top: 600px; left: -10px;}
100% {top: 380px; left: 0px;}
}
@-o-keyframes water-front-animation-2 {
0%   {top: 2px; left: -30px;}
25%  {top: 0px; left: -32px;}
70%  {top: 4px; left: -34px;}
100% {top: 1px; left: -30px;}
}
@-o-keyframes water-back-animation-2 {
0%   {top: 0px; left: -20px;}
25%  {top: -2px; left: -22px;}
70%  {top: 2px; left: -24px;}
100% {top: -1px; left: -20px;}
}
@-o-keyframes boat-in-animation-2 {
0%       {left: -150px;}
7%       {left: -150px;}
75%      {left: 310px;}
75.0001% {left: -100px;}
90%      {left: 10px;}
100%     {left: 10px;}
}
@-o-keyframes boat-animation-2 {
0%   {top: 0px; left: 0px;}
25%  {top: -2px; left: -2px;}
70%  {top: 2px; left: -2px;}
100% {top: -1px; left: -1px;}
}

/* IE Animations */

@-ms-keyframes h2-animation-2 {
0%   {opacity: 0; font-size: 0px;}
90%  {opacity: 0; font-size: 0px;}
95%  {opacity: 1; font-size: 60px;}
100% {font-size: 50px;}
}
@-ms-keyframes content-in-animation-2 {
0%   {opacity: 0;}
90%  {opacity: 0;}
95%  {opacity: 1;}
100% {opacity: 1;}
}
@-ms-keyframes water-in-animation-2 {
0%   {top: 600px; left: -10px;}
100% {top: 380px; left: 0px;}
}
@-ms-keyframes water-front-animation-2 {
0%   {top: 2px; left: -30px;}
25%  {top: 0px; left: -32px;}
70%  {top: 4px; left: -34px;}
100% {top: 1px; left: -30px;}
}
@-ms-keyframes water-back-animation-2 {
0%   {top: 0px; left: -20px;}
25%  {top: -2px; left: -22px;}
70%  {top: 2px; left: -24px;}
100% {top: -1px; left: -20px;}
}
@-ms-keyframes boat-in-animation-2 {
0%       {left: -150px;}
7%       {left: -150px;}
75%      {left: 310px;}
75.0001% {left: -100px;}
90%      {left: 10px;}
100%     {left: 10px;}
}
@-ms-keyframes boat-animation-2 {
0%   {top: 0px; left: 0px;}
25%  {top: -2px; left: -2px;}
70%  {top: 2px; left: -2px;}
100% {top: -1px; left: -1px;}
}

/* Animations */

@keyframes h2-animation-2 {
0%   {opacity: 0; font-size: 0px;}
90%  {opacity: 0; font-size: 0px;}
95%  {opacity: 1; font-size: 60px;}
100% {font-size: 50px;}
}
@keyframes content-in-animation-2 {
0%   {opacity: 0;}
90%  {opacity: 0;}
95%  {opacity: 1;}
100% {opacity: 1;}
}
@keyframes water-in-animation-2 {
0%   {top: 600px; left: -10px;}
100% {top: 380px; left: 0px;}
}
@keyframes water-front-animation-2 {
0%   {top: 2px; left: -30px;}
25%  {top: 0px; left: -32px;}
70%  {top: 4px; left: -34px;}
100% {top: 1px; left: -30px;}
}
@keyframes water-back-animation-2 {
0%   {top: 0px; left: -20px;}
25%  {top: -2px; left: -22px;}
70%  {top: 2px; left: -24px;}
100% {top: -1px; left: -20px;}
}
@keyframes boat-in-animation-2 {
0%       {left: -150px;}
7%       {left: -150px;}
75%      {left: 310px;}
75.0001% {left: -100px;}
90%      {left: 10px;}
100%     {left: 10px;}
}
@keyframes boat-animation-2 {
0%   {top: 0px; left: 0px;}
25%  {top: -2px; left: -2px;}
70%  {top: 2px; left: -2px;}
100% {top: -1px; left: -1px;}
}

/* End Ad 2 */

আমি কিন্তু সিএসএস টাকে একটি ফোলডার এ রেখে করেছি আপনারা কোড টুকু ডাউনলোড করে সিএসএস টা কে আলাদা ফোলডার এ রেখেই কাজ করবেন ।

আজকের মত এখানেই বিদায় নিচ্ছি কথা হবে পরের টিউনে ।

আমাকে ফেসবুকে পেতে এখানে ক্লিক করুন

আমাদের ফেসবুক ফ্যান পেজে যেতে এখানে ক্লিক করুন

Level 0

আমি মাহমুদুল হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 44 টি টিউন ও 25 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

অনেক সুন্দর। ধন্যবাদ

Level 2

ডিভাইন কোডার ভাই আজকের টিউনটা ও খুব ভালো হইছে। ধন্যবাদ

Level 2

জটিল হইছে ভাই। ধন্যবাদ।