CSS3 ile Gmail logosu nasıl oluşturulur?

Birkaç ay önce size CSS3 ile RSS feed logosu nasıl oluşturulacağını gösterdim. Biraz daha karmaşık bir şey yaratmanın eğlenceli olacağını düşündüm. Bugünün yayınında, nasıl bir tane değil, sadece CSS3 kullanarak iki Gmail logosu varyasyonunun nasıl oluşturulacağını göstereceğim..

Kısayollar:

• Gmail logosu CSS rehberi # 1 | Ön izleme
• Gmail logosu CSS eğitimi # 2 | Ön izleme

Gmail logosu # 1

Bu ilk logo basit ve yaratılması oldukça kolaydır. Daha fazla uzatmadan, işte adımlar. En sevdiğiniz kod düzenleyicinizi ateşlemeye başlayalım ve aşağıdaki HTML kodlarını girip kaydedin. logo-gmail.html.

Aşağıdaki CSS stillerini arasına ekleyin. varsayılan CSS değerlerini sıfırlamak için.

.gmail logosu, .gmail logosu *, .gmail logosu *: önce, .gmail logosu *: sonrası marj: 0; dolgu: 0; Arka plan: transparent; border: 0; anahat: 0; Ekran bloğu; yazı tipi: normal normal 0/0 serif; 

Aşağıdaki CSS kodları bize Gmail logosunun kırmızı arka planını ve yuvarlak kenarlarını verir..

 .gmail-logo marj: 110 piksel otomatik; arkaplan: rgb (201, 44,25); en: 600 pikseldir; Yükseklik: 400 piksel; kenarlık üstü: 4px katı rgb (201, 44, 25); kenar-alt: 4px katı rgb (201, 44, 25); Çerçeve-yarıçapı: 10px; -moz ötesi-yarıçapı: 10px; -webkit ötesi-yarıçapı: 10px; 

Ardından, kırmızı arka planda beyaz kutuyu oluşturmaya devam ederiz.

 .gmail-logo .gmail-box taşma: gizli; yüzer: sol; en: 440px; Yükseklik: 400 piksel; marj: 0 0 0 80 piksel; Arka plan: Beyaz; Çerçeve-yarıçapı: 5px; -moz ötesi-yarıçapı: 5px; -webkit ötesi yarıçaplı: 5px; 

Kırmızı "M" efekti oluşturmak için önce kırmızı kenarlıklı bir kutu oluşturacağız.

 .gmail-logo .gmail-box: önce position: relatif; içerik: "; z-index: 1; arkaplan: beyaz; şamandıra: sol; genişlik: 320px; yükseklik: 320px; kenarlık: 100px katı rgb (201, 44, 25); marj: -310px 0 0 -40px; kenarlık- yarıçap: 10px; -moz-sınır yarıçapı: 10px; -webkit-sınır-yarıçapı: 10px; -moz-dönüşümü: döndür (45deg); -webkit-dönüşümü: döndür (45deg); -o-dönüşümü: döndür (45deg) );

Sonra aşırı tarafları gizlemeye devam ediyoruz, bize kırmızı renkte tam bir "M" veriyoruz..

 .gmail-logo .gmail-box taşma: gizli; 

Şimdi, iki ince kırmızı kenarlık verelim, zarfa bakalım.

 .gmail-logo .gmail-box: content: "; float: left; genişlik: 360px; yükseklik: 360px; kenarlık: 2px katı rgb (201, 44, 25); marj: 10px 0 0 40px; -o-dönüşümü : döndürme (45deg); -webkit-dönüşümü: döndürme (45deg); -moz-dönüşümü: döndürme (45deg);

Neredeyse bitti. Kırmızı zarfa biraz degrade ekleyelim:.

 .gmail-logo: content: "; konum: göreceli; z-index: 2; content:"; yüzer: sol; kenar üstü: -404px; en: 600 pikseldir; Yükseklik: 408px; Ekran bloğu; arkaplan: -moz-lineer-gradyan (üst, rgba (255, 255, 255, 0.3)% 0, / * rgba (255, 255, 255, 0.3)% 30, * / rgba (255, 255, 255, 0.1 ) 100%); arkaplan: -o-doğrusal-gradyan (üst, rgba (255, 255, 255, 0.3)% 0, / * rgba (255, 255, 255, 0.2)% 30, * / rgba (255, 255, 255, 0.1 ) 100%); arkaplan: -webkit-gradient (doğrusal, sol üst, sol alt, renk durdurma (% 0, rgba (255, 255, 255, 0.3))) / / renk durdurma (% 30, rgba (255, 255, 255) , 0.2)), * / renkli stop (% 100, rgba (255, 255, 255, 0.1)));  

