Понедельник, 23.10.2017, 03:41
Приветствую Вас Гость | RSS
moymult-fon-image_1 moymult-fon-image_2-1
Русские

Советские мультфильмы

Российские мультфильмы

Российские мультсериалы

Зарубежные

Зарубежные мультфильмы

Зарубежные мультсериалы

Развивающее видео

Методика Г. Домана

Методика Е. Железновой

Методика М. Монтессори

Беби Эйнштейн /Baby Einstein

Бэби Гурман / Baby Gurmet

Baby 2

Hello, Kitty!

Гениальный ребенок / Brainy baby

Fisher Price Baby Collection

Классический ребенок /Classical baby

Я все могу

Профессор Карапуз

Умный ребенок / BABY IQ

ДиВиДи МЭДЖИК / DVD MAGIQ TINY LOVE

Nick Jr Baby Curious Buddies

Школа раннего развития

Малыш Гений / Baby Genius

Учимся с Хрюшей и...

Забавная математика для малышей

Телепузики / Teletabbies

Детские телепередачи

Еще из раздела "Развивающее видео"

Фильмы

BBC. Твои веселые друзья зверята

BBC. Прогулки с динозаврами

Фильмы для детей

Разное для детей

Программы и игры (PC)

Интерактивные DVD (игры для DVD-плеера)

Песни и музыка для детей

Детские аудиокниги

Стихи

Книги, журналы, раскраски для детей

Школьные учебники и пособия

Для мобилки и КПК

Видео и мультфильмы для телефонов, iPod, iPhone

Игры для телефонов, iPod, iPhone

Книги для телефонов, iPod, iPhone

Для мам, пап, бабушек, дедушек, тетей и дядей и не только...

Книги взрослым о детях

Книги взрослым о взрослых

Музыка для взрослых

Программы, игры для взрослых

Главная » 2013 » Июль » 21 » БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
15:01
БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
И так начнем
Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 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" uzzonclick="select(this);" readonly>  
  <label for="2">HTML:</label>  
  <input type="text" value='<a href="http://mysite.com/">mysite.com</a>' id="2" uzzonclick="select(this);" readonly>  
  <label for="3">BB code:</label>  
  <input type="text" value='mysite.com' id="3" uzzonclick="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), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
Просмотров: 1981 | Добавил: greenpis | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Популярные мультфильмы

Адибу: Невероятные приключения в теле человека / Adiboo Adventure

Букашки / Minuscule

Веселая радуга

Веселый счет/ Zumbers

Веселые паровозики из Чаггингтона

Волшебные путешествия Тепы

Гора самоцветов

Гуппи и Пузырики / Bubble Guppies

Даша Следопыт / Dora the Explorer

Диего, вперед! / Do, Diego, Go!

Доктор Плюшева / Doc McStuffins

Загадки Джесса / Guess with Jess

Как научить крокодила хорошим манерам

Клуб Микки Мауса / Mickey Mouse Clubhouse

Команда Умизуми / Team Umizoomi

Крот / Krtek (62 серии)

Лентяево / LazyTown. Сезоны 1,2

Маленькие Эйнштейны / Disney's Little Einsteins

Перекресток в джунглях / Jungle Junction

Пингу / Pingu

Приключения в Изумрудном городе

Сельские хлопоты / Macdonald's Farm

ТуТиТу / TuTiTu. Сезоны 1-3

Уроки тетушки Совы

Шарлотта Земляничка / Strawberry Shortcake

Новое на сайте
Первый звонок  / Стольниц М.  / 1964Первый звонок / Стольниц М. / 1964
     
Стихи русских поэтов  / Коллектив  / 2005Стихи русских поэтов / Коллектив / 2005
     
Настольные логопедические игры-занятия для детей 5-7 лет Ильякова Н.Е.Настольные логопедические игры-занятия для детей 5-7 лет Ильякова Н.Е.
     
Логопедия для дошкольников. В 4-х альбомах. Зуева Л.Н. и др.Логопедия для дошкольников. В 4-х альбомах. Зуева Л.Н. и др.
     
Уроки логопеда. Жукова Н.Уроки логопеда. Жукова Н.
     
Игры, загадки, стихи и скороговорки для развития речи. Трясорукова Т.П.Игры, загадки, стихи и скороговорки для развития речи. Трясорукова Т.П.
     
Легкий способ научиться правильно говорить и писать. Дефекты произношения. Дислексия. Дисграфия. Парамонова Л.Г.Легкий способ научиться правильно говорить и писать. Дефекты произношения. Дислексия. Дисграфия. Парамонова Л.Г.
     


 
Все файлы, размещенные на сайте Moymult.ru найдены в интернете в свободном доступе или присланы пользователями сайта и представлены исключительно с целью предварительного ознакомления без преследования коммерческой выгоды. Любое коммерческое и иное использование, кроме ознакомления, запрещено. 

Уважаемым авторам и владельцам авторских прав:

Если распространение какого-либо материала через наш сайт ущемляет Ваши авторские права, пожалуйста, сообщите администрации сайта об этом через "обратную связь", и ссылки для скачивания будут незамедлительно удалены
 
Яндекс.Метрика