نسل جدید بنر ها css3
سلام خیلی وقت است که اکثر بنر ها با فرمت های 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 ۱s ease-in; -moz-transition:all ۱s ease-in; -o-transition:all ۱s ease-in; transition:all ۱s ease-in; } .p2g{ width:۵۰۰px; height:۸۰px; background-image: -ms-linear-gradient(top, #۸F8F8F 0%, #292828 100%); background-image: -moz-linear-gradient(top, #۸F8F8F 0%, #292828 100%); background-image: -o-linear-gradient(top, #۸F8F8F 0%, #292828 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(۰, #۸F8F8F), color-stop(1, #292828)); background-image: -webkit-linear-gradient(top, #۸F8F8F 0%, #292828 100%); background-image: linear-gradient(top, #۸F8F8F 0%, #292828 100%); -webkit-border-radius: ۵px; -moz-border-radius: ۵px; border-radius: ۵px; box-shadow: 0px 0px ۵px ۱px #۴۱۴۱۴۱; font-family: "B Yekan",Arial, Helvetica, Sans-Serif; padding:۰; margin:۵px; overflow:hidden; } .p2g #arman{ padding:۵px; font-size:۱۵px; color:#۰۰۰; text-shadow:۲px ۲px ۱px #ffffff; background:#۵۲D1EB; -webkit-border-radius: ۵px; -moz-border-radius: ۵px; border-radius: ۵px; width:۱۵۰px; text-align:center; margin:۵px -۱۷۰px ۰ 0px; transform: rotate(-۲deg); -o-transform: rotate(-۲deg); -moz-transform: rotate(-۲deg); -webkit-transform: rotate(-۲deg); animation:arman ۱۰s infinite; -moz-animation:arman ۱۰s infinite; -webkit-animation:arman ۱۰s infinite; } @keyframes arman{ ۰% {margin:0px -۱۷۰px ۰ 0px;transform: rotate(-۲deg);} ۵% {margin:0px -۱۷۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۱۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۱۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۲۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۲۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۳۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۳۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۴۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۴۵% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۵۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۵۵% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۶۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۶۵% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۷۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۷۵% {margin:0px ۵۰۰px ۰ 0px;transform: rotate(-۲deg);} ۸۰% {margin:0px ۵۰۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۸۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۹۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۹۵% {margin:0px -۱۷۰px ۰ 0px;transform: rotate(-۲deg);} } @-webkit-keyframes arman{ ۰% {margin:0px -۱۷۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۵% {margin:0px -۱۷۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۱۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۱۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۲۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۲۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۳۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۳۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۴۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۴۵% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۵۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۵۵% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۶۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۶۵% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۷۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۷۵% {margin:0px ۵۰۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۸۰% {margin:0px ۵۰۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۸۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۹۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۹۵% {margin:0px -۱۷۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} } @-moz-keyframes arman{ ۰% {margin:0px -۱۷۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۵% {margin:0px -۱۷۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۱۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۱۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۲۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۲۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۳۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۳۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۴۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۴۵% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۵۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۵۵% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۶۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۶۵% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۷۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۷۵% {margin:0px ۵۰۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۸۰% {margin:0px ۵۰۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۸۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۹۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۹۵% {margin:0px -۱۷۰px ۰ 0px;-moz-transform: rotate(-۲deg);} } .p2g #plus2{ padding:۵px; font-size:۱۵px; color:#۰۰۰; text-shadow:۲px ۲px ۱px #ffffff; background:#F2D60B; -webkit-border-radius: ۵px; -moz-border-radius: ۵px; border-radius: ۵px; width:۲۵۰px; text-align:center; margin:۵px ۵۰۰px 0px 0px; transform: rotate(-۲deg); -o-transform: rotate(-۲deg); -moz-transform: rotate(-۲deg); -webkit-transform: rotate(-۲deg); animation:plus2 ۱۵s infinite; -moz-animation:plus2 ۱۵s infinite; -webkit-animation:plus2 ۱۵s infinite; } @keyframes plus2{ ۰% {margin:۵px ۵۰۰px 0px 0px;} ۵% {margin:۵px ۵۰۰px 0px 0px;} ۱۰% {margin:۵px ۲۰px 0px 0px;} ۱۵% {margin:۵px ۲۰px 0px 0px;} ۲۰% {margin:۵px ۲۰px 0px 0px;} ۲۵% {margin:۵px ۲۰px 0px 0px;} ۳۰% {margin:۵px ۱۵۰px 0px 0px;} ۳۵% {margin:۵px ۱۵۰px 0px 0px;} ۴۰% {margin:۵px ۱۰۰px 0px 0px;} ۴۵% {margin:۵px ۱۵۰px 0px 0px;} ۵۰% {margin:۵px ۲۰۰px 0px 0px;} ۵۵% {margin:۵px ۲۰۰px 0px 0px;} ۶۰% {margin:۵px ۲۰۰px 0px 0px;} ۶۵% {margin:۵px ۲۰۰px 0px 0px;} ۷۰% {margin:۵px ۲۰px 0px 0px;} ۷۵% {margin:۵px ۲۰px 0px 0px;} ۸۰% {margin:۵px ۴۰px 0px 0px;} ۸۵% {margin:۵px ۴۰px 0px 0px;} ۹۰% {margin:۵px ۲۰px 0px 0px;} ۹۵% {margin:۵px ۵۰۰px 0px 0px;} } @-webkit-keyframes plus2{ ۰% {margin:۵px ۵۰۰px 0px 0px;} ۵% {margin:۵px ۵۰۰px 0px 0px;} ۱۰% {margin:۵px ۲۰px 0px 0px;} ۱۵% {margin:۵px ۲۰px 0px 0px;} ۲۰% {margin:۵px ۲۰px 0px 0px;} ۲۵% {margin:۵px ۲۰px 0px 0px;} ۳۰% {margin:۵px ۱۵۰px 0px 0px;} ۳۵% {margin:۵px ۱۵۰px 0px 0px;} ۴۰% {margin:۵px ۱۰۰px 0px 0px;} ۴۵% {margin:۵px ۱۵۰px 0px 0px;} ۵۰% {margin:۵px ۲۰۰px 0px 0px;} ۵۵% {margin:۵px ۲۰۰px 0px 0px;} ۶۰% {margin:۵px ۲۰۰px 0px 0px;} ۶۵% {margin:۵px ۲۰۰px 0px 0px;} ۷۰% {margin:۵px ۲۰px 0px 0px;} ۷۵% {margin:۵px ۲۰px 0px 0px;} ۸۰% {margin:۵px ۴۰px 0px 0px;} ۸۵% {margin:۵px ۴۰px 0px 0px;} ۹۰% {margin:۵px ۲۰px 0px 0px;} ۹۵% {margin:۵px ۵۰۰px 0px 0px;} } @-moz-keyframes plus2{ ۰% {margin:۵px ۵۰۰px 0px 0px;} ۵% {margin:۵px ۵۰۰px 0px 0px;} ۱۰% {margin:۵px ۲۰px 0px 0px;} ۱۵% {margin:۵px ۲۰px 0px 0px;} ۲۰% {margin:۵px ۲۰px 0px 0px;} ۲۵% {margin:۵px ۲۰px 0px 0px;} ۳۰% {margin:۵px ۱۵۰px 0px 0px;} ۳۵% {margin:۵px ۱۵۰px 0px 0px;} ۴۰% {margin:۵px ۱۰۰px 0px 0px;} ۴۵% {margin:۵px ۱۵۰px 0px 0px;} ۵۰% {margin:۵px ۲۰۰px 0px 0px;} ۵۵% {margin:۵px ۲۰۰px 0px 0px;} ۶۰% {margin:۵px ۲۰۰px 0px 0px;} ۶۵% {margin:۵px ۲۰۰px 0px 0px;} ۷۰% {margin:۵px ۲۰px 0px 0px;} ۷۵% {margin:۵px ۲۰px 0px 0px;} ۸۰% {margin:۵px ۴۰px 0px 0px;} ۸۵% {margin:۵px ۴۰px 0px 0px;} ۹۰% {margin:۵px ۲۰px 0px 0px;} ۹۵% {margin:۵px ۵۰۰px 0px 0px;} } |
[/codesyntax]
مشترک ها
ورود
0 Comments
مطالب مرتبط