Merhaba kodcu arkadaşlarım. Bu yazımda css ile 3d yazı efekti vermeyi anlatmaya çalışacağım. Efekt tam olarak üstteki resim gibi olacak.
Aşağıdaki kodları stil dosyanıza ekleyin.
.baslik{
2
font: 900 100px/1 'Source Sans Pro', Arial, sans-serif;
3
color: #fff;
4
text-align: center;
5
text-shadow: 0 1px 0 hsl(174,5%,80%),
6
0 2px 0 hsl(174,5%,75%),
7
0 3px 0 hsl(174,5%,70%),
8
0 4px 0 hsl(174,5%,66%),
9
0 5px 0 hsl(174,5%,64%),
10
0 6px 0 hsl(174,5%,62%),
11
0 7px 0 hsl(174,5%,61%),
12
0 8px 0 hsl(174,5%,60%),
13
14
0 0 5px rgba(0,0,0,.05),
15
0 1px 3px rgba(0,0,0,.2),
16
0 3px 5px rgba(0,0,0,.2),
17
0 5px 10px rgba(0,0,0,.2),
18
0 10px 10px rgba(0,0,0,.2),
19
0 20px 20px rgba(0,0,0,.3);}Yazı boyutu nasıl değiştirilir ?Yazı boyutunu değiştirmek için font: 900 100px/1 yazan kısımdan 100px‘i kendinize göre ayarlayabilirsiniz.
Yazı rengi nasıl değiştirilir ?
Yazı rengini değiştirmek için de color: #fff; yazan kısımı kendinize göre düzenleyebilirsiniz.
Umarım faydalı bir yazı olmuştur. Bir sonraki yazımda görüşmek üzere.
Kaynak