Bootstrap 5 outline remove (inputlarda çıkan istenmeyen efekti kaldırmak)

textarea, selectbox, input elemanlarının etrafından çıkan istenmeyen efekti kaldırmak için aşağıdaki css yapısını kullanabilirsiniz.

textarea:focus, 
textarea.form-control:focus, 
select.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

CSS Arka Plan Resmi Ayarlama

CSS’te Arka plan rengi için background-color arka plan resmi için background-image kullanılmaktadır.

background-color kullanım örnekleri:

h1 {background-color: #FFFFCC} 
h2 {background-color: transparent} 
p {background-color: rgb(200,0,200)}

background-image kullanım örneği:

background-image: 
url(images/my_background.gif)

bacground-image ile ilgili detaylı örneklere buradan ulaşabilirsiniz. İyi çalışmalar

* CSS’e yeni başladıysanız bu kodları style tagleri içinde yada .css dosyası içinde kullanacağınızı hatırlatmak isterim iyi çalışmalar

Örnek rgba renk kodları

RGB colors with opacity renk kodları

{background-color:rgba(255,0,0,0.3);}
{background-color:rgba(0,255,0,0.3);}
{background-color:rgba(0,0,255,0.3);}
{background-color:rgba(192,192,192,0.3);}
{background-color:rgba(255,255,0,0.3);}
{background-color:rgba(255,0,255,0.3);}

örnek çıktı:

Lightbox Effect Kullanımı

HTML, ASPX, PHP, yada WORDPRESS Tema projelerinizde kullanıcılarınızı heyecanlandırmak ister misiniz? Lightbox Effect Kullanımını arıyorsanız doğru yerdesiniz çünkü kullanmanızı mutlaka önerdiğim efektli resim açma olayını hemen anlatacağım;

Adım Adım Lightbox Effect Kullanımı:

1) BURADAKİ adrese giderek işe başlıyoruz
2) by Lokesh Dhakar tarafından hazırlanan js/css kütüphanesini projeye dahil edebilmek için öncelikle son version paketi buradan download ediyoruz.

3) Projeye kütüphaneyi dahil etmek:

dist klasörü içinde yer alan aşağıdaki dosyaları projenizin ilgili klasörüne yapıştırın ve aşağıdaki gibi head etiketleri arasına linkleyin

<link href="cssKlasorunuz/lightbox.css" rel="stylesheet" />
<script src="jsKlsorunuz/lightbox.js"></script>

Ardından mutlaka unutmamanız gerken bir şey;
Okumaya devam et Lightbox Effect Kullanımı

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

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;}

CSS Baş Harfleri Büyük Yapma

Bir cümlenin yada kelimelenin otomatik olarak baş harflerini büyük yapmak için text-transform:capitalize özelliğinden faydalanırız

text-transform özelliğinin sahip olabileceği diğer değerler ise şunlardır;

none : Metin değiştirilmez. (Varsayılan değer)
capitalize : Her kelimenin ilk harfi büyük gösterilir.
uppercase : Tüm harfler büyük gösterilir.
lowercase : Tüm harfler küçük gösterilir.

Örnek Kullanım: Baş Harfleri Büyütmek İçin

<div style="text-transform:capitalize">Merhaba Kod Günlüğüm </div>