Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Блок "Поделится в соц. сетях" для uCoz

    Дата добавления: 20.09.2013 - 20:33
    Добавил: Buger
    Количество просмотров: 2.6k
    Количество комментариев: 0
    Размер файла: 76.8 Kb
    Рейтинг материала: 0.0 / 0
    Блок "Поделится в соц. сетях" для uCoz
    рейтинг 0.0
    /
    голосов 0
    Блок "Поделится в соц. сетях". Красиво выполненный скрипт, который установить себе дело несколько минут. Вообщем скрипт очень удобный, с легкостью подойдет под любой диз. В архиве содержится: картинки, css, демо.

    HTML
    Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 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> 
    <a href="#" class="link"> 
    <div class="submenu"> 
    <label for="1">URL:</label> 
    <input type="text" value='$HOME_PAGE_LINK$' id="1" uzzonclick="select(this);" readonly> 
    <label for="2">HTML:</label> 
    <input type="text" value='<a href="$HOME_PAGE_LINK$">$SITE_NAME$</a>' id="2" uzzonclick="select(this);" readonly> 
    <label for="3">BB code:</label> 
    <input type="text" value='$SITE_NAME$' 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('../img/google.png'); 
     } 
    
     .facebook { 
    background: url('../img/facebook.png'); 
     } 
    
     .vk { 
    background: url('../img/vk.png'); 
     } 
    
     .twitter { 
    background: url('../img/twitter.png'); 
     } 
    
     .link { 
    background: url('../img/link.png'); 
     }



    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: