smsc banner 468x60smsc banner 728x90smsc banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

В этом разделе мы обсудим некоторые интересные свойства CSS3, связанные с пользовательским интерфейсом, такие как resize, outline-offset и т. д., которые вы можете использовать для улучшения своих веб-страниц.

Свойство resize

Вы можете изменить размер элемента по горизонтали, вертикали или в обоих направлениях с помощью свойства CSS3 resize. Однако это свойство обычно используется для удаления поведения по умолчанию для элементов с изменяемыми размерами, например <textarea>.

p, div, textarea {
    width: 300px;
    min-height: 100px;
    overflow: auto;
    border: 1px solid black;
}
p {
   resize: horizontal; 
}
div {
    resize: both;
}
textarea {
    resize: none;
}

Свойство outline-offset

В предыдущем разделе мы разобрали, как установить различные свойства для контуров, такие как ширина, цвет и стили. Тем не менее, CSS3 предлагает еще одно свойство outline-offset для установки пространства между контуром и границей элемента. Это свойство может принимать отрицательное значение, что означает, что вы также можете переместить контур внутрь элемента.

p, div {
    margin: 50px;
    height: 100px;
    background: #000;
    outline: 2px solid red;
}
p {
    outline-offset: 10px;
}
div {
    outline-offset: -15px;
}
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…