حالت موضوعی | حالت خطی

**memare-ahvaz**

درود
آقا کسی میدونه چطوری باید یک بنری که با css3 نوشته شده رو در موقعیت ماژول جوملا نشون بدیم؟
فایل رو هم ضمیمه میکنم

انصافا خیلی جالبه
با کمی تغییر میتونید برای خودتون استفاده کنید

**ehsansabet**

سلام!
به نظر منم جالب بود.
منطقی ترین راه اینه ، که : یه ماژول دستی html درست کنید و در قسمت کدنویسی کل کد این فایل html رو کپی کنی!
البته پیشنهاد میکنم ادیتور پیشفرض رو به noeditor تغییر بده. معمولا وقتی html دستی میخوای بزاری این ادیتورهای دیگه خیلی خوب جواب نمیده.
بازم تشکر میکنم ، فایل جالبی بود. Rose

**memare-ahvaz**

من این کارو انجام دادم اما نمایش داده نمیشه

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

ببینید چطوری نمایش داده میشه

**ehsansabet**

من الان دمو رو چک کردم، این کدهای css رو داخل template.css اضافه کن ببین درست میشه؟!

کد: (انتخاب همه)

#dl2{

  display:block;

  font-family: "B Yekan",Arial, Helvetica, Sans-Serif;

  padding: 10px 20px 10px 20px;

  margin:5px;

  background-image:url('http://www.4design.in/wp-content/uploads/DIRT2DEATHfont.jpg');

  background-color:#0b121b;

  background-repeat:repeat;

  background-position:right center;

  -webkit-border-radius:7px;

  -moz-border-radius:7px;

  border-radius:7px;

  width:468px;

  height:60px; 

  box-shadow: 0px 0px 5px 1px #3A3A3A;

  text-shadow: 0 0px 2px #726169;

  border: 2px solid #fe0072;

  overflow:hidden;

  color:#fff;

   }

   #dl2 ul.dl{

    width:210px;

    margin: -10px 80px 0px 100px;

    list-style:none;

}

   #dl2 ul.dl li{

   display:block;

    background: #fe0072;

    color: #fff;

    text-shadow: 0 1px 0 #363636;

    border-radius:0px 0px 5px 5px;

    box-shadow: 0px 0px 5px 1px #3A3A3A;

    padding: 5px;

    width:200px;

    text-align:center;

    font-size:0px;

}

#dl2 a{

    text-decoration:none;

    color:#000;

    -webkit-transition:all 0.5s ease-in;

    -moz-transition:all 0.5s ease-in;

    -o-transition:all 0.5s ease-in;

    transition:all 0.5s ease-in;

}

#dl2 a:hover{

    color: transparent;

    text-shadow: 0px 0px 2px #c5e4f4;

    -moz-transition: all 200ms linear;

    -o-transition: all 200ms linear;

    -ms-transition: all 200ms linear;

    transition: all 200ms linear;

    -webkit-transition:all 0.5s ease-in;

    -moz-transition:all 0.5s ease-in;

    -o-transition:all 0.5s ease-in;

    transition:all 0.5s ease-in;

}

#my_banner{

animation:my_banner 5s infinite;

-moz-animation:my_banner 5s infinite;

-webkit-animation:my_banner 5s infinite;

font-size:18px;

float:right;

}

@keyframes my_banner{

0%        {}

10%        {}

20%     {transform: scale(2);}

30%        {filter:alpha(opacity=0);opacity:0;}

40%     {transform: scale(2) rotate(360deg);}

50%     {transform: scale(2) rotate(-360deg);}

60%        {padding: 0px 80px 0px 0px;}

70%        {transform: scale(2);}

80%        {padding: 0px 70px 0px 0px;}

90%        {transform: scale(2);}

}

@-webkit-keyframes my_banner{

0%        {}

10%        {}

20%     {-webkit-transform: scale(2);}

30%        {filter:alpha(opacity=0);opacity:0;}

40%     {-webkit-transform: scale(2) rotate(360deg);}

50%     {-webkit-transform: scale(2) rotate(-360deg);}

60%        {padding: 0px 80px 0px 0px;}

70%        {-webkit-transform: scale(2);}

80%        {padding: 0px 70px 0px 0px;}

90%        {-webkit-transform: scale(2);}

}

@-moz-keyframes my_banner{

0%        {}

10%        {}

20%     {-moz-transform: scale(2);}

30%        {filter:alpha(opacity=0);opacity:0;}

40%     {-moz-transform: scale(2) rotate(360deg);}

50%     {-moz-transform: scale(2) rotate(-360deg);}

60%        {padding: 0px 80px 0px 0px;}

70%        {-moz-transform: scale(2);}

80%        {padding: 0px 70px 0px 0px;}

90%        {-moz-transform: scale(2);}

}

#my_banner1{

animation:my_banner1 5s infinite;

-moz-animation:my_banner1 5s infinite;

-webkit-animation:my_banner1 5s infinite;

font-size:18px;

float:left;

text-shadow: 0 0px 5px #000;

margin:-15px 0 0 0;

padding:5px;

}

@keyframes my_banner1{

0%        {}

10%        {}

20%     {margin:-15px 0px 0px -190px;}

30%        {margin:-15px 0px 0px -190px;}

40%     {}

50%     {}

60%        {margin:-15px 0px 0px -190px;}

70%        {}

80%        {}

90%        {}

}

@-webkit-keyframes my_banner1{

0%        {}

10%        {}

20%     {margin:-15px 0px 0px -190px;}

30%        {margin:-15px 0px 0px -190px;}

40%     {}

50%     {}

60%        {margin:-15px 0px 0px -190px;}

70%        {}

80%        {}

90%        {}

}

@-moz-keyframes my_banner1{

0%        {}

10%        {}

20%     {margin:-15px 0px 0px -190px;}

30%        {margin:-15px 0px 0px -190px;}

40%     {}

50%     {}

60%        {margin:-15px 0px 0px -190px;}

70%        {}

80%        {}

90%        {}

}

**memare-ahvaz**

کاری رو که گفتین رو انجام دادم و درست شد.
خیلی سپاسگذارم

فقط 1 مشکل داره که در IE9 و opera متن ها ثابت هستند.....

چیکار باید بکنم؟

**gogerd**

چجوری میشه شخصیش کنی؟
متون رو عوض کنی؟

**ehsansabet**

این یه کد html هستش راحت با یه برنامه ای مثل notpad بازش کن و متن هاش رو تغییر بده. فقط حواست باشه که اشتباهی تگی رو پاک نکنی که بهم بریزه.

**gogerd**

خیلی جالب بود!
ممنون
طرحش رو هم میشه عوض کرد؟
یا افکتش رو؟

**memare-ahvaz**

درود

همه کاری میشه انجام داد،منتها باید css بلد باشی

**gogerd**

نمیشه قسمتهای اصلی رو که بلدی شما بگی که عوض کنیم طرحش یه تغییری بکنه؟