Uzun süredir ara verdiğimiz wordpress dersleri yazı dizisine, ara vermeden devam ediyoruz. Bilirsiniz, eklediğiniz görsellerin altında kocaman boşluklar çıkabilir. WordPress'te bu sorunu çok sitede gözlemledim. Çözüm aradım ve jQuery ile [...]

Günümüzde bakıldığında videolar için "iframe" kullanılıyor. Ancak eskiden veya bazı eski player'larda olası bir şekilde embed veya object etiketleri kullanılabilmektedir. Esasen, jQuery ve JavaScript ile bu etiketlerin [...]

CSS içerisindeki parametreler bazı zamanlar kesinlikle doğru bir tabir ise, hayat kurtarabiliyor. Örnek verelim hemen. Bildiğiniz gibi img etiketleri içerisine eklenen bir görselin, herhangi bir CSS parametresine sahip olmasa bile, altında belirli bir oranda boşluk çıkar. Ben yaptığım tasarımlarda bu gibi boşlukların olmamasını istiyorum bazen. Bunun için geçmişte çok araştırma yapmıştım ve çözümün çok basit olduğunu anladım. Görsel etiketine aşağıdaki kodu [...]

HTML'deki hr etiketini herkes bilecektir. Bu etiketin görünümü, tarayıcılar için standarttır. Ancak arzu ederseniz, border kullanmak yerine bir background kullanarak, tüm tarayıcılar ile uyumlu olacak şekilde hr etiketini biçimlemlendirebilmeniz mümkündür. Border belirlemeyeceğimiz için, IE ve Edge gibi tarayıcılar ile de uyumlu olacaktır. Aşağıdaki kodları CSS dosyanız içerisine eklemeniz yeterli olacaktır. Dilediğiniz gibi renk [...]

Geçmiş zamanlarda çizgi efektli yazı yazma konusunda bir içerik kaleme almıştım. Ancak şu sıralar Responsive kavramına takılmış durumdayım. Hazırladığım veya editlediğim her şeyin Responsive olmasına, büyük - küçük ekranlarda sorunsuz çalışmasına özen gösteriyorum. Bu yüzden sizlerle bir içinden çizgi geçen başlık yapımı daha paylaşıyor olacağım. Bu paylaşımdaki kodlar, temanızdaki Responsive uyumluluğuna göre bağlı olarak da [...]

Herhangi bir input butonuna tıkladığınız zaman tarayıcı bazında değişebilecek bir biçimde "mavi çerçeve" çıkmaktadır. Ben bu durumu tasarım açısından pek beğenmiyorum. Dolayısı ile sitenizdeki tüm input'lara tıklandığı zaman, ortaya çıkan bu mavi çerçeveyi kalıcı olarak kaldırabilirsiniz. Bu şekilde hiçbir tarayıcıda benzeri bir çerçeve çıkmayacaktır. Aşağıdaki kodu ise CSS bölümünüze eklemeniz yeterli olacaktır. Farklı bir aksiyona ise [...]

Bildiğiniz gibi içerik formlarında (yani textarea bölümlerinde) yeniden ölçeklendirme özelliği bulunur. Böylelikle içerik formunu dilediğiniz gibi genişletebileceğiniz gibi, daraltabilirsiniz de. Ancak ben daha sağlıklı görünüm adına, yeniden ölçeklendirmeye pek sıcak bakmıyorum. Çünkü bu durum, ekran bazında kaymalara neden olabilmektedir. Textarea ölçeklendirme kapatmak için ise temanızın CSS bölümüne aşağıdaki kodu eklemeniz [...]

Bir süredir CSS dersleri yazı dizisine ara vermiştik ancak şimdi devam ediyoruz. Bu dersimizde, CSS'de "before" ve "after" sınıflarının ne işe yaradığını ve nasıl kullanıldığını öğreniyor olacağız. CSS ile mevcut div'in öncesine veya sonrasına metin veya spesifik bir obje eklenebilir. İşte bu gibi durumlar için, before ve after sınıfları bize yardımcı olmaktadır. Bu konuyla ilgili olarak şuradaki yazımda yer alan örneği de inceleyebilirsiniz. Aşağıdaki şekilde ise kullanım [...]

CSS Dersleri ile ilgili bugüne kadar birçok içerik paylaştık sizler için. Bildiğiniz gibi sadece CSS kullanarak, yuvarlak (oval) kenarlıklar elde edebilmek mümkün. Bunun için ise CSS kodu yazmanız gerekiyor. Bu belki size yorucu gelebilir. Bu yüzden sizlerle bir kaynak site paylaşmak istiyorum. Border Radius adlı bu site vasıtası ile dilediğiniz yuvarlaklık boyutunu belirleyerek, direkt ilgili kodu alabilirsiniz. Pratik bir site. Mutlaka kullanmanızı tavsiye ediyorum. Ben de [...]

CSS Dersleri ile ilgili içeriklerimize ara vermeden devam ediyoruz ve bugün gerçekten farklı bir konuyu işliyor olacağız. Bilirsiniz, bazı sitelerde kâğıt gibi kıvrılmış kenarlıklar vardır. Bu daha farklı bir görünüm elde edebilmemizi sağlar tasarımımızda. Gerek sitenizin Header bölümünde, gerek Image'lerinizde kullanabileceğiniz gibi, ana bölüme ait div içerisinde de kullanabilirsiniz. CSS ile kıvrılmış kenar efekti yapımını, şimdi sizlerle paylaşıyor olacağız. Faydalı olmasını [...]