Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.225.55.210
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Стильный вид ссылок в W/CSS
Сообщение оставлено 21.05.2011 в 10:16:35 | Сообщение #1

[Table]Красивый эффект плавно поворачивающий ссылки налево или направо. Чтоб улучшить эффект фоновый цвет ссылки изменяется. И на удивление это чудо основано только на свойствах CSS! [/Table]
Code

  a {  
    display: inline-block;  
    padding: 4px;  
    outline: 0;  
    color: #3a599d;  
    -webkit-transition-duration: 0.25s;  
    -moz-transition-duration: 0.25s;  
    -o-transition-duration: 0.25s;  
    transition-duration: 0.25s;  
    -webkit-transition-property: -webkit-transform;  
    -moz-transition-property: -moz-transform;  
    -o-transition-property: -o-transform;  
    transition-property: transform;  
    -webkit-transform: scale(1) rotate(0);  
    -moz-transform: scale(1) rotate(0);  
    -o-transform: scale(1) rotate(0);  
    transform: scale(1) rotate(0);  
  }  
  a:hover {  
    background: #3a599d;  
    text-decoration: none;  
    color: #fff;  
    -webkit-border-radius: 4px;  
    -moz-border-radius: 4px;  
    -o-border-radius: 4px;  
    border-radius: 4px;  
    -webkit-transform: scale(1.05) rotate(-1deg);  
    -moz-transform: scale(1.05) rotate(-1deg);  
    -o-transform: scale(1.05) rotate(-1deg);  
    transform: scale(1.05) rotate(-1deg);  
  }  
  a:nth-child(2n):hover {  
    -webkit-transform: scale(1.05) rotate(1deg);  
    -moz-transform: scale(1.05) rotate(1deg);  
    -o-transform: scale(1.05) rotate(1deg);  
    transform: scale(1.05) rotate(1deg);  
  }

Была использована функциональность каждого браузера (так как у каждого есть свой собственный префикс.) Продолжительность перехода установлена в 250 миллисекунд, и масштабирование/вращение установлено по умолчанию. Даже ссылки вращаются в различных сторонах, чтобы д

 
 
   
Сообщение оставлено 22.05.2011 в 00:10:05 | Сообщение #2
Quote (spayder)
установлена в 250 миллисекунд, и масштабирование/вращение установлено по умолчанию. Даже ссылки вращаются в различных сторонах, чтобы д

что д?? а так прикольно спс
 
 
   
Сообщение оставлено 22.05.2011 в 01:09:04 | Сообщение #3
на webo4ka такие название в каталоге файлов, но вот беда, надпись ВСЕХ браузеров в корне не верна, это последние версии CSS (вроде CSS 3), сглаживание углов и повороты ранее не использовались, а начит ИЕ 6 и браузеры его времени просто не поймут код.
 
   
Сообщение оставлено 01.06.2011 в 12:24:00 | Сообщение #4
да ну . . .не нрав!
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика