Делаем красивую кнопочку без использования картинки (img)
Сегодня узнал как сделать красивую кнопку без использования тега img (то есть без картинки).
Оказывается есть такое замечательное свойство в CSS3:
для Chrome
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#85D390),color-stop(50%,#009700),color-stop(51%,#007800),color-stop(75%,#219B0C),color-stop(100%,#31A517));
для Opera
background: -moz-linear-gradient(center top , #85D390 0%, #009700 50%, #007800 51%, #219B0C 75%, #31A517 100%) repeat scroll 0 0 transparent;
Разберем что делают эти свойства.
В случае хрома используется -webkit-gradient у которого указывается сначала в каком направлении будет осуществляться заливка (в нашем случае линейно) и указываются контрольные точке color-stop на которых мы изменяем цвета.
color-stop имеет два параметра, первый это точка в процентах где нам нужно установить необходимый цвет и второй параметр это сам цвет.
В случае оперы этим занимается -moz-linear-gradient, в сущности с таким же принципом: контрольные точки и цвета.
Вставляем эти две строки в нужное место стиля и наш фон приобретает красивую градиентную заливку, в самый раз для кнопки и без каких-либо картинок. Удачи!
Оказывается есть такое замечательное свойство в CSS3:
для Chrome
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#85D390),color-stop(50%,#009700),color-stop(51%,#007800),color-stop(75%,#219B0C),color-stop(100%,#31A517));
для Opera
background: -moz-linear-gradient(center top , #85D390 0%, #009700 50%, #007800 51%, #219B0C 75%, #31A517 100%) repeat scroll 0 0 transparent;
Разберем что делают эти свойства.
В случае хрома используется -webkit-gradient у которого указывается сначала в каком направлении будет осуществляться заливка (в нашем случае линейно) и указываются контрольные точке color-stop на которых мы изменяем цвета.
color-stop имеет два параметра, первый это точка в процентах где нам нужно установить необходимый цвет и второй параметр это сам цвет.
В случае оперы этим занимается -moz-linear-gradient, в сущности с таким же принципом: контрольные точки и цвета.
Вставляем эти две строки в нужное место стиля и наш фон приобретает красивую градиентную заливку, в самый раз для кнопки и без каких-либо картинок. Удачи!
Comments