MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
Ripbyrustavi02 avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

CSS3 sıralı liste oluşturun


Sponsor Reklam
media venus

Çevrimdışı Ripbyrustavi02
 Tarih: 01-09-2013, Saat:14:31
#1
Merhaba arkadaşlar bugün sizlere sıralı liste oluşturmayı göstericem ilk olarak görüntüsünü vereyim
resim


Başlıyalım nedersiniz Göz kırpma

Görüntü:
resim

admin kp -> şablon stil -> temanız -> global.css -> gelişmiş mod en alta ekleyin.

Kod:
.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;    
}

.rounded-list a:hover{
    background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);    
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;    
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

buda html kodumuz index veya headere ekleyebilirsiniz.
Kod:
<ol class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ol>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>                        
</ol>

Kırmızı Sıralı Liste Versyon

resim

global.css ekleyin.
Kod:
.rectangle-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;    
}

.rectangle-list a:hover{
    background: #eee;
}    

.rectangle-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;    
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

.rectangle-list a:after{
    position: absolute;    
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;                
}

.rectangle-list a:hover:after{
    left: -.5em;
    border-left-color: #fa8072;                
}


buda html header veya indexe eklenecek
Kod:
<ol class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ol>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>                        
</ol>


Birazdaha değişik versyonu

bu birazdaha değişik
resim
Kod:
.circle-list li{
    padding: 2.5em;
    border-bottom: 1px dashed #ccc;
}

.circle-list h2{
    position: relative;
    margin: 0;
}

.circle-list p{
    margin: 0;
}

.circle-list h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;    
    z-index: -1;
    left: -1.3em;
    top: -.8em;
    background: #f5f5f5;
    height: 1.5em;
    width: 1.5em;
    border: .1em solid rgba(0,0,0,.05);
    text-align: center;
    font: italic bold 1em/1.5em Georgia, Serif;
    color: #ccc;
    border-radius: 1.5em;
    transition: all .2s ease-out;    
}

.circle-list li:hover h2:before{
    background-color: #ffd797;
    border-color: rgba(0,0,0,.08);
    border-width: .2em;
    color: #444;
    transform: scale(1.5);
}

Buda html Gülümseme

Kod:
<ol class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ol>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>                        
</ol>
Cevapla
Bunu Beğenenler:
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı crus68
 Tarih: 01-09-2013, Saat:14:42
#2
bunun örneği nerde resimden ben bişe anlamadım ya sadece 1-2-3 yazan yerlere daire mi ekliyor ? bunu mykoda aktarılırsa listleme yerine kullanılılabilir.
Cevapla
Bunu Beğenenler:

 




Konuyu Okuyanlar: 1 Ziyaretçi