İlham Kaynağı -No:2
Merhabalar;İkinci ilham kaynağımız ile sözümde durabildim ve ikinci paylaşımımız Hollanda tabanlı dailyinspiration.nl sitesinden.Web sitesi ilham kaynağına da buraya tıklayarak ulaşabilirsiniz!Benim seçtiğimse;...
Author: Hasan Yasin Türkyılmaz
- All
- Analiz
- Dijital pazarlama
- Dijital, İyi Şeyler Podcast
- E-Ticaret
- Eğitim
- Growth hacking
- İnceleme
- Kişisel
- Rehber
- Reklam
- Sosyoloji
- Teknoloji
- Wordpress
CSS Dersleri Bölüm 12 – Margin
Uzunca bir boşluktan sonra tekrar yazabildim. Ve şimdi konumuzu anlatayım.
Element çevresindeki boşluklar margin’i tanımlar. Css’te margin olarak kullanabiliriz tabi.
Bir elementin dış çevre boşluğunu ifade eder marjin. (kenarların dışında kalan yerler). Bu bölgenin hiçbir rengi yoktur ve tamamen saydamdır.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Kullanılabilen değerler
| Değer | Tanım |
|---|---|
| auto | Tarayıcı dış boşlukları ayarlar. Tarayıcıya bağlı bir sonuç oluşur burada. |
| length | Sabit bir boşluk yani marjin oluşur bu durumda (pixel(px) ile, punto(pt) ile veya em ile belirlenir.) |
| % | Elementin yüzdelik değerini içeren bir boşluk belirtir. |
İçeriye alabilmek için eksi yönde değerler de kullanabilmeniz mümkün.
Margin – Tekil kenarlar
CSS’te, farklı kenarlara farklı boşluk ölçüleri verilmesi mümkündür:
Örnek
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin – Kısayazım özelliği
Kodun kısa yazımı, tüm margin özelliklerinin tek bir margin tanımında yazılabilmesiyle olur. Bu kısayazım özelliğidir.
Survey Savvy Fikirlerinize ve Pazar Araştırmalarına Önem Veren Bir Anket Sitesi
Survey Savvy Fikirlerinize ve Pazar Araştırmalarına Önem Veren Bir Anket SitesiÜcretsiz üyelik mevcut bu araştırma sitesinde. ilk girişte; hukuki yükümlülükleri bildirien sözleşme çıkıyor ki bunu kabul etmezseniz üyeliğinizi gerçekleştiremezsiniz. İnsanlar çoğunlukla okumazlar bunları tabi ama okumakta yarar. Kabul edip ilerlediğinizde kişisel bilgilerinizi girmeniz isteniyor ve...
CSS Dersleri Bölüm 11 – Outline(Anahat/Dışçizgi/İskelet) Özellikleri
Bir dış çizgi elementlerin, kenar çizgisinin hemen dışında yer alan bir çizgidir ve göze çarpan bir görünüm oluşmasını sağlar.
Outline’in ozellikleri style, color ve outline’in yani dış çizginin width’i yani genişliğinin belirlenmesi .
Örnekler
Bir elementin çevresine çizgi çekme (outline)
Bir elementin dışına nasıl çizgi çekileceğini gösterir .
Bir outline’a yani dış çizgiye biçim verme
Outline style’ının gösterimi.
Bir outline’a renk verme
Bir dışçizgiye nasıl renk verildiğini gösterir.
Bir outline’ın yani dış çizginin genişliğini belirleme
Dış çizginin genişliğinin belirlenmesini gösterir.
CSS Outline
Elementlerin çevresinde olan bir dış çizgidir. (Kenar ya da çerçeve çizgisinin de dışında) Elementin oturmuş görünmesini sağlar.
Yalnız,Border özelliğinden farklılık içerir.
CSS Dersleri Bölüm 10 – Border / Çerçeve – kenar
CSS Border Özelliği
CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.
Border Style
border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.
Not; border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!
border-style değerleri:
none: Çerçevesiz hal
dotted: Noktalı bir çerçeve
dashed: Tirelenmiş kenarlık
solid: Sade, tek renk ve tek çizgi halinde olan kenarlık
double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.
groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.
ridge:3D kabarık çizgi. border-color değerine bağlı.
inset: 3d ilave kenar. border-color değerine bağlı.
outset: 3d ilave kenar. border-color değerine bağlı.
Kendiniz deneyin: Kenarın değerini ayarlama
Kenar genişliği
border-width kenarların genişliğini ayarlamak için kullanılır.
Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.
Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.
Örnek
|
Kenar rengi
border-color kenarlara renk vermek için kullanılır. Renkler de:
- name -belirli bir renk adı ile,mesela “red”
- RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
- Hex – belirli bir hex değeri ile,mesela “#ff0000”
Kenar renklerini transparan/”transparent” da yapabilirsiniz.
Fikirmetre
Bugün şu hasta halimle, Hürriyet bumerang sayesinde bu güzel anket sitesi ile karşılaştım. Çok da makul gözüken ödülleri var. Mesela;"fikirmetre üyesi olduktan sonra dolduracağın her anket için puan kazanacaksın. Kazandığın puanları ister e-ticaret sitelerinde isterseniz sosyal sorumluluk organizasyonlarında kullanabilirsin.Bunun için yapman gereken fikirmetre’ye giriş yaptıktan...
CSS Dersleri Bölüm 9 –Kutu modeli
Bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…
Tüm HTML elemanları kutu olarak düşünülebilir. CSS’te, “box model”(kutu modeli) terimi tasarım ve düzen hakkında konuşulduğunda kullanılır.
CSS box model HTML elementlerini saran bir kutu aslında ve margin’e(dış boşluk), border’a(kenar/çerçeve), padding’e(iç boşluk, içeriğin uzaklığı)ve asıl içeriğe(content) dayanır.
Box model elementlerin etrafına sınır çekmemize izin verir ve ilgili elementlere yakın konumlarına boşluklar koymamızı sağlar.
Alttaki resim kutu modelini anlatmaktadır:
Farklı bölümlerin açıklaması:
- Margin – border’ın yani çerçevenin etrafını temizler ya da boşluk bırakır-boşaltır- da denilebilir. Margin arkaplan rengine sahip değildir, tamamen transparandır. Bizler okulda kompozisyon yazarken A4 kağıdın her tarafında 5 cm boşluk bırakırız ve içerik o boşluklarda yer almaz. İşte o boşluk margin’dir.
- Border – Bir border padding(içeriği uzaklaştıran boşluk) ve content.(içerik) i de içine alan bir sınırdır. Border kutunun arkaplan renginden etkilenir.
- Padding – Content’in yani içeriğin çevresindeki alanı boşaltır ya da temizler. Padding kutunun arkaplan renginden etkilenir.
- Content – Kutunun içeriğidir yazılar ve resimler burada görünür.
Tüm tarayıcılarda doğru bir şekilde gözükmesini sağlayabilmeniz için box model’in nasıl işlediğini bilmeniz gerekmektedir.
Bir elementin Width ve Height değerleri(Genişlik ve yükseklik)
Önemli:Css ile bir elementin genişlik ve yükseklik değerlerini belirttiğinizde sadece içeriğin yer alacağı alanın genişlik ve yüksekliğini belirtmiş oluyorsunuz. Bir elementin tam kapladığı alanı bilebilmek için padding, border ve margin değerlerini de eklemelisiniz.
Aşağıdaki örmekte bir elementin toplam genişliği 300px’dir:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Şimdi ölçelim:
250px (width yani genişlik)
+ 20px (sol ve sağ padding yani iç boşluk)
+ 10px (sol ve sağ çerçeve yani border)
+ 20px (sol ve sağ margin yani dış boşluk)
= 300px toplamda
CSS Dersleri Bölüm 8 –Tabloları Stillendirme
Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.
Ek açıklama da; bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…
Table Borders(tablo kenarları)
border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.
Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:
Örnek
table, th, td
{
border: 1px solid black;
}
Kendiniz deneyin! »Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.
Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.