LARAVEL
SASS
CSS arkaplan özelliği div’lerin veya elementlerin arkaplanlarına renk, desen, resim gibi görseller atamak için kullanılır. Bir çok tasarımda arkaplanın önemli bir yer tuttuğu görülmektedir. Bu yazıda arkaplan rengi nasıl eklenir, konumlandırması nasıl yapırlır ve buna benzer background özelliklerini göreceğiz. Başarılar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .arakaplanozellikleri{ background-image: none; background-image:url(''); background-attachment:scroll;/*Arkaplan hareketli*/ background-attachment:fixed;/*Arkaplan sabit*/ background-color:red; /*Arka planarenk verir.*/ background-color:rgba(0,51,102,1)/*rgba(20%,50%,100%,1)*/;/*Arka plan renk belirleme*/ background-position: top center, -50% -100%,200px 100px;/*Üst ortaya hizalar örn. çoğaltılabilir.*/ background-repeat:;/*Arka plan terar edip etmeyeceğini belirler*/ background-repeat: repeat;/*Arka plan tekrar eder*/ background-repeat: repeat-x;/*Arka plan x düzleminde tekrar eder.*/ background-repeat: repeat-y;/*Arka plan y düzleminde tekrar eder.*/ background-repeat: no-repeat;/*Arka plan tekrar etmez.*/ background:#09F url(picoffeeresim1.jpg) no-repeat fixed right top;/*Örnek bir kullanım*/ background-clip:;/*Kutu modellerin arkaplanların nasıl gösterileceğni tanımlar. Üç değer alır*/ background-clip: border-box;/*Arka plan kenarları da kapsar*/ background-clip: padding-box;/*Sadece iç bolukları kapsar, kenarları kapsamaz*/ background-clip: content-box;/*Arka plan sadece içeriği kapsar, iç boşluklarda (padding) ile kenarlarda gösterilmez*/ background: url(1.jpg), url(y.jpg); background-position:top left, top right; background-size:;/*Arka plan resimlerinin istenilen boyuta göre ayarlanmasını ve yerleştirilmesini sağlar*/ background-size:cover;/*Resmi arka plan boyutuna göre oranlar ve tamamen kaplayacak şekilde yerleştirir.*/ background-size:contain;/*Resmi en boyuna göre arka plana tam olarak yerleştirir.*/ background-size:100% 100%;/*Resmi arka plan olarak ayarlarken sayı ya da yüzde değeri olarak kullanılabilir.*/ |
CLİP ÖZELLİĞİ
Grafilerde istenilen bölgenin gösterimesini sağlar. Absolute özelliği ile sabitlenmiş görseller üzerinde uygulanır.
1 2 | position:absolute; clip:rect(36px 470px 321px 167px); |
CSS İle Gredient(Eğlimli Renk Geçişi)
CCS ile kodlanan çeşitli renklerin geçişi ile oluşturulan bir görüntüdür.Renk geçişlerini iki tür kodlama ile yapmak mümkündür. Bunlardan biri çizgi boyunca ilerleyen renk geçişi linear-gradient(), diğeri ise bir daire içi geçişi sağlayan radial-gradient()’dir
linear-gradient() KULLANIMI
linear-gradient([<bg-position>||<angle>],<color-stop>,<color-stop>,[<color-stap>])
<bg-position> = Arka plan pozisyounu.
<angle>=Arka plan pozisyonu yerine açı kullanabilirsiniz.
<color-stop>= Virgün ile ayrılarak birden fazla renk değeri verilebilir.
Not: Web tarayıcıları kodların önüne konulan kendilerine has ön ad takıları ile çalışır.
1 2 3 4 5 6 7 8 9 | color:#CCC #000000;; background-image:linear-gradient(to bottom,#CCC %20, #000 %100); /*ÖRN: MOZ-SAFARI*/ background-image : -webkit-linear-gradient(to right,#CCCCCC 20%, #000000 100%); background-image : -webkit-linear-gradient(top right,#CCCCCC 20%, #000000 100%); background-image:-webkit-linear-gradient( left, green, red); filter:progid:DXImageTransform.Microsoft.gradient(startColorStr:'yellow' ,EndColorStr:'orange'); /*bottom left,top,right gibi yöndeğerlirini rakamlarla verme*/ background-image:-webkit-linear-gradient(360deg,#55BFFF 20%,#551FFF 100%); |
Radial-Gradient KULLANIMI
Daire etrafında renk geçişi sağlar Friefox16, IE10 ve Opera DA ön takısız W3C standartlarını destekliyor.Kullanımında sadece Chrome ve Safari için -webkit- ön takısı getirilmelidir. Radial Gradient ile renk geçişleri elips ve daire(circle) ile tanımlanmaktadır.*/
Circle Kullanımı
1 2 | background-image: radial-gradient(circle at 50% 50%,black 20%, yellow 100%); background-image: -webkit-radial-gradient(circle at 50% 50%,black 20%, yellow 100%); |
Ellipse Kullanımı
1 2 | background-image: radial-gradient(ellipse at 50% 50%,black 20%, yellow 100%); background-image: -webkit-radial-gradient(ellipse at 50% 50%,black 20%, yellow 100%); |
Diğer Kullanımı
1 2 | background-image: radial-gradient(ellipse at center right,#0000Ff 20%, #00DF00 100%); background-image: -webkit-radial-gradient(left center,ellipse,black 20%, yellow 100%); |
Seçenekler
closest-side || closest-corner || farthest-side || farthest-corner
1 2 | background-image: radial-gradient(ellipse farthest-side at 50% 50%, #7FFF55 0%, #FF5FAA 50%); background-image: -webkit-radial-gradient(50% 50%,ellipse farthest-side,black 20%, yellow 100%); |
Repeating-Linear-Gradient
Çizgisel renk geçişini istenilen aralıkta ve renkte tekrarını yapar.
1 2 | background-image: repeating-linear-gradient(90deg,#eee,#eee 10px,#ccc 10px, #ccc 20px); background-image: -webkit-repeating-linear-gradient(60deg,#000,#eee 10px,#ccc 10px,#ccc 40px); |
Yatay ve dikey gradient
1 2 3 4 5 6 7 8 9 10 11 | background-image: repeating-linear-gradient(0deg, transparent 0, transparent 5px, rgba(255,0,255,1) 5px, rgba(255,204,255,1) 10px), repeating-linear-gradient(90deg, transparent 0, transparent 5px, rgba(255,0,255,1) 5px, rgba(255,204,255,1) 10px); |
Repeating-radial-gradient Kullanımı
Dairesel renk geçişini istenilen aralıklara ve renklere göre geçişini yağmak için kullanılır.
ÜÇ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 43 | <!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> |