• 0
Agony741

Как сделать такой нижний border или что это ?

Вопрос

Всем привет! Есть такая кнопка:

btn-shop.png.be62c6ba733826a6390849959cdabdd0.png

Не понимаю, как сделать внизу такую темную линию, или через какое свойство достигается "такое" - не знаю как назвать даже. 
Подскажите пожалуйста, как это сделать ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

6 ответов на этот вопрос

Рекомендованные сообщения

  • 1

Для этого требуется использовать свойство "border-bottom". На примере показано наглядно — https://jsfiddle.net/6px83oee/2/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 1

А серую обводку можно сделать с помощью 

  outline-offset:1px;
  outline:1px solid lightgrey;

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 1
4 минуты назад, klierik сказал:

А серая обводочка — это стили форума ;)

Ох блин :) ну и ладно, все равно ведь можно :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: connecticum
      Господа, требуется ваша помощь!  Я просто запутался, голова идет кругом! Суть проблемы такова, я посмотрел уже достаточно много курсов и до сих пор не могу понять как правильно верстать! Вроде неплохо знаю теорию, различные инструменты, пишу на js небольшие приложения, но вот основы верстки никак не могу понять! Саму базу. В принципе, я могу взять любой макет и сверстать по нему сайт, но разве какой-нибудь margin-top: -3px и right: 7px являются правильным подходом? Это ведь говнокод! Но зато я сделаю как на макете. Но ведь так верстать полюбому неправильно! Я не могу понять именно как ПРАВИЛЬНО верстать!
      Попробую структурировать вопросы:

      1.    С чего начинается верстка? Допустим с макета psd. Я сажусь рисовать макет, какой размер холста мне выбрать? Где можно посмотреть, найти эти стандарты? Вообще не знаю размеры макетов.
      2.    В чем задаются все размеры в 2018г?  Неужели еще в пикселях? Rem или em?
      3.    Допустим я нарисовал макет, сверстал его, дальше просто media-queries добавляю  и под каждый брейкпоинт изменяю верстку?
      4.    Какие делать брейкпоинты? Есть ли «золотой набор»? Можно своровать от бутстрапа?
      5.    Как добиться чтобы сайт смотрелся на всех экранах одинаково? Как быть с разным pixel ratio?
      6.    Как тестировать вид сайта на разных учтройствах? Достаточно в панели разработчика в хроме? Есть ли какие-нибудь сервисы для этого?
      7.    Если на каком-то экране смотрится коряво, то создавать новый брейкпоинт под это устройство?
      8.    Насколько критично добавлять бутстрап к проекту и jquery? В инете столько негатива на этот счет, что сильно увеличивает размер странички и т.п. Есть ли смысл менять бутстрап на что-нибудь легковесное только из-за его размера?
      9.    По поводу бэма – насколько он популярен, стоит ли его использовать и не избыточно ли добавление класса к каждому элементу? 
      10.    Можно ли использовать в 2018г большую вложенность в css div > ul > li > a? Мне так удобно.
      11.    Вот на этом пункте мне немного стыдно, но я до сих пор не знаю как правильно оформлять main css, чтобы подключать его к нескольким страницам. Как вообще с этим в обычной практике, для каждой страницы своя стилизация используется или подключаются несколько стилей вкупе с главной?
      12.    Дайте пример видоса(курса) эталонной верстки?! Язык не важен. Смотрел базовый курс от htmlacademy – крайне не понравился, там нет ответов на мои вопросы. 
       
      Ребята, буду крайне вам благодарен если поможете расставить все по полочкам!!!
      Спасибо!
       
    • Автор: Agony741
      1. Начал задумываться, какие методы верстки существуют еще кроме тех что ниже перечислены ? 

      Мне знакомы: 
      - Таблицы (плохое решение для 2018 года я так понимаю)
      - Флоаты (я так понимаю для поддержки старых браузеров)
      - Флексы (только для современных браузеров)
      - Гриды (плохая поддержка браузерами)
      - Сетки (вроде bootstrap, foundation, применяются в реальных проектах, или только для прототипирования ?)
      Что еще есть ?

      2. Какой есть порядок верстки, и какому из них придерживайтесь, почему ?
       
      Например я знаю: 
      1. Когда тупо верстаешь сверху вниз. 
      2. Сначала структуру страницы создаешь затем: 
      a. либо сперва сетку, потом стили задаешь;
      b. либо сначала стили, а потом на сетку насаживаешь;
      Как вы верстайте, каким способом ? 
       
       
    • Автор: arsenalsar
      Ищу удаленную работу с возможностью развиваться в фронтенде.
      Пример верстки https://nzgf1434.github.io/malyshev.github.io/  исходники https://github.com/nzgf1434/waxom-page
      Учился в EPAM. C#, JS, html, css, gulp, sass, svg, photoshop, zeplin, продолжаю учиться сам. 
      От 5000 р. / нед.
      arsenalsar@yandex.ru 

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы