7 Секретних css трюків, про які ви не знали
Іноді до мене на пошту приходять повідомлення такого змісту:
"Я ніколи не знав що таке можливо в CSS! Дивно."
Думаючи над тим, яку статтю написати для блогу в цей раз, я вирішив торкнутися теми маловідомих нюансів в CSS. Спеціально для Вас )
Але перш, давайте я відповім на найпопулярніше питання Новомосковсктелей: "Чи варто вивчати CSS".
Моя відповідь: "Звичайно". Якщо у вас є можливість, обов'язково вивчіть CSS. При створенні свого блогу знання верстки мені дуже в пригоді. Хоча сайт у мене на готовому движку)
1. Межі у вигляді зображень
Мало хто знає, що в якості рамки в CSS можна використовувати зображення. А ті, хто знають, чомусь дуже рідко використовують цю можливість.
Як задається рамка у вигляді зображення? Просто: потрібно скористатися властивістю border-image. За допомогою неї можна створювати воістину незвичайні кордону елементів. Ось що я зробив на швидку руку:
При бажанні, у вас повинно вийти набагато краще. Таким чином, використовуючи властивість border-image можна застосовувати свої, кастомниє рамки для тих чи інших елементів веб-сторінок.
2. Гнучка настройка border-radius
Всі ми знаємо про властивості border-radius. за допомогою якої можна закругляти кути рамок. Однак, мало кому відомо про можливість задавати значення заокруглення окремо по осі X і Y.
Такий ефект може знадобитися у випадках, коли потрібно створити несиметричне закруглення. Наприклад, давайте спробуємо зробити більш крутий кут по вертикалі, і менше по горизонталі.
Зверніть увагу, що через знак слеш вказується значення по горизонталі. Ось як це виглядає на практиці:
На прикладі вище ви можете бачити більше значення радіуса по горизонталі, і менше по вертикалі. Через це рамка з боків виглядає більш похилим, а зверху і знизу крутіший. Ось такі ось пироги)
3. Oblique і Italic - це не одне і те ж!
Багато веб-майстри не знають про те, що значення oblique і italic у властивості font-style - це не одне і те ж. Значення italic використовує спеціально відмальовані дизайнерами курсивне накреслення шрифтів.
У той час як значення oblique змушує взяти браузер звичайне накреслення шрифту і поміняти його нахил для імітації курсиву. Хтось може заперечити, сказавши що на практиці різниця непомітна. Однак, це не так.
Подивіться на ілюстрацію нижче, щоб зрозуміти різницю цих двох значень.
Різниця в відображенні значень italic і oblique
4. Значення властивості font-weight
Всі ми звикли використовувати для властивості font-weight значення на зразок normal і bold. Деякі, більш просунуті знають про можливості використання числових значень, таких як 400. 500. 700 і так далі.
Ключовим словом normal еквівалентно числове значення 400. а bold - 700. Однак, мало хто знає про існування таких значень, як bolder і lighter.
Застосовуються вони досить рідко. Але тим не менше можуть бути дуже корисні в деяких ситуаціях. Справа в тому, що при використанні значення lighter за основу береться шрифт батьківського елемента.
Таким чином, якщо з батьків заданий шрифт нормальної жирності (400), то для нащадка повинно бути застосовано тонке накреслення (300). Якщо такий в наявності немає, то нічого не зміниться і буде використано нормальне накреслення. Подібне ж положення і багатозначно bolder.
5. Товщину кордону можна задавати ключовими словами
Рамка - це одна з найбільш часто використовуваних властивостей декору. І всі ми звикли ставити її товщину в пікселях.
Однак, є пара ключових слів, які можуть стати альтернативою звичному положенню справ. Ось власне і вони: thin. medium і thick.
Thin. як видно з назви, є тонкою версією кордону. Medium - середній. А за допомогою thick ми можемо створити товсту кордон. Ось як це виглядає на практиці:
На прикладі вище використано ключове слово thick. що означає товстий.
6. Padding-top вираховується від ширини контейнера, а не висоти
Як ви знаєте, ширина блоку в процентах вираховується від ширини батьківського елементу. Таким же чином, можна було б думати, що внутрішні відступи зверху і знизу вираховуються від висоти блоку. Ви будете здивовані, однак, це не так.
Внутрішні відступи зверху і знизу вираховуються також від ширини контейнера. Таким чином, чим більше буде ставати контейнер, тим сильніше буде збільшуватися внутрішній відступ. Ось як це виглядає на практиці:
На ілюстрації вище верхній внутрішній відступ дорівнює 10%. і буде змінюватися в залежності від ширини блоку.
7. Властивість color передається не тільки тексту
Зазвичай ми використовуємо властивість color для надання тексту певного кольору. Але більшість з нас не знає, що за певних умов значення цієї властивості можуть показати себе з несподіваного боку.
Наприклад, я задав помаранчевий колір елементу body. Цим я домагався того, щоб весь основний текст веб-сторінки відображався помаранчевим кольором.
Однак, найцікавіше відбувається тоді, коли я починаю створювати на веб-сторінці списки з кордонами. Маркери списків, їх номери, а також рамки тепер відображаються помаранчевим кольором.
Але і це ще не все. При невдалому завантаженні зображення вміст атрибута alt тепер теж стало оранжевого кольору.
Як бачите, варто бути гранично обережним використовуючи якісь екзотичні кольори для елементів, що мають нащадків.
У цій статті я навів такі особливості і секрети каскадних таблиць стилів, про які багато хто не знає. Можливо, для вас вони були очевидні. Ну що ж, в цьому випадку ви входите в невелику групу особливо Просвящение людей.
На цьому я з вами не прощаюсь. Дякую за увагу і до зустрічі в наступних публікаціях!