Используйте CSS, чтобы приготовить тарелку питательной лапши для завтрака.

«Это 28-й день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г."

🎄Предисловие

Счастливые выходные снова подходят к концу, и близится новый рабочий день, у Сяобао в сердце есть след печали. (Это абсолютно невозможно, Сяобао любит работу, начальник видит надежду, что он может дать ему немного больше зарплаты)

Какой бы тяжелой и трудной ни была дорога впереди, качество еды должно не отставать, особенно завтрака, что крайне важно! Поэтому Сяобао готовит и использует для физического и психического здоровья каждого.CSSсередина:before/:after,box-shadowЛучшие исходные материалы, такие как внутренние и внешние тени, линейные градиенты и радиальные градиенты,использоватьпервоклассная кулинария, чтобы принести вамУлучшенная лапша для завтракаодна порция.

Изучив эту статью, вы узнаете:

• :before/:afterИспользование элементов псевдокласса
• консолидироватьbox-shadowиспользование
• Изучение линейных и радиальных градиентов

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

🍴 посуда

Есть три типа столовых приборов, а именно миски, палочки для еды и маленькие ложки.

Палочек две, а ложка состоит из двух частей: ручки и середины. В соответствии с нашими привычками кодирования нет необходимости создавать несколькоdivэлемент, который можно использовать:before/:afterРеализация элемента псевдокласса.

Реализация палочек для еды и маленьких ложек выше разделена на две части.Палочки для еды и ложки изначально создаются, а ниже добавляется трехмерный эффект, чтобы украсить их.box-shadowОбеспечить внутреннюю тень и внешнюю тень, которая вместе может увеличить трехмерное действие графики.

Ниже в качестве примера взята маленькая ложка, чтобы объяснить конкретную реализацию вышеупомянутой идеи:

• Реализовать ручку ложки

width: 15px;
height: 150px;
background: #963;
/* 增加圆角，使勺柄更加生动 */
border-radius: 5px;

• Реализация центра ложки

width: 70px;
height: 80px;
/* 现实中饭勺形状大多都是椭圆 */
border-radius: 50%/60% 60% 40% 40%;
/* 第一个背景为椭圆的阴影效果，增加立体感 */
background-image: radial-gradient( ellipse at center 70%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0) 40% ), linear-gradient(to top, #aa7744, #bb8855);

После двух вышеперечисленных действий можно получить первоначальную форму ложки — плоскую ложку.

• Добавьте внутреннюю и внешнюю тени

Прежде чем конкретно настраивать тень, добавим немного знаний о тенях:

1. insetУровень тени установлен на0, вертикальное направление задано отрицательным значением, то тень будет распространяться снизу вверх.
2. Если вы устанавливаете несколько теней, сначала установите тень с более высоким весом.Когда тени перекрываются, тень с более высоким весом будет перекрывать тень с меньшим весом.

/* 勺柄 */
box-shadow: 0 1px 2px 1px rgb(0 0 0 / 20%), 
            inset 0 -5px 2px 0 rgb(0 0 0 / 10%);
/* 勺心 */
box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 10%), 
            -1px 0 2px 0 rgb(0 0 0 / 10%), 
            inset 0 -5px 1px 1px rgb(0 0 0 / 5%), inset 0 -5px 8px 1px rgb(0 0 0 / 10%)

оbox-shadow: insetДля получения подробной информации см.:[Памяти г-на Цяня] Ощутите крутой эффект запуска ракеты.

Разве маленькие ложки не милые после добавления теней?

Реализация мисок и палочек для еды аналогична реализации маленьких ложек, все они используют эффект внутренних и внешних теней и цвета фона.Окончательный рендеринг посуды:

Столовые приборы уже доступны, так что же остается делать? Сухой рис, сухой рис, сильнейшие удары человека по сухому рису.

🍜 лапша

Прочитав способ реализации лапши, Сяобао не мог не быть потрясен чудесным творчеством создателей, это действительно замечательно, а простые атрибуты очень полезны.

CSSПредусмотрено два типа градиентов: Линейный градиент, Радиальный градиент.

радиальный градиентradial-gradientГрамматика, определяемая ее центром, более сложна, возьмите пример для описания грамматики:

radial-gradient(circle at center, red 0, blue, green 100%)

• <shape>: градиентные формы, круглые и овальные, в примереcircle
• <position>: положение центральной точки, в примереcenter
• <color-stop>: Фиксированный цвет в определенном положении, режим настройки обычноcolor percentage/length, в примереred 0, blue, green 100%

Имея в основе радиальные градиенты, мы можем использовать это свойство для создания некоторых статей.

Например, задав для средней части прозрачный цвет, а для внешнего слоя — желтый, можно добиться эффекта кольца или эллиптического кольца.

/* 设置中空的椭圆环 */
radial-gradient(
    ellipse at center center,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0.1) 21%,
    #ffcc33 21%,
    #ffcc33 23%,
    rgba(0, 0, 0, 0.1) 23%,
    rgba(0, 0, 0, 0) 24%
);

Это похоже на лапшу? Может быть, внешний вид лапши недостаточно силен. Мы добавляем несколько наборов различных радиальных градиентов. Нечего сказать, я голоден.

Жаренное яйцо

Недостаточно есть лапшу по утрам, с одной стороны, не хватает питания, с другой стороны, если вы ее съедите, вы подавитесь. Давайте добавим несколько закусок, чтобы добавить веселья.Во-первых, давайте добавим яйцо, чтобы обеспечить достаточное питание.

Реализация яичницы похожа на ложку.Большой овальный яичный белок добавляется к маленькому овальному яичному желтку.Наконец,добавляются внутренняя и внешняя тени, и вкусная жареная яичница помещается в миску.

Часть яичного белка:

.egg{
    border-radius: 50%/60% 60% 40% 40%;
    box-shadow: inset 0 -5px 2px 0 rgb(0 0 0 / 10%), 1px 5px 5px 0 rgb(0 0 0 / 30%);
}

Часть яичного желтка:

.egg:before {
    background: #fc0;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px #f90, inset 0 0 5px 1px rgb(255 153 0 / 50%)
}

Дайте омлету немного вращения, искусство тарелки.

.egg {
    transform: rotate(20deg);
}

🍖 водоросли, ветчина

После добавления жареных яиц вы можете добавить несколько солений, таких как ветчина, водоросли и т. Д., Мы можем съесть эту миску горячего завтрака, счастливого и счастливого.

Метод реализации этих двух очень похож на описанный выше, поэтому он не будет расширяться.

🛕 Репозиторий исходного кода

Портал:лапша для завтрака

Не забудьте поставить пакету ⭐, если вы считаете его полезным.

💘 Предыдущие замечательные статьи

• Последний письменный тест Nioke по интерфейсу JS, 100 вопросов
• Резюме последних предварительных вопросов интервью Ниуке (включая анализ)
• CSS реализует свободно летящую птицу 🐦
• Получите последние предварительные вопросы интервью Niuke и 500 горячих точек интервью JS для анализа данных.
• Примите кошку для VSCode и веб-сайта
• Душевная пытка родного JavaScript (1), сколько вы можете ответить?
• Глубокое понимание прототипа и цепочки прототипов в JavaScript
• Глубокое понимание EventLoop в JavaScript
• «2w Word Big Chapter 38 Interview Questions» подробно разъясняет эту проблему указания в JS.
• Ссылка на ссылку:код спрей.IO/Аарон тыкать/страх...

💥 Послесловие

Друзья, если вы чувствуете, что эта статья вам полезна, ставьте лайк Абао👍 или подписывайтесь➕ — это самая большая поддержка для меня.

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

Если вы чувствуете, что область комментариев неясна, вы также можете добавить мой WeChat (li444186976) или qq (3315161861) для подробного общения, название - пакет поля боя.