Как сделать красивую кнопку на CSS

В этой статье речь пойдет о сервисе позволяющем с помощью не хитрых манипуляций создавать симпатичные кнопки на чистом CSS. Находиться он по адресу http://www.cssbutton.me/. Предлагаю познакомиться с инструментами этого сервиса поближе.

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

Во вкладке Generator распологается ряд вкладок с помощью которых создаются кнопки.

На вкладке Disign можно изменять дизайн нашей кнопки. Вкладка CSS показывает получающийся у нас код стилей.

Здесь есть три вкладки обозначающие состояние кнопки:

• Normal — исходный вид;
• Hover — вид при наведении;
• Active — вид при нажатии.

Рассмотрим инструменты этого сервиса более подробно.

1. Border. Позволяет границу для кнопки.

• Width — толщина границы;
• Color — цвет границы;
• Radius — скругление углов;
• Style — значение позволющее управлять внешним видом границы.

2. Gradients. Позволяет задать градиент для кнопки. Тут нажимаем кнопочку Add Gradient и задаем параметры для нашего градиента.

3. Box Shadow. С помощью этого инструмента можно добавить тень для кнопки.

• Horizontal — по горизонтали.
• Vertical — по вертикали.
• Blur — размытие тени.
• Spread — размер тени.
• Inset — переключатель с помощью которого можно сделать не только внешнюю тень, но и внутреннюю.
• Color — цвет тени.

4. Font. Инструмент для манипуляции со шрифтом. Здесь представленны инструменты для управления цветом, размером, жирностью и положением шрифта.

5. Text Shadow. Тень для текста, аналогично Box Shadow.

6. Dimensions. Позволяет манипулировать с размером, отступами и свойством display.

Если требуеться задать для кнопки разные по размеру отступы, то следует нажать на скрещенные стрелочки напротив свойств margin и padding, тогда для их значений появятся четыре различных поля.

7. Background. Эта вкладка для тех кто желает сделать свою кнопку в виде картинки.

8. Transition/Transform. Эта вкладка отвечает за переход от одного состояния кнопки к другому.

• Duration — время перехода кнопки из одного состояния в другое.

После того как кнопка закончена нам остаеться перейти во вкладку CSS или нажать кнопку Source и мы получим код получившегося стиля

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

css — Кнопка ввода убрать «тень»

Я не могу убрать серую «тень» от кнопки типа ввода на ее половине:

Я проверил все методы на форуме, но:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: white;

Не работает …

Пример:

.background {
  background-color: lightgrey;
  width: 400px;
  height: 300px;
}

.button {
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: black;
  border-radius: 50%;
  border-width: 2px;
  border-color: white;
  width: 25px;
  height: 25px;
  color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: white;
}

.box {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: white;
  width: 200px;
  height: 100px;
} 

<div>
<div>
</div>
<input type="button" value="x">
</div>

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

2

arrowman 6 Фев 2018 в 16:03

2 ответа

Лучший ответ

Это из-за стиля границы в input type = «button».

Причина, по которой у вас есть эта серая тень, заключается в том, что для нее установлено значение «начало», измените это значение на сплошное, чтобы удалить его 🙂

.button {
   background-color: black;
   border-radius: 50%;
   border-width: 2px;
   border-color: white;
   border-style: solid;
}
 

4

Xecuter34 6 Фев 2018 в 13:09

Измените border-color на transparent, чтобы удалить любой цвет, и ваша граница примет цвет фона из-за атрибута border-width

.button {
  background-color: black;
  border-radius: 50%;
  border-width: 2px;
  border-color: transparent; /* NEW */
}

0

reiallenramos 6 Фев 2018 в 13:11

CSS3 Меню. CSS3 Тень

Тень CSS3

Свойство CSS3 box-shadow — это новый способ добавления эффекта тени путем редактирования стилей. Нет необходимости использовать Photoshop!
Свойство box-shadow имеет несколько атрибутов/значений, как и любое другое свойство CSS, и они расположены в следующем порядке: box-shadow: Apx Bpx Cpx #XXX:
      * Apx — смещение тени по горизонтали: используйте положительное значение, чтобы получить тень справа; и отрицательное значение, чтобы получить тень слева;
      *

CSS3Menu генерирует следующий код для box-shadow:
-moz-box-shadow:0.7px 1px 1px #777777;
-webkit-box-shadow:0.7px 1px 1px #777777;
box-shadow:0.7px 1px 1px #777777;

Ниже скриншот из Firefox, демонстрирующий эффект box-shadow:

Свойство box-shadow поддерживается следующими браузерами: Webkit (в Safari 3+, Chrome), Opera 10.5, Firefox 3.5.

Свойство text-shadow записывается следующим образом:
text-shadow:2px 2px 2px #000;

Тени CSS имеют три значения для размера и цвет. Значения для размера — это смещение по горизонтали, смещение по вертикали и радиус размытия. Смещения могут иметь положительное и отрицательное значения.

Свойство text-shadow поддерживается следующими браузерами: Webkit (с Safari 3+, Chrome), Opera 9.5, Firefox 3.1 (pre-Alpha), Konqueror.

Смотри также:
CSS3 закругленные углы
CSS3 градиент

Скачать

Помощь

Как создать стильное анимированное CSS3 меню без JavaScript

1) Откройте приложение CSS3 Menu, нажмите кнопки «Добавить элемент» и «Добавить подменю» , расположенные на панели инструментов CSS3 Menu, чтобы создать меню. Также Вы можете использовать кнопку «Удалить элемент» , чтобы удалить некоторые кнопки.

2) Используйте готовые шаблоны. Чтобы это сделать, выберите понравившуюся тему в списке «Шаблоны». Дважды щелкните по теме чтобы применить ее.

3) Настройка внешнего вида меню.
 3.1. Кликом выберите элемент и измените настройки внешнего вида кнопки для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Главное меню».
 3.2. Кликом выберите элемент и измените внешний вид подменю для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Подменю».

4) Сохранение меню.
 4.1. Сохранение файла проекта. Чтобы сохранить проект, просто нажмите кнопку «Сохранить» , расположенную на панели инструментов или выберите пункты «Сохранить» или «Сохранить…» в главном меню.
 4.2. Публикация меню в формате HTML. Чтобы сделать это, нажмите кнопку «Опубликовать» на панели инструментов.

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой . Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.

Создаем стильную кнопку, используя только CSS3

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

 Финальный результат:

Посмотреть пример кнопки на CSS

Структура HTML

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div>

        <a href="#">Push</a>

</div>
</body>
</html>

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

Создание стилей CSS

a.btn {
        display: block; width: 250px; height: 60px;
        padding: 40px 0 0 0; margin: 0 auto;
}

Файл CSS начинается с некоторых основных стилей для подготовки демонстрационного файла, после этого мы можем начать создавать стили для якоря. Якорь по умолчанию строчный, так что display: block; преобразует это в блок, чтобы можно было добавить определенные ширину и высоту. Внутренний отступ оттолкнет текст от верхнего края кнопки, а внешний отступ используется, чтобы отцентровать кнопку в демонстрации.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
}

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

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;
}

Свойство CSS3 box-shadow может быть использовано после этого, чтобы создать эффект внутреннего свечения, как в Photoshop. Добавление inset  в код разместит свечение внутри элемента, а не снаружи. Мы не сдвигаем тени по каким-либо осям, но мы размазываем их на 6px, чтобы смягчить влияние эффекта.

Простая зеленая граница шириной 1px обрамляет кнопку, после чего углы удаляются, используя свойство border-radius.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;
        font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
        text-transform: uppercase; text-decoration: none;
        color: #147032;
        text-shadow: 0px 1px 2px #b4d1ad;
}

Теперь, когда общая графика кнопки создана, мы можем перейти к тексту. Шрифт настроен, используем сокращение CSS, назначая его как 55px Helvetica жирный, text-align, text-transform и text-decoration позиционируют текст по центру, переводят его в заглавные буквы и удаляют подчеркивание, которое по умолчанию используется для ссылок.

Наконец, цвет назначен как темно-зеленый, после этого text-shadow используется, чтобы создать эффект углубления. Светло-зеленая тень сдвинута на 1px по оси Y и размазана на 2px.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;

        font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
        text-transform: uppercase; text-decoration: none;
        color: #147032;
        text-shadow: 0px 1px 2px #b4d1ad;

        -moz-transition: color 0.25s ease-in-out;
        -webkit-transition: color 0.25s ease-in-out;
        transition: color 0.25s ease-in-out;
}

        a.btn:hover {
               color: #145675;
               -moz-transition: color 0.25s ease-in-out;
               -webkit-transition: color 0.25s ease-in-out;
               transition: color 0.25s ease-in-out;
        }

Все, что осталось, — настроить простое состояние, когда указатель находится над кнопкой. К сожалению, градиенты CSS и переходы CSS не могут быть использованы вместе, так что мы остановимся на простом изменении цвета текста. Код перехода определяет свойство color и указывает браузеру плавно перейти из одного состояния в другое за 0,25 секунд.

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

Законченная кнопка на CSS

Посмотрите пример, чтобы увидеть законченную кнопку на CSS в действии. Наша графика построена, используя смесь градиентов, границ и теней CSS, чтобы повторить эффекты, которые раньше могли быть созданы только в Photoshop. Учитывая, что современные браузеры Firefox, Safari и Chrome поддерживают эти свойства CSS3, Вы можете смело добавлять эти украшающие эффекты в дизайн Вашего веб-сайта.

Посмотреть пример кнопки на CSS.

Автор урока Chris Spooner.

Перевод — Дежурка.

Смотрите также:

CSS — Ящик-генератор теней — Этот инструмент позволяет создавать CSS box-shadow эффекты box-shadow , чтобы до

Этот инструмент позволяет создавать CSS box-shadow эффекты box-shadow , чтобы добавлять эффекты box-shadow к вашим CSS-объектам.

Генератор бокс-тени позволяет добавить одну или несколько бокс-тени к элементу.

