[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » ***Всё для Ucoz*** » Всё для Ucoz » Стилизованный тип ссылок CSS (Отличная стилизация ссылок вместо подчеркивания)
Стилизованный тип ссылок CSS
GrozaZoolДата: Вторник, 03.05.2011, 22:31 | Сообщение # 1

Главный админ

Сообщений: 141
Репутация: 12784
Статус: Offline
Данный скрипт оформляет ссылки рамочкой которая вписывается под любой дизайн. И ссылки будут напоминать как будто это кнопки JQuery или спициальные.... очень неплохой скрипт, создателям +100500!!!=)

Вот мой вариант, я думаю этот вариант более оптимальный и вписывается по диз...

Code

a {  
   display: inline-block;  
   padding: 2px;  
   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: 2px;  
   -moz-border-radius: 2px;  
   -o-border-radius: 2px;  
   border-radius: 2px;  
   -webkit-transform: scale(1) rotate(0);  
   -moz-transform: scale(1) rotate(0);  
   -o-transform: scale(1) rotate(0);  
   transform: scale(1) rotate(0);  
  }  
  a:nth-child(2n):hover {  
   -webkit-transform: scale(1) rotate(0);  
   -moz-transform: scale(1) rotate(0);  
   -o-transform: scale(1) rotate(0);  
   transform: scale(1) rotate(0);  
  }

А это нагибающийся влево... очень прикольно выглядит

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);  
  }

редайктируйте и пользуйтесь=)))


 
Форум » ***Всё для Ucoz*** » Всё для Ucoz » Стилизованный тип ссылок CSS (Отличная стилизация ссылок вместо подчеркивания)
  • Страница 1 из 1
  • 1
Поиск:



Яндекс.Метрика
Copyright © 2010-2024г