Стилизация элементов
Красивое оформление элементов веб-страницы, коллекция на CSS.
Содержимое элемента.
<style>
.news {
display: inline-block;//элемент располагается как строка текста
line-height: 2em;//устанавливает величину пространства между строками, например в тексте.
vertical-align: middle;//описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов
text-align: left;//Расположение текста
user-select: none;//управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста.
color: rgb(0,0,0);
outline: none;//устанавливает все свойства контура элемента в одном объявлении (тип, ширина и цвет).
border: 1px solid rgba(0,0,0,.4);
border-top-color: rgba(0,0,0,.3);
border-radius: 5px;
background: linear-gradient(rgb(255,255,255), rgb(240,240,240));
box-shadow://Свойство box-shadow включает отбрасывание тени от границ практически любого элемента.
0 0 3px rgba(0,0,0,0) inset,
0 1px 1px 1px rgba(255,255,255,.2),
0 -1px 1px 1px rgba(0,0,0,0);
transition: .2s ease-in-out;
}
</style>
<p class="news">
Содержимое элемента.
</p>
Содержимое элемента.
<style>
.code {
position: relative;
display: inline-block;
font-size: 90%;
font-weight: 700;
color: rgb(9,9,17);
text-shadow: 0 -1px 2px rgba(0,0,0,.2);
padding: .5em 1em;
outline: none;
border-radius: 3px;
background: linear-gradient(rgb(210,212,120), rgb(181,181,186)) rgb(210,212,220);//представляет собой переходы от одного цвета к другому.
box-shadow:
0 1px rgba(255,255,255,.2) inset,
0 3px 5px rgba(0,1,6,.5),
0 0 1px 1px rgba(0,1,6,.2);
transition: .2s ease-in-out;
}
</style>
<p class="code">
Содержимое элемента.
</p>
<style>
.button {
position: relative;
display: inline-block;
line-height: 2.4em;
vertical-align: middle;
text-align: left;
text-decoration: none;
user-select: none;
color: #000;
outline: none;
border: 1px solid rgba(110,121,128,.8);
border-top-color: rgba(0,0,0,.3);
border-radius: 5px;
background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
box-shadow:
0 -1px rgba(10,21,28,.9) inset,
0 1px rgba(255,255,255,.5) inset;
}
</style>
<p class="button">
Содержимое элемента.
</p>