Главная » HTML & CSS » Стильные CSS3 - кнопки без графики

Стильные CSS3 — кнопки без графики

Стильные CSS3 — кнопки без графики

Доброго времени суток!

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

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

Интересное решение, на мой взгляд, нашел «товарищч-буржуин» Stuart Nicholls, как всегда на поверку, все оказалось до смешного простым. Такие решения, всё больше убеждают меня в огромном потенциале CSS.
 

CSS3-Кнопки

 

Из примера видно что оформлены в стилях «Vista» и «Aqua». Этот способ замечательно работает в браузерах Firefox, Safari и Google Chrome. При оформлении через стили использовались только радиус границ (border-radius), тени (box-shadow), градиент фона, ну и конечно же функция text-shadow для текста.
Код стилей получился довольно объемный, так что лучше его вынести в отдельный файл, если у вас нет такого, то лучше создать, чаще всего это .css и подключить его к документу .

CSS

.black1 {background:#000; margin-left:10px; display:inline; border:4px solid #000;}
.red1 {background:#c00; margin-left:10px; display:inline; border:4px solid #c00;}
.blue1 {background:#00a; margin-left:10px; display:inline; border:4px solid #00a;}
.green1 {background:#080; margin-left:10px; display:inline; border:4px solid #080;}
 
.aqua {display:block; line-height: 32px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 10px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.4)), color-stop(50%,  rgba(255, 255, 255, 0.2)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
}
 
.black2 {background:#000; margin-left:10px; display:inline; border:1px solid #000;}
.red2 {background:#c00; margin-left:10px; display:inline; border:1px solid #c00;}
.blue2 {background:#00a; margin-left:10px; display:inline; border:1px solid #00a;}
.green2 {background:#080; margin-left:10px; display:inline; border:1px solid #080;}
 
.vista {display:block; line-height: 36px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 13px 0 14px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(48%, rgba(255, 255, 255, 0.5)), color-stop(50%,  rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

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

CSS3-Кнопки в Opera

 

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

 

CSS - Кнопки

 

   .button{
   margin-left:10px;
   border: 1px solid maroon;
   background-color: red;
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
   -o-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
   -webkit-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
   -moz-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
   color: white;
   text-decoration:none;
   text-shadow: 0 1px 1px black;
   padding: 5px 30px;
}

 

Все вроде бы аккуратно слеплено и выглядит прилично, но нет единого конечного результата, то есть раздрай в стане браузеров, а хочется наконец то не напрягаться по поводу того, как выдадут твою работу разные браузеры. На IE я давно уже забил плотно, а вот от Opera все жду понимания и взаимности. А пока смотрите результат работы в Firefox, Safari и Google Chrome, уверен что такая стилизация кнопок понравится многим.
Можете поиграть с параметрами стилей и добавить например изменения состояния градиентной заливки при наведении, чтобы придать эффект освещения кнопкам. Хотелось бы узнать ваше мнение и увидеть ваши примеры использования CSS3 стилей.

Просто новогодний отжиг:
 

В последнее время стало модно вешать елки вниз головой. Надо ли ориентировать ребенка при чтении стишка соответственно елке? Если да, то как крепить к потолку табурет? А хоровод как водить? Кто знает, поделитесь опытом!
Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru