گروپ دیزاین | ارائه دهنده خدمات نوین

نسل جدید بنر ها css3

 16 جولای 2015

سلام خیلی وقت است که اکثر بنر ها با فرمت های gif یا swf تولید میشود و شاید دیگر زمان سی اس اس که پا در این عرصه بزرگ تبلیغاتی بگذارد که مزایای جالبی دارد و همچنین معایبی هم دارد.

مزایا:

زمان لود سریع

کیفیت بالا

تغییر در نوشته ها به سادگی

و…

معایب

باید حتما به css3 مسلط باشید

ابتدا یک فایل Html بسازید و سپس یک استایل سی اس اس و در آخر آن ها را به هم متصل کنید.

 

کد html

[codesyntax lang=”php”]

<div class="p2g"><div id="plus2">گروپ دیزاین</div><div id="arman">طراحی سایت در کرج</div></div>

[/codesyntax]

 

کدcss3

[codesyntax lang=”php”]

.p2g, .arman, .plus2{
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
transition:all 1s ease-in; 
}
.p2g{
width:500px;
height:80px;
background-image: -ms-linear-gradient(top, #8F8F8F 0%, #292828 100%);
background-image: -moz-linear-gradient(top, #8F8F8F 0%, #292828 100%);
background-image: -o-linear-gradient(top, #8F8F8F 0%, #292828 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8F8F8F), color-stop(1, #292828));
background-image: -webkit-linear-gradient(top, #8F8F8F 0%, #292828 100%);
background-image: linear-gradient(top, #8F8F8F 0%, #292828 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 5px 1px #414141;
font-family: "B Yekan",Arial, Helvetica, Sans-Serif;
padding:0;
margin:5px;
overflow:hidden;
}
.p2g #arman{
padding:5px;
font-size:15px;
color:#000;
text-shadow:2px 2px 1px #ffffff;
background:#52D1EB;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:150px;
text-align:center;
margin:5px -170px 0 0px;
transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
animation:arman 10s infinite;
-moz-animation:arman 10s infinite;
-webkit-animation:arman 10s infinite;
}
@keyframes arman{
0% {margin:0px -170px 0 0px;transform: rotate(-2deg);}
5% {margin:0px -170px 0 0px;transform: rotate(360deg);}
10% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
15% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
20% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
25% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
30% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
35% {margin:0px 20px 0 0px;transform: rotate(360deg);}
40% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
45% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
50% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
55% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
60% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
65% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
70% {margin:0px 280px 0 0px;transform: rotate(360deg);}
75% {margin:0px 500px 0 0px;transform: rotate(-2deg);}
80% {margin:0px 500px 0 0px;transform: rotate(360deg);}
85% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
90% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
95% {margin:0px -170px 0 0px;transform: rotate(-2deg);}
}
@-webkit-keyframes arman{
0% {margin:0px -170px 0 0px;-webkit-transform: rotate(-2deg);}
5% {margin:0px -170px 0 0px;-webkit-transform: rotate(360deg);}
10% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
15% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
20% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
25% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
30% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
35% {margin:0px 20px 0 0px;-webkit-transform: rotate(360deg);}
40% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
45% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
50% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
55% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
60% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
65% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
70% {margin:0px 280px 0 0px;-webkit-transform: rotate(360deg);}
75% {margin:0px 500px 0 0px;-webkit-transform: rotate(-2deg);}
80% {margin:0px 500px 0 0px;-webkit-transform: rotate(360deg);}
85% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
90% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
95% {margin:0px -170px 0 0px;-webkit-transform: rotate(-2deg);}
}
@-moz-keyframes arman{
0% {margin:0px -170px 0 0px;-moz-transform: rotate(-2deg);}
5% {margin:0px -170px 0 0px;-moz-transform: rotate(360deg);}
10% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
15% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
20% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
25% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
30% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
35% {margin:0px 20px 0 0px;-moz-transform: rotate(360deg);}
40% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
45% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
50% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
55% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
60% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
65% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
70% {margin:0px 280px 0 0px;-moz-transform: rotate(360deg);}
75% {margin:0px 500px 0 0px;-moz-transform: rotate(-2deg);}
80% {margin:0px 500px 0 0px;-moz-transform: rotate(360deg);}
85% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
90% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
95% {margin:0px -170px 0 0px;-moz-transform: rotate(-2deg);}
}
.p2g #plus2{
padding:5px;
font-size:15px;
color:#000;
text-shadow:2px 2px 1px #ffffff;
background:#F2D60B;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:250px;
text-align:center;
margin:5px 500px 0px 0px;
transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
animation:plus2 15s infinite;
-moz-animation:plus2 15s infinite;
-webkit-animation:plus2 15s infinite;
}
@keyframes plus2{
0% {margin:5px 500px 0px 0px;}
5% {margin:5px 500px 0px 0px;}
10% {margin:5px 20px 0px 0px;}
15% {margin:5px 20px 0px 0px;}
20% {margin:5px 20px 0px 0px;}
25% {margin:5px 20px 0px 0px;}
30% {margin:5px 150px 0px 0px;}
35% {margin:5px 150px 0px 0px;}
40% {margin:5px 100px 0px 0px;}
45% {margin:5px 150px 0px 0px;}
50% {margin:5px 200px 0px 0px;}
55% {margin:5px 200px 0px 0px;}
60% {margin:5px 200px 0px 0px;}
65% {margin:5px 200px 0px 0px;}
70% {margin:5px 20px 0px 0px;}
75% {margin:5px 20px 0px 0px;}
80% {margin:5px 40px 0px 0px;}
85% {margin:5px 40px 0px 0px;}
90% {margin:5px 20px 0px 0px;}
95% {margin:5px 500px 0px 0px;}
}
@-webkit-keyframes plus2{
0% {margin:5px 500px 0px 0px;}
5% {margin:5px 500px 0px 0px;}
10% {margin:5px 20px 0px 0px;}
15% {margin:5px 20px 0px 0px;}
20% {margin:5px 20px 0px 0px;}
25% {margin:5px 20px 0px 0px;}
30% {margin:5px 150px 0px 0px;}
35% {margin:5px 150px 0px 0px;}
40% {margin:5px 100px 0px 0px;}
45% {margin:5px 150px 0px 0px;}
50% {margin:5px 200px 0px 0px;}
55% {margin:5px 200px 0px 0px;}
60% {margin:5px 200px 0px 0px;}
65% {margin:5px 200px 0px 0px;}
70% {margin:5px 20px 0px 0px;}
75% {margin:5px 20px 0px 0px;}
80% {margin:5px 40px 0px 0px;}
85% {margin:5px 40px 0px 0px;}
90% {margin:5px 20px 0px 0px;}
95% {margin:5px 500px 0px 0px;}
}
@-moz-keyframes plus2{
0% {margin:5px 500px 0px 0px;}
5% {margin:5px 500px 0px 0px;}
10% {margin:5px 20px 0px 0px;}
15% {margin:5px 20px 0px 0px;}
20% {margin:5px 20px 0px 0px;}
25% {margin:5px 20px 0px 0px;}
30% {margin:5px 150px 0px 0px;}
35% {margin:5px 150px 0px 0px;}
40% {margin:5px 100px 0px 0px;}
45% {margin:5px 150px 0px 0px;}
50% {margin:5px 200px 0px 0px;}
55% {margin:5px 200px 0px 0px;}
60% {margin:5px 200px 0px 0px;}
65% {margin:5px 200px 0px 0px;}
70% {margin:5px 20px 0px 0px;}
75% {margin:5px 20px 0px 0px;}
80% {margin:5px 40px 0px 0px;}
85% {margin:5px 40px 0px 0px;}
90% {margin:5px 20px 0px 0px;}
95% {margin:5px 500px 0px 0px;}
}

[/codesyntax]