10 (більше) хитрощів CSS, які ви, мабуть, забули
Існує велика кількість фрагментів CSS, які веб-розробники можуть використовувати для досягнення певних результатів, а потім існують трюки CSS, які можна використовувати для подібного вирівнювання вмісту по вертикалі. З CSS, будучи постійно розвивається об'єкт, знову і знову ми натрапляємо на прохолодні трюки CSS, які цікаво знати.
У сьогоднішній посаді я пропоную вам Ще 10 атрибутів CSS і трюків, які ви не знаєте.
1. Напишіть вертикально
Називається атрибут CSS режим запису
що приймає одну з цих трьох значень; horizontal-tb
, вертикальний-rl
і вертикальна-лр
.
horizontal-tb
за замовчуванням - це типовий горизонтальний потік тексту зліва направо в елементі.
The вертикальний *
Однак значення для потоку вертикальних блоків, внаслідок чого текст записується зверху вниз браузерами. В вертикальний-rl
, нові рядки додаються ліворуч від попередніх і навпаки для вертикальна-лр
.
Це корисно для відображення мов, таких як китайська та японська що зазвичай записуються зверху вниз, а також, коли ви хочете відобразити текст по вертикалі, щоб зберегти горизонтальний простір, як у заголовках таблиці.
Примітка: Якщо ви хочете керувати напрямками окремих букв, ви можете скористатися текстовою орієнтацією, повертаючи їх у вертикальному або боковому напрямку, за бажанням.
-режим webkit-написання: вертикальний-rl; -ms-mode: tb-rl; режим запису: вертикальний-rl;
2. Повторне використання значення кольору
Ключове слово currentColor
несе значення колір
атрибут і може бути використаний в інших атрибутах, які приймають значення кольорів фону
.
div background: лінійний градієнт (90deg, currentColor 50%, чорний 50%);… колір: # FFD700; / * currentColor - це # FFD700 * /
3. Поєднання фонів
Елемент може мати більше одного фону (колір фону і кілька фонових зображень). The background-blend-mode
поєднує всі їх разом відповідно до заданого режиму накладання. На даний момент існує 16 режимів накладання.
background-blend-mode: різниця;
4. Елементи суміші
mix-blend-mode поєднує вміст і фон перекриваються елементів. Chrome, здається, не підтримує всі режими, навіть якщо Firefox працює.
mix-blend-mode: колір;
Я взяв два елементи, а img
з зображенням троянди і a span
з графічним фоном, наклали їх і застосували кілька режимів змішування.
5. Ігнорувати події вказівника
Ви можете зробити елемент, не звертаючи уваги на будь-яку подію покажчика, використовуючи один атрибут, званий покажчик-події
. Даючи покажчик-події
значення ні
в елементі, це запобігає тому, щоб він був цільовим покажчиком подій. Підтримка IE11 + включена.
У наступному демонстраційному рядку під двома зображеннями, розташованими один над одним, розташований прапорець. Обидва зображення несуть покажчик-події: немає
, дозволяючи нам натискати прапорець, що знаходиться під ними. Виходячи з перевіреного стану прапорець, потрібне зображення відображається, а інше - приховане.
6. Прикрасити роздрібні коробки
Зазвичай, коли ящик розділяється (наприклад, коли вбудований елемент свідчить про розриви рядка), краї розділених частин позбавлені будь-яких стилів вікна і виглядають нарізаними. Щоб уникнути цього, можна скористатися box-decoration-break: клон
.
Тепер для того, щоб наслідувати приклад і ранній нагадування "Різдва в горизонті", ось список оленів Санта Клауса, набраних в одному span
! Хо! Хо! Хо!
Примітка: Хоча сучасний IE підтримує коробка-прикраса-брейк
, на краю межі розділеної частини, візуалізація не є рівною, а фон виглядає нарізаним. Але це робить box-shadow
Приємно, тому я використовував тіньові коробки як для кордону, так і для тла. Існує також відсутність горизонтальних відступу в краях в IE, які ви захочете заповнити прогалинами.
7. Згорнути елементи таблиці
видимість: колапс
- це атрибут, створений тільки для елементів таблиці, наприклад, рядків і стовпців. Якщо використовується на що-небудь ще він буде вести себе так видимість: прихована
. Chrome хоч і обробляє його приховано
навіть для елементів таблиці.
При призначенні видимість: колапс
на елементі таблиці вона прихована, а її простір заповнюється вмістом поблизу - подібно до того, як він буде вести себе при використанні дисплей: немає
замість цього.
Але на відміну від дисплей: немає
який змінює макет таблиці після видалення простору, компонування залишається тим же самим видимість: колапс
. Тут ви можете побачити, як вона працює більш детально.
8. Створіть стовпці
Ви можете створити макет стовпців для вашого вмісту за допомогою стовпців
атрибут. Вона дозволяє вказати кількість стовпців (Колонка-кол
) і як ширина кожного стовпця (ширина колонки
) відображаються в елементі.
Якщо вміст відрізняється від тексту, як, наприклад, зображення, то вам доведеться мати на увазі його ширину, відповідну стовпцям. Для наступного прикладу я використовував тільки Колонка-кол
щоб вказати, скільки стовпців я хочу.
-кількість webkit-column: 2; -moz-count-count: 2; кількість стовпців: 2;
9. Зробіть елементи Resizeable
Елемент може бути змінений (вертикально, горизонтально або обох) за допомогою атрибута CSS3 змінити розмір
. Можливість зміни розміру в a textarea
може бути вимкнено, використовуючи те ж саме.
зміна розміру: вертикальна; розмір: горизонтальний; змінювати розмір: обидва; змінити розмір: немає;
10. Створення шаблонів
Можуть бути кілька градієнтів CSS3 (як лінійних, так і радіальних) для одного елемента, і вони можуть бути складені один на одного для створення шаблонів. Це дозволяє нам створювати красиві фони для елементів без використання зовнішніх зображень. Зробити його роботою може знадобитися трохи практики хоч.