0 (555)106 23 45

Monthly Archives: Mart 2022

ANİMASYONLAR İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

@keyframes

Animasyonlar ile ilgili Css kodlarımızı yazmak için kullanılır. @keyframes özelliği içerisindeki from ve to blokları içerisine kodlarımızı yazabiliriz.

Animasyon, belirtilen sürede from içerisindeki Css kodlarından başlar ve kademeli olarak to içerisindeki Css kodlarına dönüşünceye kadar devam eder.

animation

Tüm animasyon özelliklerini toplu olarak tek özellikle belirtmek için kullanılır. Bir animasyon örneğini hem uzun hem de kısa şekliyle yazacak olursak:

** Ayrı ayrı yazarak animasyon örneği **

animation-name: example;

animation-duration: 3s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

** Tek satırda yazarak animasyon örneği **

animation: example3s linear 2s infinite alternate;

animation-delayAnimasyonu belirli bir süre sonra başlatmak için kullanılır.
animation-direction

Animasyonun yönünü belirtmek için kullanılır. 4 değer alabilir. Bunlar:

  • normal : Varsayılan değerdir.
  • reverse : Animasyonun ters yönde çalışmasını sağlar.
  • alternate : Animasyonun önce normal sonra tam tersi yönde çalışmasını sağlar ve bu şekilde devam eder.
  • alternate-reverse : Animasyonun önce ters yönde sonra normal yönde çalışmasını sağlar ve bu şekilde devam eder.
animation-durationAnimasyonun ne kadar sürede tamamlanacağını belirtmek için kullanılır. Varsayılan değeri 0’dır.
animation-fill-mode

Animasyonun bittikten sonraki durumunu belirtmek için kullanılır. animation-fill-mode özelliğine şu değerleri verebiliyoruz:

  • none : Animasyon bittikten sonra başlangıç değerlerine döner. (Varsayılan değerdir.)
  • forwards : Animasyon bittikten sonraki son durumunda kalır ve o son durumdaki değerler uygulanır.
  • backwards : Animasyon bittikten sonra veya durdurulduğunda, başlangıç özellikleri uygulanır.
  • both : forwards ve backwards değerleri birlikte uygulanır.
animation-iteration-countAnimasyonun kaç defa tekrar edeceğini belirtmek için kullanılır. Eğer animasyonun sonsuz döngüye girmesini yani sürekli tekrar etmesini istiyorsak infinite değerini vermemiz gerekiyor.
animation-nameAnimasyonun hangi etikete uygulanmasını istiyorsak, o etikete animation-name özelliği ile yazmış olduğumuz animasyonun adı verilir.
animation-play-state

paused değeri vererek animasyonları durdurmak için kullanılır. animation-play-state özelliğine şu değerleri verebiliyoruz:

  • running : Varsayılan değerdir ve animasyon normal bir şekilde çalışır.
  • paused : Animasyonu durdurmamızı sağlar.
animation-timing-function

Animasyonun gerçekleşme biçimini belirtmek için kullanılır. Örneğin gerçekleşecek animasyon, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.

animation-timing-function özelliğine şu değerleri verebiliyoruz:

  • ease : Animasyon, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)
  • linear : Animasyon, baştan sona aynı hızda devam eder.
  • ease-in : Animasyonun yavaş başlamasını sağlar.
  • ease-out : Animasyonun yavaş bitmesini sağlar.
  • ease-in-out : Animasyon, yavaş başlar ve yavaş biter.

KENARLIK VERMEK VEYA KÖŞELERİ YUVARLAMAK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

borderBir Html öğesinin 4 tarafına birden kenarlık vermek için kullanılır.
border-leftBir Html öğesine sol kenarlık vermek için kullanılır.
border-rightBir Html öğesine sağ kenarlık vermek için kullanılır.
border-bottomBir Html öğesine alt kenarlık vermek için kullanılır.
border-topBir Html öğesine üst kenarlık vermek için kullanılır.
border-colorBir Html öğesinin 4 tarafına birden kenarlık rengi vermek için kullanılır.
border-left-colorBir Html öğesine sol kenarlık rengi vermek için kullanılır.
border-top-colorBir Html öğesine üst kenarlık rengi vermek için kullanılır.
border-right-colorBir Html öğesine sağ kenarlık rengi vermek için kullanılır.
border-bottom-colorBir Html öğesine alt kenarlık rengi vermek için kullanılır.
border-styleBir Html öğesinin 4 tarafına birden kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır. border-style özelliğine şu değerleri verebiliyoruz:
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden
border-right-styleBir Html öğesine sağ kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-top-styleBir Html öğesine üst kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-left-styleBir Html öğesine sol kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-bottom-styleBir Html öğesine alt kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-widthBir Html öğesinin 4 tarafına birden kenarlık genişliği vermek için kullanılır.
border-top-widthBir Html öğesine üst kenarlık genişliği vermek için kullanılır.
border-right-widthBir Html öğesine sağ kenarlık genişliği vermek için kullanılır.
border-left-widthBir Html öğesine sol kenarlık genişliği vermek için kullanılır.
border-bottom-widthBir Html öğesine alt kenarlık genişliği vermek için kullanılır.
border-radiusBir Html öğesinin 4 köşesini birden yuvarlamak için kullanılır. Değer verirken px veya % (yüzde) olarak verebiliyoruz.
border-top-left-radiusBir Html öğesinin üst sol köşesini yuvarlamak için kullanılır.
border-top-right-radiusBir Html öğesinin üst sağ köşesini yuvarlamak için kullanılır.
border-bottom-left-radiusBir Html öğesinin alt sol köşesini yuvarlamak için kullanılır.
border-bottom-right-radiusBir Html öğesinin alt sağ köşesini yuvarlamak için kullanılır.
outlineBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık vermek için kullanılır.
outline-colorBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık rengi vermek için kullanılır.
outline-styleBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır. outline-style özelliğine şu değerleri verebiliyoruz:
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
outline-widthBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık genişliği vermek için kullanılır. Kenarlık genişliğini px, pt, cm, em, vb. ile belirleyebiliriz.
 

FONTLAR İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

@font-faceFont face özelliği, bilgisayarımızda hazır olarak gelen yazı tiplerinin ( Arial, Verdana vb..) dışında istediğimiz yazı tiplerini kullanmamıza olanak sağlar.
fontDiğer font özelliklerini tek Css özelliği (font) ile tanımlamamızı sağlar.
font-familyYazıların tipini yani hangi font ailesinden olmasını istiyorsak onu belirtmek için kullanılır. Değer olarak sadece bir yazı tipi verebildiğimiz gibi birden fazla değerde verebiliriz. Çünkü verdiğimiz ilk değeri tarayıcı desteklemiyorsa bir sonraki verdiğimiz değeri uygulayacaktır.
font-sizeBu özellik ile yazı boyutlarını ayarlayabiliyoruz. Yazı boyutuna px veya em türünden değerler veriyoruz. Tarayıcılar varsayılan olarak yazı boyutunu 16px uygularlar.
font-style

Yazıları italik yapmak için kullanılır. font-style özelliğine şu değerleri verebiliriz:

  • italic
  • normal
  • oblique : İtalic değerine çok benzer ama daha az tarayıcı tarafından desteklenir.
font-variant

Yazılarda küçük harfleri büyük harflere çevirmek için kullanılır. Burada şuna dikkat etmemiz gerekiyor. Eğer yazıda hepsi küçük harf ise dönüştürdüğümüzde hepsi aynı boyutta büyük harfe dönüşecektir. Eğer yazıda hem büyük hem küçük harfler varsa, dönüştürdüğümüzde yine hepsi büyük harf olacaktır ama önceden zaten büyük harf olanlar yeni dönüştürülenlerden biraz daha büyük olacaktır.font-variant özelliğine şu değerleri verebiliriz:

  • small-caps : Küçük harfleri büyük harflere dönüştürür.
  • normal
font-weight

Bu özellik ile yazıların kalınlık incelik durumlarını ayarlayabiliriz. font-weight özelliğine şu değerleri verebiliyoruz:

  • bold
  • bolder
  • lighter
  • normal
  • 100’den 900’e kadar 100’ün katları olacak şekildede verilebilir. 900 en kalını iken, 100’e doğru incelir ve 100’de en ince halini alır.

HTML’Mİ CSS’Mİ?

CSS harflerini okuduğunuzda aklınıza web tasarımı geliyorsa, doğru yerdesiniz demektir. CSS yani Cascading Style Sheets anlamına geliyor. Cascading Style Sheets sözcük öbeğinin  Türkçe anlamı ise Basamaklı stil sayfaları demek. CSS Türkçe’de Stil Şablon olarak tanımlanıyor. Web tasarımı yapmayı öğrenmeyi düşünüyorsanız, karşınıza ilk olarak CSS kavramı çıkacaktır. CSS’nin tanımını yapmak istersek, temel olarak web sayfalarının tasarımı ve sunumunu yöneten bir dil olarak tanımlayabiliriz. CSS kodları kullanabilmek için HTML kodlarına ihtiyacınız var zira CSS web sayfalarının içeriğini işleyen HTML ile birlikte çalışıyor. Tasarımını yaptığınız sitenin metin biçimlendirme konusunda HTML pek çok alternatif sunar. CSS programı sayesinde tasarladığınız site bünyesindeki her sayfa için daha geniş ve özgün  şablonlar hazırlayabilirsiniz. Kısacası, CSS kodları ile tasarladığınız web sitesindeki HTML elementlerinin boyut, yazı, renk karakteri gibi çeşit görsel özelliklerini değiştirebilirsiniz.

HTML mi  CSS mi Hangisi ? 

Continue reading