Гибкое использование навыков разработки CSS

автор:JowayYoung
склад:Github,CodePen
Блог:Наггетс,думаю нет,Знай почти,короткая книга,заголовки,CSDN
Нет публики:Интерфейс IQ
Свяжитесь со мной: подпишитесь на официальный аккаунт и получите меняWeChatЭй
Специальное заявление: Нелегко быть оригинальным. Эту статью нельзя воспроизводить или копировать без разрешения. В противном случае это будет рассматриваться как нарушение. Если вам нужно перепечатать или открыть белый список общедоступных учетных записей, вы можете связаться со мной. Надеюсь, вы будет уважать первоначальные права интеллектуальной собственности.

ряд

• Гибкое использование навыков разработки CSS Пожалуйста, нажмите здесь для непрерывных обновлений
• Гибкое использование навыков разработки JS Пожалуйста, нажмите здесь для непрерывных обновлений
• Гибкое использование навыков резки полистирола Пожалуйста, нажмите здесь для непрерывных обновлений

предисловие

Что такое мастерство, что означает гениальные навыки в литературе, ремеслах, спорте и т. д. Как современная передовая технология, код способствует развитию человеческой науки и техники и в то же время поддерживает прогресс человеческой культуры, как и слова.

Каждая статья написана, вы будете использовать много навыков письма.烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情Подождите, это должны быть навыки письма, которым мы подвергались с тех пор, как мы были молоды и капитализированы.

Для программистов написание кода также требует большого количества навыков письма. Хороший код может быть освежающим, простым для понимания, удобным и естественным, и в то же время наполненным чувством выполненного долга (ха-ха, вот в чем суть). Поэтому я собрал некоторые из тех, которые я использовал в течение следующих трех лет.Советы по разработке CSS, я надеюсь, что вы сможете написать освежающий, простой для понимания, удобный и естественный код.

содержание

Поскольку для написания статей существует так много навыков письма, мне также нужноСоветы по разработке CSSРазберитесь и придумайте легко запоминающееся имя.

• Layout Skill: Советы по макету
• Behavior Skill: Поведенческие навыки
• Color Skill: Советы по цвету
• Figure Skill: Графические навыки
• Component Skill: Компонентные трюки

Примечание

• Код предназначен только для демонстрационных целей и не детализирует синтаксис.
• Пример кода некоторых методов слишком длинный, используйтеCodePenЧтобы сохранить, нажмитеонлайн демосмотреть
• Совместимый элемент Щелкните ссылку, чтобы просмотреть данные о совместимости браузера для текущего свойства и решить, следует ли использовать его в соответствии с требованиями совместимости проекта.
• Все следующие коды написаны на основе CSS без какого-либо кода JS, а все свойства и методы являются типами CSS, если не указано иное.
• Некоторые из техник разработаны мной, а другие основаны на рекомендациях фронтенд-богов.Это процесс взаимного обучения, и все вместе делают успехи.

Layout Skill

Используйте vw для настройки адаптивного макета rem

• Ключевые моменты: мобильное использованиеrem布局Необходимо установить различные соотношения сторон экрана через JSfont-size, в сочетании сvwединица иcalc()Может быть вне контроля JS
• Сцены:рем макет страницы(Несовместимо с мобильной системой более ранней версии)
• совместимый:vw,calc()

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

Используйте :nth-child() для выбора указанного элемента

• суть: пройти:nth-child()Отфильтруйте указанный элемент, чтобы установить стиль
• Сцены:раскраска стола,типографика бордюрного элемента(первый элемент, последний элемент, левый и правый элементы)
• совместимый::nth-child()
• Код:онлайн демо

Вертикальный набор текста в режиме письма

• суть: пройтиwriting-modeНастроить направление набора текста
• Сцены:вертикальный текст,Классический китайский,поэзия
• совместимый:writing-mode
• Код:онлайн демо

Используйте text-align-last для выравнивания текста с обоих концов

• суть: пройтиtext-align-last:justifyУстановить выравнивание текста
• Сцены:Неизвестное количество слов Китайское выравнивание
• совместимый:text-align-last
• Код:онлайн демо

Используйте :not() для удаления бесполезных атрибутов

• суть: пройти:not()Исключить указанный элемент, не используемый для установки стиля
• Сцены:символ разделенного текста,типографика бордюрного элемента(первый элемент, последний элемент, левый и правый элементы)
• совместимый::not()
• Код:онлайн демо

