Fantastik Deluxe Duyuru Panosu Tasarımı

[KaanBey]

Yaklaşık yarım ila 1 saat arası bir süreçle hazırladığım fantastik duyuru panosu.

Görsel:


Global.css aç ve içine ekle

Kod: Tümünü Seç Tümünü Kopyala

/** Duyuru Panosu By KaanBey **/
.standardzone {
    /* Görünüm */
    background-color: #2ecc71;
    border-bottom: 4px solid #27ae60;
    border-radius: 3px;
    
    /* Pozisyon veya Positer */
    margin-bottom: auto;  
    height: 14px;
}

.block_textpositer {
    /* Pozisyon veya Positer */
    position: absolute;
    top: 3px;
    left: 6px;
}

.block_a {
    /* 1. Blok */
     /* Görünüm */
     background-color: #9b59b6;
     border-bottom: 4px solid #8e44ad;
     border-left: 1px solid #8e44ad;
     border-right: 1px solid #8e44ad;
     border-radius: 0px 0px 3px 3px;
    
     /* Pozisyon veya Positer */
     width: 250px;
     height: 85px;
     position: absolute;
     left: 126px;
    
     /* Metin ve Sözcük Grubu */
     color: #ecf0f1;
     text-shadow: 1px 1px 0px #2c3e50;
     font-family: Tahoma;
     font-size: 12px;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
    
.block_a:hover {
    /* Görünüm */
    background-color: #8e44ad;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.block_b {
    /* 2. Blok */
     /* Görünüm */
     background-color: #1abc9c;
     border-bottom: 4px solid #16a085;
     border-left: 1px solid #16a085;
     border-right: 1px solid #16a085;
     border-radius: 0px 0px 3px 3px;
    
     /* Pozisyon veya Positer */
     width: 250px;
     height: 85px;
     position: absolute;
     left: 393px;
    
     /* Metin ve Sözcük Grubu */
     color: #ecf0f1;
     text-shadow: 1px 1px 0px #2c3e50;
     font-family: Tahoma;
     font-size: 12px;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
    
.block_b:hover {
    /* Görünüm */
    background-color: #16a085;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
    
.block_c {
    /* 3. Blok */
     /* Görünüm */
     background-color: #f1c40f;
     border-bottom: 4px solid #f39c12;
     border-left: 1px solid #f39c12;
     border-right: 1px solid #f39c12;
     border-radius: 0px 0px 3px 3px;
    
     /* Pozisyon veya Positer */
     width: 250px;
     height: 85px;
     position: absolute;
     left: 706px;

     /* Metin ve Sözcük Grubu */
     color: #ecf0f1;
     text-shadow: 1px 1px 0px #2c3e50;
     font-family: Tahoma;
     font-size: 12px;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
    
.block_c:hover {
    /* Görünüm */
    background-color: #f39c12;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
    
.block_d {
    /* 4. Blok */
     /* Görünüm */
     background-color: #3498db;
     border-bottom: 4px solid #2980b9;
     border-left: 1px solid #2980b9;
     border-right: 1px solid #2980b9;
     border-radius: 0px 0px 3px 3px;
    
     /* Pozisyon veya Positer */
     width: 250px;
     height: 85px;
     position: absolute;
     left: 973px;

     /* Metin ve Sözcük Grubu */
     color: #ecf0f1;
     text-shadow: 1px 1px 0px #2c3e50;
     font-family: Tahoma;
     font-size: 12px;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
    
.block_d:hover {
    /* Görünüm */
    background-color: #2980b9;
    
    /* Hover Efekti */
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
/** Duyuru Panosu By KaanBey - SON **/

İndex şablonu aç ve içine ekle:

Kod: Tümünü Seç Tümünü Kopyala

<!-- KaanBey Deluxe Duyuru Panosu Tasarımı - Başla !-->
<div class="standardzone">
</div>
<div class="block_a">
    <div class="block_textpositer">
        <strong>
            Güncel Duyurular:
        </strong>
        <br>
        &nbsp; • Forum kurallarımız güncellenmiştir. Tüm üyelerimizin dikkatine.
        <br>
        &nbsp; • Yeni Yetkili Listemiz güncellenmiştir, mutlaka bakın !
    </div>
</div>

<div class="block_b">
    <div class="block_textpositer">
       <strong>
           Güncel Haberler:
       </strong>
        <br>
        &nbsp; • MyBB 2.0 Depoları sonunda halka açıldı ! Genel duyuru , [Bomba]
        <br>
        &nbsp; • HTML & CSS ile Hayallerinizi Grafiğe Dökün.. 3 satır ile !
    </div>
</div>
    
<div class="block_c">
    <div class="block_textpositer">
       <strong>
           Grafik & Tasarım
       </strong>
        <br>
        &nbsp; • KaanBey ModernV2 Postbit Kodlandı ! İçeri gel [Bomba]
        <br>
        &nbsp; • Promute Rank Seti Yayınlandı, Harika bir Tasarım
    </div>
</div>
    
<div class="block_d">
    <div class="block_textpositer">
       <strong>
           Kodlama
       </strong>
        <br>
        &nbsp; • KaanBey Bakımdayız İndexi Tamamlandı !
        <br>
        &nbsp; • KaanBey Deluxe Duyuru Panosu Tamamlandı !
    </div>
</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
<!-- KaanBey Deluxe Duyuru Panosu Tasarımı - Bitiş !-->

Teşekkürler.
Hoşçakalın.

[#Pirate]

Elinize Saglik Size Bir Tavsiye Vermek Istiyorum Böyle Kodlama Yapinca Caps Yani Resim Eklemende Iyi Olur. Konun Daha Kaliteli Gözükür Hemde Kullananacaklar Kararlarini Daha Cabuk Verebilirler.

NOT. Ben Yazarken Eklenmis.

[KaanBey]

Elinize Saglik Size Bir Tavsiye Vermek Istiyorum Böyle Kodlama Yapinca Caps Yani Resim Eklemende Iyi Olur. Konun Daha Kaliteli Gözükür Hemde Kullananacaklar Kararlarini Daha Cabuk Verebilirler.

Eklemiştim zaten, hatalı çıktı 2 dakikalığına düzelttim.
Teşekkürler.

[KaanBey]

Güncel.

[abdullahozturk]

Ellerine sağlık, flat renkleri severim.

[KaanBey]

Teşekkür ederim. :)