Открыв инструмент,вы найдете прямоугольник в правом верхнем углу инструмента.Это элемент,к которому вы собираетесь применить тени.Когда этот элемент выделен (как это происходит при первой загрузке страницы),вы можете применить к нему некоторые базовые стили:

• Задайте color элемента с помощью инструмента выбора цвета.
• Придайте элементу border с помощью флажка «граница».
• Используйте ползунки, чтобы установить свойства top , left , width и height элемента .

Чтобы добавить тень коробки,нажмите кнопку «+» в левом верхнем углу.Это добавит тень и отобразит ее в колонке слева.Теперь вы можете задать значения новой тени:

• Установите color тени с помощью инструмента выбора цвета.
• Установите вставку тени с помощью флажка «Вставка».
• Используйте ползунки,чтобы задать положение элемента,размытие и распространение.

Чтобы добавить еще одну тень, снова нажмите «+». Теперь любые установленные вами значения будут применяться к этой новой тени. Измените порядок, в котором эти две тени применяются, используя кнопки ↑ и ↓ в верхнем левом углу. Снова выберите первую тень, щелкнув ее в столбце слева. Чтобы обновить собственные стили элемента, выберите его, нажав кнопку с надписью «элемент» вверху.

Вы можете добавить к элементу псевдоэлементы ::before и ::after , а также придать им тени блока. Чтобы переключаться между элементом и его псевдоэлементами, используйте кнопки вверху с пометками «element», «: before» и «: after».

Поле в правом нижнем углу содержит CSS для элемента и любые before:: или ::after .

Кнопки CSS. Краткий мануал с примерами

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

Псевдоэлементы ссылок

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

Таких псевдоэлементов ссылки насчитывается всего четыре, а прописываются они через двоеточие с тегом ссылки a:

Как сделать CSS кнопку

По сути, веб-кнопка — это обычная ссылка со стилями оформления CSS. Через разные свойства и значения указываются: отступы, выравнивание, цвет, тень и другие эффекты. Для создания кнопки необходимо, без этого никак, знания каскадной таблицы хотя бы на начальном уровне. CSS очень легко поддается изучению просто нужно желание, а если у вас нет этих знаний, то нет смысла что-либо делать.

Для примера сделаем простенькую кнопку, чтобы на начальном этапе был понятен принцип ее создания. Мы будем использовать тег ссылки <a>, а еще можно задействовать тег button или input, но у них немного другая специализация. Поэтому будем работать с тегом ссылки.

Первым делом идет разметка HTML, то есть тег ссылки. И для лучшей определенности дадим нашему элементу класс, к примеру, wsbutton.

<a href="#">Button</a>

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

/*стиль кнопки по умолчанию*/
a.wsbutton{
    background: #3DB0F1;/*цвет фона*/
    border-radius: 3px;/*радиус скругления*/
    box-shadow: 0 -3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*внутрення тень*/
    color: #ffffff;/*цвет текста*/
    display: table;/*элемент таблицы*/
    font-family: sans-serif;/*семейство шрифта*/
    font-size: 14px;/*размер текста*/
    font-weight: bold;/*жирный шрифт*/
    line-height: 1.5;/*высота строки*/
    padding: 10px 25px;/*внутрение отступы*/
    margin:0 auto;/*выравнивание по центру*/
    text-decoration: none;/*убераем подчеркивание*/
    transition: all 0.3s;/*плавный эффект перехода*/
}
/*стили кнопки при наведении курсора мыши на нее*/
a.wsbutton:hover {
    background: #EB0563;/*другой цвет фона*/
    box-shadow: 0 3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*расположение тени сверху*/
}

Довольно все просто: в первом состоянии элемента (по умолчанию) задаем статичные стили. Это вид кнопки, которая будет находиться в нетронутом состоянии. Дальше для псевдоэлемента hover прописываем стили, которые будут применяться при наведении курсора мыши на нее.

Демо

Примеры кнопок CSS

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

3d кнопки

Демо Скачать Источник

Кнопки с анимацией фона

Демо Скачать Источник

Стильные hover эффекты

Демо Скачать Источник

Hover эффекты

Демо Скачать Источник

30 стилей hover эффектов

Демо Скачать Источник

Hover эффект тени

Демо Скачать Источник

Bootstrap button

Демо Скачать Источник

Кнопки с библиотекой Bootstrap

Демо Скачать Источник

Еще больше примеров здесь, здесь и здесь.

CSS свойство box-decoration-break

Пример

Укажите свойство box-decoration-break:

span.ex2 {
-webkit-box-decoration-break: ломтик;
-o-box-decoration-break: ломтик;
коробка-украшение-перерыв: кусочек;
}

Определение и использование

Свойство box-decoration-break определяет, как фон, отступы, border, border-image, box-shadow, margin и clip-path применяются когда коробка для элемента фрагментирована.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

коробка-украшение-разрыв: срез | клон | начальный | наследование | отключено;

Стоимость объекта

Реализация электронной почты в 2021 году: кнопки с закругленными краями в Outlook

Эта статья является частью серии Реализация электронной почты в 2021 году серии .Если вы пропустили введение, прочтите «Внедрение электронных писем в 2021 году: основы и как проверить сгенерированные электронные письма».

