5 Простих і корисних властивостей css, css-tricks по-російськи

5 простих і корисних властивостей CSS

У цій статті я розповім про п'ять корисні властивості CSS, про які ви, звичайно ж, знаєте, але можливо вже забули. Я не буду розповідати про чудові властивості CSS3. Я розповім про наступні властивості CSS 2-го стандарту: clip. min-height. white-space. cursor і display. Ці властивості підтримуються багатьма браузерами.

Властивість clip дозволить вам показати тільки певну прямокутну частину будь-якого елементу. Для того щоб домогтися цього необхідно встановити абсолютне позиціонування для цього елемента (position: absolute;). Потім вказати значення top. right. bottom і left для властивості clip щодо цього елемента.

У цьому прикладі показаний приклад використання CSS-властивості clip. По-перше, встановлюємо елементу-контейнера

відносне позиціонування (position: relative). Потім встановлюємо елементу img. який знаходиться в цьому контейнері властивість position в absolute і, відповідно, пишемо значення для прямокутника, по якому будемо відсікати зображення у властивості clip.

Використовуємо clip разом зі зміною розміру.

У цьому прикладі я хочу вам показати як змінити розмір картинки, а потім обрізати її. Моє оригінальне зображення прямокутного формату. Я хочу зменшити його в 2 рази. Отже, я використовую властивості width і height щоб встановити йому конкретний розмір і застосовую властивість clip. Оскільки я хочу, щоб моє зображення було квадратним, я встановлюю не нульовий left для clip. а також зрушую картинку вліво, на цю ж величину. Приклад прояснить ситуацію:

Схожі статті