Вторая часть секретных свойств CSS3 — свойства CSS3

Пора Вам узнать еще о 5-и секретных свойствах CSS3. Из прошлой статьи вы увидели что есть свойства, которые используются очень редко, но всё же где-то их применить можно и нужно. Но в CSS3 больше чем 5 малоизвестных и малоиспользуемых свойств, сегодня мы рассмотрим еще 5. Думаю они Вас также удивят, потому что с их помощью можно осуществлять интересные вещи.

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

• 5 секретных свойств CSS3 — часть 1

Немного примеров использования CSS3:

• Всплывающие подсказки CSS3
• Потрясающая анимированная 3D кнопка на CSS3

Вторая часть секретных свойств CSS3

1. Pointer Events

Начнём мы со свойства pointer-events. Оно было введено для SVG, но затем его перенесли в спецификацию CSS4 (да, это не опечатка, именно туда его и перенесли). Чтобы разобраться в чем суть данного свойства представим такую ситуацию «один элемент на странице расположен поверх другого, но мы хотим сделать так, чтобы нижний реагировал на указатель мыши, то есть был кликабельным и при наведении менял цвет». В этом случае необходимо использовать данное свойство.

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

Этот скриншот (изображение) меню из этой статьи — Адаптивное меню для сайта. И я хочу сделать так: если мы находимся, к примеру, на странице «Портфолио» то этот элемент меню становится некликабельным и не реагирует на наведение.

Что нам для этого нужно?

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

   1 2 3 4

   a.current { /* ... здесь основные стили для этого класс ... */ pointer-events: none; }

2. Image Orientation

В графическом редакторе, например в Adobe Photoshop, Вы можете вращать изображения или взять и отразить изображение по горизонтали. Сейчас в CSS3 с помощью нового свойства image-orientation у Вас есть возможность сделать это без использования графического редактора. Вот пример кода чтобы отразить изображение по горизонтали:

1
2
3

img {  
    image-orientation: flip;      
}

А здесь мы поворачиваем изображение на 90 градусов по часовой:

1
2
3

img {  
    image-orientation: 90deg;  
}

Ну и конечно же, реальный пример:

3. Image Rendering

Подобно тому, как свойство text-rendering (рассматривалось в прошлой статье) влияет на шрифты, так данное свойство image-rendering влияет на качество изображений на странице. С введением данного свойства у каждого браузера появились свои значения. Вот какие значения нужны для соответствующих браузеров:

1
2
3
4
5

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

4. Columns

Свойство columns позволяет разработчикам разбить текст на странице в несколько колонок. К примеру мы хотим разбить текст в блоке <div> с классом content в две колонки, для этого в CSS необходимо написать:

1
2
3

.content {  
    columns: 2;  
}

Вот как это будет отображаться в браузере:

Подробную работу данного свойства Вы можете посмотреть в этой статье — Текст в несколько столбцов с помощью CSS3.

5. Flex

С помощью свойства flex можно сделать адаптивную сетку на сайте, без использования свойства float.

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

К примеру возьмем следующую структуру из 3-х колонок:

1
2
3
4
5

<div id="container">  
    <div class="col">Column 1</div>  
    <div class="col">Column 2</div>  
    <div class="col">Column 3</div>  
</div>

И применим следующие свойства:

1
2
3
4
5
6
7
8
9

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

Вот что мы получим в итоге:

Вывод

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

Вы можете перейти к соответствующему свойству просто кликнув на него ниже:

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

Успехов!

С Уважением, Юрий Немец