Эта часть будет о кнопках CTA (призыв к действию) в наших переработанных электронных письмах и о том, как нам удалось реализовать их в соответствии с требованиями дизайна.

Вот как выглядит типичное использование такой кнопки:

Ничего сложного: радиус границы, центрированный текст и тень. Три строчки CSS. Проблема в том, что Outlook не поддерживает ничего из этого.

Чему вас учат в Интернете?

Создание кнопки с закругленными углами для Outlook в наши дни не является чем-то необычным. Есть даже веб-сайты, которые генерируют для вас код кнопки. Отлично для начала!

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

Примечание: Мы использовали (и я покажу вам) кнопки VML для Outlook, вдохновленные приведенными выше решениями. Однако есть и другие варианты, которые следует учитывать.

Анатомия пуленепробиваемой кнопки электронной почты

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

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

   Открыть подробные сведения о подписке   

Он отлично отображается в большинстве почтовых клиентов, но в Outlook отображается неполное представление:

Чтобы обеспечить надлежащий фон в Outlook, ссылка должна быть заключена в условный объект VML v: roundrect , чтобы предоставить ему соответствующую область фона с закругленными углами.Дополнительный верхний уровень DIV сбрасывает интервал по умолчанию и предоставляет опорный кадр, который нам понадобится через несколько мгновений.

Результирующий код аналогичен тому, что генерировали бы генераторы кнопок выше.

  

        
        
            
            
            <центр>
        
        Открыть сведения о подписке 
        
            
            
        
        
    
  

Обратите внимание, как вы можете работать с дизайном для Outlook по сравнению с другими почтовыми клиентами. Обычно вы начинаете с обычного HTML со стандартными свойствами для работы других клиентов, а затем расширяете его содержимым для Outlook в соответствии с условием .Это характерно для всех почтовых решений для Outlook.

Но есть одна загвоздка. Outlook не очень хорошо умеет автоматически изменять размер объектов в зависимости от содержимого. Чтобы получить хорошее впечатление, особенно с большим отступом, вам просто нужно указать размер объекта. Это также причина, по которой генераторы кнопок, упомянутые в начале, требуют, чтобы вы вводили размер кнопки вместе с текстом.

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

Давай попробуем тени, а?

Позвольте мне резюмировать пару фактов, которые мы знаем на данный момент:

• Outlook не поддерживает многие стандартные свойства CSS, включая тень.
• Outlook поддерживает VML для расширенных визуальных эффектов.

Итак, логичный шаг — обратиться к спецификации VML и посмотреть, что она может предложить.

Он действительно поддерживает элемент shadow , поэтому первым логическим шагом кажется просто применить его к нашему объекту v: roundedrect .

  

    
    
    
    <центр>
  

Проблема в том, что VML поддерживает только одноцветную тень. Без градиентных теней. И результат выглядит так (без цвета). Не совсем то, что нам нужно:

Я даже пытался настроить двойную тень, но безуспешно.Это не сработало — прекрасный пример того, как Outlook не следует полной спецификации VML, а только ее часть.

Итак, какие еще у нас есть варианты? Это всегда либо предельно простой HTML и CSS, изображение или VML.

Думайте нестандартно, моделируйте тень

Что, если бы под кнопкой можно было добавить градиент красивой формы? Будет ли получен хороший теневой эффект? Посмотрим, какие у нас есть варианты …

В стандартном HTML мы могли бы просто использовать абсолютное позиционирование.Но нет, почтовые клиенты этого не поддерживают.

Прочитав массу статей по различным темам, которые нам нужно было затронуть, я наткнулся на официальную, но все же заархивированную документацию Microsoft по VML.

Ключевым ингредиентом является позиция: относительная , которая ведет себя аналогично позиции позиция: абсолютная в нормальном CSS, но только для объекта VML. Я предполагаю, что это вместе с верхним и левым переводится в функции формы MS Word, такие как «место перед текстом» и его соответствующее положение.

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

Я вернулся к спецификации VML и поискал, какие элементы на самом деле поддерживают градиенты.

На основе этого я создал еще один прямоугольник со скругленными углами с заливкой , используя тип заливки gradientradial . После небольшого экспериментирования и полировки я создал следующий код для рендеринга моей тени.

Форма градиента немного больше, чем сама кнопка, а ее фокус (область по умолчанию, имеющая полный цвет) настроен так, чтобы не выходить за пределы кнопки, но при этом обеспечивает наиболее согласованную тень. во всех местах.

Тонкая настройка тени — это вишенка на вершине, и это зависит от конкретного дизайна.

Последний шаг — объединить все вместе. Однако есть одна последняя загвоздка в реализации. Вам нужно разместить тень под кнопкой, а это значит, что вам нужно сделать кнопку относительной, иначе кнопка находится под тенью. Но если сделать все относительным, то не будет объекта для выделения пространства, необходимого для кнопки. Поэтому мы добавим еще один объект v: rect , который будет иметь стандартное встроенное положение и высоту кнопки, чтобы выделить для нас вертикальное пространство.