Используйте объектную подгонку, чтобы указать размеры изображения

• суть: пройтиobject-fitотключить изображениеbackground-sizeограничения, используя<img>чтобы отметить размер фона изображения
• Сцены:Адаптивный размер изображения
• совместимый:object-fit
• Код:онлайн демо

Используйте overflow-x для набора горизонтального списка

• суть: пройтиflexboxилиinline-blockРасположить элементы по горизонтали в виде , установить на родительский элементoverflow-x:autoЛистайте горизонтально для просмотра
• Сцены:Прокрутите список по горизонтали,Панель навигации со слишком большим количеством элементов, но с ограниченным размещением
• совместимый:overflow-x
• Код:онлайн демо

Управление переполнением текста с помощью text-overflow

• суть: пройтиtext-overflow:ellipsisДобавить в конце для выходящего за пределы текста...
• Сцены:Переполнение текста одной строкой,Переполнение многострочного текста
• совместимый:text-overflow,line-clamp,box-orient
• Код:онлайн демо

Используйте преобразование, чтобы нарисовать границу в 1 пиксель.

• Важно: граница в 1 пиксель будет выглядеть размытой на экране с более низким разрешением.::beforeили::afterа такжеtransformИмитация тонкой границы 1px
• Сцены:Граница контейнера 1px
• совместимый:transform
• Код:онлайн демо

Используйте преобразование, чтобы перевернуть содержимое

• суть: пройтиtransform:scale3d()Отразить содержимое (по горизонтали, по вертикали, в обратном порядке)
• Сцены:Контент флип
• совместимый:transform
• Код:онлайн демо

Набор текста в обратном порядке с межбуквенным интервалом

• суть: пройтиletter-spacingУстановите отрицательный интервал шрифта, чтобы изменить текстовый заказ
• Сцены:Классический китайский,поэзия
• совместимый:letter-spacing
• Код:онлайн демо

Используйте margin-left для верстки левых и правых списков

• суть: использоватьflexbox横向布局, последний элемент проходит черезmargin-left:autoВыровнять вправо
• Сцены:Правая панель навигации с иконками
• совместимый:margin
• Код:онлайн демо

Behavior Skill

Поддержка эластичной прокрутки с прокруткой переполнения

• суть: iOS-страница非body元素Операция прокрутки будет сильно зависать (в Android такой ситуации нет),overflow-scrolling:touchВызывать встроенную прокрутку Safari для поддержки эластичной прокрутки и повышения плавности прокрутки страниц.
• Сцены:прокрутка страницы iOS
• Совместимость: поставляется с iOS-webkit-overflow-scrolling

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

Используйте преобразование, чтобы включить аппаратное ускорение графического процессора

• Важно: иногда выполнение анимации может привести к зависанию страницы, используйте аппаратное ускорение для определенных элементов, чтобы избежать этой проблемы.
• Сцены:элемент анимации(Абсолютное позиционирование, анимацию используют более 6 человек в одном классе)
• совместимый:transform

.elem {
    transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}

Получить данные-* с помощью attr()

• Ключевой момент: пользовательские свойства на этикеткахdata-*,пройти черезattr()Получите его содержимое и назначьте егоcontentначальство
• Сцены:Подсказка
• совместимый:data-*,attr()
• Код:онлайн демо

Проверка форм с помощью :valid и :invalid

• Ключевые моменты:<input>Используйте псевдоклассы:validа также:invalidСотрудничатьpatternПроверка ввода формы
• Сцены:проверка формы
• совместимый:pattern,:valid,:invalid
• Код:онлайн демо

Отключить запуск событий с помощью событий-указателей

• суть: пройтиpointer-events:noneОтключить запуск событий (события по умолчанию, всплывающие события, события мыши, события клавиатуры и т. д.), эквивалентные<button>изdisabled
• Сцены:Нажмите кнопку в течение ограниченного времени(Обратный отсчет до отправки кода подтверждения),всплывающая подсказка событий отключена(Несколько элементов перекрываются с их собственными событиями, переход метки)
• совместимый:pointer-events
• Код:онлайн демо

Используйте + или ~, чтобы украсить окно параметров

• Ключевые моменты:<label>использовать+или~Сотрудничатьforсвязыватьradioилиcheckboxвыбор поведения
• Сцены:Украшение опциональной коробки,Добавить выбранный стиль к выбранному элементу
• совместимый:+,~
• Код:онлайн демо

Распространяйте всплывающие ответы с помощью :focus-within

• Ключевой момент: триггеры управления формойfocusа такжеblurПузырь к родительскому элементу после события, передать родительский элемент:focus-withinЗахватите всплывающее событие, чтобы установить стиль
• Сцены:Всплывающее окно регистрации входа,проверка формы,Внеэкранная навигация,Переключатель навигации
• совместимый::focus-within,:placeholder-shown
• Код:онлайн демо

Используйте :hover, чтобы изобразить движение мыши

• Суть: Разделите всю страницу на маленькие ячейки в равных пропорциях, и каждая ячейка слушает:hover,пройти через:hoverИзменение стиля ячейки триггера для отображения движения мыши
• Сцены:мышь следует по следу,водная рябь,Странный круг
• совместимый::hover
• Код:онлайн демо

Переключить автоматическую высоту с максимальной высотой

• суть: пройтиmax-heightОпределите минимальную высоту свернутого и максимальную высоту расширения и установите переключатель перехода между двумя
• Сцены:Скрытая дочерняя панель навигации,Подвесная складная панель
• совместимый:max-height
• Код:онлайн демо

Используйте преобразование для имитации прокрутки параллакса

• суть: пройтиbackground-attachment:fixedилиtransformПусть многослойный фон движется с разной скоростью, чтобы создать трехмерный эффект движения.
• Сцены:прокрутка страницы,Тень текста при прокрутке параллакса,Дрожание текста при прокрутке параллакса
• совместимый:background-attachment,transform
• Код:онлайн демо

Используйте анимацию-задержку, чтобы сохранить начальный кадр анимации

• суть: пройтиtransform-delayилиanimation-delayУстановите отрицательную задержку, чтобы сохранить начальный кадр анимации, чтобы анимация могла запускаться, не дожидаясь, пока анимация перейдет на страницу.
• Сцены:вступительная анимация
• совместимый:transform,animation
• Код:онлайн демо

Используйте растянутый столбец изменения размера

• суть: пройтиresizeУстановите горизонтальное свободное растяжение, чтобы отрегулировать ширину целевого элемента.
• Сцены:редактор форматированного текста,чтение в столбцах
• совместимый:resize
• Код:онлайн демо

Color Skill

Используйте цвет, чтобы изменить цвет границы

• Ключевые моменты:borderНе определеноborder-color, задаватьcolorназад,border-colorбудет определяться какcolor
• Сцены:Цвет границы такой же, как цвет текста
• совместимый:color

.elem {
    border: 1px solid;
    color: #f66;
}

Используйте фильтр, чтобы включить режим траура

• суть: пройтиfilter:grayscale()Установите оттенки серого, чтобы оплакивать кого-то, кто скончался, или оплакивать кого-то, кто погиб в результате стихийного бедствия.
• Сцены:Унимиты сайта
• совместимый:filter
• Код:онлайн демо

Используйте ::selection, чтобы изменить цвет выделения текста

• суть: пройти::selectionНастроить цвет выделения текста в зависимости от цвета темы
• Сцены:тематика
• совместимый:::selection
• Код:онлайн демо

Используйте linear-gradient для управления фоновым градиентом

• суть: пройтиlinear-gradientУстановите цвет градиента фона и увеличьте размер фона, чтобы добавить эффект движущегося фона.
• Сцены:тематика,радуга фон стена
• совместимый:gradient,animation
• Код:онлайн демо

Управляйте градиентом текста с помощью linear-gradient

• суть: пройтиlinear-gradientУстановите цвет градиента фона, чтобы он соответствовалbackground-clip:textОбрезка текста на фоне, добавление анимации фильтра
• Сцены:тематика,Характеристическое название
• совместимый:gradient,background-clip,filter,animation,text-fill-color
• Код:онлайн демо

Используйте цвет вставки, чтобы изменить цвет курсора

• суть: пройтиcaret-colorНастройка цвета курсора в зависимости от цвета темы
• Сцены:тематика
• совместимый:caret-color
• Код:онлайн демо

Используйте ::scrollbar для изменения стиля полосы прокрутки

