CSS İle Basit Seviyede Border (Kenar) Oluşturma ve Süsleme
CSS, HTML'den sonra öğrenilmesi gereken, siteler'i süslemek veya giydirmek için kullanılan stil verme dilidir. Bir çok kaynağı ve kütüphanesi bulunmakla beraber, tasarımcının zevkine ve yaratıcılığına göre güzelleşmektedir. Peki, html ile bir border oluşturmaya çalışsak nasıl olurdu acaba?
Öncelikle hemen HTML'in temel kodlarını yazarak bir site oluşturalım.
Her ne kadar UTF-8 kodu teamplate olarak yazılmasa da el alışkanlığı edinmekte fayda var.
Temel HTML kodumuzu yazdıktan sonra ufak bir resim inceleyelim sizinle.
CSS Nedir? Arkadaşlar CSS, web sayfasında bulunan her şeyi kutu olarak görür. Ancak kutu modeli CSS'te normal olarak none geldiği için hiç bir kodda görünmez. Sizin yazıp göstermeniz gerekir. Ayrıca CSS iç aralık (padding), kenarlık ve dış aralık (margin) den oluşmaktadır. Kutu modelinde bazı HTML komutları block, bazıları ise inline olarak çalışır. (Bir sonraki ders konusu) Tabii dünyada istediğin her şeyi değiştirebilirsin. Bazı yerlerde Block kodlarını İnline olarak kullanman gerekir. Bu durumda da display meydana girer. Bu bir sonraki ders konusu.
Haydi gelin bir diğer adıma geçelim.
Öncelikle ben bir h1 oluşturup, ardından 3 tane de paragraf oluşturacağım. Tabii ben CSS kodlarını bu derste html dosyasının <head> bölümüne <style> kodu ile gömeceğim. Sizler ekstradan bir CSS dosyası oluşturabilirsiniz.
Resimde de gördüğünüz gibi, 3 adet paragraf ve 1 adet büyük başlık oluşturdum. Ayrıca CSS kodlarını head içine gömdüm. Peki border-style nedir? Border-style bizim kenarımızın stilidir. Kutu kenarımızın nasıl olacağını gösterir. Aşağıda border-style kodlarını yazdım ama size nihai önerim şudur: Öğrenmek istiyorsanız kesinlikle aşağıdaki yazdıklarıma bakmayın, proje içinde zaten border-style: yazıp boşluk bıraktıktan sonra size stilleri gösteriyor. Onları kendiniz seçip sayfaya f5 atarsanız aklınızda daha kalıcı olur. Ama şimdi atmayın, çünkü daha yazmamız gereken kodlar var.
Şimdi bir kalınlık belirleyelim. Ben örnek olarak 4 belirledim. Onu da = border: 4px; komutu ile uygulayabilirsiniz. (4) yerine istediğiniz sayıyı yazabilirsiniz. Ayrıca CSS ile komut yazarken kesinlikle sona ; eklemeyi unutmayın.
Evet, yukarıda inline ve block komutundan bahsetmiştim hatırlıyorsanız. <p> komutu block olarak çalıştığı için, bulunduğu alanı soldan sağına doğru kaplar. Bu yüzden şu an yazdığınız kodun bir anlamı yok, açtığınızda 3 adet sayfa sonuna kadar uzayan bir dikdörtgen ve bir başlık göreceksiniz. Bu sebepten dolayı "width" ve "height" komutlarını kullanmamız gerekiyor. Gelin bir ufak kod oynaması yapalım. Tabii kodlarda border komutunu kodların en üst kısımda tutun.
Ve artık kenarlarımız hazır. Peki oluşturduğumuz kenarlıkları nasıl güzelleştirebiliriz?
Aslında burası CSS'te öğrendiğiniz bazı şeyleri kullanmanız gereken alandır. Öncelikle arkaplan'ın ingilizcesi background'dur. Renk'in ingilizcesi de color. Birleştirirsek background-color olur ve bu bize paragrafımızın arkaplan rengini verir. Arkaplan rengi olduğu gibi arkaplan resmi de olabilir. Onu da eklemeyi öğreneceğiz. Ama ondan önce kenar'ın rengini değiştirmek istiyorsanız border-color: komutunu uygulamalısınız. Ben örnek olarak background-color; blueviolet; uyguluyorum. Sonuç aşağıdaki gibidir:
Gördüğünüz gibi, renk vermek bu kadar basit. Ayrıca color: komutu ile de "Windows" yazısına renk verebilir, diğer CSS kodları (font-family, font-size, text-align) ile de güzel bir yazı oluşturabilirsiniz. Yazıyı yok da edebilirsiniz. Gelin şimdi bir resim ekleyelim ve kenarları bitirelim.
Arkaplan resmi vermek için background-image: url(''); komutunu uyguluyorum ve tırnak arasına herhangi bir resim atıyorum.
Gördüğünüz gibi, resim geldi fakat boyutu pek uygun değil gibi. Bunun da çözümü background-size ile oluyor. background-size değerini resmimize göre ayarlayalım. Not: çok küçük değer girerseniz resim p etiketini doldurmak için kendini tekrarlar. Bunu çözmek için uygun size değerini bulmalısınız veya background-repeat: no-repeat; komutunu uygulamanız lazım. Bu kodu uygularsanız arkaplanda bazı yerler boş kalır.
Gördüğünüz gibi uygun size'ı buldum. Şu an çok daha güzel gözüküyor. Tasarım size kalmış, keyfinize göre ayarlayabilirsiniz. Ayrıca background komutlarımız CSS'te ardalan olarak geçmektedir.
Genel olarak border'ın olayı bu. Tabii daha da güzelleştirilebilir. Sanatçıya bağlı. padding-margin de öğrendiğinizde her şey daha da iyi olacak. Ondan önce kodlar ile kendiniz bir border oluşturmayı deneyin. Oluşturduğunuz border'ları yorumda paylaşayabilirsiniz...
CSS, HTML'den sonra öğrenilmesi gereken, siteler'i süslemek veya giydirmek için kullanılan stil verme dilidir. Bir çok kaynağı ve kütüphanesi bulunmakla beraber, tasarımcının zevkine ve yaratıcılığına göre güzelleşmektedir. Peki, html ile bir border oluşturmaya çalışsak nasıl olurdu acaba?
Öncelikle hemen HTML'in temel kodlarını yazarak bir site oluşturalım.
Her ne kadar UTF-8 kodu teamplate olarak yazılmasa da el alışkanlığı edinmekte fayda var.
Kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Temel HTML kodumuzu yazdıktan sonra ufak bir resim inceleyelim sizinle.
CSS Nedir? Arkadaşlar CSS, web sayfasında bulunan her şeyi kutu olarak görür. Ancak kutu modeli CSS'te normal olarak none geldiği için hiç bir kodda görünmez. Sizin yazıp göstermeniz gerekir. Ayrıca CSS iç aralık (padding), kenarlık ve dış aralık (margin) den oluşmaktadır. Kutu modelinde bazı HTML komutları block, bazıları ise inline olarak çalışır. (Bir sonraki ders konusu) Tabii dünyada istediğin her şeyi değiştirebilirsin. Bazı yerlerde Block kodlarını İnline olarak kullanman gerekir. Bu durumda da display meydana girer. Bu bir sonraki ders konusu.
Haydi gelin bir diğer adıma geçelim.
Öncelikle ben bir h1 oluşturup, ardından 3 tane de paragraf oluşturacağım. Tabii ben CSS kodlarını bu derste html dosyasının <head> bölümüne <style> kodu ile gömeceğim. Sizler ekstradan bir CSS dosyası oluşturabilirsiniz.
Resimde de gördüğünüz gibi, 3 adet paragraf ve 1 adet büyük başlık oluşturdum. Ayrıca CSS kodlarını head içine gömdüm. Peki border-style nedir? Border-style bizim kenarımızın stilidir. Kutu kenarımızın nasıl olacağını gösterir. Aşağıda border-style kodlarını yazdım ama size nihai önerim şudur: Öğrenmek istiyorsanız kesinlikle aşağıdaki yazdıklarıma bakmayın, proje içinde zaten border-style: yazıp boşluk bıraktıktan sonra size stilleri gösteriyor. Onları kendiniz seçip sayfaya f5 atarsanız aklınızda daha kalıcı olur. Ama şimdi atmayın, çünkü daha yazmamız gereken kodlar var.
Kod:
border-style: solid; == Düz Kenar
border-style: double; == Çift Kenar
border-style: dashed; == Kesikli Kenar
border-style: dotted; == Noktalı Kenar
border-style: groove; == 3D oluklu kenar
border-style: ridge; == 3B düz kenar
border-style: inset; == 3D yerleştirme kenar
border-style: outset; == 3D başlangıç kenar
border-style: none; == kenar yok
border-style: hiddem; == gizli kenarŞimdi bir kalınlık belirleyelim. Ben örnek olarak 4 belirledim. Onu da = border: 4px; komutu ile uygulayabilirsiniz. (4) yerine istediğiniz sayıyı yazabilirsiniz. Ayrıca CSS ile komut yazarken kesinlikle sona ; eklemeyi unutmayın.
Evet, yukarıda inline ve block komutundan bahsetmiştim hatırlıyorsanız. <p> komutu block olarak çalıştığı için, bulunduğu alanı soldan sağına doğru kaplar. Bu yüzden şu an yazdığınız kodun bir anlamı yok, açtığınızda 3 adet sayfa sonuna kadar uzayan bir dikdörtgen ve bir başlık göreceksiniz. Bu sebepten dolayı "width" ve "height" komutlarını kullanmamız gerekiyor. Gelin bir ufak kod oynaması yapalım. Tabii kodlarda border komutunu kodların en üst kısımda tutun.
Ve artık kenarlarımız hazır. Peki oluşturduğumuz kenarlıkları nasıl güzelleştirebiliriz?
Aslında burası CSS'te öğrendiğiniz bazı şeyleri kullanmanız gereken alandır. Öncelikle arkaplan'ın ingilizcesi background'dur. Renk'in ingilizcesi de color. Birleştirirsek background-color olur ve bu bize paragrafımızın arkaplan rengini verir. Arkaplan rengi olduğu gibi arkaplan resmi de olabilir. Onu da eklemeyi öğreneceğiz. Ama ondan önce kenar'ın rengini değiştirmek istiyorsanız border-color: komutunu uygulamalısınız. Ben örnek olarak background-color; blueviolet; uyguluyorum. Sonuç aşağıdaki gibidir:
Gördüğünüz gibi, renk vermek bu kadar basit. Ayrıca color: komutu ile de "Windows" yazısına renk verebilir, diğer CSS kodları (font-family, font-size, text-align) ile de güzel bir yazı oluşturabilirsiniz. Yazıyı yok da edebilirsiniz. Gelin şimdi bir resim ekleyelim ve kenarları bitirelim.
Arkaplan resmi vermek için background-image: url(''); komutunu uyguluyorum ve tırnak arasına herhangi bir resim atıyorum.
Gördüğünüz gibi, resim geldi fakat boyutu pek uygun değil gibi. Bunun da çözümü background-size ile oluyor. background-size değerini resmimize göre ayarlayalım. Not: çok küçük değer girerseniz resim p etiketini doldurmak için kendini tekrarlar. Bunu çözmek için uygun size değerini bulmalısınız veya background-repeat: no-repeat; komutunu uygulamanız lazım. Bu kodu uygularsanız arkaplanda bazı yerler boş kalır.
Gördüğünüz gibi uygun size'ı buldum. Şu an çok daha güzel gözüküyor. Tasarım size kalmış, keyfinize göre ayarlayabilirsiniz. Ayrıca background komutlarımız CSS'te ardalan olarak geçmektedir.
Kod:
KUTU ARDALANI:
background-color // arkaplan rengi
background-image // arkaplan resmi
background-size // arkaplan büyüklüğü
KUTU KONUM ARDALANI:
background-repeat // resmin tekrar edip etmeyeceği
background-position // resmin pozisyonunu belirleme
background-attachment // resim hareket ettirme v.bGenel olarak border'ın olayı bu. Tabii daha da güzelleştirilebilir. Sanatçıya bağlı. padding-margin de öğrendiğinizde her şey daha da iyi olacak. Ondan önce kodlar ile kendiniz bir border oluşturmayı deneyin. Oluşturduğunuz border'ları yorumda paylaşayabilirsiniz...
