Глянцеві кнопки за допомогою css3 градієнта

Як відомо, з появою CSS3 дуже багато речей зробити стало набагато простіше. Раніше нам доводилося використовувати зображення щоб зробити закруглені кути, а зараз це робиться одним властивістю. З`явилася можливість вставити кілька зображень на фон за допомогою CSS3. А чого вартий анімація ... Але в цьому уроці ми розглянемо як створити глянцеві кнопки за допомогою градієнта на CSS3. Я пам`ятаю було час коли такі кнопки все робили в програмі Adobe Photoshop, а зараз це можна зробити без використання зображень.

Цікаві уроки CSS3:

Як використовувати кілька зображень для фону
CSS3 повторення градієнта
Заховані кути на CSS3

Приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Структура HTML документа наступна:

12345678910

lt;bodygt;lt;div class="Container"gt;lt;div class="Glossy"gt;lt;pgt; Привіт!lt;/pgt;lt;/divgt;lt;div class="Glossy green"gt;lt;pgt; Як справи?lt;/pgt;lt;/divgt;lt;/divgt;lt;/bodygt;

CSS частина

Структура документа готова і вона дуже проста. Зараз додамо стилі.

Насамперед на фон поставимо зображення і вирівняємо блок з кнопками по центру, а також текст на кнопці зробимо по центру:

12345678910111213

body {background: url("../img/ios-linen-white.jpg `)-}.container {width: 250px-margin: 50px auto-}.glossy p {margin: 6px 0 0 0-text-align: center-position: relative-z-index: 1-}

Відео: Анімована КНОПКА на CSS / Button animation CSS3

Надаємо нашим кнопок округлої форми і градієнт:

123456789101112131415161718192021222324252627282930

.glossy {width: 230px-height: 25px-margin: 10px auto-position: relative-background: # 94c4fe-background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,# 94c4fe), color-stop(100%,# d3f6fe))-background: -webkit-linear-gradient(top,# 94c4fe 31%,# d3f6fe 100%)-background: -moz-linear-gradient(top,# 94c4fe 31%, # d3f6fe 100%)-background: -o-linear-gradient(top,# 94c4fe 31%,# d3f6fe 100%)-background: -ms-linear-gradient(top,# 94c4fe 31%,# d3f6fe 100%)-background: linear-gradient(to bottom,# 94c4fe 31%,# d3f6fe 100%)-filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=`# 94c4fe`, endColorstr=`# D3f6fe`,GradientType=0 )--webkit-border-radius: 25px--moz-border-radius: 25px-border-radius: 25px-border: 1px solid # 4864a9-color: # 000-font-size: 0.750em-text-shadow: 1px 1px 0px rgba(255,255,255,.5)--webkit-box-shadow:0px 1px 3px 0px rgba(0, 0, 0, .2)-box-shadow:0px 1px 3px 0px rgba(0, 0, 0, .2)-position: relative-}

Зараз зробимо кнопки більш реалістичними. У цьому нам допоможе псевдоселектор `: before`:

Відео: CSS3 linear-gradient background tutorial HTML5 Linear Gradient Parameters

123456789101112131415161718192021

.glossy: before {content: ""-width: 220px-height: 16px-display: block-position: absolute-left: 5px--webkit-border-radius: 8px--moz-border-radius: 8px-border-radius: 8px-background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%)-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)))-background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%)-background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%)-background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%)-background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%)-filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffffff `, endColorstr=`# 00ffffff`,GradientType=0 )-}

Також, ви можете використовувати різні кольори для градієнта. Ось приклад із зеленою кнопкою:

1234567891011

.glossy.green {background: # 54bc3e-background: -moz-linear-gradient(top,# 54bc3e 0%, # aee850 100%)-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,# 54bc3e), color-stop(100%,# aee850))-background: -webkit-linear-gradient(top,# 54bc3e 0%,# aee850 100%)-background: -o-linear-gradient(top,# 54bc3e 0%,# aee850 100%)-background: -ms-linear-gradient(top,# 54bc3e 0%,# aee850 100%)-background: linear-gradient(to bottom,# 54bc3e 0%,# aee850 100%)-filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=`# 54bc3e`, endColorstr=`# Aee850`,GradientType=0 )-border: 1px solid # 1d6511-}

Відео: CSS3 radial-gradient Background Parameters Tutorial Radial Gradient

висновок

Красиві кнопки, які зараз можна зробити за допомогою CSS3 градієнта, а раніше доводилося використовувати зображення. Забирайте їх, якщо вони вам сподобалися і підходять вашому сайту.

Відео: CSS3 Only Gradient Background Animation || HTML, CSS3

Успіхів!

джерело: https://hongkiat.com/blog/css3-glossy-effect/

Поділися в соц мережах: