Більше стилів богу стилів
box-sizing - визначає, чи враховувати внутрішні відступи і границі в загальний розмір блоку.
При значенні box-sizing: content-box; внутрішні відступи і границі не враховуються в розмір блока, width та height задають розмір контента.
При значенні box-sizing: padding-box; внутрішні відступи враховуються в розмір блока, а границі - ні.
При значенні box-sizing: border-box; внутрішні відступи і границі враховуються в розмір блока.
width: 300px;
padding: 0 60px;
width: 300px;
padding: 0 60px;
box-sizing: border-box;
box-shadow - добавляє тінь до блока.
span {
display: inline-block;
padding: 20px 40px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
span ~ span { box-shadow: 3px 3px 10px rgba(255,0,0,0.3) inset;}
span.four { box-shadow: 5px 5px 5px 10px rgba(0,0,255,0.5);}
Блок з тінню ззовні Блок з тінню всередині Блок
Можна застосувати декілька тіней одночасно, записавши їх через кому:
.box { box-shadow: 5px 5px 10px rgba(0,0,0,0.3),
3px 3px 10px rgba(255,0,0,0.3) inset,
5px 5px 5px 10px rgba(0,0,255,0.5); }
text-shadow - добавляє тінь до тексту.
p { text-shadow: 3px 3px 10px rgba(255,0,0,0.3);}
p.white { color: #fff; text-shadow: 0 0 5px rgba(0,0,0,1);}
Текст з червоною тінню.
Білий текст на білому фоні.
Декількома тінями можна зробити обводку довкола текста:
.text { text-shadow: -1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black,
-1px 0 0 black,
1px 0 0 black,
0 -1px 0 black,
0 1px 0 black; }
Білий текст з чорною обводкою.
Градієнт.
Градієнт добавляється до фона як зображення:
.bg {
background: #f00; /* фон якщо браузер не підтримує градієнт */
background-image: linear-gradient(to bottom, #f00, #00f);
}
.bg1 {
background-image: linear-gradient(30deg, #f00, #0f0, #f0f, #00f);
}
Блок з градієнтом Блок .bg1 з градієнтом
Повторювані та радіальні градієнти:
background: repeating-linear-gradient(red, yellow 10%, green 20%);
background: radial-gradient(red, yellow, green);
background: radial-gradient(red 5%, yellow 15%, green 60%);
background: radial-gradient(circle, red, yellow, green);
background: repeating-radial-gradient(red, yellow 10%, green 15%);
Про зміщення центру градієнта можна почитати на сайті w3schools
Стилі counter-increment та counter-reset застосовуються для псевдоелементів :before, :after у списках <ul>, <ol>, <dl> для створення нумерації пунктів списків.
Стиль cursor задає вид курсора коли користувач наведе вказівник миші на блок.
Всі курсори можна подивитися на webref.ru/css/cursor
Можна задати свій власний курсор, поексперементуйте у jsFiddle.
Після коми задається курсор, що буде застосовано, якщо картинка не загрузиться
.box { cursor: url(images/my-cursor.png), auto; }
Приклад картинки, хто не бажає шукати власну.
Стилі letter-spacing та word-spacing служать для зміни міжсимвольних та міжслівних інтервалів. За замовчуванням значення - 0(px).
Стиль white-space регулює поведінку при перенесенні рядків, відображенні тексту. white-space: nowrap; забороняє переніс слів на наступний рядок, white-space: pre; - задає блоку стиль, аналогічний тегу <pre>
.text { letter-spacing: 5px;}
.text { letter-spacing: -2px;}
.text { word-spacing: 20px;}
.text { word-spacing: -10px;}
.text { white-space: nowrap;}
.text { white-space: pre;}
Текст зі стилем letter-spacing: 5px.
Текст зі стилем letter-spacing: -2px.
Текст зі стилем word-spacing: 20px.
Текст зі стилем word-spacing: -10px.
Дуже-дуже довгий текст, який не буде переноситися, тому що в нього встановлено заборону переносу строк стильом white-space: nowrap.
Текст з купою пробілів , які не скорочуються !!
Текст, до якого застосовується стиль text-transform: uppercase; виглядає зжатим. До такого тексту зазвичай застосовують розрідження у декілька пікселів: letter-spacing: 2px;
Привіт, Світ!!!
Привіт, Світ!!!
Стиль opacity встановлює рівень прозорості елемента від 0% до 100% або від 0 до 1 дробними числами.
Для дробних значень більше 0 і менше 1 нуль можна не вказувати: opacity: .4 (загальне правило в програмуванні).
Стиль overflow регулює, чи буде відображатися контент за межами блока.
overflow-x, overflow-y - обмеження видимості тільки по горизонталі чи вертикалі, часто використовується для відображення однієї полоси прокрутки і приховування іншої.
Стиль text-overflow схожий стиль, використовується для текста.
/* текст в одну строку, якщо задовгий - обривати його трьома крапками: ... */
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
Нажаль, цей стиль працює тільки для текста в одну строку.
text-decoration - оформлення тексту:
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-indent - зміщення першого рядка тексту:
text-indent: 40px; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.Lorem ipsum dolor sit amet.
text-indent: -40px; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.Lorem ipsum dolor sit amet.
vertical-align - розташування строчного елементу у відношенні від базової лінії шрифта:
vertical-align: baseline - Зображення 
на базовій лінії шрифта (по замовчуванню).
vertical-align: middle - Зображення вирівняне по центру.
vertical-align: top - Зображення вирівняне по верху.