5 Секретних властивостей css3 - секретні властивості css3

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

Ще статті на тему CSS3:

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

До речі, свої знання CSS3 ви можете перевірити тут, пройшовши невеликий тест:

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

5 секретних властивостей CSS3

1. Tab Size

Зараз мова піде про коді (CSS, HTML, PHP і т.д.). При редагуванні інформації в будь-якому редакторі, для того щоб вона виглядала в зрозумілому людині вигляді, її форматують за допомогою табів. Таби ставляться з допомогою клавіші Tab на клавіатурі. Ось як це виглядає в редакторі Notepad ++:

Але як аналізованих властивість tab-size пов`язане з табами? А якщо ми захочемо вивести за допомогою тегів

У браузері цей відобразиться наступним чином:

Як бачите в різних браузерах даний відступи відображаються як різному. Тому ми будемо застосовувати наступне властивість:

123

pre {tab-size: 2-}

За допомогою даного властивості ми можемо регулювати дане відстань.

2. Text Rendering

властивість text-rendering вказує браузеру як необхідно рендерить текст на сторінці. Текст може бути оптимізований по продуктивності, читабельності або чіткості, що і визначає якість тексту. Ось приклад результат застосування даної властивості:

3. Font Stretch

Деякі шрифти можна зробити жирним, курсивом або він може знаходиться в звичайному стані. Але, наприклад, шрифти Helvetica Neue або Myriad Pro можуть бути в стислому вигляді або `Condensed`, Також бувають`Ultra-condensed`І` Semi-condensed `. Ось тут ми і застосуємо дане властивість. Ось результат:

Відео: Вивчення CSS / CSS3 | # 11 - Властивості блоків CSS. Властивість Display і Overflow

4. Text Overflow

За допомогою властивості text-overflow можна обрізати текст, який виходить за рамки контейнера:

А ось приклад коду:

123456

p {width: 360px- / * Ширина контейнера * /text-overflow: ellipsis- / * Вставляємо три крапки * /white-space: nowrap- / * Забороняємо перенесення рядків * /overflow: hidden- / * Обрізаємо все, що виходить за рамки контейнера * /}

Відео: Розуміння CSS: блочна модель елемента, властивості box-sizing і box-shadow

5. Режим листи

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

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

123

p {writing-mode: rl-tb-}

висновок

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

під другій частині статті ви дізнаєтеся ще 5 рідко використовуваних властивостей.

Успіхів!

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