Друга частина секретних властивостей css3 - властивості css3

Пора Вам дізнатися ще про 5-й секретних властивості CSS3. З минулої статті ви побачили що є властивості, які використовуються дуже рідко, але все ж десь їх застосувати можна і потрібно. Але в CSS3 більше ніж 5 маловідомих і рідко використовуються властивостей, сьогодні ми розглянемо ще 5. Думаю вони Вас також здивують, бо з їх допомогою можна здійснювати цікаві речі.

Минулу частину статті, де я розглянув 5 секретних властивостей CSS3 Ви можете знайти здесь:

• 5 секретних властивостей CSS3 - частина 1

Трохи прикладів використання CSS3:

Відео: HTML і CSS - позиціонування елементів. Робота з властивістю position

• Підказки CSS3
• Приголомшлива анімована 3D кнопка на CSS3

Друга частина секретних властивостей CSS3

1. Pointer Events

Почнемо ми з властивості pointer-events. Воно було введено для SVG, але потім його перенесли в специфікацію CSS4 (так, це не помилка, саме туди його і перенесли). Щоб розібратися в чому суть даного властивості уявімо таку ситуацію «один елемент на сторінці розташований поверх іншого, але ми хочемо зробити так, щоб нижній реагував на покажчик миші, тобто був клікабельним і при наведенні міняв колір». У цьому випадку необхідно використовувати дане властивість.

Але ми розглянемо більш стандартний приклад, який Ви зможете прямо зараз застосувати на власному сайті. Ситуація наступна: у нас є меню на сайті, і ми хочемо зробити щоб при активному пункті меню не був клікабельним і не міняв колір при наведенні курсору миші.

Цей скріншот (зображення) меню з цієї статті - Адаптивне меню для сайту. І я хочу зробити так: якщо ми знаходимося, наприклад на сторінці «Портфоліо» то цей елемент меню стає неклікабельним і не реагує на наведення.

Що нам для цього потрібно?

1. У кожного активного елементу меню задати клас active (Як правило, в будь-якій темі WordPress, Joomla, DLE і так далі, цей клас заданий у елементів меню за замовчуванням).
2. Відкрити файл стилів і додати для посилань меню a.current наступна властивість:

   1234	a.current {/ * ... тут Основні стилі для цього клас ... * /pointer-events: none-}

2. Image Orientation

У графічному редакторі, наприклад в Adobe Photoshop, Ви можете обертати зображення або взяти і відобразити зображення по горизонталі. Зараз в CSS3 за допомогою нового властивості image-orientation у Вас є можливість зробити це без використання графічного редактора. Ось приклад коду щоб відобразити зображення по горизонталі:

123

img {image-orientation: flip-}

А тут ми повертаємо зображення на 90 градусів за годинниковою:

123

img {image-orientation: 90deg-}

Ну і звичайно ж, реальний приклад:

Відео: CSS Grid # 2 Властивість grid template columns і створення 3х колоночного макета

3. Image Rendering

Подібно до того, як властивість text-rendering (Розглядалося в минулій статті) впливає на шрифти, так ця властивість image-rendering впливає на якість зображень на сторінці. З введенням даного властивості у кожного браузера з`явилися свої значення. Ось які значення потрібні для відповідних браузерів:

12345

img {image-rendering: crisp-edges-image-rendering: -webkit-optimize-contrast- / * Webkit * /-ms-interpolation-mode: nearest-neighbor- / * IE * /}

4. Columns

властивість columns дозволяє розробникам розбити текст на сторінці в кілька колонок. Наприклад ми хочемо розбити текст в блоці з класом content в дві колонки, для цього в CSS необхідно написати:

123

.content {columns: 2-}

Відео: Flexbox CSS3 # 2 - Властивості FlexBox

Ось як це буде відображатися в браузері:

Детальну роботу даного властивості Ви можете подивитися в цій статті - Текст в декілька стовпців за допомогою CSS3.

5. Flex

За допомогою властивості flex можна зробити адаптивну сітку на сайті, без використання властивості float.

Крім цього, колонки по висоті будуть займати всю висоту контейнера.

Наприклад візьмемо наступну структуру з 3-х колонок:

12345

lt;div id="Container"gt;lt;div class="Col"gt; Column 1lt;/divgt;lt;div class="Col"gt; Column 2lt;/divgt;lt;div class="Col"gt; Column 3lt;/divgt;lt;/divgt;

І застосуємо наступні властивості:

123456789

#container {width: 600px-height: 300px-display: flex-}#container .col {flex: auto-}

Ось що ми отримаємо в результаті:

Відео: CSS3 для початківців

висновок

З другої частини статті ви дізналися ще 5 властивостей, які вкрай рідко використовуються веб-майстрами. Хочу трохи резюмувати всі описані вище якості.

Ви можете перейти до відповідної властивості просто клікнувши на нього нижче:

1. Pointer Events - заборона реагування елемента на кліки і наведення курсору.
2. Image Orientation - поворот, відображення зображень по горизонталі.
3. Image Rendering - відображення зображень на сторінці.
4. Columns - текст в декілька колонок.
5. Flex - колонки однієї висоти.

Успіхів!

З повагою, Юрій Німець