Лого www.SiteHere.ru

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

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

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

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

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

1. Pointer Events

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

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

Pointer Events

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

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

  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;  
}

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

Image Rotation

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;  
}

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

Columns

Подробную работу данного свойства Вы можете посмотреть в этой статье — Текст в несколько столбцов с помощью 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;  
}

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

Flex

Вывод

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

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

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

 

Успехов!

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

Вторая часть секретных свойств CSS3 — свойства CSS3 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

3 комментария к записи
  • ZeroXor

    Было бы счастье, когда б все браузеры поддерживали да юзеры обновляли эти самые браузеры вовремя. А то ведь и в наше время можно и IE7 (а то и IE6, чур меня!) встретить невозбранно.

     
  • duncan

    4. фокус с Flex даже в 10 ИЕ не работает

     
  • Богдан

    Хотелось бы узнать больше про «flex». Кто пробовал им пользоваться? На сколько это удобно? можно ли ширину колонок задавать в процентах? Как я понял «flex» растягивается по содержанию блока? А в каком случаи? Когда задаёшь «height:auto;» или «height:100%;»?

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *