3D vertical navigation

Yine mükemmel  ötesi  bir çalışma ile karşınızdayız. Stil dosyalarındaki çalışmalar ile her geçen sene daha değişik örnekler  çıkaran kişiler zaman zaman düşüncelerini ve bilgilerini zorlayarak çok acayip işler başarabiliyorlar.

Bahsettiklerim bu örnek için değil aslında. Bir  önceki yazımız ve benzerleri hakkındaydı.  İlk bakışta çok zor ve karmaşık gibi  görünse de aslında oldukça basit  bir örnek ve orjinali 45 derece eğik bir konumdaydı. Birkaç ufak değişiklik yaparak dikey olarak kullanılabilir  hale getirdim. Sitenizin üst kısmında kullanmak için biraz daha değişiklik yapmanız gerek ama yan taraflarda kullanmak istiyorsanız pek bir değişiklik yapmanıza gerek yok. Olduğu gibi sitenize yerleştirebilirsiniz.

Bu örneğimiz tamamen Css kullanılarak yapılmış. En önemli özellikleri de rotate, skew  ve transform kullanılması ayrıca örnekte kullanılan renkler de çok güzel görünüyor. Turuncu, beyaz, siyah ve açık gri tonlarının birleşiminden oluşmuş.

Dört köşeli butonlardaki küçük ikonlar da resim değil ikonik fontlar kullanılarak yapılmış. FontAwesome (yeni sekmede açılır) sayfasından kendi siteniz için uygun ikonları seçip bu örneğe kolayca ekleyebilirsiniz.

Tek yapmanız gereke <li> </li>  arasındaki <i ile başlayan yere linkteki ikonlardan birini eklemek.

Örnek kod, burada icon-recorder kullanılmış.

<i class='icon-reorder'></i>

İkon ve reset.css adresleri:

    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>

Stil dosyası:

        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }
        
        html,
        body {
            width: 100%;
            height: 98%;
        }
        
        body {}
        
        .clearfix {
            zoom: 1;
        }
        
        .clearfix:before,
        .clearfix:after {
            content: "\0020";
            display: block;
            height: 0;
            overflow: hidden;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        ul {
            position: relative;
            margin: 10px auto;
            width: 4em;
        }
        
        .list-item {
            background: #000;
            color: #575757;
            text-align: center;
            height: 2.5em;
            width: 4em;
            vertical-align: middle;
            line-height: 2.5em;
            border-bottom: 1px solid #060606;
            position: relative;
            display: block;
            text-decoration: none;
            box-shadow: -2em 1.5em 0 #e1e1e1;
            -webkit-transition: all .25s linear;
            transition: all .25s linear;
        }
        
        .list-item:hover {
            background: #ff6e42;
            color: #fffcfb;
            -webkit-transform: translate(0.9em, -0.9em);
            transform: translate(0.9em, -0.9em);
            -webkit-transition: all .25s linear;
            transition: all .25s linear;
            box-shadow: -2em 2em 0 #e1e1e1;
        }
        
        .list-item:hover:before,
        .list-item:hover:after {
            -webkit-transition: all .25s linear;
            transition: all .25s linear;
        }
        
        .list-item:hover:before {
            background: #b65234;
            width: 1em;
            top: .5em;
            left: -1em;
        }
        
        .list-item:hover:after {
            background: #b65234;
            width: 1em;
            bottom: -2.5em;
            left: 1em;
            height: 4em;
        }
        
        .list-item:before,
        .list-item:after {
            content: '';
            position: absolute;
            -webkit-transition: all .25s linear;
            transition: all .25s linear;
            width: .5em;
        }
        
        .list-item:after {
            height: 4em;
            background: #181818;
            bottom: -2.25em;
            left: 1.5em;
            -webkit-transform: rotate(90deg) skew(0, 45deg);
            transform: rotate(90deg) skew(0, 45deg);
        }
        
        .list-item:before {
            height: 2.5em;
            background: #121212;
            top: .25em;
            left: -.5em;
            -webkit-transform: skewY(-45deg);
            transform: skewY(-45deg);
        }

Html:

   <ul>
        <li>
            <a class='list-item' href=''>
                <i class='icon-reorder'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-th-large'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-bar-chart'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-tasks'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-bell'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-archive'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-comment'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-sitemap'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-thumbs-up'></i>
            </a>
        </li>
        <li>
            <a class='list-item' href=''>
                <i class='icon-tumblr'></i>
            </a>
        </li>
    </ul>