CSS. Урок 4 (направление текста, закругление углов, тень, шрифты)



Направление текста

Иногда, очень редко, бывает нужно написать текст справа-налево. В этом случае используем свойство

.ClassName  {

                         direction: ltr или rtl;

}

 

Закругленные углы у границ

Самая "фишка" любых кнопок, красивых блоков - закругленные углы границ. Мы указываем в пикселях радиус закругления всех углов одновременно

.ClassName  {

                         border-radius: 5px;

}

 Или можем по-очереди указать те углы, которые нам надо закруглить (верх-лево, верх-право, низ-право, низ-лево)

.ClassName  {

                         border-radius: 10px 0px 10px 0px ;

}

 

Тень от блока

Тень от блока может быть одна или несколько, перечисленных через запятую. Каждая тень отписывается несколькими параметрами, некоторые из которых могут быть опущены:

<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Сдвиг может быть как положительным, так и отрицательным. Цвета указываются в RGB.

.ClassName  {

                         box-shadow: 10px -5px 20px #5555ff;

}

Указание нескольких теней может потребоваться в очень редких случаях, при особенно альтернативной верстке и выглядит примерно так:

.ClassName  {

                         box-shadow: 10px -5px 20px #5555ff, -5px -7px 2px #dedecf;

}

 

Издевательства над курсором

Если у нас имеется собственный офигенно креативный курсор, то мы можем указать путь к файлу

.ClassName  {

                         cursor: url('files/cursor.cur');

}

Можно использовать стандартные типы курсоров в виде руки

.ClassName  {

                         cursor: pointer;

}

или в виде курсора со знаком вопроса

.ClassName  {

                        cursor: help;

}

 

Шрифты

Указывая шрифт, в одном свойстве мы перечисляем сразу кучу свойств: размер, толщину, тип шрифта, эффекты. Вот так указываем надпись размером 12 пикселов, жирным курсивом, тип Sans Serif.

.ClassName  {

                        font: 12px bold italic serif;

}

 Параметров множество, чуть позже будут варианты расписаны подробнее.

 

Расстояние между буквами

.ClassName  {

                        letter-spacing: 3px;

}

 

Минимальные и максимальные размеры

При использовании принципов "резиновой верстки", о которой расскажу чуть позднее, блоки могут увеличиваться или уменьшаться в размерах в зависимости от ширины и высоты окна браузера. Это удобно, когда вы хотите, чтобы сайт выглядел одинаково и на нетбуке с экраном 10 дюймов и на огромном телевизоре с разрешением UHD 4k. Но иногда бывает недопустимо, чтобы блок превышал какие то размеры или наоборот не становился меньше какого то расчетного минимума, после которого весь вид и разметка просто потеряют свой вид. Тогда указываем (опционально) минимальные и максимальные ширину и высоту.

.ClassName  {

                        min-width: 300px;

                        width: auto;

                        max-width: 1300px;

                        min-height: 300px;

                        max-height: 500px;

}