LARAVEL
SASS
BORDER ÖZELLİKLERİ
Html elementlerinden neredeyse hepsinin border yani kenar çizgisi özelliği bulunmaktadır. Bu bölümde css ile elementlere ve diğer nesnelere nasıl kenaralık özelliğini verildiğini aynı zamandan kenarlık sitillerini anlatacağım.Border özelliğini html elementlerinden table elementi için kullanıyorduk. Bu elementin özelliğini verdiğimizde tablonun dört bir köşesine bir kenarlık eklemekteydi. CSS border özelliğinde ise bunu daha kapsamlı bir şekilde yapabiliri. Örneğin css ile bütün kenaralıkları değilde sadece alt kenarlık vermeyi, kenarlıklara değişik sitiller ve resimler eklemeyi hatta daha estetik 3D görünüm vermemizi sağlamaktadır. Aşağıda kenarlıkla ilgili css kodları ve onların açıklamaları bulunmaktadır. Bu örneklere ek olarak her birine ayrı ayrı örneklemler vermeyi düşünüyorum. Şimdiden başarılar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .borderozellikleri{ border:1px solid #0FF;/*Bütün sınır çizgilerini belirlemeye yarayan kısaltılmış bir özelliktir. 1px(Çizgi Genişliği) solid(Çizgi Biçimi) #0FF(Çizgi rengi)*/ border-bottom:5px solid #0FF;/*elementin alt bölümüne kenarlık vermemizi sağlar yukarıdaki gibi tanımlanabilir.*/ border-bottom-color:#0FF;/*Alt kenarlığa renk vermemizi sağlar.*/ border-bottom-style:solid;/*Alt kenarlık stilini belirlememiz sağlar*/ border-bottom-width:5px;/*Alt kenarlıkğın genişliğini vermemizi sağlar*/ border-color:#0FF; /*Element kenarlığının dört tarafınada kenarlık vermemizi sağlar*/ border-left:5px solid #0FF;/*Elemente sol kenarlık vermemiz sağlar üç değeri birden alabilir.*/ border-left-color:#0FF;/*Elementin sol kenarlığına renk vermemizi sağlar*/ border-left-style:solid; /*Elementin sol kenarlık stilini tanımlamamızı sağlar*/ border-left-width:5px;/*Elementin sol kenarlığına genişlik vermemizi sağlar*/ border-right:1px solid #0FF.;/*Elementin sağ kenarlığını tanımlamamızı sağlar. Üç değeri birden alabilir.*/ border-right-color:#0FF;/*Elemenitn sağ kenarlığına renk vermemizi sağlar.*/ border-right-style:solid;/*Elementin sağl kenarlığının stilini tanımlamamızı sağlar*/ border-right-width:5px;/*Elementin sağ kenarlığına genişlik vermemizi sağlar. */ border-style:solid;/*Elementin dört kenarınında stilini tanımlamamızı sağlar.*/ border-top:5px solid #0FF;/*Elementin üst kenarlığını tanımlamamızı sağlar. Aynı anda üç değeride alabilir*/ border-top-color:#0FF;/*Elementin üst kenarlığına renk tanımlamamızı sağlar.*/ border-top-style:solid;/*Elementin üst kenarlığının stilini tanımlamamız sağlar.*/ border-top-width:5px;/*Elementin üst kenarlığının genişliğni tanımlamamızı sağlar.*/ } |
border-style Özelliği
Kenarlık stilini tanımlamamızı sağlar aşağıda stiller ve açıklamaları aynı zamanda örneklemleri verilmiştir.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .boderstyle{ border-style: none, /*Çizgi Yok*/ dashed, /*Kesik Çizgi*/ dotted, /*Noktalı Çizgi*/ double, /*Çift Çizgi*/ groove, /*İçe Dönük Gölgeli Çizgi*/ hidden, /*Çizgi Gizli*/ inset, /*İçe doğru derinlik görüntüsü*/ outset, /*Dışa doğru derinlik görüntüsü*/ ridge, /*Dışa dönük gölgeli çizgi*/ solid; /*Düz çizgi*/ } |
border-style Örneği
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> div{ border-width:3px; border-color:#F0F; margin:5px;} </style> </head> <body> <div style="border-style: none ;">border-style: none;</div> <div style="border-style: dashed ;">border-style: dashed;</div> <div style="border-style: dotted ;">border-style: dotted;</div> <div style="border-style: double ;">border-style: double;</div> <div style="border-style: groove ;">border-style: groove;</div> <div style="border-style: inherit ;">border-style: inherit;</div> <div style="border-style: hidden ;">border-style: hidden;</div> <div style="border-style: inset ;">border-style: inset;</div> <div style="border-style: outset ;">border-style: none;</div> <div style="border-style: ridge ;">border-style: ridge;</div> <div style="border-style: solid ;">border-style: solid;</div> </body> </html> |
ÜÇGEN TASARLAMA
Yukarı gösteren üçgen örenği
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> www.caglarbostanci.com.tr* div{ margin:10px} .ucgenasagi{ width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid red; } .ucgenyukari{ width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid red; } .ucgensol{ width:0px; height:0px; border-right:20px solid red; border-top:20px solid transparent; border-bottom:20px solid transparent; } .ucgensag{ width:0px; height:0px; border-left:20px solid red; border-top:20px solid transparent; border-bottom:20px solid transparent; } </style> </head> <body> <div class="ucgenasagi"></div> <div class="ucgenyukari"></div> <div class="ucgensol"></div> <div class="ucgensag"></div> </body> </html> |
CSS BİLGİ BALONU YAPIMI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİL BALONU</title> <!--www.caglarbostanci.com.tr--> <style> .balonum{ width:300px; position:relative; padding:15px; margin:1em 0 3em; border:5px solid red; border-radius:10px; } .balonum:before{ content:""; position:absolute; bottom:-20px; left:30px; border-width:20px 20px 0; border-style:solid; border-color:red transparent; width:0px; } .balonum:after{ content:""; position:absolute; bottom:-15px; left:35px; border-width:15px 15px 0; border-style:solid; border-color:white transparent; width:0px; } </style> </head> <body> <div class="balonum">BABAAA BALONUM GİTTİİİİİ!</div> </body> </html> |
border-radius KULLANIMI
Elemenlere tanımlanan border özelliğinde kenarlıkların keskin bir şekilde oluşmaktadır. Bu köşelerin daha estetik bir şekilde sunulmasını istiyorsak border-radius özlliğini kullanarak tam köşeli değil oval bir şekilde olmasını sağlayabiliriz. CSS3 ile birlikte gelen border radius özelliği popüler tüm tarayıcılar tarafından desteklenmektedir. Örnek kullanımı aşağıdaki gibidir.
1 2 3 4 5 6 7 8 | .borderradius{ border-radius:10px;/*Tek değer tanımlandığında bütün köşeler aynı oranda ovalleşekcektir.*/ border-radius:5px 10px 15px 20px;/*5px(sol üst) 10px (sağ üst) 15px (sağ alt) 20px (sol alt)*/ border-radius:5px 10px 15px 20px;/*5px(sol üst) 10px (sağ üst) 15px (sağ alt) 20px (sol alt)*/ border-top-left-radius:10px;/*sol üst köşe radius*/ border-bottom-right-radius:10px;/*alt sağ bükey*/ border-bottom-left-radius:10px;/*alt sağ bükey*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <!--www.caglarbostanci.com.tr--> <style> .balonum{ width:300px; margin:10px; border:5px solid #007F00;} .radius1{ border-radius:5px 20px;} .radius2{ border-radius:5px 10px 15px 20px;} .radius3{ border-top-left-radius:10px; } .radius4{ border-bottom-right-radius:10px; } .radius5{ border-top-right-radius:10px;} .radius6{ border-bottom-left-radius:10px; } </style> </head> <body> <div class="balonum radius1">BORDER-RADIUS 5px 20px</div> <div class="balonum radius2">BORDER-RADIUS 5px 10px 15px 20px</div> <div class="balonum radius3">border-top-left-radius:10px</div> <div class="balonum radius4">border-bottom-right-radius:10px</div> <div class="balonum radius5">border-top-right-radius:10px</div> <div class="balonum radius6">border-bottom-left-radius:10px</div> </body> </html> |
DÜŞÜNCE BALONU ÖRNEĞİ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <!--www.caglarbostanci.com.tr--> <style> .dusunce{ position:relative; width:300px; height:5em; border:5px solid #007F00; border-radius:50%; margin:1em auto; padding-top:30px; text-align:center; } .dusunce:before{ content:""; width:50px; height:1em; border:5px solid #007F00; position:absolute; bottom:-20px; left:50px; border-radius:50%; } .dusunce:after{ content:""; width:40px; height:1em; border:5px solid #007F00; position:absolute; bottom:-40px; left:50px; border-radius:50%; } </style> </head> <body> <div class="dusunce">İNSAN NE İÇİN YAŞAR?</div> </body> </html> |
box-shadow ÖZELLİĞİ
Kutu gölgelendirme metodudur. Gölge rengini uzaklık ve yakınlıklarını belileyebileceğimiz bir metoddur. Bu sayede daha estetik görüntü sunulabilmektedir.
1 2 3 4 | .golgever{ box-shadow:x konumu, y konumu, blur bulanıklık, radius/kenarlık, renk; box-shadow:1px 5px 1px 2px #00BFAA; } |
ÖRNEK KULLANIM
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <!--www.caglarbostanci.com.tr--> <style> .golge{ width:400px; height:400px; margin:0 auto; background:#FFBF55; box-shadow:10px 10px 3px 0px rgba(238,238,238,0.5); } </style> </head> <body> <div class="golge">KÖTÜLERİN GÖLGESİ OLMAZ?</div> </body> </html> |
ÖRNEK 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <!--www.caglarbostanci.com.tr--> <style> .kutu{ width:150px; height:150px; float:left; margin:10px; background:#FFBF55; text-align:center; padding-top:20px; border:1px solid rgba(85,85,85,1); } .golge{ box-shadow:rgba(238,238,238,1) 10px 10px; } .golge1{ box-shadow:rgba(238,238,238,1) 10px 10px inset; } .golge2{ box-shadow:rgba(238,238,238,1) 10px 10px 10px; } .golge3{ box-shadow:rgba(238,238,238,1) 10px 10px 10px inset; } </style> </head> <body> <div class="kutu golge">GÖLGE</div> <div class="kutu golge1">GÖLGE 1</div> <div class="kutu golge2">GÖLGE 2</div> <div class="kutu golge3">GÖLGE 3</div> </body> </html> |