Это 10-й день моего участия в ноябрьском испытании обновлений. Узнайте подробности события:Вызов последнего обновления 2021 г.
Всем привет, я Пинеллиа 👴, программист из песка, который только начал писать. Если вам понравилась моя статья, вы можете подписаться на ➕ Нравится 👍 Добавьте меня в WeChat:frontendpicker, приглашаем вас присоединиться к группе, вместе изучать интерфейс и общаться, а также стать лучшим инженером ~ обратите внимание на общедоступный номер:передний конец пинеллии, Узнайте больше о интерфейсных знаниях!нажми на меняИсследуйте новые миры!
предисловие
Раньше я изучил множество атрибутов text-*, и я думал, что text-shadow был действительно безвкусным атрибутом. Но сегодня, когда я реализовал 3D-шрифты, я обнаружил, что text-shadow действительно полезен для этого сценария приложения. В этой статье я планирую реализовать несколько текстовых эффектов CSS для text-shadow.
Как старый крахмал, я должен присоединиться к энтузиазму EDG, чтобы выиграть чемпионат. В этой статье для демонстрации будет использоваться журнал EDG.
EDG! NB!
EDG LOGO
Стиль логотипа — черный круг снаружи, белый круг внутрь и черный круг посередине.
Если используется только один div, я выбираю div+::after для достижения.
Первый черный круг,
.edg-logo {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
background: #000;
}
Далее черный круг.
.edg-logo::after {
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
position: absolute;
top: -15px;
left: -15px;
z-index: 1;
border: 10px solid #000;
}
трехмерный шрифт
Идея трехмерного шрифта в основном состоит в том, чтобы задать несколько теней, каждая из которых имеет одинаковое направление смещения по осям X и Y, причем значение смещения постепенно увеличивается. дзуихо
span {
text-shadow: 0px 0px 0 #fff, -1px -1px 0 #fff, -2px -2px 0 #fff,
-3px -3px 0 #fff, -4px -4px 0 #fff,
-5px -5px 5px rgb(0, 0, 0),
-5px -5px 1px rgb(0, 0, 0);
}
Это может выглядеть не очень трехмерно, потому что я установил меньше теней, и чем больше теней вы установите, тем заметнее будет эффект.
полый шрифт
Идея реализации полых шрифтов на самом деле состоит в том, чтобы добавить тени вокруг текста, но лучше всего, чтобы цвет фона и текста был одинаковым или лучшим.
text-shadow: 1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;
размытый шрифт
Нечеткие шрифты должны быть самыми простыми, текстовые тени реализованы, она обеспечивает вариант нечеткого значения. Я попросил размытие лучшего рекомендуемого цвета шрифта прозрачный.
color: transparent;
text-shadow: 0 0 10px #fff;
флэш-шрифт
Этот эффект, по сути, является братом вышеупомянутого эффекта размытия. Размытые шрифты в основном делают цвет шрифта прозрачным или светлее, чем цвет тени. Этот эффект может быть достигнут без установки цвета тени. Просто установите значение размытия тени.
text-shadow: 0 0 15px ;
Конечно, если вы укажете значение цвета, эффект будет более очевидным.
эффект выделения
Эффект пустоты заключается в добавлении теней по бокам, а выделение — в добавлении тени противоположного цвета с одной стороны. Или одна сторона близка, а другая напротив.
color: #ddd;
text-shadow: 1px 1px #000,-1px -1px rgb(219, 201, 201);