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 (як лінійних, так і радіальних) для одного елемента, і вони можуть бути складені один на одного для створення шаблонів. Це дозволяє нам створювати красиві фони для елементів без використання зовнішніх зображень. Зробити його роботою може знадобитися трохи практики хоч.