Делаем градиентные кнопки средствами CSS3 - «Верстка»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
18-03-2016, 16:25
Делаем градиентные кнопки средствами CSS3 - «Верстка»
Рейтинг:

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



(Демо страница)


Итак основные качества будущей кнопки (кнопок):



  • Масштабируемость (в зависимости от размера шрифта и количества текста);

  • Функциональность, юзабилити (предусмотрены состояния кнопки – normal, hover, active)

  • Обратная совместимость (даже на старом или не совместимом браузере кнопки будут выглядеть прилично, хотя конечно не так как задумывалось. В этом можно будет убедиться в конце публикации);

  • Гибкость (эти стили можно применять и к другим элементам, не обязательно для кнопок);


  • Какие фишки будем использовать в процессе созднаия кнопок? Результат достигается за счет градиентов, свойств box shadow, text shadow, rounded corners, режима RGBA.


    Структура HTML




    Button


    CSS



    .button
    {
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    }
    .button, .button span
    {
    -moz-border-radius: .3em;
    border-radius: .3em;
    }
    .button span
    {
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
    /* The background pattern */
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
    -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
    -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
    -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
    /* Pattern settings */
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
    }
    .button:hover
    {
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    }
    .button:active
    {
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
    }


    Синяя кнопка



    .button-blue
    {
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
    }
    .button-blue:hover
    {
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
    }
    .button-blue:active
    {
    background: #4477a1;
    }


    Совместимость с разными браузерами



  • Mozilla 3.6 и старше – полная совместимость, кнопки отображаются именно так как они задуманы со всеми деталями.

  • Google Chrome, Safari (Webkit) – проблем не выявлено, в целом результат не хуже чем на Mozilla.

  • Opera 11 – к сожалению, градиент не отображается вовсе, хорошо хотя бы, что закругленные углы интерпретируются так как нужно.

  • Internet Explorer 6-8 – В данном случае проблема, наоборот, с закругленными углами. Градиент присутствует.

  • Internet Explorer 9 – ситуация несколько лучше чем у браузеров от Microsoft прошлых поколений, но все равно результат не столь хорош, как у Mozilla или Chrome.


  • Ну, а у меня на этом все. Теперь у вас есть возможность выбрать использовать градиенты для фотошопа или обходиться исключительно с помощью CSS. Изучайте возможность CSS3, оно того стоит! С HTML5 так вообще чудесам можно творить, недавно нашел подборку разных техник и был сильно приятно шокировал делом примерами.


    P.S. Постовой. Интернет магазин Линзмастер предлагает купить цветные и обычные контактные линзы по хорошим ценам и с доставкой по Украине.


    Каждый веб-мастер давно наслышан, а кто-то уже виртуозно применяет на практике новые уникальные возможности CSS3. Не так давно мы разбирали несколько интересных текстовых эффектов, на этот раз речь пойдет о градиентных кнопках, созданных без использования графики (картинок), то есть, только средствами CSS3. Сам туториал я обнаружил здесь, вам же предлагаю перевод. (Демо страница) Итак основные качества будущей кнопки (кнопок): Масштабируемость (в зависимости от размера шрифта и количества текста); Функциональность, юзабилити (предусмотрены состояния кнопки – normal, hover, active) Обратная совместимость (даже на старом или не совместимом браузере кнопки будут выглядеть прилично, хотя конечно не так как задумывалось. В этом можно будет убедиться в конце публикации); Гибкость (эти стили можно применять и к другим элементам, не обязательно для кнопок); Какие фишки будем использовать в процессе созднаия кнопок? Результат достигается за счет градиентов, свойств box shadow, text shadow, rounded corners, режима RGBA. Структура HTML Button CSS .button _

    Теги: CSS Верстка, rgba(0, кнопки transparent), 100% 100%

    Просмотров: 3 080
    Комментариев: 0:   18-03-2016, 16:25
    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

     
    Еще новости по теме:



    Другие новости по теме:
    Комментарии для сайта Cackle