15 корисних хитрощів CSS, які ви могли б пропустити

Якщо ви на якийсь час працювали веб-розробником, існує велика ймовірність того, що у вас був момент, коли ви намагалися дізнатися, як кодувати щось та реалізувати після деякого гуглінгу, “для цього є CSS”. Якщо ви не зробили цього, то добре.

Ця посада є набором таких кодів CSS, які можуть надати вам такі функції, як перетворити елемент липким, надати вам пунктирну лінію підкресленням можливостей, потік тексту сторінки у спеціальній формі або досягти ефекту паралакса. Деякі з них широко підтримуються, а інші знаходяться на шляху до повної підтримки з боку всіх браузерів.

1. Нумерація заголовків і підзаголовків

   Скажімо, у вашому документі ви отримали набір заголовків і підзаголовків, і ви їх нумеруєте вручну або за допомогою сценарію. Замість цього ви можете використовувати лічильники CSS для цього. Тут вже є поглиблений пост. А оскільки це від специфікації CSS2, ви можете посперечатися, що він підтримується всіма браузерами, крім IE 6.

2. Spice Up рівнини підкреслення

   Іноді ми хочемо підкреслити гарною пунктирною або пунктирною лінією замість твердої. Оскільки для цього немає жодного вибору, ми вирішуємо кордон-знизу. Але кордон-знизу не є хорошим рішенням, якщо в тексті ви підкреслюєте обгортки.

   CSS3 вказав не одну, а три нові властивості для оформлення тексту колір тексту, text-decoration-line, і стиль оформлення тексту яка може бути обмежена в старому доброму текст-прикраса.

   Ви можете використовувати їх для стилю підкреслення, перенастроювання, навіть для того, щоб зробити текст блиманням і багато іншого. Станом на квітень 2015 року тільки Firefox підтримує цю властивість, але ви можете включити “експериментальні функції веб-платформи” використовувати його в Chrome.

3. Цитування цитати

   По-перше, немає необхідності турбуватися про введення правильних фігурних котирувань для коротких котирувань, тому що є HTML для цього: , що вказує вбудовані котирування.

   The тег також піклується про цитування внутрішніх лапок з одинарними лапками. Отже, де це “для цього є "CSS"” момент у цьому?

   Давайте скажемо, що ви не хочете, щоб у подвійних лапках за замовчуванням або у вас було більше одного рівня вкладених лапок, ви можете визначити ваші налаштування котирувань для елемента цитати за допомогою CSS за допомогою CSS2 цитати власності.

4. Керування нерозбірливими таблицями

   Можливо, ви зіткнулися з великою таблицею з різним розміром вмісту на клітинку, який відмовляється залишатися в межах вказаної ширини, незалежно від того, що ви намагаєтеся. Приручіть цю таблицю за допомогою табличне розташування властивість (для рівної висоти стовпця, перейдіть за цим посиланням).

   Щоб бути конкретними, виправлення йде в таблиця-макет: фіксований; значення. При призначенні фіксованого макета для таблиці таблиця і ширина комірки визначаються шириною таблиці або першого ряду комірок (які можуть бути визначені користувачем), а не вмістом. Це підтримується всіма браузерами.

5. Зробіть це липким

   Важливими елементами є елементи на сторінці, які не будуть прокручуватися з поля зору. Іншими словами, він прилипає до видимої області (вікна перегляду або вікна прокрутки). Ви можете створити це за допомогою CSS положення: липке;.

   Вони діють як відносно позиціоновані елементи перед будь-якою прокруткою, а пізніше як фіксовані елементи після досягнення порогу прокрутки. Зараз, тільки Firefox підтримує його.

6. Отримати текст у формі

   Ви хочете, щоб текст на вашій сторінці красиво перекривався над зображенням, яке відображається поруч з ним? Ви можете спробувати Форми CSS. Для реалізації CSS-форм ми можемо використовувати три властивості форма-зовні, форма-запас і поріг форми-зображення. Станом на квітень 2015 року CSS Shapes підтримується веб-браузери.

7. Обов'язкові поля

   Якщо у вас є форма, існує велика ймовірність, що деякі поля в ній знадобляться, а інші - ні. Вам потрібно повідомити користувачам, що саме таке. CSS для цього є :вимагається : необов'язково псевдокласи. Їх підтримують всі сучасні браузери.

8. Привабливий з кольорами

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

9. Я перевірив це?

   У випадку, коли перевірено прапорець, було б непогано мати інше відмінність від мініатюрної галочки всередині позначки за замовчуванням, щоб позначити, що елемент перевірено.

   Існує CSS для того, що використовує зв'язок між безпосередніми братами, двома елементами поруч. CSS має суміжний селектор, позначений плюсом + і ми можемо використовувати його, щоб націлити позначку поруч із прапорцем. Але що робити з цільовим прапорцем спочатку? Існує : перевірено псевдо-клас для цього.

10. Як збірка оповідань

    Тоді, не було б добре, якщо перший “O” в “Одного разу” виглядає досить? Ми можемо зробити це виглядати досить, адже є CSS для цього. Ось де :: перша буква псевдоелемент приходить на допомогу. Він націлюється на першу літеру першого рядка цільового елемента. Дізнайтеся більше про це тут.

11. Хочете знати більше?

    Елемент може мати клас X або дані Y або деяке інше значення для атрибута. Якщо нам коли-небудь знадобиться відобразити таке значення атрибута елемента поблизу нього, ми можемо використовувати зміст: attr (X). Він отримує значення атрибуту X елемента, тоді ми можемо показати його поруч з елементом.

12. Трохи більше для лівих

    Центруючі елементи для CSS початківців - це справжній подвиг. Різні елементи вимагають різного набору властивостей CSS для їх центрування. Ми розглянемо один з багатьох прикладів, доступних у всесвітній павутині, щоб ви могли ще раз згадати, що існує CSS для центрування речей.

13. Розкрити формат файлів посилань

    Коли-небудь бачили невелике зображення біля посилання, що вказує, що таке посилання? PDF? або DOC? Так, є CSS, щоб досягти цього. The вміст: url () це те, що ми будемо використовувати для відображення зображення за посиланнями.

14. Тригерний ефект паралакса

    Ефект паралакса є ефектом, який використовується для опису, здавалося б, повільного руху фону щодо переднього плану. Цей ефект користується популярністю на веб-сайтах, які здійснюють прокрутку паралакса. Існують різні способи її реалізації, наведений нижче приклад працює у Firefox з background-attachment: фіксований;.

15. Сила анімації CSS

    Напевно, не величезний “для цього є CSS” момент, тому що ви, ймовірно, вже знаєте про CSS анімацію. Але маленьке нагадування не завдає шкоди. Є багато застосувань для CSS анімації, але ось один для простих вправ розфарбовування.

Тепер читайте: 50 корисних CSS-фрагментів кожен дизайнер повинен мати