Легко реализуемые и полезные CSS3-трюки

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

Множественные колонки CSS3 для адаптивных веб-дизайнов.

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

<div id="main" role="main">

<p>lloremipsimLoremipsum dolor sit amet, consectetur // БОЛЬШОЕ КОЛИЧЕСТВО ДОПОЛНИТЕЛЬНОГО ТЕКСТА //

</p>

<p>lloremipsimLoremipsum dolor sit amet, consectetur // БОЛЬШОЕ КОЛИЧЕСТВО ДОПОЛНИТЕЛЬНОГО ТЕКСТА //

</p>

</div>

Вы можете сделать так, чтобы все содержимое «растекалось» по нескольким колонкам, которые либо имеют определенную ширину (например, 12em), либо представлены в определенном количестве (например, 3). Далее показано, как это делается.

Если речь идет о колонках определенной ширины, то используйте следующий синтаксис (префиксы поставщиков не указаны для краткости):

#main { column-width: 12em;

}

Этот код означает, что, независимо от размера области просмотра, содержимое будет простираться на колонки шириной 12em. Изменение размеров области просмотра будет приводить к динамическому изменению количества отображаемых колонок.

Например, вот как все будет выглядеть в Safari при ширине области просмотра 1024 пиксела (рисунок 5.2).

На рисунке 5.3 показано, как та же страница будет выглядеть на экране iPad в области просмотра шириной 768 пикселов.

Текст разбит на четыре колонки

При меньшей области просмотра количество колонок уменьшается.

Превосходно приспосабливающийся макет, требующий минимума усилий, — это мне нравится! Если вы предпочтете сохранить фиксированное количество колонок и варьировать ширину, то вам потребуется правило вроде следующего:

#main { column-count: 4;

}

Добавление промежутка и разделителя колонок. Мы можем пойти еще дальше и добавить определенный промежуток между столбцами, а также разделитель:

#main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em;

}

В результате у нас получится следующее (рисунок 5.4).

Между колонками появился разделитель.

Ознакомиться со спецификацией CSS3 Multi-column Layout Module вы сможете по адресу http://www.w3.org/TR/css3-multicol/.

Теперь запомните, что для максимальной совместимости вам придется использовать префиксы поставщиков в объявлениях, касающихся колонок.

Перенос слов.

Сколько раз у вас возникала необходимость втиснуть длинный URL-адрес в очень маленькое пространство, и при этом вас постигало разочарование? Взгляните на проблему На рисунке 5.5. Обратите внимание на адрес внизу справа, выступающий за пределы отведенного для него пространства.

Адрес сайта не умещается в ширину колонки.

CSS3 позволяет решить эту проблему с помощью простого объявления, которое по стечению обстоятельств работает и в устаревших версиях Internet Explorer, причем даже в версии 5.5!

Word-wrap: break-word;

Добавив это объявление в код элемента-контейнера, мы получим результат, показанный На рисунке 5.6. Алле-гоп! Теперь длинный URL-адрес идеально вписывается в отведенное пространство благодаря переносу его части на новую строку!

Веб-адрес переносится на другую строку.

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

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