Menubar Animation Effect In CSS – Aptana Studio 3 Turkish Tutorial

in utopian-io •  7 years ago  (edited)

** In this Aptana Studio 3 Turkish Tutorial, I will show you make menubar animation effect with CSS. Each site has a different menu structure in web site designs. You will find some practical information on this video.**

Aptana Studio 3 programın da bugün menübarlarınızda kullanabileceğiniz kolay ve güzel bir animasyon yapımını göstereceğim. Her site farklı animasyon ve tarzda menü kullandığı için çok fazla animasyona ihtiyaç duyulmaktadır. Bunlardan birkısmını fırsat buldukça gösterceğim.



Source

** Farklı bir yöntem izleyerek tek sayfada sizlere animasyonun kodlarını gösterdim. Dilerseniz gerekli yerlerden kopyalayıp blog yada sitelerinize uygulayabilirsiniz. Hadi videoya başlayalım.**


MENUBAR EFFECT

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{ background-image: url(arka.jpg); margin: 0px; position:absolute;}
div#menubar1{
    padding: 24px;
    border: #999 1px dashed;

}
div#menubar1 > a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    background: #333;
    padding: 12px 24px;
    color: #999;
    margin-left: 10px;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar1 > a:hover
{
    background: #6f8a00;
    color: #fff;
}           
        </style>
    </head>
    
    <body background="arka.jpeg">
        
        <div id="menubar1">
            <a href="#">HOME</a>
            <a href="#">SUPPORT</a>
            <a href="#">ABOUT</a>
            <a href="#">DOWNLOAD</a>
            <a href="#">CONTACT</a>
        </div>
        
        
    </body>
</html>

Bir sonraki aşamada görüşmek üzere…

Githup link: Aptana Studio 3

İndirme Link Sitesi: Aptana Studio 3



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

güzel olmuş ellerine sağlık hocam

Teşekkürler sağolun...

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thank you for return

Congratulations @tarikhakan55! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

You published a post every day of the week

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Başarılı çalışmalardan 1 tanesi daha eline sağlık.

Teşekkürler

Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x