Dernière mise à jour : novembre 2022
Cliquez sur les lettres pour changer le texte.
F
L
A
T
S
H
A
D
O
W
Le code :
<div class="flat_shadow">F</div>
<div class="flat_shadow">L</div>
<div class="flat_shadow">A</div>
<div class="flat_shadow">T</div>
<div class="flat_shadow">S</div>
<div class="flat_shadow">H</div>
<div class="flat_shadow">A</div>
<div class="flat_shadow">D</div>
<div class="flat_shadow">O</div>
<div class="flat_shadow">W</div>
*,*::before,*::after{box-sizing: border-box;}
.cadre{
display: flex;
justify-content: center;
}
.flat_shadow {
display:inline-block;
width:80px;
height:80px;
border-radius:4px;
text-transform:uppercase;
text-align:center;
font-size:65px;
overflow:hidden;
margin:20px auto;
background:#2880b9;
text-shadow:
1px 1px 0 #1f6592,
2px 2px 0 #1f6592,
3px 3px 0 #1f6592,
4px 4px 0 #1f6592,
5px 5px 0 #1f6592,
6px 6px 0 #1f6592,
7px 7px 0 #1f6592,
8px 8px 0 #1f6592,
9px 9px 0 #1f6592,
10px 10px 0 #1f6592,
11px 11px 0 #1f6592,
12px 12px 0 #1f6592,
13px 13px 0 #1f6592,
14px 14px 0 #1f6592,
15px 15px 0 #1f6592,
16px 16px 0 #1f6592,
17px 17px 0 #1f6592,
18px 18px 0 #1f6592,
19px 19px 0 #1f6592,
20px 20px 0 #1f6592,
21px 21px 0 #1f6592,
22px 22px 0 #1f6592,
23px 23px 0 #1f6592,
24px 24px 0 #1f6592,
25px 25px 0 #1f6592,
26px 26px 0 #1f6592,
27px 27px 0 #1f6592,
28px 28px 0 #1f6592,
29px 29px 0 #1f6592,
30px 30px 0 #1f6592,
31px 31px 0 #1f6592,
32px 32px 0 #1f6592,
33px 33px 0 #1f6592,
34px 34px 0 #1f6592,
35px 35px 0 #1f6592,
36px 36px 0 #1f6592,
37px 37px 0 #1f6592,
38px 38px 0 #1f6592,
39px 39px 0 #1f6592,
40px 40px 0 #1f6592,
41px 41px 0 #1f6592,
42px 42px 0 #1f6592,
43px 43px 0 #1f6592,
44px 44px 0 #1f6592,
45px 45px 0 #1f6592,
46px 46px 0 #1f6592,
47px 47px 0 #1f6592,
48px 48px 0 #1f6592,
49px 49px 0 #1f6592,
50px 50px 0 #1f6592,
51px 51px 0 #1f6592,
52px 52px 0 #1f6592,
53px 53px 0 #1f6592,
54px 54px 0 #1f6592,
55px 55px 0 #1f6592,
56px 56px 0 #1f6592,
57px 57px 0 #1f6592,
58px 58px 0 #1f6592,
59px 59px 0 #1f6592;
}