Son fakat en az değil, üzerine gelindiğinde farklı bir renk verelim. Önce aşağıdaki HTML DOCTYPE'ini ekleyin

Ve daha önce aşağıdaki CSS stilleri

 .gmail-logo: vurgulu background: # 313131; border-color: # 313131; / * imleç: işaretçi; * / .gmail-logo: vurgulu .gmail-box: önce kenarlık rengi: # 313131;  .gmail-logo: gezinip .gmail-box: after border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Önizleme | Kaynak dosyayı indir

Gmail logosu # 2

Ardından, Gmail logosunu küçük bir 3D efekti ile başka bir açıdan oluşturacağız. Temel HTML işaretlemesi ile başlayacağız.

Logo farklı bir bakış açısına sahip olduğundan, onu biraz döndürerek başlayacağız ve gerekli katmanları oluşturacağız elementler) sırayla.

 # gmail-logo2 marj: 0 otomatik; Ekran bloğu; en: 380px; Yükseklik: 290px; -moz-dönüşümü: döndürme (6deg); -webkit-transform: döndürme (6deg); -o-dönüşümü: döndürme (6deg); dönüşümü: döndürme (6deg);  # gmail-logo2 .element1 display: block; en: 380px; Yükseklik: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; Ekran bloğu; en: 380px; Yükseklik: 290px; marj: -290 piksel 0 0 0;  

Şekillendirme .element1 :: önce

 # gmail-logo2 .element1 :: before content: "; position: göreceli; marj: 2px 0 0 14px; şamandıra: sol; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 30px; yükseklik: 276px; -moz-dönüşümü: döndürme (3deg); -webkit-dönüşümü: döndürme (3deg); -o-dönüşümü: döndürme (3deg); dönüşme: döndürme (3deg); sınır yarıçapı: 22px0.020px; -moz -border-radius: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; kutu gölgesi: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10) , 0); -webkit-shadow-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); 

Şekillendirme .element1 :: sonrası

 # gmail-logo2 .element1 :: sonra content: "; konum: göreceli; marj: 40px 5px 0 0; şamandıra: sağ; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 30px; yükseklik: 238px; -moz-dönüşümü: döndürme (3deg); -webkit-dönüşümü: döndürme (3deg); -o-dönüşümü: döndürme (3deg); dönüşme: döndürme (3deg); sınır yarıçapı: 018px26px0; -border yarıçapı: 0 18px 26px 0; -moz-sınır yarıçapı: 0 18px 26px 0; kutu gölgesi: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10) , 0), -6px 7px 0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px2px0gg (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0) ), -6px 7px 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -6px 7px 0 rg b (109, 10, 0);  

Şekillendirme .Element2 :: önce

 # gmail-logo2 .element2 :: before content: "; marj: 22px 0 0 48px; float: left; ekran: blok; arkaplan: rgb (201, 44, 25); genişlik: 315px; yükseklik: 14px; -moz -transform: döndürmek (6.8deg); -webkit-transform: döndürmek (6.8deg); -o-dönüşümü: döndürmek (6.8deg); dönüştürmek: döndürmek (6.8deg); kutu gölgesi: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px0 rgb (109, 10, 0); gölgeli: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0) , 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

Şekillendirme .Element2 :: sonrası

 # gmail-logo2 .element2 :: sonra content: "; konum: göreceli; marj: 230px 0 0 36px; şamandıra: sol; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 310px; yükseklik: 12px; kutu-gölge: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10) , 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0 ), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

Şekillendirme .Element3 :: önce

 # gmail-logo2 .element3 :: before content: "; position: göreceli; marj: 8px 0 0 42px; şamandıra: sol; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 42px; yükseklik: 268px; -moz-dönüşümü: döndürme (3 derece); -webkit-dönüşümü: döndürme (3 derece); -o-dönüşümü: döndürme (3 derece); dönüştürme: döndürme (3 derece);

Şekillendirme .Element3 :: sonrası

 # gmail-logo2 .element3 :: sonra content: "; konum: göreceli; marj: 40px 32px 0 0; şamandıra: sağ; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 22px; yükseklik: 236px; -moz-dönüşümü: döndürme (3.0deg); -webkit-dönüşümü: döndürme (3.0deg); -o-dönüşümü: döndürme (3.0deg); dönüşümü: döndürme (3.0deg); kutu gölgesi: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb ( 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -web-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0) , 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