Это мой последний код кнопки. Довольно маленькая функция, но много кода для Outlook. Но это работает, и это главное!

  

    
        
    
        
    
        
    
        
    
        
        
        <центр>
    
     Открыть подробную информацию о подписке 
    
        
        
    
    
  

А вот как выглядит окончательный результат.Нам удалось разработать кнопку с тенью для Outlook!

Есть ли подвох при использовании такой кнопки?

Не было бы Outlook, если бы не было подвоха. Outlook и VML не поддерживают прозрачность градиента!

Итак, на самом деле вы видите градиент от оранжевого к белому, а не к физически прозрачному цвету .

Кроме того, поскольку позиция : относительная не выделяет место в документе (как и абсолютная позиция в обычном HTML), это также означает, что какой бы объект вы ни расположили таким образом, он может легко переполнить другие элементы, если вы не используете достаточно отрицательного пространства.

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

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

Что дальше?

Я показал вам, как создать красивую кнопку с градиентной тенью, и объяснил ограничения, которые накладывает дизайн. Решение работает хорошо, но не масштабируется для контейнеров общего размера.Подробнее об этом я расскажу в отдельной статье.

Это была вторая часть серии статей «Внедрение электронной почты в 2021 году» , но есть еще кое-что, что нужно узнать. Продолжайте читать одну из этих статей, основываясь на том, что вас больше всего интересует, или прочтите всю серию:

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

3D-кнопок с CSS Dropshadow и Transitions

Сегодня я хотел бы поделиться некоторыми стилями 3D-кнопок, созданными с помощью CSS drop shadow.Я использовал box-shadow для имитации 3D-эффекта, а также добавил несколько переходов CSS, чтобы он выглядел плавным при нажатии кнопок. Всего кнопок 8.

Ниже вы можете увидеть код базовой кнопки и 4 основных стиля. Отредактировав эти 4 стиля, вы сможете получить остальные 4. Кроме того, не стесняйтесь загружать исходный код и поэкспериментировать с ним, и дайте мне знать, что вы придумали.

Создание кнопки

Первое, что нам нужно сделать, это создать простую кнопку HTML.

  Я кнопка!  

Затем мы добавляем базовый стиль, чтобы он выглядел лучше:

 button {
    / * * /
    положение: относительное;
    отступ: 35 пикселей;
    маржа: 30 пикселей;
    ширина: 350 пикселей;
    / * Стиль шрифта * /
    размер шрифта: 30 пикселей;
    font-weight: жирный;
    цвет: #FFF;
    } 

Кнопка с падающей тенью снизу

После того, как у нас есть стиль и готовность базовой кнопки, все, что нам нужно сделать, это добавить новый класс , в данном случае «вниз» и добавить эффект тени к это вроде так.. :

  Я кнопка!  

Конечно, нам нужно сначала стилизовать этот класс:

 / * Стилизация кнопки * /
.вниз {
    -webkit-transition: легкость верхнего края 0,3 с, легкость тени 0,3 с;
    -moz-transition: ускорение на 0,3 с, box-shadow на 0,3 с;
    переход: ускорение на 0,3 с, тени на 0,3 с;

    фон: # 1abc9c;
    граница: сплошная 1px # 16a085;

    -webkit-box-shadow: 0px 9px 0px # 16a085;
    -moz-box-shadow: 0px 9px 0px # 16a085;
    box-shadow: 0px 9px 0px # 16a085;
}

/ * Когда кнопка нажата * /
.down: active {
    -webkit-transition: легкость верхнего края на 0,2 с, легкость тени на 0,2 секунды;
    -moz-transition: легкость верхнего края на 0,2 с, легкость тени на 0,2 с;
    переход: ускорение на 0,2 с по верхнему краю, с легкостью для тени на 0,2 с;

    маржа сверху: 9 пикселей;

    -webkit-box-shadow: 0px 0px 0px # 16a085;
    -moz-box-shadow: 0px 0px 0px # 16a085;
    box-shadow: 0px 0px 0px # 16a085;
} 

Кнопка с падающей тенью справа

Чтобы получить трехмерный эффект справа, все, что нам нужно сделать, это изменить значения box-shadow с box-shadow: 0px 9px 0px # 16a085; От до box-shadow: 9px 0px 0px # 8e44ad;

.Правильно {
    фон: # 9b59b6;
    граница: сплошная 1px # 8e44ad;

    -webkit-box-shadow: 9px 0px 0px # 8e44ad;
    -moz-box-shadow: 9px 0px 0px # 8e44ad;
    коробка-тень: 9px 0px 0px # 8e44ad;

    -webkit-transition: легкость margin-left 0,2 с, легкость box-shadow 0,2 секунды;
    -moz-transition: легкость margin-left 0.2s, легкость box-shadow 0.2s;
    переход: отступ влево 0,2 с, тени 0,2 с;
}

.right: active {
    маржа слева: 9 пикселей;

    -webkit-transition: легкость margin-left 0,2 с, легкость box-shadow 0,2 секунды;
    -moz-transition: margin-left 0.Легкость 2s, легкость box-shadow 0,2s;
    переход: отступ влево 0,2 с, тени 0,2 с;

    -webkit-box-shadow: 0px 0px 0px # 8e44ad;
    -moz-box-shadow: 0px 0px 0px # 8e44ad;
    box-shadow: 0px 0px 0px # 8e44ad;
} 

Кнопка с падающей тенью справа и снизу

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

 .rightBottom {
    переход: верхний край с легкостью 0,3 с,
    маржа слева 0.3с легкость,
    легкость box-shadow 0.3s;

    фон: # 03A9F4;
    граница: сплошная 1px # 1976D2;

    box-shadow: 1px 0px 0px # 1976D2,0px 1px 0px # 1976D2,
    2px 1px 0px # 1976D2,1px 2px 0px # 1976D2,
    3px 2px 0px # 1976D2,2px 3px 0px # 1976D2,
    4px 3px 0px # 1976D2,3px 4px 0px # 1976D2,
    5px 4px 0px # 1976D2,4px 5px 0px # 1976D2,
    6px 5px 0px # 1976D2,5px 6px 0px # 1976D2,
    7px 6px 0px # 1976D2,6px 7px 0px # 1976D2,
    8px 7px 0px # 1976D2,7px 8px 0px # 1976D2,
    9px 8px 0px # 1976D2,8px 9px 0px # 1976D2;
}

.rightBottom: active {
    переход: легкость на 0,3 с;
    маржа слева 0,3 с легкостью,
    легкость box-shadow 0.3s;

    маржа слева: 9 пикселей;
    маржа сверху: 9 пикселей;

    box-shadow: 0px 0px 0px # 1976D2;
} 

Кнопка с падающей тенью слева и сверху

Чтобы тени были слева и сверху, все, что вам нужно, это добавить минусы (-) перед каждым числом.

 .leftTop {
    переход: верхний край с легкостью 0,3 с,
    маржа влево 0,3 с легкостью,
    легкость box-shadow 0.3s;

    фон: # 4CAF50;
    граница: сплошная 1px # 388E3C;

    box-shadow: -1px -0px 0px # 388E3C, -0px -1px 0px # 388E3C,
    -2px -1px 0px # 388E3C, -1px -2px 0px # 388E3C,
    -3px -2px 0px # 388E3C, -2px -3px 0px # 388E3C,
    -4px -3px 0px # 388E3C, -3px -4px 0px # 388E3C,
    -5px -4px 0px # 388E3C, -4px -5px 0px # 388E3C,
    -6px -5px 0px # 388E3C, -5px -6px 0px # 388E3C,
    -7px -6px 0px # 388E3C, -6px -7px 0px # 388E3C,
    -8px -7px 0px # 388E3C, -7px -8px 0px # 388E3C,
    -9px -8px 0px # 388E3C, -8px -9px 0px # 388E3C;
}

.leftTop: active {
    переход: верхний край с легкостью 0,3 с,
    маржа влево 0,3 с легкостью,
    легкость box-shadow 0.3s;

    маржа слева: -10 пикселей;
    маржа сверху: -10 пикселей;

    box-shadow: 0px 0px 0px # 388E3C;
} 

Если у вас есть какие-либо вопросы, предложения и / или отзывы, связанные с этим, не стесняйтесь оставлять комментарии ниже!

CSS Shadow Parts - Ionic Documentation

CSS Shadow Parts позволяют разработчикам стилизовать свойства CSS для элемента внутри теневого дерева. Это чрезвычайно полезно при настройке Ionic Framework. Компоненты теневой DOM.

Ionic Framework - это распределенный набор Веб-компоненты. Веб-компоненты следуют Спецификация теневой DOM для инкапсуляции стилей и разметки.

Компоненты Ionic Framework не все компоненты Shadow DOM. Если компонент является компонентом Shadow DOM, в правом верхнем углу его документация по компонентам. Примером компонента Shadow DOM является компонент кнопки.

Shadow DOM полезен для предотвращения утечки стилей из компонентов и их непреднамеренного применения к другим элементам.Например, мы назначаем .button class к нашему компоненту ion-button . Без инкапсуляции Shadow DOM, если бы пользователь установил класс .button на одном из собственных элементов, он унаследует стили кнопок Ionic Framework. С ion-button - теневой компонент, это не проблема.

Однако из-за этой инкапсуляции стили также не могут «перетекать» во внутренние элементы компонентов Shadow. Это означает, что если компонент Shadow визуализирует элементы внутри своего теневого дерева, внутренние элементы не могут быть нацелены напрямую с помощью CSS.С помощью ion-select компонент в качестве примера, он отображает следующую разметку:

  
  # теневой корень
    
 
    
 
  

Текст заполнителя и элементы значка находятся внутри # shadow-root , что означает, что следующий CSS будет НЕ работа для стилизации заполнителя:

 
ion-select.select-placeholder {
  цвет синий;
}  

Итак, как решить эту проблему? CSS Shadow Parts!

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

Открытие детали

При создании компонента Shadow DOM часть может быть добавлена ​​к элементу внутри теневого дерева путем назначения часть атрибута элемента. Он добавляется к компоненту в Ionic Framework и не требует никаких действий со стороны конечного пользователя.

Продолжая использовать в качестве примера компонент ion-select , разметка обновляется, чтобы выглядеть следующим образом:

  
  # теневой корень
    
 
    
 
  

Выше показаны две части: заполнитель и значок . См. Документацию select для всех ее частей.

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

Как :: деталь работает

Псевдоэлемент :: part () позволяет разработчикам выбирать элементы внутри теневого дерева, которые были представлены через атрибут part.

Поскольку мы знаем, что ion-select предоставляет заполнитель часть для стилизации текста, когда значение не выбрано, мы можем настроить его следующим образом:

  ion-select :: part (заполнитель) {
  цвет синий;
  непрозрачность: 1;
}  

Стилизация с использованием :: part позволяет изменять любое свойство CSS, которое принимается этим элементом.

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

  ion-select :: part (заполнитель) :: first-letter {
  размер шрифта: 22 пикселя;
  font-weight: 500;
}  

Детали также работают с большинством псевдо-классов:

  ion-item :: part (native): hover {
  цвет: зеленый;
}  

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

Все открытые части для компонента Ionic Framework можно найти под заголовком CSS Shadow Parts на его странице API. Чтобы просмотреть все компоненты и их страницы API, см. Документация по компонентам.

Чтобы иметь детали, компонент должен соответствовать следующим критериям:

• Это компонент теневой DOM. Если это Компонент Scoped или Light DOM, дочерние элементы могут быть нацелены напрямую. Если компонент имеет область видимости или тень, он будет указан по имени на его страница документации компонента.
• Он содержит дочерние элементы. Например, ion-card-header является компонентом Shadow, но все стили применяются к элементу хоста. Поскольку у него нет дочерних элементов, детали не нужны.
• Дочерние элементы не являются структурными. В некоторых компонентах, в том числе ion-title , дочерний элемент является структурным элементом, используемым для размещения внутренних элементов. Мы не рекомендуем настраивать структурные элементы, так как это может привести к неожиданным результатам.

Мы приветствуем рекомендации по дополнительным деталям.Пожалуйста, создайте новая проблема GitHub с максимально возможным количеством информации при запросе детали.

Поддержка браузера

Части теней CSS поддерживаются в последних версиях всех основных браузеров. Однако некоторые из старых версий не поддерживают теневые части. Проверить поддержка браузера отвечает требованиям до внедрения частей в приложение. Если требуется поддержка старых версий браузером, мы рекомендуем продолжать использовать CSS-переменные для стилизации.

Псевдоэлементы с префиксом поставщика

Псевдоэлементы с префиксом поставщика в настоящее время не поддерживаются.Примером этого может быть любой из :: - webkit-scrollbar псевдоэлементы:

 
my-component :: part (scroll) :: - webkit-scrollbar {
  фон: зеленый;
}  

Дополнительную информацию см. В этой проблеме на GitHub.

Структурные псевдоклассы

Большинство псевдоклассов поддерживаются частями, однако структурные псевдоклассы - нет. Ниже приведен пример структурных псевдоклассов, которые не работают.

 
my-component :: part (container): first-child {
  фон: зеленый;
}


my-component :: part (контейнер): last-child {
  фон: зеленый;
}  

Цепные части

Псевдоэлемент :: part () не может соответствовать дополнительным :: part () с.

Например, my-component :: part (button) :: part (label) ничего не соответствует. Это связано с тем, что при этом будет раскрыто больше структурной информации, чем предполагалось.

Если на внутренней кнопке используется что-то вроде part = "label => button-label" , чтобы переместить внутренние части кнопки вверх на карту элементов собственной части панели, затем селектор, например my-component :: part (button-label) выберет метку только для одной кнопки, игнорируя любые другие метки.

Как настроить кнопку отправки с помощью CSS

 / ** CSS ** /

.clicky {
  / ** Смещение позиции ** /
  положение: относительное;
  верх: 0;
  margin-top: 0;
  нижнее поле: 10 пикселей;

  / ** Эффект 3D-блока ** /
  box-shadow: 0 10px 0 0 # 6B2A4A;

  / ** Сделайте это красивым ** /
  дисплей: блок;
  фон: # a47;
  цвет: #eee;
  заполнение: 1em 2em;
  граница: 0;
  курсор: указатель;
  размер шрифта: 1.2em;
  непрозрачность: 0,9;
  радиус границы: 10 пикселей;
}

.clicky: active {
  / ** Удаление эффекта 3D-блока при нажатии ** /
  тень коробки: нет;
  верх: 10 пикселей;
  нижнее поле: 0;
}

.clicky: hover {
  непрозрачность: 1;
}

