Архив метки: html

Кнопка полностью на CSS3

Создадим кнопку с помощью только стилей версии CSS3.

Для этого создадим в самой html странице заготовку для нашей будущей кнопки

<a href="">CSS3</a>

Сами стили для тега <а> будут выглядеть так:

a {
position: relative;
color: white;
text-decoration: none;
background-color: rgba(219,87,5,1);
font-weight: 700;
font-size: 2em;
display: block;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,1);
margin: 100px auto;
width: 100px;
text-align: center;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}
a:active {
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}

В итоге получиться наша кнопка как в картинке в заголовке.

Подключение своего шрифта

Подключение и использование своего шрифта на сайте.

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

@font-face {
font-family:myFonts;
src: url('myFonts.TTF');
}

Этим мы привязываем имя шрифта с его местоположением

Затем это имя можно использовать в других стилях, например так для параграфа.

p {
font-family: myFonts;
}

и в теле страницы

<body>
Hello world ПРивет
<p>
Hello world ПРивет
</p>
</body>

Скриншот примера

Шрифт