Bootstrap Sık Kullanılan CSS Class ve Anlamları

Bootstrap Classları ve Anlamları:

justify-content-center içeriği ortalamak için
no-gutters : sütunlar arası boşluk olmaması için
mb-5 : margin-bottom:5px anlamına gelir alttan 5px boşluk bırakır.
mb-lg-0 : büyük ekranlarda margin bottom 0 yapar.
col-md-6 : 6 sütunluk alan oluşturmak
img-fluid : görseli responsive yapmak için mutlaka img etiketleri içinde kullanılmalıdır.
h-100 : içerik yükseklik olarak tamamını kapsaması için
my-auto : y ekseninde margin’i otomatik olarak ayarlasın. (ortalamak)
mx-auto : x ekseni üzerinde ortalamak
rounded-circle : görseli yuvarlak yapmak
text-muted : yazıyı biraz gri yapmak
social-buttons : sosyal medyaları tanımlarken
list-inline-item : li etiketine tanımlanır, elemanları yanyana dizer.

— Harici CSS Özellikleri:

border-radius:100% : kenarlık çizgisinizi yuvarlak yapmak

Brackets Theme Background İmage Remove – Tema Arka Plan Resmini Kaldırmak

Brackets kod editörünün arka planında yer alan Brackets logosunu kaldırmak için

Help -> Extension Folder Show -> user

yada

Yardım -> Eklentiler Klasörünü Göster -> user

ardından backgroundimage klasöründe yer alan arka plan görselini silin ve yeniden başlatın.

Javascript ile Scroll’a göre CSS Class vermek

Navbar yapımında en çok kullanacağımız yapılardan biri de scrolll aşağı kaydırıldığında gerçekleşecek olaylar zinciridir. Javascript ile CSS vermek, Javascript ile Class vermek,

örnek classımızın içeriği de padding

 $(window).scroll(function(){
 if($(document).scrollTop() > 50) { 
  	$('nav').addClass('shrink');
 	 } else {
  		$('nav').removeClass('shrink');
  		}
})

ornek css

nav.shrink {
	padding: 0;
	background-color:#f74c3c!important;
}

* bu örneğimizde scrollTop 50 den büyük olduğunda shrink classı uygulanmaya başlayacaktır.

Şık Tasarımlar için CSS ile Parallax Efekt Vermek

Ekrandaki resmi birazcık karartarak ve Scrool aşağı kayarken resmin harici alanlarını kullanıcıya yansıtarak şık bir görünüm elde edebilirsiniz. Buna basit parallax efekt diyenler de var soranlara duyurulur 🙂

HTML Kodları:

    <section id="statement" class="section-box">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h4 class="text-black lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolor illo soluta nulla, <br>doloremque necessitatibus dolorem, suscipit omnis et maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h4>
                </div>
            </div>
            </div>
    </section>

Örnek css Kod:
(Aşağıda Örnek linear-gradient kullanımı da bulunmaktadır bu olmadan da parallax yapabilirsiniz.)

#statement {
	background: linear-gradient( rgba(20, 20, 20, .8), rgba(20,20,20, .8)),
    url("../img/ornekbg.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
}

Örnek Görünüm:

Google Font Kullanımı

https://fonts.google.com/ adresinde güzel fontlara rastlamak mümkün peki bunları projelerde nasıl kullanacağız?
bu adrese girdikten sonra kullanmak istediğimiz font/fontları + butonuna tıklayarak sepetimize ekliyoruz sağ tarafta hemnen beliriyor. Aşağıdaki görselden de anlayacağınız üzere 1 nolu bölümü kopyalayıp index.html yada index.php dosyamızda etiketinden önce yapıştırıyoruz. Eğer WordPress tema geliştiricisiyseniz header.php dosyasında etiketinden önce yapıştırmanız gerektiğini hatırlatayım.
Ardından 2 nolu alanı isterseniz body etiketine dilerseniz h1 h2 etiketlerine yada dilediğiniz başka bir etikeyin style.css dosyanızdaki css kodları arasına yapıştırabilirsiniz.

CSS Hover İşlemine Slow Efekti Vermek

Bootstrap ile yapılan yada diğer projelerde mutlaka bir linke yada dive hover uygularız. Hover işleminin tasarımda şık durması için slow efekti ile yani yavaşça gerçekleşmesi gerekir.
Bunun için hover tanımladığımız nesnenin direk kendisine css transition uygulamamız gerekir

Örnek CSS Transition kullanımı;

div:hover {
  width: 300px;
/*Yazılacak standar diğer kodlar*/
}
div {
 transition: all .5s ease-in-out;
}

Diğer transition efektleri:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Resimleri Responsive Yapmak (BOOTSRAP)

Webtasarım yapıyorsanız ve HTML CSS kodu yazıyorsanız Ekran çözünürlüğü değiştiğinde resimlerin ekrana göre tekrar boyutlanması sizin için önemli bir detaydır. Görsellerin otomatik boyutlanması için ekstradan css kodu yazmanıza gerek yok bootsrap kütüphanesini projenize dahil ettiyseniz kullanmanız gereken class img-fluid

örnek kod:

<img src="..." class="img-fluid" alt="Responsive image">

WordPress Çift Sütunlu Kategori Bileşeni Yapmak [ÖRNEK KODLAR]

WordPress için tema yaparken en çok karşılaştığımız konu bileşen yapmaktır. Wordpreste dinamik alanları tasarlama konusunda da aklan en çok gelen sidebar ve bileşen yapmaktır. Bileşen yapmak için mantığını kavramanız gerekir aşağıdaki örnek kodu inceleyerek Çift Sütunlu Kategori Bileşeni yapma konusunda bilgi sahibi olacaksınız hemen işe başlayabilirsiniz.

Okumaya devam et WordPress Çift Sütunlu Kategori Bileşeni Yapmak [ÖRNEK KODLAR]

Temel WordPress Kodları

WordPress için tema oluştururken yada entegre işlemi yaparken mutlaka kullanmamız gereken kodlar vardır Okumaya devam et Temel WordPress Kodları

WordPress Tema Screenshot Boyutları

WP için Tema Hazırlarken dikkat edilmesi gerekenlerden biri de Ekran görüntüsü olayıdır. Yani screenshot adlı screenshot.png dosyasıdır. Hazırlayacağınız bu görsel  tema klasörünüzün ana dizinine yerleştirilmelidir. Ekran görüntüsü tema tasarımını doğru göstermeli ve PNG formatında kaydetmelidir. .Jpg, .jpeg ve .gif ayrıca ekran görüntüsü için geçerli uzantılar ve dosya formatları olsa da önerilmez. (codex tarafından)

Önerilen resim boyutu, 1200 piksel genişliğinde ve 900 piksel uzunluğundadır. Ekran görüntüsü genellikle daha küçük gösterilecektir, ancak aşırı büyüklükteki görüntü HiDPI ekranlarda yüksek çözünürlüklü görüntülemeye izin veriyor. Temaları Yönet ekranının duyarlı olduğundan, ekran görüntüsünün üst ve alt kısmının görüntülenemeyebileceğini unutmayın; bu nedenle grafikleri merkeze yakın tutun