.clicky: активный,
.clicky: focus {
  / ** Удаляем уродливый желтый контур Chrome ** /
  наброски: 0;
}
 

 

 НАЖМИТЕ МЕНЯ! 
 

 

   <кнопка>
      
      

      
      

         Нажми на меня!
      
   
 

 
 
 Сначала давайте убедимся, что наш CodePen настроен на включение Tailwind CSS.Создайте новый CodePen и добавьте Tailwind в настройках CSS. 
 Добавление попутного ветра в CodePen 
 Прежде чем мы приступим к созданию кнопки, давайте немного стилизуем область, над которой мы работаем. Мы используем классы гибкости Tailwind CSS, чтобы переместить кнопку в центр нашей рабочей области, и изменили цвет фона на светло-серый, чтобы немного раскрасить нашу кнопку. 
 
  

  

  
 У нас получится красивый синий фон. Мы также центрируем все в этом CodePen по центру с помощью flexbox.
 Мы собираемся разбить это на два элемента.
 Кнопка  Элемент  будет содержать саму кнопку. Используя Tailwind CSS, мы собираемся:
 Используйте  w-full , чтобы расширить кнопку до полной ширины родительского  div , и, поскольку ширина кнопки полная,
 Добавьте  m-10  для запас 2,5 бэр для создания небольшого пространства. № Нажми на меня!'.Мы стилизуем его с помощью закругленных границ Tailwind CSS ( rounded-lg ), светло-серого фона ( bg-gray-100 ) и немного более темной границы ( border-gray-500 ).
 Tailwind CSS также имеет несколько забавных вещей, которые мы можем добавить, чтобы повеселиться с нашими шрифтами. Изменение таких вещей, как
 Все это может иметь значение. Мы сделаем его немного больше с  text-xl , немного тоньше с  font-thin , отрегулируем высоту строки до его основания ( без ведущих, ) и, наконец, сделаем интервал между буквами шире, чем обычное использование  слежения - более широкое .
 Всегда полезно использовать отступы, чтобы текст не касался границы, поэтому добавляются отступы по оси x  px-10  и вдоль оси y  py-4  .
  

  <кнопка>
    
    

      Нажми на меня!
    
  

  
Нажмите, чтобы запустить CodePen


  <кнопка>
      
      

         Нажми на меня!
      
  

 
 
 
 Добавление теневого элемента придаст нашей кнопке нечто иное, чем обычное изменение цвета или наведение курсора на изменение текста.
 
 Мы добавим  bg-gray-100  для светло-серого фона, границу  border-gray-500  и закругленную границу, используя  Round-lg , как мы это сделали с текстом в нашей тени. 
 
  

  <кнопка>
    
    


    
    

      Нажми на меня!
    
  

  
Нажмите, чтобы запустить CodePen
 

  <кнопка>
      
      

      
      

         Нажми на меня!
      
  

 
 
 
 Но где наша тень? Наша кнопка, кажется, сдвинулась с места, а тень находится не там, где мы хотели.Мы хотим, чтобы тень сместила текст внизу. 
 
 Давайте переместим тень за кнопку и немного ниже текста. Первое, что нам нужно сделать, это выяснить, что будет позиционироваться относительным, а что - абсолютным. Я всегда боролся с этим и хочу позиционировать все абсолютно так, чтобы все было там, где я хочу. Но потом становится кошмаром, когда нужно переместить одну вещь; все просто сходит с ума. 
 
 Практическое правило: абсолютные элементы следует размещать внутри относительно позиционированных элементов, а относительные элементы - поверх позиционированных.Поэтому, когда мы перемещаем относительного родителя, все, что находится внутри, остается на месте. Хорошо, поехали. 
 
 
 Расположите нашу кнопку  относительно  
 
 Теневой div будет позиционироваться как  абсолютный , потому что я хочу, чтобы он находился под моим текстовым div 
 
 Текстовый div, который будет расположен  относительно , чтобы он мог располагаться поверх моего shadow 
 
  inset-x-0  и  bottom-1  - вот что переместит мою тень вниз, а текст вверх 
 
 
  

  <кнопка>
    
    


    
    

      Нажми на меня!
    
  

  
Нажмите, чтобы запустить CodePen
 

   <кнопка>
      
      

      
      

         Нажми на меня!
      
   
 
 
 
 Самое интересное! Использование Tailwind CSS, чтобы сделать нашу кнопку летающей.Использование состояний наведения Tailwind CSS - это так весело и просто. 
 
 Когда мы наводим курсор на кнопку, мы хотим, чтобы текст перекрывал тень, как клавиша на клавиатуре. Сначала мы добавим класс  transform , чтобы иметь возможность управлять перемещением текстового блока по оси Y. Мы будем использовать  hover: translate-y-1 , чтобы переместить его вниз, чтобы перекрыть то смещение, которое мы накладываем на тень. И угадайте, что еще мы можем контролировать в Tailwind CSS? Продолжительность и переход наведения. Мы добавим переход  , длительность -200,  и легкость выхода   для плавного наведения.
 
  

  <кнопка>
    
    


    
    

      Нажми на меня!
    
  

  
Нажмите, чтобы запустить CodePen
 

   <кнопка>
      
      

      
      

         Нажми на меня!
      
   
 
 
 Вы бы посмотрели на это ?! Потрясающая трехмерная кнопка, созданная с помощью Tailwind CSS.
No related posts.