CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım.

Hemen örneğimize geçerek uygulamalı şekilde box-shadow özelliğimizi inceleyelim.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2018/08/CSS3-Dersleri-4-box-shadow-Kutuları-Gölgelendirme.html” icon=”” target=”true”]Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Basit bir gölge vermek için box-shadow özelliğine yatay gölge(10px) ve dikey gölge(10px) boyutu belirterek verebiliriz.

.golgelendirme{
	box-shadow: 10px 10px;
}

Oluşturduğumuz gölgeye renk verebiliriz.

.renklendirme{
	box-shadow: 10px 10px green;
}

Oluşturduğumuz ve renk verdiğimiz gölgeyi flu yapabilirsiniz.

.flulastirma {
    box-shadow: 10px 10px 5px green;
}

CSS3 Dersleri 3 text-shadow Yazıları Gölgelendirme

CSS3 ile birlikte gelen text-shadow özelliği ile yazılara gölgelendirme verebiliyoruz.

Hemen örneğimize geçerek uygulamalı şekilde text-shadow özelliğimizi inceleyelim.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2018/08/CSS3-text-shadow-Yazılara-Gölge-Verme.html” icon=”” target=”true”]Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Basit bir gölge vermek için text-shadow özelliğine yatay (2px) ve dikey (3px) boyutu belirterek verebiliriz.

.golgelendirme{
	text-shadow: 2px 3px;
}

Oluşturduğumuz gölgeli yazılara renk verebiliriz.

.renklendirme{
	text-shadow: 2px 3px red;
}

Oluşturduğumuz ve renk verdiğimiz gölgeyi flu yapabilirsiniz.

.flulastirma {
    text-shadow: 2px 3px 5px red;
}

CSS3 Dersleri 2 border-radius Kenar Yuvarlama

CSS3 ile birlikte gelen border-radius özelliğimiz, HTML etiketlerinin kenarlarını yuvarlamak, oval yapmak için kullanılır. Web tasarımda artık bu özellik sıklıkla kullanılıyor, Daha önceleri bu özelliği javascript kütüphanesi ve eklentileriyle kenar yuvarlama işlemleri yapılıyordu.  Artık CSS3 ile gelen border-radius özelliğini kullanmamız yeterli oluyor.

Hemen örneğimize geçerek uygulamalı şekilde border-radius özelliğimizi inceleyelim.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2018/05/CSS3-Dersleri-2-border-radius-Kenar-Yuvarlama.html” icon=”” target=”true”]Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

CSS3 border-radius Örnek 1

border-radius: 25px; border-radius özelliğine Extra Bir değer verilmiş ise, dört köşeye de aynı değer uygulanır.

 

CSS3 border-radius Örnek 2

border-radius: 0px 50px 0px 50px; 
border-radius özelliğine dört değer verilmiş ise sırasıyla

1. Değer: sol üst

2. Değer: sağ üst

3. Değer: sağ alt

4. Değer: sol alt köşe değerleri olarak belirlenir.

 

CSS3 border-radius Örnek 3

border-top-right-radius: 50px;
border-bottom-left-radius: 50px;

border-radius özelliğini sade alan değerini vererek de tanımlayabiliriz.

border-top-left-radius : Sol Üst

border-top-right-radius : Sağ Üst

border-bottom-right-radius : Sağ Alt

border-bottom-left-radius : Sol Alt

 

CSS3 border-radius Örnek 4

border-radius özelliğini resimlerin kenarlarını oval yapmakta da kullanabiliriz.

