CSS3 ile Yavaş Geçişli Animasyon Yapımı

Bu derste icon kullanak hazırlanan animasyon şeklinde açılır liste menüler oluşturmayı öğrenelim.

Bu derste icon kullanak hazırlanan animasyon şeklinde açılır liste menüler oluşturmayı öğrenelim.



HTML:


<ul class="menu">

    <li class="ps"><a href="#"><span>Photoshop</span></a></li>

    <li class="fl"><a href="#"><span>Flash</span></a></li>

</ul>


Burada bilmediğiniz bir kod yok sanırım... Basit html kodları ile liste hazırladık...

CSS

ul.menu {list-style:none;}



ul.menu li {height: 48px; width: 48px;}



ul.menu li a {  color: #64645D;

    padding: 0 0 25px 45px;

    text-decoration: none;

    font-family: arial;

    font-size: 17px;}


Basit css biçimlendirmesi yaptık.

.menu  span {

    overflow: hidden;

    position: absolute;

    left: 45px;

    top: 9px;

    transition: all 0.30s ease 0s;

    white-space: nowrap;

    width: 0; }



span etiketini overflow özelliği ile gizledik, position:absolute özelliği ile yazının iconun sağ kısmına doğru kaymasını sağladık. transition özelliği ise hover özelliğinden normal görünüme geçişte yavaş bir efekt ile geçmesini sağlar... nowrap özelliği ise kelimelerin bir aşağı satıra inmemesi için.


.ps {    background: url("ps.png") no-repeat scroll 0 0 transparent;

    position: relative;}

    

.ps span {

    background-color: #00ACED;

    color: #FFFFFF;

    padding: 5px 0;}


Yukarı daki kod ile açılacak alanın icon ile uyumlu olması için arkaplan rengini ayarladık.


.fl {

    background: url("fl.png") no-repeat scroll 0 0 transparent;

    position: relative; }

    

.fl span {

    background-color: #FF3A46;

    color: #FFFFFF;

    padding: 5px 0;}


Aynı şekilde flash iconuna da arkaplanı ekledik. konumlandırma için relative özelliğini kullandık ki span etiketini kullandığımızda burayı referans alsın!

.menu  a:hover span {

    overflow: visible;

    padding: 5px 20px;

    width: auto;}



Ve son olarak hover özelliğinin aktifleşmesiyle span etiketi sağa doğru açılıyor...

Biraz acemice anlatım oldu sanırım aklınıza takılan bir şey olursa yorum kısmından sorabilirsiniz...
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git