Как сделать картинки кнопки css

Делаем стильные кнопки

Стандартные кнопки, созданные через тег <button> или <input type="button"> , выглядят, конечно, хорошо, но попытка изменить их вид через стили приводит к ужасному результату. Кнопки становятся приветом интерфейсам десятилетней давности с их угловатостью (рис. 1). Разумеется, такая метаморфоза возникает только при использовании свойств background и border , иными словами, нельзя изменить цвет фона кнопки и рамку вокруг нее.

Исходная и измененная кнопка

Рис. 1. Исходная и измененная кнопка

Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.

За основу возьму оригинальную кнопку в браузере, которая содержит линейный вертикальный градиент и скругленные края.

Самое простое сделать закругление уголков, для чего используем свойство border-radius , задавая ему нужный радиус скругления. Как обычно, работает не во всех браузерах, поэтому придется добавлять полный комплект. В итоге получается следующее.

Вид кнопок в разных браузерах показан на рис. 2.

Кнопки со скругленными уголками

Рис. 2. Кнопки со скругленными уголками

В общем, все ожидаемо. Старые версии IE не поддерживают CSS 3, остальные корректно делают нужные мне уголки. Опера почему-то не отображает фон по умолчанию, как это делают другие браузеры, но про Оперу еще зайдет особый разговор.

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

Firefox

background: -moz-linear-gradient(#00BBD6, #EBFFFF);

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

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.

Internet Explorer

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00BBD6′, endColorstr=’#EBFFFF’);

Браузер IE идет своим путем и для разных эффектов применяет свойство filter , в том числе и для градиента. Здесь все тривиальнее, пишется только начальный и конечный цвет градиента.

Опера отдыхает, в ней градиенты еще не реализованы.

Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).

Пример 1. Кнопки с линейным градиентом

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки — она выглядит плоской, как доска.

Вид кнопки с градиентом

Рис. 3. Вид кнопки с градиентом

Сделать кнопку нужной формы можно опять же градиентом, «играя» цветами. Двумя значениями градиента уже не обойтись, к счастью, Firefox и Safari предлагают решение.

Firefox

background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

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

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));

Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.

Пример 2. Кнопки с улучшенным градиентом

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

Результат примера показан на рис. 4.

Градиент, какой надо градиент

Рис. 4. Градиент, какой надо градиент

Аналогично можно создавать любые другие градиенты на кнопке или другом элементе (рис. 5). Но это уже сделайте самостоятельно, для чего в практикум добавил соответствующую задачу.

Такие разные кнопки

Рис. 5. Такие разные кнопки

Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).

Наложение фона на уголки в IE 9

Рис. 6. Наложение фона на уголки в IE 9

Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrome.

Как сделать бесконечное вращение картинки на CSS3

Сейчас я делаю сайт для одной детской футбольной секции. На макете (там, где меню) я нарисовал футбольные мячики:

Как сделать бесконечное вращение картинки на CSS3

У меня появилась идея сделать так, чтобы при наведении на раздел ссылки из меню, мячик бесконечно вращался.
Как это сделать?
Можно, конечно, сделать анимацию вращающегося изображения в программе flash -редакторе или фотошопе.
Код для сайта будет вот таким:

Где картинка « knopka-1.png » – обычная картинка, а « knopka-2.png » – с анимацией (вращающаяся).

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

Итак, вот CSS код:

А вот так будет выглядеть меню в HTML:

Где « myah.png » – это название картинки.

В результате вы увидите вот это:

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

На примере буду использовать изображение нашей планеты. И сейчас с помощью CSS3 Земля будет вращаться.

там где « 10000ms » – число можно заменять по желанию.

где « zemla.png » – это изображение Земли.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

17 Ответов на комментарий — Как сделать бесконечное вращение картинки на CSS3

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

Ну вы, Тимофей, даете! Вы пробовали это сделать по примеру? Нет, не пробовали.
Отвечаю на ваши вопросики:
&#8220;&#8230;но когда на саму картинку, за ней появляется тень&#8230;&#8221; &#8211; это стиль подвязан с блога. Моя цель была показать не красоту, а работоспособность. По поводу земли, я думаю у вас, Тимофей хватит ума, чтобы сделать фон прозрачным и сохранить картинку в формате &#8220;png&#8221;.
&#8220;Земля в другой плоскости вращается&#8230;&#8221; &#8211; еще раз повторюсь, моя цель была не красота и не показ астрономических познаний. Если разобраться, то земля не круглая.
Да, Тимофей, рассмешили вы своим комментарием.

Взаимно. отвечаю на ваши вопросики.
&#8211; по вашему примеру не пробовал, потому как полгода назад наигрался с «animation» и «transform», в частности со вращением, но мне не понравилось, так как более приятно смотрится вращение не по часовой стрелке, а изнутри наружу, т.е. в другой плоскости.
&#8211; потому как никакого функционала вращение картинок не несёт, делаем вывод, что это делается для красоты, верно?
а раз так, то для профессионала, коим я Вас, Степан, считаю, не составит трудности сделать прозрачный фон для Земли и убрать тень на четырёх картинках. Профессионализм в мелочах, так ведь? Вы рассказываете об интересных вещах, так почему бы не делать это более наглядно. Конечно, это Ваш блог, и Вы можете остаться при своём мнении, но у меня, как у читателя и возможного клиента, остается ощущение какой-то незавершенности

Как оформлять в сss кнопки для сайта

Как оформлять в сss кнопки для сайта

От автора: приветствуем вас на страницах нашего блога. При создании веб-страниц огромную роль играют кнопки, с помощью которых осуществляются различные действия. Сегодня давайте подумаем, как их создавать и оформлять. Оформить в css кнопки для сайта на самом деле несложно, мы рассмотрим несколько типичных способов.

Как создаются кнопки

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

Но практически для всех остальных целей сгодится и другой вариант. Что вы вообще подразумеваете под кнопками? Многие считают, что это пункты меню или какие-то элементы, щелкнув по которым на сайте что-то меняется, раскрывается или появляется. Такие элементы можно создать следующими способами:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

С помощью того же тега input:

Такая кнопочка ничего не будет делать и клик по ней ни к чему не приведет. Ей нужно с помощью скриптов задавать, что же произойдет при клике. Другой вариант создания:

(или span если она должна быть строчным элементом). Естественно, этот вариант хуже тем, что вам придется дополнительно писать некоторые стили для оформления, а input type = “button” уже имеет некоторые по умолчанию.

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

Input поддерживает и такой вид – чисто графический. В этом случае достаточно записать путь к файлу и выбранное изображение станет кликабельным, останется задать, что должно происходить при нажатии. Четвертый вариант:

В html есть парный тег button, который помогает создавать кнопки с различным содержимым. В этом случае преимущество заключается в том, что вы можете вставить любое содержимое непосредственно между открывающим и закрывающим тегом.

Button можно использовать как в форме, так и саму по себе. Если же результат нажатия необходимо отправить на сервер, то тег обязательно должен находиться в контейнере form для корректной работы.

Как сделать красивые кнопки для сайта на css

Что ж, с созданием все понятно, а теперь вернемся к их оформлению. Допустим, мы создали ее с помощью input, что дальше? Если вам нужно изменить внешний вид элемента, то можно воспользоваться разными css-свойствами. Например, давайте пропишем такие:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *