Şı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:

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>

CSS İki Yana Yaslama Nasıl Yapılır?

html içinde iki yana yasla

Word’de yazı yazarken kullandığımız iki yana yaslama özelliğinin kullanımını html’de iki yana yaslama versiyonunu buraya not etmek istiyorum. Eğer html içinde tanımlı metin isimli bir clasımız olduğunu varsayarsak, css dosyasında şu şekilde bir tanımlama yapmamız gerekir;

Html Css Yazıyı iki yana yaslama kodu

.metin {text-align:justify;}  /*İki Yana Yasla*/

Eğer css dosyası kullanmadan direk html dosyasında div içinde kullanmak istiyorsak kullanım şu şekilde olacaktır:

HTML KODLARI İÇİNDE İKİ YANA YASLAMA:

<div style="text-align: justify;">İki Yana Yaslanacak Metin</div>
<pre lang="html">

Buradaki kodları kendi wordpress blogunuzda yada özel yapım script sitenizin ilgili yerlerinde kullanabilirsiniz. Nereyi düzenleyeceğinizi tam olarak bilmiyorsanız kodgunlugum’e yorum yazarak yardım talep edebilirsiniz ücretsiz bir şekilde yardımcı olmaktan mutluluk duyarız iyi çalışmalar…