Чтение RSS
По вопросам сотрудничества и рекламы на портале MixliP, обращаться на почту admin@turklib.ru
MixliP - Территория вебмастера! На нашем сайте вы найдете все для веб-мастеров и не только =) ! Различные скрипты для вашего сайта. И еще на нашем сайте немало софта! Заходи не пожалеешь!


КНОПКИ С ЭФФЕКТАМИ CSS3

КНОПКИ С ЭФФЕКТАМИ CSS3

Двенадцать иконок с различными CSS3 эффектами, которые можно взять себе на вооружение. Болшинство эффектов будет работать в большинстве современных браузеров.
КНОПКИ С ЭФФЕКТАМИ CSS3

Разметка сразу всех 12 кнопок. Как видим у всех имеется один общий класс button_base, отличия заключены в дополнительный класс, кратко характеризующий вызываемый им CSS3 эффект:
<div class="button_base b01_simple_rollover">Кнопка</div>
 
<div class="button_base b02_slide_in">
    <div>Кнопка</div>
    <div></div>
    <div>Кнопка</div>
</div>
 
<div class="button_base b03_skewed_slide_in">
    <div>Кнопка</div>
    <div></div>
    <div>Кнопка</div>
</div>
 
<div class="button_base b04_3d_tick">
    <div>Кнопка</div>
    <div>Кнопка</div>
</div>
 
<div class="button_base b05_3d_roll">
    <div>Кнопка</div>
    <div>Кнопка</div>
</div>
 
<div class="button_base b06_3d_swap">
    <div>Кнопка</div>
    <div>Кнопка</div>
</div>
 
<div class="button_base b07_3d_double_roll">
    <div>Кнопка</div>
    <div>Кнопка</div>
    <div>Кнопка</div>
    <div>Кнопка</div>
</div>
 
<div class="button_base b08_3d_pushback">
    <div>Кнопка</div>
    <div>Кнопка</div>
</div>
 
<div class="button_base b09_electric">Кнопка</div>
 
<div class="button_base b10_tveffect">
    <div>Кнопка</div>
    <div>
        <div>Кнопка</div>
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
 
<div class="button_base b11_3d_jumpback">
    <div>Кнопка</div>
</div>
 
<div class="button_base b12_3d_glitch">
    <div></div>
    <div>Кнопка</div>
</div>



КНОПКИ С ЭФФЕКТАМИ CSS3

Все стили приодить тут не будем, посмотрите их в исходнике Демо.
А для первой кнопки, дополнительный класс имеет следующие свойства (простейший пример):
        /* ### ### ### 01 */
        .b01_simple_rollover {
            color: #A3009D;
            border: #E315EA solid 1px;
            padding: 10px;
            background-color: #ffffff;
        }
 
        .b01_simple_rollover:hover {
            color: #ffffff;
            background: #e570e7;
            background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3));
            background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            background: -o-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            background: -ms-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            background: linear-gradient(to bottom,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 );
        }

Просмотры: 1636 Комментарии (0)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Владельцы и пользователи сайта MixliP.ru не осуществляют никакой продажи либо перепродажи программных и иных продуктов интеллектуальной собственности. На нашем сайте не хранится ни одного файла или документа, который нарушал бы смежное или авторское право.


Сайт MixliP.ru представляет собой набор новостей и ссылок на внешние общедоступные источники в сети Интернет, не подконтрольные администрации сайта MixliP.ru, а, следовательно, не несет никакой ответственности за их содержание.


Вся информация о программном обеспечении и скриптах, размещенная на данном сайте, предоставлена исключительно в ознакомительных целях и только для просмотра, и призвана помочь посетителям сайта MixliP.ru выбрать для себя и в последствии приобрести соответствующие лицензионные авторские программные продукты.


Читать полностью информацию правообладателям.


Сайт работает на хостинге BEGET.RU


Рекомендует Mixlip.RU





Наши друзья

Полезное

NEW - Анализ сайта

Оптимизация вашего сайта.

Читайте также

 Пользователи онлайн

  • Всего на сайте: 14
    Пользователей: 0
    Гостей: 12
    Роботов: 2
    Yandex Google