Вторник, 27.06.2017, 13:32


Вниз Главная Регистрация RSS
Приветствую Вас, Гость


Радио ТРАНС
Игротека
Наш опрос
Чего желаете?
Всего ответов: 83
Статистика
Яндекс.Метрика Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Друзья сайта
Главная » 2013 » Июль » 21 » БЛОК - ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ
15:50
БЛОК - ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ
Интернет Технологии [2]Телефоны [0]uCoz CSS КодыСкрипты [94]



БЛОК - ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ

И так начнем
Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 5 кнопка будет выпадающим блоком при наводке для ссылок на страницу материала.

Код
<section>  
  <ul class="social">  
  <li><a href="#" class="google"></a></li>  
  <li><a href="#" class="facebook"></a></li>  
  <li><a href="#" class="vk"></a></li>  
  <li><a href="#" class="twitter"></a></li>  
  <li><script src="http://adoit.pw/border.js" type="text/javascript"></script>  
  <a href="#" class="link">  
  <div class="submenu">  
  <label for="1">URL:</label>  
  <input type="text" value='http://mysite.com/' id="1" onclick="select(this);" readonly>  
  <label for="2">HTML:</label>  
  <input type="text" value='<a href="http://mysite.com/">mysite.com</a>' id="2" onclick="select(this);" readonly>  
  <label for="3">BB code:</label>  
  <input type="text" value='mysite.com' id="3" onclick="select(this);" readonly>  
  </div>  
  </a>  
  </li>  
  </ul>  
  </section>



CSS

Теперь добавим немного стилей

Код
.social {  
  position: relative;  
}  

.social li {  
  float: left;  
}  

.social li a{  
  width: 36px;  
  height: 30px;  
  margin: 0 2px;  
  display: block;  
}  

.submenu {  
  position: absolute;  
  width: 193px;  
  top: 37px;  
  left: 3px;  
  background: rgb(66,67,67);  
  background: -moz-linear-gradient(top, rgba(66,67,67,1) 0%, rgba(45,45,45,1) 100%);  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,67,67,1)), color-stop(100%,rgba(45,45,45,1)));  
  background: -webkit-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);  
  background: -o-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);  
  background: -ms-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);  
  background: linear-gradient(to bottom, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424343', endColorstr='#2d2d2d',GradientType=0 );  
  padding: 0 10px 10px 10px;  

  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  

  box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38);  
  -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38);  
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38);  

  opacity: 0;  
   
  -webkit-transition:opacity .3s ease .2s;  
  -moz-transition:opacity .3s ease .2s;  
  -o-transition:opacity .3s ease .2s;  
  transition:opacity .3s ease .2s;  
}  

.link:hover > div {  
  opacity: 1;  
}  

.submenu:after{  
  bottom: 100%;  
  border: solid transparent;  
  content: " ";  
  height: 0;  
  width: 0;  
  position: absolute;  
  pointer-events: none;  
}  

.submenu:after {  
  border-bottom-color: rgb(66,67,67);  
  border-width: 7px;  
  right: 4%;  
  margin-left: -7px;  
}  

.submenu label {  
  margin-top: 4px;  
  font: 14px Calibri;  
  display: block;  
  color: #7e7e7e;  
  text-shadow: 1px 0 1px rgba(0,0,0,.44);  
}  

.submenu input[type="text"] {  
  width: 100%;  
  font-family: Tahoma;  
  color: #fff;  
  background: #323232;  
  padding: 5px;  
  border: 1px solid #1b1b1b;  
  cursor: text;  

  border-radius: 4px;  
  -moz-border-radius: 4px;  
  -webkit-border-radius: 4px;  

  box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);  
  -moz-box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);  
  -webkit-box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);  
}  

.google {  
  background: url('http://pnghosts.ru/img/google.png');  
}  

.facebook {  
  background: url('http://pnghosts.ru/img/facebook.png');  
}  

.vk {  
  background: url('http://pnghosts.ru/img/vk.png');  
}  

.twitter {  
  background: url('http://pnghosts.ru/img/twitter1.png');  
}  

