0

Здравствуйте уважаемые коддры!

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

Есть кнопка (пр. ниже), у неё задано тиснение:


скриншот - Как определить эти стили в CSS ?

Цвет градиента #8d6262 и #393232, думал через text-shadow, но оно не хочет так работать, может кто-то из вас знает ?

btn-size : 460 пикс. на 77 пикс.

border-radius : 38.5 пикс.

Благодарю, что дочитали до конца! ;)

1

2 ответа 2

5

Можно добавить несколько теней – внешнюю, внутреннюю черную, внутреннюю белую:

body {
  background: wheat;
  padding: 50px;
}

.btn {
  width: 460px;
  height: 77px;
  border-radius: 38.5px;
  background: linear-gradient(90deg, #8d6262, #393232);
  box-shadow: 
  2px 2px 10px 0px rgba(0, 0, 0, .2), 
  inset -4px -4px 20px 0px rgba(0, 0, 0, .4), 
  inset 4px 4px 20px 0px rgba(255, 255, 255, .4);
}
<div class="btn"></div>

1
  • во, то что нужно, благодарю Артём ;)
    – ccxdec
    17 авг 2018 в 7:05
1

@import url('https://fonts.googleapis.com/css?family=Leckerli+One');
body {
  font-family: 'Leckerli One', cursive;
  font-size: 600%;
  background-color: #ccc;
  color: #aaa;
  font-style: italic;
  text-shadow: 1px 1px 1px #fff;
}
<h1>Lorem ipsum</h1>

Можно почитать тут : https://habr.com/post/137005/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.