background: url(“http://www.bilgebank.com/wp-content/uploads/2017/02/bayrak.png”) no-repeat; Resim yolunu belirledik.

border-radius: 50%;  %50 özelliğini kullanarak tam ovallik sağladık.

padding: 0px; resmimizi sıfırlıyoruz.

width: 400px; resmimizin genişlik boyutunu belirtiyoruz.

height: 400px; resmimizin yükseklik boyutunu belirtiyoruz.

CSS3 Nedir? CSS3 İle Gelen Yenilikler Nelerdir?

css dersleri başlangıç

Öncelikle CSS neydi onu hatırlayalım;

CSS, HTML Kodlarımızdaki metin ve format etiketlerimize görsellikte zenginlik katmamızı olanak sağlayan web teknolojisidir.

CSS3 Yeni bir teknolojimidir?

CSS3 daha önceki sürümleri üzerine geliştirilmiş üçüncü sürümüdür.

Css Yapısı Seçici, Özellik, Değer

CSS3 Nasıl Kullanılır?

CSS3 kodları CSS de olduğu gibi HTML kodlarının içine de yazılabilir veya ayrı bir CSS dosyası oluşturularak da CSS kodlarıyla beraber yazılabilir CSS kodlarını nasıl yazıyorsak CSS3 kodlarını da aynı şekilde kullanabiliriz.

Css Dersleri

Neden CSS3’e İhtiyaç duyacağız?

Web sitelerimizin web tarayıcılarında ve mobil cihazlarda daha etkili olması için CSS3 yeniliklerine ihtiyacımız vardır.

CSS3 İle gelen yenilikler nelerdir?

Yazı özellikleri : Yazıya gölge verme text-stroke, text-shadow,  tarayıcı uyumlu özellikler ve RGB kullanarak saydamlık verme gibi birçok özelliği web sayfalarında kullanılabilir hale gelmiştir.

Düzen özellikleri : opacity ile donukluk border-radius ile Kenarlıkları oval yapma box-shadow ile gölgelendirme yapabilme multi-column text ile çoklu yazı kolonları gibi özellikler CSS3 ile birlikte gelmiştir.

Animasyon Geçiş efektleri : HTML objelerinin özelliklerine animasyonlu geçiş efektleri ekleyerek daha güzel tasarımlar elde edebiliriz.

Kenarlık Resimleri : Resim tanımlaması yaparken objelere uygulanan kenarlık resimleri yapılır hale gelmiştir.

Geçişler (Gradients) : Web sayfasındaki objelere ve resimlere doğrusal geçişler, radyal geçişler ve mozilla webkitleri gibi şık stil düzenlemeleri gelmiştir

Dönüşümler (2D / 3D Transformations) : Nesnelere 2 veya 3 boyutlu dönüşüm efektleri yapılır hale gelmiştir.

Web Fontları : Mobil cihazlar için kullanılabilecek yeni fontlar ve her browsera ayrı olarak uyarlanabilecek yazı fontları ve formatları geliştirilmiştir.

HTML5 Canvas Etiketi ( 18.Ders Canvas İle Metin Oluşturma )

Canvas Etiketimizle metin yazdırmak için 2 seçeneğe bakacağız biri dolgulu yazım biçimi FillText metodu diğeri içi boş strokeText metotlarıyla canvas alanımıza metin ekleyeceğiz.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-18.Ders-Canvas-İle-Metin-Oluşturma-.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas alanımızı belirliyoruz.

<canvas id="resimalani6" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
	var c = document.getElementById("resimalani6");
	var ctx = c.getContext("2d");
	ctx.font = "29px Arial";
	ctx.strokeText("<canvas>BilgeBank HTML5</canvas>",2,250);
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c = document.getElementById(“resimalani6”);  Komutumuz İle id si resimalani6 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

ctx.font = “29px Arial”; Komutumuz ile yazımızın 29px Arial yazı formatında olmasını Belirledik.

ctx.strokeText(“<canvas>BilgeBank HTML5</canvas>”,2,250); Komutumuz ile ilk değerde “<canvas>BilgeBank HTML5</canvas>” yazısının yazmasını 2 Soldan boşlukla başlamasını ve 250px yukarıdan boşlukla başlamasını belirledik.

strokeText Formatında yazımızın içi boş bir şekilde çıktı aldık içi dolgulu yazı yazdırmak isterseniz strokeText yerine FillText yazmanız yeterlidir.

HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler)

<canvas> Etiketimizle Renklendirmeler Yapacağız Bunun İçin 2 Metot Kullanacağız biri Düz Renk Geçişleri Sağlayacağımız createLinearGradient diğeri oval geçiş sağlayabileceğimiz createRadialGradient metotlarımızla renklendirmeler yapacağız. Fazla Uzatmadan hemen örneğimize bakarak nasıl renk geçişleri sağlayacağımıza bakalım..

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-17.Ders-Canvas-İle-Renklendirmeler.html” icon=”” target=”true”]Örnek Çalışma[/button]

Gradient Kullanımları

  1. createLinearGradient(x,y,x1,y1)
  2. createRadialGradient(x,y,r,x1,y1,r1)

İlk Olarak Canvas alanımızda düz geçişleri sağlayacağımız createLinearGradient metodumuzu kullanalım bunun için Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani4" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
	var c = document.getElementById("resimalani4");
	var ctx = c.getContext("2d");

	var grd = ctx.createLinearGradient(100,0,300,0);
	grd.addColorStop(0,"#F88C00");
	grd.addColorStop(1,"black");

	ctx.fillStyle = grd;
	ctx.fillRect(10,10,480,480);
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c = document.getElementById(“resimalani4”); Komutumuz İle id si resimalani4 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”);  Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.
var grd = ctx.createLinearGradient(100,0,300,0); Komutumuzla renk geçiş komutlarını belirliyoruz sırasıyla şu şekilde değerler verdik

100 : soldan sağa turuncu rengimiz 100px e kadar renk değişmeden devam etsin  siyah renge 100px den sonra geçiş yapsın dedik.

0 : Komutumuz soldan sağa düz bir renk geçişi sağlanmasını sağladık buraya ekleyeceğiniz değer ile renk geçişinin kare içindeki değişimini farkedebilirsiniz burasıda y düzlemi içindeki başlangıç değerini belirler

300: Komutumuz ile siyah rengimizin başlangıcını belirledik ilk değerde verdiğimiz 100 ile 300 arasında renk tonlaması oluşturduk.

0: Komutumuzla 2. değerde verdiğimiz y düzleminin tersi yönünde başlangıç belirleyebilirsiniz başlatabilirsiniz

grd.addColorStop(0,”#F88C00″); Komutumuz ile 0 değerindeki yani ilk renk alanımıza #F88C00 renk kodumuzla turuncu tonlarında bir renk değeri belirledik

grd.addColorStop(1,”black”); Komutumuz ile 1 değerindeki ikinci renk alanımıza siyah renk olmasını tanımladık bu sayede renk geçişinin nasıl olduğunu daha iyi fark edebileceğiz.
ctx.fillStyle = grd;  Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createLinearGradient içinde belirliyoruz.

Örnek Kodlarda verdiğimiz değerlerde ufak değişiklikler yaparak hangi değerinm nerede işlem yaptığına bakabilirsiniz.

 

Ve İkinci canvas alanımızıda da createRadialGradient ile oval bir renk geçişi sağlayalım bunun için bir canvas alanı belirleyelim

<canvas id="resimalani5" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
	var c = document.getElementById("resimalani5");
	var ctx = c.getContext("2d");

	var grd = ctx.createRadialGradient(340,140,40,340,140,150);
	grd.addColorStop(0,"#F88C00");
	grd.addColorStop(1,"#44e9e5");

	ctx.fillStyle = grd;
	ctx.fillRect(10,10,480,480);
</script>

var c = document.getElementById(“resimalani5”); Komutumuz İle id si resimalani3 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

var grd = ctx.createRadialGradient(340,140,40,340,140,150); Komutumuz İle Asıl Değerlerimizi Burada Oluşturuyoruz.

createRadialGradient(x,y,r,x1,y1,r1) Değerimize bakarak

createRadialGradient metodumuzun içindeki ilk 3 parametre oluşturduğumuz turuncu alanımızı oluşturmamıza yarıyor 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla ve 40px çapında bir daire oluşturmasını istiyoruz.

Son 3 parametrede dış alanımızı belirliyor ve iç alanla aradaki renk geçişlerinin oluşmasını sağlıyor aynı alanda ve tam bir çember olması için 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla komutlarını belirtkten sonra 150px çapında bir daire oluşturarak renk katmanlarımızı oluşturuyoruz.

grd.addColorStop(0,”#F88C00″); Komutumuz İle İç alanda oluşturduğumuz turuncu rengi belirledik.

grd.addColorStop(1,”#44e9e5″); Komutumuz İle dış alanda oluşturduğumuz turkuaz rengi belirledik.

ctx.fillStyle = grd; Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createRadialGradient içinde belirliyoruz.

Çalışmalarda Değerleri Değiştirerek Nasıl Değişimler olduğuna bakarak mantığını iyice kavrayın umarım yararlı bir yazı olmuştur aklınıza takılan soruları yorum bölümünde sorabilirsiniz.

HTML5 Canvas Etiketi ( 16.Ders Canvas İle Çember ve Oval Cizimler )

<canvas> Etiketimizle Çember ve Oval Çizimler İçin arc Metodumuzu Kullanıyoruz Bu Metotları JavaScript Derslerimizde Tekrar Ederek ve Çeşitli Metotları Öğrenerek Daha Güzel Tasarımlar Oluşturabiliriz.

arc(x,y,r,start,stop) metodunda tanımlamamız bu şekilde olacak

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-16.Ders-Canvas-İle-Çember-ve-Oval-Cizimler-.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani3" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
      var c = document.getElementById("resimalani3");
      var ctx = c.getContext("2d");	
      ctx.beginPath();
      ctx.arc(150,350,100,0,2*Math.PI);
      ctx.stroke();
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c = document.getElementById(“resimalani3”);  Komutumuz İle id si resimalani3 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

ctx.beginPath(); Metodu ile bir çizim yapılacağını bildiriliyoruz. İşlemler Bittiğinde İse stroke veya fill yöntemi İle Çizimi Bitirdiğimizi Belirtiyoruz.

ctx.arc(150,350,100,0,2*Math.PI); arc metodumuzun içinde belirteceğimiz parametrelerle başlangıç bölgelerini ve boyutlandırmalarını yapacağız.

İlk İki Komutumuzda başlama noktalarını belirtiyoruz 150 soldan 350 yukarıdan boşluklarla başlayacağımızı belirttik. 100 parametremizlede çemberimizin boyutunu tanımladık, 0 komutumuzla açıklık kalmadan tam bir daire olmasını tanımladık 10 gibi bir değer belirtseydik tamamen iki ucu birleşmeden yarım kalırdı çember oluşturabilmek için 0 komutu kullanıyoruz. 2*Math.PI komutumuzla da yarı çapının pi sayısını alıp 2 ile çarpıyoruz. ve çemberimizi oluşturan parametreleri tanımlamış oluyoruz.

ctx.stroke(); Komutumuz ile bunun bir başlangıç ve bitiş kordinatlarının olacağı bir çizği olacağını tanımladık.

HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

<canvas> Etiketimiz İçinde Çizim Yollarını Belirlemek için Hemen Örneğimize Geçelim

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-15.Ders-Canvas-Yol-Belirleme-.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım.

<canvas id="resimalani2" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor. JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
   var c = document.getElementById("resimalani2");
   var ctx = c.getContext("2d");
   ctx.moveTo(10,20);
   ctx.lineTo(400,450);
   ctx.stroke();
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık..

var c = document.getElementById(“resimalani2”);  Komutumuz İle id si resimalani2 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

ctx.moveTo(10,20); Komutumuz İle Çizimimizin Başlangıç Yolunu belirledik.

10 : Soldan Sağa 10px.  ile başlamasını tanımladık.

20 : Yukarıdan Aşağıya 20px. ile başlamasını tanımladık.

ctx.lineTo(400,450); Komutumuz İle Çizimimizin Bitiş Noktasını Tanımladık

400 : Soldan Sağa Doğru 400px. de bitimini tanımladık.

450 : Yukarıdan Aşağıya 450px. de bitimini tanımladık.

ctx.stroke(); Komutumuz ile bunun bir başlangıç ve bitiş kordinatlarının olacağı bir çizği olacağını tanımladık.


	

HTML5 Canvas Etiketi ( 14.Ders Canvas İle Çalışma Alanı Oluşturma)

<canvas> Etiketimiz web sayfalarında çeşitli grafikler oluşturmamıza ve geometrik çalışmalar yapabilmemiz için div gibi çalışma alanını belirleyen tutucudur . Canvas etiketimizi resim yapmak için kullandığımız boş bir sayfa olarak düşünebilirsiniz bunun üzerine resimi yapabilmek için bir ressama ihtiyacımız var buda javascript veya buna benzer kodlama dilleri olabilir. Javascrip Bildiğinizi varsayarak örneğimizi hemen yapalım.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-14.Ders-Canvas-İle-Çalışma-Alanı-Oluşturma.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani1" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
        var c=document.getElementById("resimalani1");
	var ctx=c.getContext("2d");
	ctx.fillStyle="#999";
        ctx.fillRect(10,20,200,300);
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c=document.getElementById(“resimalani1”);  id olarak resimalani1 ismini verdiğimiz canvas alanımızı Script Komutumuzun içinde belirttik biz artık bu alanda çalışıyor dedik.

var ctx=c.getContext(“2d”); Komutumuz ile Alanda Bir Nesne Oluşturacağımızı Bildirdik Bu ve bunun Gibi Birçok Metodu JavaScript Derslerimizde Öğreneceğiz.

ctx.fillStyle=”#999″; Komutumuz İle Bu Nesnemize Bir renk Oluşturduk.

ctx.fillRect(10,20,200,300); Komutumuz İle Gerekli Boyutlandırmaları ve Kordinatlarını belirledik.

ctx.fillRect Metodunun içinde vermiş olduğumuz parametreler sırasıyla şu şekildir.

İlk İki Parametremiz oluşturduğumuz Dikdörtgenimizin canvas Alanımızın Kordinatıdır x ve y düzlemlerini belirtir.

Son İki Parametremiz Dikdörtgenimizin Boyutlarıdır.

10 : Oluşturduğumuz Dikdörtgen Soldan Sağa Doğru 10px bir Boşlukla Başlasın.

20 : Oluşturduğumuz Dikdörtgen Yukarıdan Aşağıya Doğru 20px bir Boşlukla Başlasın.

200 : Dikdörtgenimizin Genişliği 200px Olsun

300 : Dikdörtgenimizin Boyu 300px Olsun


 

HTML5 hgroup Etiketi ( 13.Ders h1…h6 Etiketlerini Guruplandırma)

<hgroup> Etiketimiz Sayfamızda birden fazla alt alta başlık tanımlayacağımız zaman kullanılır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-hgroup-Etiketi-13.Ders-h1…h6-Etiketlerini-Guruplandırma.html” icon=”” target=”true”]Örnek Kullanımı[/button]