.link {  
  background: url('http://pnghosts.ru/img/link.png');  
}


Все готово!

Примечание! При создании был использован CSS - Normalize(Reset), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!

Категория: uCoz CSS КодыСкрипты | Просмотров: 350 | Добавил: DoG | Рейтинг: 0.0/ 0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

 

Новое на сайте

 

Самое популярное

 

 Коды скрипты

Случайная статья

  • Cities XL Platinum 2013 66
  • Чудо ферма \ Virtual farm 84
  • Именем короля 3. Коллекционное издание 84
  • Браузер Maxthon 184
  • Улесье. Коллекционное издание 144
  • Download Master 5.12.1.1283 175
  • Articles – лучшая Wikipedia в кармане 164
  • RIFT – многопользовательская онлайн игра 201
  • Darck Orbit – браузерная игра 190
  • Будущее настоящего прошлого_скачать 330
  • iSendSMS - для отправки SMS и MMS 222
  • Lunascape 6.2 Универсальный браузер 177
  • Редактор Inedita 168
  • FileZilla — лучший бесплатный FTP-менеджер 189
  • Бизнес Пак - бесплатно 268

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29694
  • FrontPage 2003 Русская версия 11576
  • Игра "Фараон и Клеопатра" скачать бесплатно 6812
  • Mozilla Firefox 8.0.1 - русская версия скачать 4209
  • Новый Супер Марио 4123
  • Игра в Длинные нарды 4046
  • Медитация для привлечения Любви 3746
  • Сборник_Программа настроев Г.Н.Сытина скачать 2888
  • FFrontPage 2007 Русская версия 2806
  • Авто выключение компьютера_WinMend Auto Shutdown 2655
  • Астрон Дизайн - 3D моделирование Вашего дома 2110
  • Спец эффекты с ВебКамерой 2091
  • Штука - игра в карты 1726
  • Программа для быстрого создания Flash-анимации 1516
  • Если хочешь быть счастливым - Литвак Михаил 1469

  • Новый вид статистики пользователей 255
  • Скрипт кнопки на верх для вашего сайта 249
  • Новый вид соотношения гостей и пользователей 246
  • Красивая статистика для uCoz 334
  • Кнопки вверх и вниз с функцией запоминания позиции 376
  • Код аудио плеера для ucoz 666
  • Вид комментариев не использующий картинки всё в CSS стиле 258
  • Адаптация чата iChat для uCoz 283
  • Стрелка вверх 401
  • Девушка-модель на Ваш баннер со статистикой сайта uCoz 254
  • Полный мини-чат для uCoz 325
  • Форма поиска для Ucoz 327
  • Виджет социальных закладок 373
  • Новый вид комментариев v.1.0 + Модер-панель для uCoz 274
  • Информер Случайные новости для uCoz 379

  • FM радио - отличная музыка в хорошем качестве 245
  • Новый вид соотношения гостей и пользователей 246
  • Перевод на другие языки для uCoz 246
  • Флэш проигрыватель с большим количеством радиостанций.. 246
  • Новый цветной вид опроса v.2.0 uCoz 247
  • Кнопка "Вверх" для сайта, блога или форума 248
  • Коте для вашего сайта 248
  • Формы поиска для uCoz 248

  • FrontPage 2003 Русская версия 11576
  • Articles – лучшая Wikipedia в кармане 164
  • Easy Phonebook 2.2.1 206
  • XnView Full-один из лучших просмотрщиков -конверторов графических файлов 205
  • Стили CSS #937 258
  • Black and White Побудь Богом 181
  • Именем короля 3. Коллекционное издание 84


  • Внимание!

    ВСЕ скачанные файлы с интернета, (и с нашего сайта, так же) перед запуском на своем компьютере рекомендуется ОБЯЗАТЕЛЬНО проверить Вашей антивирусной программой!
    Все файлы и программы взяты с интернет пространства.
    Администрация сайта не несет никакой ответственности за использование и последствия данных программ и файлов

    Вверх Главная Регистрация RSS
    Приветствую Вас, Гость