Как button сделать прозрачный фон. Минусы и плюсы. Пример прозрачной кнопки
Приветствую всех читающих эту публикацию, а также моих горячо любимых подписчиков! Сегодня я хочу рассказать вам об одном модном и симпатичном объекте, который можно встретить на страницах интернет-магазинов знаменитых брендов. А теперь внимание! Я покажу, как создается прозрачная кнопка css свойствами.
Данная статья окунет вас в историю создания такого вида кнопок, обучит, как сделать такой элемент собственноручно, и после вы сможете уверенно использовать на своих веб-сервисах стильную кнопочку. Думаю, пора переходить к делу!
А вот и прародитель дизайна!
Не удивительно, что в мире веб-программирования трудно запечатлеть в истории всех создателей каких-то элементов дизайна. Однако с данной кнопкой все иначе. Первый онлайн-ресурс, который использовал «призрачную кнопку» стал Tumblr. После дебюта на таком знаменитом сайте дизайн начал взлетать по ступенькам популярности.
Следующей его использовала компания Apple для представления кнопок в интерфейсах Safari и операционной системы iOS. По сути именно благодаря Apple прозрачные объекты стали модными. На сегодняшний день все прибыльные коммерческие сервисы используют данную технологию.
Особенности «кнопки призрака»
Из-за своего внешнего вида полупрозрачный button стали называть «кнопкой призраком» . И действительно, особенностями такого объекта являются:
- Тонкая контурная линия;
- Преобладание черно-белой палитры цветов;
- Масштаб больше стандартного.
Вроде бы ничего необычного и сверхнового в этой технологии нет. Однако она произвела фурор и идеально сочетается с трендом минимализма. Ниже я прикрепил таблицу, в которой перечислены позитивные и негативные стороны «кнопки призрака».
Пример прозрачной кнопки
Вот теперь займемся непосредственно созданием топового объекта. Для примера я сверстал простую главную страничку интернет-магазина брендовой одежды, которая сообщает о сезонных скидках.
Не волнуйтесь, в программном коде нет ничего сложного. Все это мы уже разбирали в предыдущих публикациях. На сайте создано две прозрачные кнопки с плавным эффектом перехода.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
Мужская одежда
Женская одежда
|
Надеюсь статья вооружила вас новыми знаниями и была полезной. А вы не забывайте, что я с нетерпением жду ваших заявок на подписку! И конечно же делитесь ссылкой на мой блог со своими коллегами и друзьями.
Пока-пока!
С уважением, Роман Чуешов
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
HTML
Для кнопок будет использоваться очень простой HTML код:
Подписаться
CSS
Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
ButtonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; }
Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер - она увеличивается, показывая дополнительное сообщение.
Основной код CSS
Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
#button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; }
Эффекты CSS3
Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
/*Скругленные углы*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Анимация CSS
Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
Наведение курсора мыши
Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
#button1:hover { width: 230px; }
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSS
Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
#button2 { background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; }
Эффекты CSS3
Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
/*Скругленные углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSS
Анимация практически не отличается от предыдущего примера.
/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Наведение курсора мыши
При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
#button2:hover { background-color: #ff3434; }
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSS
Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в "0 0". При наведении курсора положение сдвигается по вертикали.
#button3 { background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3
В данном примере нет ничего особенного - скругленные углы и тени.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSS
Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Наведение курсора мыши
Теперь пришла пора сдвигать фоновое изображение. Начальное положение было "0 0". Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
#button3:hover { background-position: 0px 150px; }
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSS
Код CSS для нашей кнопки.
#button4 { background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3
В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Наведение курсора мыши
В данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.
#button4:hover { margin-top: 52px; /*Тень*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); }
Сегодня я расскажу Вам, как создать в иллюстраторе простую, прозрачную кнопку.
Итак, начнем с создания фона. Конечно он должен быть не белым, что бы прозрачность кнопки была видима. Я создам градиент на фон состоящий из 3 цветов. На картинке ниже Вы можете увидеть, какие цвета я выбрал для фона и какой фон получился. Для создания фона выбираем в правом меню — градиент -> линейный градиент и устанавливаем 3 цвета
Теперь выберем инструмент — создание фигур и нарисуем прямоугольник со скругленными углами. Создаем кнопку, закрашиваем ее белым цветом и делаем прозрачность примерно 30% . Должна получится вот такая кнопка.
Теперь нам необходимо создать рамку для кнопки . Скопируем данную кнопку еще раз, создадим абрис в 2-3 px и удалим окрашивание (красная полоса на белом фоне в панели цветов). Должна получится рамка, повторяющая по форме нашу кнопку.
Теперь в верхней панели выбираем пункты (предварительно выделив получившийся контур): Объект -> Разобрать (Object -> Expand). Теперь данная рамка является объектом без заполнения внутри. Для нее мы создаем линейный градиент с чередующимся белым и серым цветом, для отображения бликов и переливов на рамке (Как на картинке ниже)
Выделяем 2 объекта и в меню «обработка контуров» нажимаем клавишу «Минус верхний». Получилась половина изначальной кнопки, которую мы поместим поверх изначальной и сделаем прозрачность на 10%. Получаем вот такую кнопку.
Осталось добавить бликов. Для этого в левой панели инструментов, выбираем создание формы-блик и создаем блик. Выделяем окружность блика черной стрелкой и трансформируем форму делая окружность приплюснутой.
Теперь Мы получили прозрачную кнопку с бликами. Распределите блики по краю кнопки на свой вкус. У меня получилась вот такая кнопка
Кнопка готова, теперь можно написать на ней любую надпись. Я напишу YouTube.
Создаю прямоугольную область со скругленными краями и создам текст и переведу его в кривые. Слово «Tube» я помещу в новый прямоугольный объект и в панели «обработка контуров» нажму клавишу «Минус верхний». В прямоугольном объекте мы вырезали слово
Добавляем слово «You» и переносим все на нашу кнопку предварительно выровняв. Все, прозрачная кнопка в adobe illustrator готова.
Почему полупрозрачные кнопки?
Использование фотографий в качестве фона является сейчас «горячим» трендом в веб-дизайне. Вместе с этим в веб-дизайне стало модно использовать «кнопки-призраки», которые выглядят вот так:
Поскольку у данных кнопок полностью прозрачный фон, они не отвлекают внимание пользователей от фона с фотографией, в отличие от традиционных веб-кнопок, имеющих сплошной фон.
Проблема «кнопок-призраков» заключается в том, что они слишком незаметные по сравнению с фоном, для которого используются фотографии. Поэтому посетители сайта могут не придать им нужного значения из-за небольшой визуальной «весомости».
А также «кнопки-призраки» могут быть приняты просто за выделенный текст. Другими словами, они не всегда могут показаться «кликабельными» для пользователей. Это основные проблемы с их использованием в плане юзабилити.
С другой стороны, «кнопка-призрак» классно смотрится на фоне фотографий благодаря своей прозрачности. Как же нам сохранить это преимущество «кнопки-призрака» и одновременно показать ее предназначение (аффорданс)?
Я обнаружил хорошее решение на главной странице сайта Tumblr . На сайте Tumblr используется полупрозрачная кнопка для авторизации поверх фона с изображением:
Это отличный компромисс между «кнопкой-призраком» и традиционной кнопкой со сплошным фоном. Благодаря полупрозрачному фону некоторые фотографии просвечивают сквозь подобные кнопки, создавая привлекательный эффект, похожий на эффект от использования «кнопок-призраков».
Классическая форма кнопки визуально сигнализирует о том, что полупрозрачная кнопка является кликабельной. Полупрозрачные кнопки очень легко создаются. Все, что нам нужно, – это немного HTML и CSS.
HTML
В разметке нам потребуется только один HTML элемент. В данном случае используется элемент .
Button
< a class = "semi-transparent-button" href = "#" > Button < / a > |
В качестве замены вы можете использовать элементы button или input.
CSS
CSS свойством, отвечающим за полупрозрачный визуальный эффект, является свойство background. Свойству background присвоено значение в RGBA, чтобы можно было контролировать прозрачность. Цвет фона белый и на 50% прозрачный.
Semi-transparent-button { display: block; box-sizing: border-box; margin: 0 auto; padding: 8px; width: 80%; max-width: 200px; background: #fff; /* запасной цвет для старых браузеров */ background: rgba(255, 255, 255, 0.5); border-radius: 8px; color: #fff; text-align: center; text-decoration: none; letter-spacing: 1px; transition: all 0.3s ease-out; }
Semi - transparent - button { display : block ; box - sizing : border - box ; margin : 0 auto ; padding : 8px ; width : 80 % ; max - width : 200px ; background : #fff; /* запасной цвет для старых браузеров */ background : rgba (255 , 255 , 255 , 0.5 ) ; border - radius : 8px ; color : #fff; text - align : center ; text - decoration : none ; letter - spacing : 1px ; transition : all 0.3s ease - out ; |
Скругленные углы сделаны с помощью свойства border-radius
Свойство text-align используется для выравнивания названия кнопки по центру (что является типичным для кнопок)
Свойство max-width установлено в значении 200px, чтобы кнопка не становилась слишком широкой на очень больших экранах.
Простой анимационный эффект, возникающий при взаимодействии пользователя с кнопкой, создан с помощью свойства transition
Дополнительно, в качестве запасного варианта используется сплошной фоновый цвет, записанный в виде шестнадцатеричного значения (hex) для браузеров, не понимающих rgba() (например, Internet Explorer 8 и ниже).
Чтобы улучшить аффорданс кнопки, нам нужно задать определенные стили для псевдо-классов:hover, :focus и:active. Когда пользователь будет наводить на кнопку или кликать по ней, мы будем использовать переход от полупрозрачного фона к сплошному, чтобы продемонстрировать, что с кнопкой можно взаимодействовать.
Semi-transparent-button:hover, .semi-transparent-button:focus, .semi-transparent-button:active { background: #fff; color: #000; transition: all 0.5s ease-in; }
Semi - transparent - button : hover , Semi - transparent - button : focus , |