Şekillendirme .element4 :: önce

 # gmail-logo2 .element4 :: önce content: "; konum: göreceli; marj: -2px 0 0 130px; şamandıra: sol; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 54px; yükseklik : 192px; -moz-dönüşümü: döndürme (-49deg); -webkit-dönüşümü: döndürme (-49deg); -o-dönüşümü: döndürme (-49deg); dönüşme: döndürme (-49deg); kutu gölgesi: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0 ); -moz-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);

Şekillendirme .element4 :: sonrası

 # gmail-logo2 .element4 :: sonra content: "; konum: göreceli; marj: 12px 88px 0 0; şamandıra: sağ; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 54px; yükseklik: 186px; sınır yarıçapı: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-sınır-yarıçapı: 30px 0 0 0; -moz-dönüşümü: döndür (53deg); -webkit-dönüşümü: döndürme (53 derece); -o-dönüşümü: döndürme (53 derece); dönüşümü: döndürme (53 derece);

Şekillendirme .element5 :: önce

# gmail-logo2 .element5 :: önce content: "; konum: göreceli; marj: 115px 0 0 125px; şamandıra: sol; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 2px; yükseklik: 150px; -moz-dönüşümü: döndürme (55deg); -o-dönüşümü: döndürme (55deg); -webkit-dönüşümü: döndürme (55deg); dönüşümü: döndürme (55deg);

Şekillendirme .element5 :: sonrası

 # gmail-logo2 .element5 :: after position: relat; içerik: "; marj: 115px 0 0 150px; şamandıra: sol; ekran: blok; arka plan: rgb (201, 44, 25); genişlik: 2px; yükseklik: 150px; -moz-dönüşümü: döndürme (-50deg); - webkit-transform: rotate (-50deg); -o-transform: rotate (-50deg); transform: rotate (-50deg);

Önceliğini ayarlama Z-endeksi.

 # gmail-logo2 .element1 :: önce z-index: 3; # gmail-logo2 .element1 :: sonra z-index: 1; / * # gmail-logo2 .element2 :: önce  * / # gmail-logo2 .element2 :: sonra z-index: 2; # gmail-logo2 .element3 :: önce z-index: 5; # gmail-logo2 .element3 :: sonra z-index: 1; # gmail-logo2 .element4 :: önce z-index: 4; # gmail-logo2 .element4 :: sonra z-index: 3; / * # gmail-logo2 .element5 :: önce  # gmail- logo2 .element5 :: sonra  * /

Neredeyse bitti. Gmail logonuz şöyle görünmelidir:

Son olarak, üzerine geldiğinde farklı bir renk verelim.

 # gmail-logo2: vurgulu * :: sonra, # gmail-logo2: vurgulu * :: önce arka plan: rgba (20, 196, 7, 1);  # gmail-logo2: vurgulu .element1 :: önce kutu gölgesi: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px0 rgb (10, 90,4), -6px6px0gb (10, 90,4); -moz-kutu-gölge: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px0 rgb (10, 90,4), -6px6px0gb (10, 90,4);  # gmail-logo2: vurgulu .element1 :: after kutu gölgesi: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -moz-kutu-gölge: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px6px0gb (10, 90, 4), -6px7px0gb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px6px0gb (10, 90, 4), -6px7px0gb (10, 90, 4);  # gmail-logo2: vurgulu .element2 :: önce kutu gölgesi: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px0 rgb (10, 90, 4); -moz-kutu-gölge: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px0 rgb (10, 90, 4);  # gmail-logo2: vurgulu .element2 :: after kutu gölgesi: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px0 rgb (10, 90, 4); -moz-kutu-gölge: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px0 rgb (10, 90, 4);  # gmail-logo2: vurgulu .element3 :: after kutu gölgesi: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px0 rgb (10, 90, 4); -moz-kutu-gölge: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px0 rgb (10, 90, 4);  # gmail-logo2: vurgulu .element4 :: önce kutu gölgesi: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10 , 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px0.06b (10, 90,4); -moz-kutu-gölge: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90,4); -webkit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90,4); 

Önizleme | Kaynak dosyayı indir

Editörün Notu: Bu gönderi tarafından yazılmıştır Irham Kendeni Hongkiat.com için. Indaam olarak da bilinen Irham, Endonezya'dan bir web tasarımcısı ve geliştiricisidir. Ayrıca CSS ve WordPress tema geliştirmeyi çok seviyor.