Twenty Twelve teması için renkli gölge efekti

Wordpress

WordPress

Twenty Twelve teması için renkli gölge efekti oluşturmak suretiyle WordPress sitenizde oldukça hoş bir görüntü elde edebilirsiniz. Temanın beyaz renkli yazı bloğunun kenarlarını bu şekilde hem belirginleştirmiş hem de dilediğiniz rengi kullanarak zengin bir görsellik elde edebilirsiniz.

Şu anda bu yazıyı okuduğunuz sayfa (eğer hala aynı temayı kullanıyorsam) yazıda anlatılanların doğrudan size yansıdığı bir örnek resim olarak görülebilir.

Ben arka planı gri olarak belirlediğim sitede gövdenin beyaz rengi ile uyumlu olacağı düşüncesi ile kırmızı gölge efektini tercih ettim. Siz dilediğiniz şekilde bir renk belirleyerek çok daha hoş görünümler elde edebilirsiniz.

Bunun için temanın style.css dosyasını açarak işe başlayacağız. Dosyayı açtığınızda son bölüme yakın bir yerde bulunan aşağıdaki kısmı bulun ve son satırını bir başka yere not edin.  Daha sonra o satırın yerine benim yaptığım gibi

box-shadow: 10px 10px 25px red;

satırını ekleyerek kırmızı renkli bir efekt elde edebilirsiniz. Satırın sonundaki “red” yerine dilediğiniz rengi yazabilir benim belirlediğim px değerlerini değiştirerek efektin şiddetini kendi isteğinize göre oluşturabilirsiniz.

/* Minimum width of 960 pixels. */@media screen and (min-width: 960px) {body {background-color: #e6e6e6;}

body .site {

padding: 0 40px;

padding: 0 2.857142857rem;

margin-top: 48px;

margin-top: 3.428571429rem;

margin-bottom: 48px;

margin-bottom: 3.428571429rem;

box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

Twenty Twelve teması için köşe yuvarlaklaştırma

Twenty Twelve teması için köşe yuvarlaklaştırma işlemi, temaya hoş ve değişik bir görünüm katmakla kalmayıp yukarıda anlatılan gölge efekti ile birlikte sitenizi oldukça farklı bir duruma getirecektir.

Yazı bloğunun her dört köşesini hafif yuvarlak hale getirmek tema gövdesinin daha belirgin bir hale gelmesini sağlayacak ve sitenizin görselliğine çok olumlu bir katkı sağlayacaktır.

Bu iş için yine style.css dosyamızdaki aynı kod bloğunu kullanacağız. Biraz önce değiştirdiğimiz son satırın altına hemen aşağıdaki üç satırlık kod dizisini eklemeniz yeterli olacaktır.

-webkit-border-radius:  40px 40px;-moz-border-radius:  40px/40px;border-radius:  40px/40px;

Burada benim belirlediğim 40 px değerleri siz farklılaştırarak yuvarlaklaştırmanın derecesini değiştirebilirsiniz. Bu şekilde değeri arttırıp azaltarak daha derin bir yuvarlak veya daha küçük bir yuvarlak elde etmeniz mümkün.

Son olarak Twenty Twelve teması için renkli gölge efekti ve köşe yuvarlaklaştırma amacıyla style.css dosyasında yaptığımız değişiklikleri bir bütün olarak yeniden verelim. Buradaki değişkenlerin bu siteye ait değerler olduğunu, renk ve ölçü değerlerini dilediğiniz gibi değiştirerek farklılık sağlayabileceğinizi belirtelim.

/* Minimum width of 960 pixels. */@media screen and (min-width: 960px) {body {background-color: #e6e6e6;}

body .site {

padding: 0 40px;

padding: 0 2.857142857rem;

margin-top: 48px;

margin-top: 3.428571429rem;

margin-bottom: 48px;

margin-bottom: 3.428571429rem;

box-shadow: 10px 10px 25px red;

-webkit-border-radius:  40px 40px;

-moz-border-radius:  40px/40px;

border-radius:  40px/40px;

 

Paylaşmak Güzeldir
Yazar
SIK KULLANILAN HTML KODLARI LAKERDA NASIL YAPILIR
Bir yorum yazın
Siz de düşüncenizi belirtebilirsiniz.

Web Tasarım Blog Teması Ecce Plus | Tüm hakları © Felix Themes'e aittir.