• суть: пройтиscrollbarизscrollbar-trackа такжеscrollbar-thumbи другие свойства для настройки стиля полосы прокрутки.
• Сцены:тематика,прокрутка страницы
• совместимый:::scrollbar
• Код:онлайн демо

Используйте фильтр для имитации фильтров Instagram

• суть: пройтиfilterФильтры объединяются для имитацииInstagram滤镜
• Сцены:фильтр изображения
• совместимый:filter
• Код:онлайн демо,css-gram

Figure Skill

Используйте div для рисования различной графики

• Ключевые моменты:<div>со своим псевдоэлементом (::before,::after)пройти черезclip,transformрисовать различную графику
• Сцена: различные графические контейнеры
• совместимый:clip,transform
• Код:онлайн демо

Используйте маску, чтобы вырезать вырезанный фон

• суть: пройтиmaskОбеспечивает матовый эффект для маски генерации фона изображения.
• Сцены:Маска размытия по Гауссу,проездной билет(билеты в кино, карты покупок),Анимация маски
• совместимый:mask,perspective,transform-style,animation
• Код:онлайн демо

Используйте линейный градиент для рисования волнистых линий

• суть: пройтиlinear-gradientрисовать волнистые линии
• Сцены:улучшение текста,подчеркивание текста,Разделитель содержимого
• совместимый:gradient
• Код:онлайн демо

Рисуем ленты с помощью линейного градиента

• суть: пройтиlinear-gradientРисует ленту прерывистых цветов
• Сцены:тематика
• совместимый:gradient
• Код:онлайн демо

Используйте конический градиент, чтобы нарисовать круговую диаграмму

• суть: пройтиconic-gradientНарисуйте круговую диаграмму с несколькими цветами
• Сцены:Круговая диаграмма соотношения позиций
• совместимый:gradient
• Код:онлайн демо

Нарисуйте клетчатый фон, используя линейный градиент

• суть: использоватьlinear-gradientИнтерактивно создавайте квадраты, рисуя ленты прерывистых цветов.
• Сцены:клетчатый фон,карта-заполнитель
• совместимый:gradient
• Код:онлайн демо

Используйте box-shadow для рисования односторонней проекции

• суть: пройтиbox-shadowСоздайте проекцию с тем же радиусом размытия и отрицательным радиусом расширения, чтобы проекция была смещена в одну сторону.
• Сцены:проекция контейнера,Фоновые подростки 1,Фон Твин 2,Стереографическая проекция,Текстовая стереоскопическая проекция,Стереоскопическая проекция градиента текста,длинная проекция,неоновая вывеска,легкая тень
• совместимый:box-shadow,filter,text-shadow
• Код:онлайн демо

Используйте фильтр для рисования цветных теней аватаров

• суть: пройтиfilter:blur() brightness() opacity()Имитация эффектов теней
• Сцены:Тень аватара
• совместимый:filter
• Код:онлайн демо

Обрезать изображение с тенью коробки

• суть: пройтиbox-shadowСмоделируйте маску, чтобы реализовать среднюю полость
• Сцены:Обрезка изображений,Руководство для начинающих,Фоновый вырез,Позиционирование проекции
• совместимый:box-shadow
• Код:онлайн демо

Используйте контур, чтобы нарисовать внутреннюю границу

• суть: пройтиoutlineУстановите контур для обводки, вы можете установитьoutline-offsetустановить внутренний ход
• Сцены:Внутренний ход,Внешний ход
• совместимый:outline
• Код:онлайн демо

Component Skill

счетчик итераций

• ВАЖНО: СЧЕТЧИК ДЛЯ НАКОПЛЕНИЯ ДОПОЛНИТЕЛЬНЫХ ЕДИНИЦ
• Сцены:Содержание главы,счетчик опций,добавление счетчика
• совместимый:counters
• Код:онлайн демо

Подчеркивание следует за панелью навигации

• Ключевой момент: панель навигации, где подчеркивание следует за движением мыши
• Сцены:Динамическая панель навигации
• совместимый:+
• Код:онлайн демо

пузырь фон стены

• Ключевой момент: Фоновая стена с непрерывно пузырящимися пузырями
• Сцены:динамический фон
• совместимый:animation
• Код:онлайн демо

индикатор прокрутки

• Ключевой момент: индикатор, показывающий прогресс прокрутки
• Сцены:прогресс чтения
• совместимый:calc(),gradient
• Код:онлайн демо

