5 секретных свойств CSS3 — секретные свойства CSS3

5 секретных свойств CSS3 — секретные свойства CSS3

CSS3 делает веб-дизайн более захватывающим, вводя новые свойства. Возможно вы знаете самые популярные и часто используемые свойства, такие как border-radius, box-shadow и transform, но есть еще много свойств, о которых, возможно, где-то слышали, но хотелось бы узнать подробнее. Консорциум W3C постоянно работает над новыми свойствами CSS, чтобы сделать веб еще лучше для дизайнеров, разработчиков и простых пользователей. Итак, давайте посмотрим что это за 10 свойств!

Еще статьи на тему CSS3:

  • Подводные камни CSS и как с ними бороться
  • CSSMatic — автоматизированный сервис для веб-дизайнеров
  • Загинаем угол на CSS3

Кстати, свои знания CSS3 вы можете проверить здесь, пройдя небольшой тест:

  • Тест CSS3. Cтандарт оформления HTML документов

5 секретных свойств CSS3

1. Tab Size

Сейчас речь пойдет о коде (CSS, HTML, PHP и т.д.). При редактировании информации в каком-либо редакторе, для того чтобы она выглядела в удобочитаемом виде, ее форматируют с помощью табов. Табы ставятся с помощью клавиши Tab на клавиатуре. Вот как это выглядит в редакторе Notepad++:

Свойство Tab-size

Но как рассматриваемое свойство tab-size связано с табами? А если мы захотим вывести с помощью тегов &lt,pre&gt, &lt,/pre&gt, в браузере сохранив форматирование как в редакторе:

Вывод в браузере tab-size

В браузере это отобразится следующим образом:

Как выглядит Tab в браузерах

Как видите в разных браузерах данный отступы отображаются по-разному. Поэтому мы будем применять следующее свойство:

1 2 3 pre tab-size: 2,

С помощью данного свойства мы можем регулировать данное расстояние.

2. Text Rendering

Свойство text-rendering указывает браузеру как необходимо рендерить текст на странице. Текст может быть оптимизирован по производительности, читабельности или четкости, что и определяет качество текста. Вот пример результат применения данного свойства:

Text rendering

3. Font Stretch

Некоторые шрифты можно сделать жирным, курсивом или он может находится в обычном состоянии. Но, к примеру, шрифты Helvetica Neue или Myriad Pro могут быть в сжатом виде или Condensed, также бывают Ultra-condensed и Semi-condensed. Вот здесь мы и применим данное свойство. Вот результат:

Text-stretch

4. Text Overflow

С помощью свойства text-overflow можно обрезать текст, который выходит за рамки контейнера:

Text Overflow

А вот пример кода:

1 2 3 4 5 6 p width: 360px, /* ширина контейнера */ text-overflow: ellipsis, /* вставляем троеточие */ white-space: nowrap, /* запрещаем перенос строк */ overflow: hidden, /* обрезаем всё, что выходит за рамки контейнера */

5. Режим письма

Не во всех языках направление письма идет слева направо. В некоторых языках направление письма идет сверху вниз (например, японский), или справа налево (например, арабский или иврит):

Режим письма

Пример кода для режима письма справа налево:

1 2 3 p writing-mode: rl-tb,

Вывод

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

Во второй части статьи вы узнаете еще 5 редко используемых свойств.

Успехов!

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: