1. WARNING - This part of forum is for English language writed posts ONLY! Any other language isn't alowed! Please respect forum rules, otherwise, your posts will be deleted, and you will be warned, one time only!
  2. Мы продолжаем публиковать интересные статьи на тему SocialEngine 4. Одна из статей посвящена правильному выбору сервера для вашей социальной сети, а другая содержит советы по увеличению производительности платформы. Также мы добавили большую статью о пользовательских уровнях. Ознакомиться со статьями вы можете в разделе Вопросы и Ответы SocialEngine 4.

  3. Вам кажется, что ваша версия SocialEngine 4, работает медленно?

    Голосуйте. Пишите свою версию системы, железо на чем работает и количество пользователей. Будем увеличивать производительность :-) Подробнее

  4. В связи с участившимися случаями попыток продажи пользователями форума различных "сборок" коммерческих социальных платформ, обычно основанных на SocialEngine 3, вводится новое правило для форума. Запрещается создание тем или размещение в уже созданных предложений о продаже или размещение ссылок на сайты, где происходит продажа "сборок". Пользователи, которые продолжат свою коммерческую деятельность в данном направлении, будут заблокированы. Подробнее.
Use English language ONLY, please! Новые полезные статьи о SocialEngine 4 Ваш SocialEngine 4 медленно работает? Запрет на размещение информации о "Сборках"

CSS3 Animated Navigation Menu

Discussion in 'Plugins & Widgets' started by scupare, Jan 31, 2014.

  1. scupare Thread starter User


    Offline
    Message Count:
    8
    Likes Received:
    4
    My version of SE:
    4.6.0
    The CSS


    body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background:#545454; margin: 0; background:-webkit-gradient(linear, left top, right bottom, from(#545454), color-stop(.5, #7e7e7e), to(#545454)) fixed; background:-webkit-linear-gradient(45deg, #545454, #7e7e7e .5, #545454); background:-moz-linear-gradient(45deg, #545454, #7e7e7e .5, #545454); background:-o-linear-gradient(45deg, #545454, #7e7e7e .5, #545454); border-top:7px solid #52a8e8; text-shadow:0 0 3px rgba(0, 0, 0, 1); letter-spacing: 2px; font-size: 20px; } a { text-decoration:none; color:#fff; } header { width:850px; margin-left:auto; margin-right:auto; } header nav a { position:relative; float: left; width:150px; text-align:center; padding-top:23px; padding-bottom:30px; margin-right:20px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; background:#52a8e8; background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #4984ce)); background: -moz-linear-gradient(center top, #52a8e8 20%, #4984ce 100%); background: -o-linear-gradient(#52a8e8, #4984ce); } header nav a:hover { padding-top:53px; padding-bottom:60px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; }
    The HTML

    [IMG]

    <body> <header> <nav> <a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">WORK</a> <a href="#">CONTACT</a> <a href="#">BLOG</a> </nav> </header> </body>
    This entry was posted in CSS, HTML and tagged CSS. Bookmark thepermalink.

    Attached Files:

    scupare, Jan 31, 2014
    #1
    dreadfull_new and codeman like this.

  2. dreadfull_new Novice member


    Offline
    Message Count:
    1
    Likes Received:
    0
    My version of SE:
    4.6.0
    Really cool design! thx a lot
    dreadfull_new, Mar 31, 2015
    #2

Share This Page

All rights reserved SocEngine.ru ©