Текст ошибки

• Основы: Текст в виде сбоя дисплея
• Сцены:Сообщение об ошибке
• совместимый:data-*,attr(),animation
• Код:онлайн демо

смены цвета

• Ключевой момент: средство смены цвета, которое меняет оттенок изображения с помощью палитры цветов.
• Сцены:Изменение цвета изображения
• совместимый:mix-blend-mode
• Код:онлайн демо

Подвешенное состояние мяча

• Важно: показывает текущее состояние подвесного шара.
• Сцены:Динамическое отображение состояния,волновая анимация
• совместимый:gradient,animation
• Код:онлайн демо

липкий мяч

• Ключевой момент: движение отскока двух мячей для пересекающихся липких эффектов
• Сцены:липкая анимация
• совместимый:filter,animation
• Код:онлайн демо

билет в торговый центр

• Ключевой момент: билеты с дырками по краям и складкой посередине.
• Сцены:билет в кино,ваучер,потребительская карта
• совместимый:gradient
• Код:онлайн демо

Полоса загрузки отражения

• Вывод: полоса загрузки с градиентными отражениями
• Сцены:подсказка загрузки
• совместимый:box-reflect,animation
• Код:онлайн демо

3D куб

• Основы: кубы для 3D-моделирования
• Сцены:3D моделирование
• совместимый:transform,perspective,transform-style,animation
• Код:онлайн демо

динамическая граница

• Ключевой момент: граница, отображаемая динамическим градиентом при наведении курсора мыши.
• Сцены:плавающая кнопка,граница анимации
• совместимый:gradient
• Код:онлайн демо

Страница закладок

• Вывод: вкладки с переключаемым содержимым
• Сцены:переключение контента
• совместимый:scroll-behavior
• Код:онлайн демо

Панель навигации с вкладками

• Вывод: панель навигации с переключаемым содержимым
• Сцены:переключение страниц
• совместимый:~
• Код:онлайн демо

складная панель

• Важно: панель, которую можно сложить
• Сцены:Скрытая дочерняя панель навигации
• совместимый:~
• Код:онлайн демо

Звездный рейтинг

• Ключевой момент: нажмите кнопку, чтобы оценить звезды
• Сцены:счет
• совместимый:~
• Код:онлайн демо

индикатор загрузки

• Основы: преобразование...длина загрузочных подсказок
• Сцены:подсказка загрузки
• совместимый:animation
• Код:онлайн демо

Адаптивный альбом

• Суть: Альбомы, которые адаптируются к количеству фотографий
• Сцены:Альбом Цзюгунге,Альбом WeChat,Атлас
• совместимый::only-child,:first-child,:nth-child(),:nth-last-child(),~
• Код:онлайн демо

закругленный индикатор выполнения

• Ключевой момент: одноцветный закругленный индикатор выполнения.
• Сцены:индикатор
• совместимый:gradient
• Код:онлайн демо

индикатор выполнения потока

• Ключевой момент: индикатор выполнения для градиентных потоков
• Сцены:индикатор,анимация загрузки
• совместимый:gradient,animation
• Код:онлайн демо

Кнопка стерео

• Вывод: нажмите на кнопку, которая отображает нажатое состояние
• Сцены:щелчок кнопки
• совместимый:box-shadow
• Код:онлайн демо

Круг загрузки хаоса

• Основы: загрузка круга с помощью Chaos Phantom
• Сцены:подсказка загрузки
• совместимый:filter,animation
• Код:онлайн демо

змеиная граница

• Суть: Граница змеиного движения
• Сцены:змея анимация
• совместимый:clip,animation
• Код:онлайн демо

автоматический ввод

• Ключевой момент: текст, который автоматически печатается посимвольно
• Сцены:демонстрация кода,анимация ввода текста
• совместимый:ch,animation
• Код:онлайн демо

Суммировать

В конце написания резюме почти такое же.Если я помню, что я упустил в продолженииСоветы по разработке CSS, продолжим дополнять эту статью.

Наконец-то дайте всем клавиатуру!

(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность - это не просто, поощряйте автора создавать лучшие статьи

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана

• Ответить после подписки关键词Получите бесплатные видеоуроки
• добавить после подписки我微信Втяните вас в группу технического обмена
• Добро пожаловать, чтобы следоватьIQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт