Bu dersimizde CSS3 ile birlikte gelen diğer önemli özelliklere değineceğiz.
Google Chrome ile web'de gezinirken bir sitenin arama kutusuna tıkladığınızda arama kutusunun etrafının sarı bir çizgi ile seçili hâle geldiğini fark etmişsiniz. Bunu sağlayan outline özelliğidir. outline dilimizde dış çizgi gibi bir anlama gelir. İsterseniz bunu daha rahat görebilmek için aşağıdaki text-box kutucuğunu seçiniz.
#deneme {
width: 240px;
padding: 20px;
position: relative;
margin: auto;
background-color: gainsboro;
}
.arama-kutusu {
width: 200px;
height: 30px;
line-height: 30px;
position: relative;
margin: auto;
}
Şeklinde CSS kodlarına sahip olduğumuzu varsayalım.
<div id="deneme">
<input type="text" class="arama-kutusu" />
</div>
HTML kodlarımız ise bu şekilde olsun.
Çıktımız ise bu şekilde. Eğer bu arama kutusunu Google Chrome tarayıcısında seçerseniz etrafının sarımsı bir çizgi ile seçili hâle geldiğini fark edeceksiniz. Bu sarımtrak rengi ortadan kaldırmak için outline: none değerini sınıfımıza eklemeliyiz.
#deneme2 {
width: 240px;
padding: 20px;
position: relative;
margin: auto;
background-color: gainsboro;
}
.arama-kutusu2 {
width: 200px;
height: 30px;
line-height: 30px;
position: relative;
margin: auto;
outline: none;
}
Kodlara outline: none değerini ekledim.
Yeni çıktımız ise bu şekilde görünecektir. Kutuyu seçtiğinizde sarımtrak dış çizginin olmadığını fark edeceksiniz.
CSS3 ile gelen en güzel yeniliklerden biri de animation özelliğidir. animation dilimizde animasyon anlamına gelmektedir. transform özelliğinden farklı olarak animasyon'da kullanıcıdan bağımsız hareketli efektler oluşturulabilir.
#animasyon {
width: 200px;
height: 200px;
position: relative;
margin: auto;
background: skyblue;
animation: animasyonum 5s infinite ease-in-out alternate;
-webkit-animation: animasyonum 5s infinite ease-in-out alternate;
}
@keyframes animasyonum {
from {
background: skyblue;
}
to {
background: violet;
}
}
@-webkit-keyframes animasyonum {
from {
background: skyblue;
}
to {
background: violet;
}
}
Şeklinde kodlara sahip olduğumuzu varsayalım. 200'e 200 px ölçülerinde animasyon ID'sine sahip bir div'imiz var. position: relative ve margin: auto ile sayfada ortaladık. Arkaplan rengi ise mavi. İlk olarak animation özelliğini yazıyorum. İlk değer olarak animasyonum yazıyorum. Bu adı kendim belirledim. 5s ile animasyonumun süresini belirliyorum. infinite ile animasyonumun sonsuz bir döngü içerisinde tekrar etmesini istiyorum. ease-in-out'u transition'dan biliyorsunuz. animasyonumun geçiş efektini belirtiyor. alternate ile animasyonumun geriye doğru gitmesini istiyorum. Aynı özellik ve değerlerini -webkit- ön eki ile bir alt satıra ekliyorum. Bu şekilde Google Chrome ve Safari tarayıcılarında da animasyonum çalışacaktır.
Daha sonra @keyframes kuralını yazıyorum ve ardından animasyon adımı ekliyorum. from animasyonumun nereden başlayacağını, to ise animasyonumun nerede biteceğini belirtir. Mavi renkten başlayıp eflatun renginde sona erecek. Bununla birlikte infinite ve alternate değerlerini kullandığım için animasyonum sonsuz bir döngü içerisinde bir ileri bir geri şeklinde devam edecek. Aynı şekilde keyframes için de -webkit- ön ekini ekliyorum.
Bu şekilde basit bir animasyon elde etmiş oldum. Şimdi biraz daha kompleks bir animasyon yapalım.
#animasyon-container {
width: 800px;
height: 60px;
position: relative;
margin: 15px auto;
border-radius: 24px;
background: gainsboro;
box-shadow: 0 0 10px 4px mediumpurple;
}
#animasyon2 {
width: 60px;
height: 60px;
position: relative;
float: left;
border-radius: 24px;
background: green;
animation: animasyonum2 10s infinite linear;
-webkit-animation: animasyonum2 10s infinite linear;
}
#animasyon-yukleniyor {
width: 800px;
height: 60px;
line-height: 60px;
font-size: 24px;
font-family: 'Conv_segoeui', Verdana, sans-serif;
position: absolute;
top: 0;
color: mediumpurple;
text-shadow: 1px 1px black;
text-align: center;
animation: animasyonum3 10s infinite ease-in-out;
-webkit-animation: animasyonum3 10s infinite ease-in-out;
}
@keyframes animasyonum2 {
0% { width: 60px;background: green;}
25% { width: 200px; background: gold;}
50% { width: 400px; background: orange;}
75% { width: 600px; background: orangered;}
100% { width: 800px;background: red;}
}
@-webkit-keyframes animasyonum2 {
0% { width: 60px;background: green;}
25% { width: 200px; background: gold;}
50% { width: 400px; background: orange;}
75% { width: 600px; background: orangered;}
100% { width: 800px;background: red;}
}
@keyframes animasyonum3 {
0% { opacity: 0;}
100% { opacity: 1;}
}
@-webkit-keyframes animasyonum3 {
0% { opacity: 0;}
100% { opacity: 1;}
}
İlk olarak animasyon-container adlı bir ID oluşturuyorum. Özellikleri kodda belirtildiği gibi. animation özelliğinin değerleri ise animasyonum2 adlı yeni bir keyframe, 10 saniye ve sonsuz bir döngü içerisinde devam etmesi ve geçiş efektinin linear yani doğrusal olması.
animasyonum2 keyframe'leri şu şekilde çalışacak: %25'e kadar yeşilden altın rengine dönüşecek; %25'ten %50'ye kadar altın renginden turuncuya; %50'den %75'e kadar turuncudan portakal rengine; %75'den %100'e kadar ise portakal renginden kırmızıya bir renk geçişi olacak. Bu renk geçişlerini ise animasyon2 adlı div'imizin genişliğini arttırarak gerçekleştireceğiz.
Yükleniyor... yazımın görüntülenmesi için animasyon-yukleniyor adında yeni bir ID oluşturuyorum. Bu ID'in animation değerleri ise animasyonum3 adlı yeni bir keyframe, 10 saniye sonsuz bir döngü içerisinde devam etmesi ve geçiş efektinin ease-in-out olması.
animasyonum3 keyframe'leri ise şu şekilde çalışacak: %0'dan %100'e kadar div'in şeffaflığını 0'dan 1'e çekeceğim.
Bu iki animasyon da 10 saniye içinde gerçekleşeceği için her şey senkronize bir şekilde gerçekleşecek.
<div id="animasyon-container">
<div id="animasyon2"></div>
<div id="animasyon-yukleniyor">
<span>Yükleniyor...</span>
</div>
</div>
HTML kodlarımız ise bu şekilde olacak.
Yükleniyor...
Ve görüldüğü gibi çıktımız sorunsuz bir şekilde çalışıyor. Güzel bir loading bar oluşturduk.
CSS3 ile gelen bir yeniliktir. Metinleri gazete yazılarında olduğu gibi kolon kolon göstermeye yarar. columns dilimizde kolonlar anlamına gelmektedir.
#kolon {
width: 720px;
padding: 20px;
position: relative;
margin: auto;
color: black;
background: gainsboro;
}
Şeklinde CSS kodlarına sahip olduğumuz varsayalım.
<div id="kolon">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus.
Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed
rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam
in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla
ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam.
Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam
volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce
adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nulla volutpat egestas mauris vel mollis.
</span>
</div>
HTML kodlarımız ise bu şekilde olsun.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam. Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat egestas mauris vel mollis.
Çıktımız ise bu şekilde.
#kolon2 {
width: 720px;
padding: 20px;
position: relative;
margin: auto;
color: black;
background: gainsboro;
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
}
columns adında yeni bir özellik ekledim ve değerini 3 olarak belirledim. Bu şekilde metinlerimiz 3 kolon hâlinde görüneceklerdir. Google Chrome ve Safari tarayıcıları için -webkit- ön ekini ve Mozilla Firefox tarayıcısı içinse -moz- ön ekini ekledim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam. Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat egestas mauris vel mollis.
Çıktımız ise bu şekilde olacaktır.
#kolon3 {
width: 720px;
padding: 20px;
position: relative;
margin: auto;
color: black;
background: gainsboro;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 30px;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-rule: 3px outset mediumpurple;
-webkit-column-rule: 3px outset mediumpurple;
-moz-column-rule: 3px outset mediumpurple;
}
Şimdi biraz daha kompleks bir kolon stili yapıyorum. Kolon sayım bir öncekinde olduğu gibi 3. Kolonlar arasındaki boşluk column-gap ile 30px. Kolonlar arasındaki sınır çizgisi ise column-rule özelliği ile 3px genişliğinde ve mediumpurple renginde. -webkit- ve -moz- ön eklerini eklemeyi unutmuyorum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam. Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat egestas mauris vel mollis.
Ve bu şekilde bir çıktı elde ediyorum.
CSS3 ile gelen bir özellik değil; fakat temel CSS özelliğidir. overflow dilimizde taşma anlamına gelmektedir.
#tasma {
width: 720px;
height: 150px;
padding: 20px;
position: relative;
margin: auto;
color: black;
background: gainsboro;
overflow: visible;
}
Varsayılan olarak visible değerini alır. Sadece görün diye overflow: visible özelliğini ekliyorum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam. Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat egestas mauris vel mollis.
Çıktımız ise bu şekilde görünecektir.
#tasma2 {
width: 720px;
height: 150px;
padding: 20px;
position: relative;
margin: auto;
color: black;
background: gainsboro;
overflow: scroll;
}
Özelliğin değerini scroll olarak değiştirdiğimde ise kaydırma çubuğu (scroll bar) görünür olacaktır.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam. Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat egestas mauris vel mollis.
Bu şekilde bir görünüm elde ederiz.
.tasma3 {
width: 720px;
height: 150px;
padding: 20px;
position: relative;
margin: 15px auto;
color: black;
background: gainsboro;
overflow: auto;
}
auto değeri ile ise yazılar div'e fazla geldiğinde otomatik olarak kaydırma çubuğu görünür olacaktır.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam. Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat egestas mauris vel mollis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et.
Bu şekilde bir çıktı elde ederiz.
#tasma4 {
width: 720px;
height: 150px;
padding: 20px;
position: relative;
margin: 15px auto;
color: black;
background: gainsboro;
overflow-y: hidden;
overflow-x: inherit;
}
x ve y eksenleri için yani yatayda ve dikeyde de overflow özelliği verebiliriz. Dikeydeki taşmayı hidden yaptık. Yani gizledik. Yatayda ise inherit olarak yani kalıtsal olarak bıraktık.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula porta turpis non cursus. Nunc suscipit fermentum leo, et volutpat eros posuere non. Fusce sollicitudin quam arcu, sed rutrum ligula interdum et. Integer posuere leo id commodo ullamcorper. Maecenas placerat quam in ligula pharetra sollicitudin. Proin rhoncus nulla sit amet placerat dapibus. Donec fringilla ligula felis, at pulvinar lectus lobortis et. Integer et consequat dolor. Duis eu porttitor diam. Maecenas vel nibh quis sapien hendrerit tempus. Duis vestibulum enim id posuere congue. Nam volutpat porta mi sit amet iaculis. Integer tempor sem eget ligula rhoncus commodo. Fusce adipiscing, leo eu dictum varius, odio est ullamcorper lacus, eget vehicula urna odio at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat egestas mauris vel mollis.
Çıktımız ise bu şekilde olacaktır. Şimdi overflow'un nerelerde kullanılabileceğini anlamaya çalışalım.
#kayan-kutu-container {
width: 600px;
height: 100px;
position: relative;
margin: 100px auto;
background-color: gainsboro;
}
#kayan-kutu {
width: 50px;
height: 50px;
line-height: 40px;
text-align: center;
font-size: 46px;
font-weight: bolder;
font-family: Arial, Verdana, sans-serif;
position: relative;
margin: auto;
top: -90px;
background-color: violet;
animation: kayankutu 1s infinite linear;
-webkit-animation: kayankutu 1s infinite linear;
}
@keyframes kayankutu {
0% { top: -90px;}
100% { top: 140px; }
}
@-webkit-keyframes kayankutu {
0% { top: -90px;}
100% { top: 140px; }
}
Şeklinde kodlarımız olsun.
<div id="kayan-kutu-container">
<div id="kayan-kutu">
<span>↓</span>
</div>
</div>
HTML kodlarımız ise bu şekilde.
↓
Görüldüğü gibi eflatun rengi kutu top: -90px pozisyonunda başlıyor ve top: 140px pozisyonuna kayıyor. Eğer kaymayı gri kutunun içinde gizlemek istersek gri kutunun CSS özelliklerine overflow: hidden değerini eklememiz yeterli olacaktır. Bu şekilde taşmayı ortadan kaldıracağız.
#kayan-kutu-container2 {
width: 600px;
height: 100px;
position: relative;
margin: 100px auto;
background-color: gainsboro;
overflow: hidden;
}
#kayan-kutu2 {
width: 50px;
height: 50px;
line-height: 40px;
text-align: center;
font-size: 46px;
font-weight: bolder;
font-family: Arial, Verdana, sans-serif;
position: relative;
margin: auto;
top: -90px;
background-color: violet;
animation: kayankutu2 1s infinite linear;
-webkit-animation: kayankutu2 1s infinite linear;
}
@keyframes kayankutu2 {
0% { top: -90px;}
100% { top: 140px; }
}
@-webkit-keyframes kayankutu2 {
0% { top: -90px;}
100% { top: 140px; }
}
#kayan-kutu-container2 adlı div'e overflow: hidden değerini ekledim. Şimdi sonuca bakalım:
↓
Gördüğünüz gibi animasyon işlemimiz başarılı bir şekilde gerçekleşti. Bu şekilde yapılmış "Download" düğmesi (button'u) da vardır.
Overflow metinler için kaydırma çubuğu (scroll bar) göstermek yerine bu işe de yarar.
İletişim form'larında kullanılan textarea'yı biliyorsunuzdur. textarea dilimizde metin alanı anlamına gelmektedir ve resize özelliği ile bu metin alanının yeniden boyutlandırılıp boyutlandırılmamasına karar verebiliriz. resize ise dilimizde yeniden boyutlandırmak anlamına gelmektedir.
#metin-alani {
width: 400px;
height: 200px;
position: relative;
margin: auto;
background: gainsboro;
}
Şeklinde CSS'imiz olsun.
<div id="metin-alani">
<textarea rows="4" cols="40"></textarea>
</div>
HTML kodlarımız ise bu şekilde. 4 satırdan ve 40 kolondan oluşan bir textarea kullandık.
Çıktımız ise bu şekilde. Metin alanını textarea'nın sağ altındaki ikondan sürükleyip dilediğiniz gibi genişletip daraltabiliyorsunuz.
#metin-alani2 {
width: 400px;
height: 200px;
position: relative;
margin: auto;
background: gainsboro;
}
#metin-alani2 textarea {
resize: none;
}
Eğer textarea değeri için resize: none değerini eklersem artık metin alanımı dilediğim gibi genişletip daraltamayacağım.
Çıktımız ise bu şekilde görünecektir.
Metinlerin seçim rengi gibi özelliklerini belirlemek için kullanılır. selection dilimizde seçim anlamına gelmektedir.
#secim-rengi {
width: 600px;
padding: 20px;
height: 300px;
position: relative;
margin: auto;
background: gainsboro;
color: black;
cursor: text;
}
#secim-rengi ::selection {
color: green;
background-color: black;
}
#secim-rengi ::-moz-selection {
color: green;
background-color: black;
}
Şeklinde CSS kodlarımız olsun. secim-rengi div'inin içindeki metni seçtiğimizde seçili metnin arkaplan rengi siyah ve metnin rengi yeşil olacaktır.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit diam, dapibus ac tempus eu, faucibus eu mauris. Curabitur luctus aliquet leo eu aliquet. Nulla imperdiet, dolor vel tempus lacinia, lectus nisi convallis lorem, a malesuada nulla erat vitae nisi. Vivamus facilisis lacus at magna dictum, ut iaculis ligula pharetra. Morbi quis tincidunt diam, tempus egestas lacus. Mauris ut libero augue. Integer viverra justo a hendrerit lobortis. Integer vel iaculis sapien. Quisque at enim porttitor, dignissim metus vel, ultrices massa. Nam nisi nisl, luctus vel magna quis, lobortis convallis tortor. Suspendisse quis aliquam ipsum, non convallis erat. Ut fringilla, arcu vitae posuere pharetra, turpis leo interdum dolor, sit amet lacinia turpis risus nec ligula. Aliquam aliquet eu quam elementum pulvinar. Aliquam et ultricies velit, a eleifend orci. Fusce accumsan odio non tellus pulvinar molestie.
Bu şekilde seçim renginin nasıl değiştiğini daha rahat görebilirsiniz.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
İleri CSS3 dersleri burada bitiyor arkadaşlar. Umarım faydalı olmuşumdur. Dilerseniz JavaScript öğrenmeye başlayabilirsiniz.