Урок №12 Потребителски интерфейс в CSS3 - 27 October 2014

Home » » Урок №12 Потребителски интерфейс в CSS3

8:30 AM

Урок №12 Потребителски интерфейс в CSS3

Потребителски интерфейс в CSS3

В CSS3, някои от новите функции са промяната на размера на елементите, промяна на размера на кутиите и очертанията.

В този урок ще научите следните свойства свързани с потребителския интерфейс:

resize
box-sizing
outline-offset

Поддържащи браузъри

Цифрите в таблицата определят най-ниската версия на браузъра която напълно поддържа това CSS3 свойство.

Числата след които има -webkit-, -moz-, или -o- определят първата версия която е работа с префикс.

Свойство
resize	Не се поддържа	4.0	5.0 4.0 -moz-	4.0	15.0
box-sizing	Частично от 8.0	10.0 4.0 -webkit-	29.0 2.0 -moz-	5.1 3.1 -webkit-	9.5
outline-offset	Не се поддържа	4.0	5.0 4.0 -moz-	4.0	9.5

Промяна на размер в CSS3

В CSS3, свойството за промяна на размера (resize) задава дали на потребителя да бъде разрешено да променя елемента.

Можете да променяте размера на този div елемент (в Firefox, Chrome, и Safari).

Това се постига с този CSS код:

Пример

Дава възможността на потребителите да променят размера на елемент:

div {

    resize: both;

    overflow: auto;

}

Промяна на размера на кутиите в CSS3

Свойството box-sizing се използва за да каже на браузъра какво свойствата за размер (width и height) трябва да включват.

Дали трябва да са приложени върху кутия (border-box) или просто върху content-box което е стойността по-подразбиране за width и height.

Например ако искате 2 кутии с рамки (bordered boxes) една до друга, можете да го постигнете като зададете в box-sizing - "border-box". Това ще принуди браузъра да възпроизведе страницата със зададените от вас широчина и височина (width и height), и ще постави рамката и отстъпването (padding) в кутията.

Пример

Създава две кутии с рамки една до друга.

div {

    -moz-box-sizing: border-box; /* Firefox */

    box-sizing: border-box;

    width: 50%;

    float: left;

}

Outline-offset (очертания) в CSS3

Свойството outline-offset прилага очертание отвъд острието на рамката.

Очертанията се различават от рамките по две неща:

Очертанията не заемат място
Очертанията могат да бъдат : non-rectangular

Този div има очертание 15px извън рамката.

Това се постига с този CSS код:

Пример

Задава очертание на 15px отвъд рамката:

div {

    border: 2px solid black;

    outline: 2px solid red;

    outline-offset: 15px;

}

Свойства на потребителския интерфейс в CSS3

Следващата таблица разглежда всички свойства на потребителския интерфейс:

Свойство	Описание	CSS
appearance	Позволява ви да накарате елемент да изглежда като стандартен елемент от потребителския интерфейс.	3
box-sizing	Позволява ви да зададете как конкретен елемент да запълни конкретна област.	3
icon	Позволява на автора да стилизира елемент с еквивалент на икона.	3
nav-down	Задава кога да се навигира чрез arrow-down копчето.	3
nav-index	Задава реда на tabbing за елемент.	3
nav-left	Задава кога да се навигира чрез arrow-left копчето.	3
nav-right	Задава кога да се навигира чрез arrow-right копчето.	3
nav-up	Задава кога да се навигира чрез arrow-up копчето.	3
outline-offset	Прилага очертание, и го рисува отвъд острието на рамката.	3
resize	Определя дали потребителите да могат да променят размера на елемент.	3

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :

Всички коментари: 0