Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Декабрь » 10 » CSS3 Анимированные кнопки
21:17
CSS3 Анимированные кнопки

CSS3 Анимированные кнопки

 

 

Чтобы превратить обычную  ссылку на своей странице в анимированную  кнопку  CSS3, нужно просто присвоить кнопке класс button и один из поддерживаемых цветов. Ниже приведено несколько примеров:

 

ДЕМО                             СКАЧАТЬ

 

HTML

 

<a href="#" class="button blue big">Download</a>

<a href="#" class="button blue medium">Submit</a>

<a href="#" class="button small blue rounded">Submit</a>

 

Есть четыре класса имеющий  цвет - синий, зеленый, оранжевый и серый. Остальные классы, которые вы видите выше, не являются обязательными. Вы можете выбрать размер маленький, средний и большой, и еще один класс - закругленный, что создает более округлый вид  кнопки. Теперь давайте внимательнее посмотрим на класс CSS, который  делает это возможным.

 

CSS3 анимированными кнопками

CSS

Весь код CSS для анимированных кнопок находится в buttons.css . 

Обратите внимание, что на протяжении  кода, я определил две версии одного и того же содержания  в ряде мест. Это связано с тем, как браузеры обращаются с определениями  CSS. Они определяют правила, которые им нужны и применяют  их, не обращая внимания на те, которые они не понимают. Таким образом, мы можем иметь простую версию правил,  что понятно всем.

Кнопки / buttons.css

.button{

    font:15px Calibri, Arial, sans-serif;

 

    /* A semi-transparent text shadow */

    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

 

    /* Overriding the default underline styling of the links */

    text-decoration:none !important;

    white-space:nowrap;

 

    display:inline-block;

    vertical-align:baseline;

    position:relative;

    cursor:pointer;

    padding:10px 20px;

 

    background-repeat:no-repeat;

 

    /* The following two rules are fallbacks, in case

       the browser does not support multiple backgrounds. */

 

    background-position:bottom left;

    background-image:url('button_bg.png');

 

    /* CSS3 background positioning property with multiple values. The background

       images themselves are defined in the individual color classes */

 

    background-position:bottom left, top right, 0 0, 0 0;

    background-clip:border-box;

 

    /* Applying a default border radius of 8px */

 

    -moz-border-radius:8px;

    -webkit-border-radius:8px;

    border-radius:8px;

 

    /* A 1px highlight inside of the button */

 

    -moz-box-shadow:0 0 1px #fff inset;

    -webkit-box-shadow:0 0 1px #fff inset;

    box-shadow:0 0 1px #fff inset;

 

    /* Animating the background positions with CSS3 */

    /* Currently works only in Safari/Chrome */

 

    -webkit-transition:background-position 1s;

    -moz-transition:background-position 1s;

    -o-transition:background-position 1s;

    transition:background-position 1s;

}

 

.button:hover{

 

    /* The first rule is a fallback, in case the browser

       does not support multiple backgrounds

    */

 

    background-position:top left;

    background-position:top left, bottom right, 0 0, 0 0;

}

 

Первое, что мы должны сделать, это определить класс кнопки. Это основное у кнопок, поскольку это относится к позиционированию, шрифтам  и стилям фона.

Во-первых, это стили шрифтов, после чего следует свойство дисплея. Он расположен в встроенный блок, что позволяет ему, находится на той же строке, окружающего его текста (как элемент), но и вести себя как блок в отношении отступов и полей.

Как вы увидите чуть позже, каждая кнопка имеет четыре фоновых  изображения, применяемые к ним. Хотя это звучит устрашающе, только один файл на самом деле запрашивается с сервера. Первые два фона нижний левый и верхний правый часть изображения пузырьков, которые вы можете видеть на рисунке ниже, а два других являются чисто CSS градиенты.

 

 

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

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

 

/* The three buttons sizes */

 

.button.big        { font-size:30px;}

.button.medium    { font-size:18px;}

.button.small    { font-size:13px;}

 

/* A more rounded button */

 

.button.rounded{

    -moz-border-radius:4em;

    -webkit-border-radius:4em;

    border-radius:4em;

}

 

Вот три класса размеров - маленькие, средние и большие, и округлые классы. Кнопки масштабирования в соответствии с их размером  текста. Таким образом, никакой явной ширины и высоты не должно быть указано.

Теперь давайте перейдем к интересной части - цвет.  Определим только синюю кнопку, а остальные почти идентичны.

 

/* BlueButton */

 

.blue.button{

    color:#0f4b6d !important;

 

    border:1px solid #84acc3 !important;

 

    /* A fallback background color */

    background-color: #48b5f2;

 

    /* Specifying a version with gradients according to */

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -moz-radial-gradient(    center bottom, circle,

                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),

                        -moz-linear-gradient(#4fbbf7, #3faeeb);

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,

                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),

                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));

}

 

.blue.button:hover{

    background-color:#63c7fe;

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -moz-radial-gradient(    center bottom, circle,

                                           rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),

                        -moz-linear-gradient(#63c7fe, #58bef7);

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,

                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),

                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));

}

 

 

В приведенном выше фрагменте, можно увидеть, что мы определяем линейный градиент и радиальный один поверх другого. Чтобы градиенты смешать более плавно, как в WebKit и Mozilla синтаксиса мы определяем радиальный градиент с RGBA, что делает внешний цвет градиента полностью прозрачным.

ДЕМО                             СКАЧАТЬ

Категория: HTML/CSS | Просмотров: 317 | Добавил: Iron | Теги: CSS3 Анимированные кнопки | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Операционные системы]
MAC OS
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS
[Прогараммирование]
Совместимость типов объектов
[Прогараммирование]
Введение в информатику
[Информатика]
Что такое инфоpматика?
[Бухгалтерский учет]
ПРИНЦИПЫ И КОНЦЕПЦИИ БУХГАЛТЕРСКОГО УЧЕТА В РЫНОЧНОЙ ЭКОНОМИКЕ

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2017Конструктор сайтов - uCoz