Как сверстать такие элементы (текст, через буквы которого видна картинка; кнопка, внутри неё стрелка, которая выходит за границу кнопки)?

Question

Всем доброго времени суток!

Как сверстать такие элементы:

Первые буквы текста другим цветом выделены (логотип Active Trust)
Текст, через символы которого видна картинка (Заголовок Active Trust идёт после "Digital-агенство")
Неполное подчёркивание Заголовка Active Trust (вроде border-bottom не подходит).
Текст, загнутый в круг, через символы которого видная картинка (во втором блоке Digital-агенство Active Trust)
Кнопка, внутри которой картинка или символ стрелки, конец которой выходит за пределы этой кнопки.

Answer 1

body {
 background-color: black
}

.logo {
 color: white;
}

.logo span{
 color: blue
}

<div class="logo">
<span>A</span>ctive<br>
<span>T</span>rust
</div>

Наложение background изображения на текст обсудили вот тут - Наложение background только на текст

.someText {
 font-size: 30px;
 position: relative
}

.someText:after {
 content: '';
 position: absolute;
 bottom: -10px;
 left: 0;
 width: 100px;
 height: 2px;
 background-color: black;
}

<div class="someText">Любой длинный большой заголовок чтобы показать линию</div>

Текст по кругу можно посмотреть вот тут вот - Как сделать текст по контуру круга? + комбинировать с ссылкой в пункте 2

body {
 padding: 100px
}

.btn {
 width: 40px;
 height: 40px;
 position: relative;
 background-color: black;
}

.btn:after {
 content: 'любой элемент';
 position: absolute;
 left: -30px;
 top: 2px;
 color: blue;
}

<div class="btn"></div>

БЛОГ НА HUSL

Как сверстать такие элементы (текст, через буквы которого видна картинка; кнопка, внутри неё стрелка, которая выходит за границу кнопки)?

Ответы (1 шт):