Diğer

Tarayıcı Kaydırma Çubuğu ::-webkit-scrollbar Nasıl Düzenlenir?

Bu rehberde tarayıcıların sağında bulunan tarayıcı kaydırma çubuğunun (scrollbar) nasıl düzenleneceği öğreniyor olacaksınız. Birkaç satır sitil kodu eklemek yerine, örnek ile birlikte işlem mantığı anlatmanın daha iyi olacağını düşündük. Bu nedenle konu ile ilgili detaylı bir içerik oluşturduk, böylelikle istediğiniz gibi düzenleme yapabilirsiniz. Webkit ile çalışarak sitenizin UI tasarımına uygun bir kaydırma çubuğu yapmanız oldukça iyi olacaktır. CSS ile yapacağımız düzenlemelerden önce kaydırma çubuğunda hangi seçicilerin bulunduğunu ve ne işe yaradıklarını bilmemiz gerekiyor.

Webkit ile işlem yapacağımız için yaptıklarınız sadece desteklenen tarayıcılarda ve Opera’nın 15 ve üzeri sürümünde çalışacaktır. Diğer tarayıcılar için jQuery kullanmanız gerekmektedir. Seçicilerin desteklendiği ve desteklenmediği tarayıcılar ile ilgili yazının sonundaki listeye bakmayı unutmayın.

CSS kaydırma çubuğu seçicileri;

  • ::-webkit-scrollbar Kaydırma tamamı tamamı.
  • ::-webkit-scrollbar-button kaydırma çubuğunun altında ve üstünde bulunan yukarı ve aşağı düğmesi.
  • ::-webkit-scrollbar-thumb sürüklenebilir kaydırma kolu.
  • ::-webkit-scrollbar-track kaydırma çubuğunun izi (ilerleme çubuğu).
  • ::-webkit-scrollbar-track-piece Kolun tutamağın kapsamadığı kısmı (ilerleme çubuğu).
  • ::-webkit-scrollbar-corner hem yatay hem de dikey kaydırma çubuklarının birleştiği kaydırma çubuğunun alt köşesi.
  • ::-webkit-resizer bazı öğelerin alt köşesinde görünen sürüklenebilir yeniden boyutlandırma tutamacı.

Webkit seçicilerinin kullanımı;

Site içerisine gömülmüş bir textarea ve iframe gibi kaydırma çubuğu bulunduran bir alan için de kullanabileceğiniz seçicileri, başına hiç bir şey eklemediğinizde tarayıcı da dahil olmak üzere sitenizin tamamında kullanmış olursunuz. Yukarıdaki listede gördüğünüz 7 seçiciden ihtiyacınız olanı sonrasına eklemek ve sitil tanımlaması yapmak yeterli olacaktır. Birkaç örnek vermek gerekir ise şu işlemler için şu kullanımlar gerekiyor;

Kaydırma çubuğunun genişliğini 10px yapma:

::-webkit-scrollbar {width: 10px;}

Kaydırma çubuğunun rengini değiştirme:

::-webkit-scrollbar-track {background: #f1f1f1;}

Kaydırma çubuğu kolunun rengini değiştirme:

::-webkit-scrollbar-thumb {background: #33363c;}

Kaydırma çubuğu kolunun kenarlarını yuvarlama:

::-webkit-scrollbar-thumb {border-radius: 4px;}

Kaydırma çubuğu kolunun işaretlenmiş (:hover) rengini değiştirme:

::-webkit-scrollbar-thumb:hover {background: #555;}

Kaydırma Çubuğu Seçicilerinin Tarayıcı Uyumlulukları;

Masaüstü Tarayıcılar
Seçiciler
Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Internet Explorer
::-webkit-scrollbarEvetHayırHayır15EvetHayır
::-webkit-scrollbar-buttonEvetHayırHayır15EvetHayır
::-webkit-scrollbar-thumbEvetHayırHayır15EvetHayır
::-webkit-scrollbar-track------
::-webkit-scrollbar-track-pieceEvetHayırHayır15EvetHayır
::-webkit-scrollbar-cornerEvetHayırHayır15EvetHayır
::-webkit-resizerEvetHayırHayır15EvetHayır
Mobil Tarayıcılar
Seçiciler Android Webview Samsung İnternet Google Chrome Microsoft Edge Mozilla Firefox Opera Safari
::-webkit-scrollbarEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-buttonEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-thumbEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-track-------
::-webkit-scrollbar-track-pieceEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-cornerEvetEvetEvetHayırHayır14Evet
::-webkit-resizerEvetEvetEvetHayırHayır14Evet

CSS ile Başlıkların Harflerini Büyük veya Küçük Yapmak

Başlık yazarken bazen ilk harfleri büyük yapmayı unutmuş olabiliriz ya da hiçbir harfi büyük yapmıyoruzdur. Bu başlıkları en baştan düzenlemek yerine tek bir kod ile siz başlıklarınızı yeniden düzenleyene kadar idare edebilirsiniz ya da forumlardaki kullanıcıların başlıkları tamamen küçük harfle yazmasına rağmen kelimelerin ilk harfini büyük yapabilirsiniz. Bunun için text-transform: capitalize; kodunu kullanacağız.

Örnek kullanım

<p style="text-transform: capitalize;">

bu cümledeki kelimelerin ilk harfleri aslında küçük

</p>

Yukarıda cümlemizin tüm harfleri küçük olmasına rağmen text-transform: capitalize; kodu sayesinde ilk harfleri büyük gösterebiliriz. text-transform: lowercase; ile de TÜM HARFLERİ BÜYÜK OLAN CÜMLELERİN harflerini otomatik olarak küçük gösterebilirsiniz. Örneğin bir sözlük sitesi açacaksanız bu kodu mutlaka kullanırsınız.

Ayrıca text-transform: uppercase; kodu ile de yazılarınızın başlıklarındaki cümlelerin tüm harflerini BÜYÜK yapabilirsiniz.

XHTML Introduction -Giriş seviyesinde xhtml ile ilgili bilgiler

Bir web sayfası temel anlamda 2 bloktan oluşmaktadır. Bu bloklara “Head” ve “Body” bloğu adi verilir. “Head” bloğu sayfanızın beyin kısmıdır. Bu blok içerisinde meta (temel) bilgilerinizi, sitenizin başlığını, sitenizde kullanacağınız stil bilgilerini ve JavaScript kodlarını kullanabilirsiniz.

“Body” bloğu ise, gövde bloğu olarak adlandırdığımız bolumdur. Bu bolum içerisinde yazmış olduğumuz her bir tasarımsal element tarayıcı tarafından okunur, yorumlanır ve iletilir.

Yukarıdaki meta bilgileri tamamı ile arama motorlarına yardımcı olmak için kullandığımız bilgilerdir. Bu bilgiler sayesinde anahtar kelimelerimizi, site yazarlarını kullanılan programlama dilini, vs… tüm meta (temel) bilgileri sitenizin “Head” bloğu içerisinde kullanabilirsiniz…

<p> p elementi, paragraf elementidir. p elementi içerisine yazmış olduğunuz her bir yazı, bir metinin paragrafı olarak kabul edilir.

<br /> br elementi bir alt satıra geçmek için kullanılır.

<hr /> hr elementi sayfaya soldan sağa doğru tahmini kaplayacak şekilde – eğer stil vermediyseniz – çizgi çekmeye yarar.

<b>Burası kalın harflerle yazılmıştır.</b> (Bold)

<u>Altı çizili olarak yazılmıştır</u> (Underline)

<i>Burası da yana yatık italik harflerle yazılmıştır.</i> (İtalic)

<center>Ortalamak için kullanılır.</center>

<strong>Yazı içerisinde bir kelimeyi bold yapmak için kullanılır.</strong>

<span>HTML icerisinde basi bos metin bırakmamak için kullanılır. </span>

<sup>Yazı içerisinde bir veya birden fazla karakteri yazının bir tık üstüne almak için kullanılır. Örnek olarak üslü sayılar gösterilebilir.</sup>

<sub>Yazı içerisinde bir veya birden fazla karakteri yazının bir tık altına almak için kullanılır. Örnek olarak Kimya elementleri.</sub>

<h1>VolkanYzc</h1> <h2>VolkanYzc</h2> <h3>VolkanYzc</h3>   <h4>VolkanYzc</h4> <h5>VolkanYzc</h5> <h6>VolkanYzc</h6>

<h > Yazının font büyüklüğünü ayarlar ve 1’den 6’ya doğru küçülmeye başlar.

<small>Yazı fontunu küçüktür.</small>

<big> Yazı fontunu büyütür. </big>

<cite>Alıntı için kullanılır(İtalik ile benzer) </cite>

<blockquote> Paragraf alıntısı olarak nitelendirebilir. Normal paragrafınıza göre daha içeride gözükür.</blockquote>

<pre>İçerisine yazıdğınız girdi çıktıları kullandığınız gibi gösterir.(Tab, space, enter)</pre>

&lt; Küçüktür işareti.(<)      &gt; Büyüktür işareti.(>)

<abbr title=”Bu Bir Açıklamadır.”>Yazının üzerinde gelince gösterilmesini istediğiniz açıklamayı title bölümüne yazarak gösterebilirsiniz.</abbr>

<q>İçerisine aldığınız yazı tırnak içerisinde gösterilir.</q>

HTML’de bir sayfadan başka bir sayfaya link verebilmek için kullandığımız temel <a> etiketidir.

Bu etiketin kendine ait temel iki özelliği bulunmaktadır:

href => İlgili linkin hangi sayfaya yönlendirme yapacağını bildirdiğimiz özniteliktir

target => İlgili linkin içinde bulunduğumuz pencere/sekme içinde mi yoksa yeni bir pencere/sekme içinde mi açılacağını bildirdiğimiz özniteliktir.

Örnek;

<a href="http://www.google.com" target="_self">Google'a İçinde Bulunduğum Sayfadan Gider</a>
<a href="http://www.google.com" target="_blank">Google'a Yeni Bir Sayfa/Sekmeden Gider</a>

Dilerseniz kendi projenizdeki bir html sayfasınıda aynı şekilde gösterebilirsiniz.

Örnek;

<a href="örnek.htm" target="_blank">örnek.htm</a>

Sayfa üzerinde bir resim göstermek için <img/> elementini kullanıyoruz.

Bu element temelde 3 ana özelliğiyle kullanılmaktadır.

src => Source kelimesini kısaltmasıdır. Bu görselin kaynağını belirttiğimiz özniteliktir.

alt => Alternative Text’in kısaltmasıdır. Eğer fotograf tarayıcı üzerinde gözükmez ise onun yerine ne yazsın sorusuna verilen cevaptır.

title => Fotograf başlığı olarak kullanılan özniteliktir. Mouse ile fotografınızın üstüne geldiğiniz zaman tooltip yardımıyla o fotograf ile ilgili açıklamaları içerir.Ancak bir çok tarayıcı artik, alt attribute’unu tıpkı bir title’mış gibi de kullanmaktadır.

Örnek;

<img src="images/c-sharp.png" alt="alternatif metin" title="fotograf basligi" /

Resminizin boyut değişikliği için örnek;

<img src="smiley.gif" alt="OrnekResim" width="42" height="42">

Resminiz üzerinde belirli noktalara geldiğinde bağlantı açmak için <map> </map> taglerini kullanarak haritamızı belirleyerek içerisinde <area> taglerini kullanarak nokta atışı yapabiliyoruz.

Örnek;

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="GezegenHaritasi">
<area shape="rect" coords="0,0,82,126" href="gunes.htm" alt="Gunes">
<area shape="circle" coords="90,58,3" href="merkur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Yukarıda ‘Head’ bölümünden bahsetmiştik şimdi biraz daha derinlemesine bakalım. Head bölümü içerisinde kullandığımız elementler <title> <meta /> <link /> <script> <base />’dir

Bu elementlerden kısaca bahsedelim.

<title>Belgenin başlığını tanımlar</title>

<meta Burada yazar içerik ile ilgili sitemiz hakkında bilgilendirme yapılabilir./>

<link Burada bir belge ya da harici kaynağı referans verebilirsiniz/>

<script>İstemci tarafından komut dosyalarınız tanımlanır. JavaScript tarafından görüntü işleme, form doğrulama ve içeriğin dinamikleştirilmesinde kullanılan değişiklikler. </script>

<base Farklı bir internet sitesinden çektiğimiz resim için kullanılır. Örnek olarak bir resmin url’sini base ile belittikten sonra. İmg olarak sitemiz içerisinde gösterebiliriz. Bir head içerisinde sadece bir tane <base > kullanabilirsiniz. />

Sitemize stil kazandırmak için CSS kullanıyoruz. 3 Çeşit CSS bulunmakta bunlar;

Inline – Html içerisinde kullandığınız CSS

<p style="color:blue;margin-left:20px;">Örnek Yazı.</p>
Internal – Head bloğunun içinde <style> elementi ile kullanılan CSS
<style type="text/css">
p {
font-family: Verdana;  Yazı Tipi
font-size: 9pt;  Yazı Boyutu
font-weight: bold;  Yazı Agirligi (Bold)
font-style:oblique; Yazı Tipi
background-color: Maroon;  Arkaplan Rengi
color: Orange;  Yazı Rengi
text-align: center;  Yazı Paragraf Hizası
}
</style>

External – Head bloklarının içerisine yazdığınız dışarıdan referans alınan CSS

<link rel="stylesheet" type="text/css" href="mystyle.css">

HTML sayfalarımızda tablolama işlemleri sık kullanılır. Sayfa üzerinde bir takim verilerin tablo formatında gösterilmesi için kullanılan element <table> elementidir.

Genellikle bir tablo yapısı tıpkı bir HTML sayfa gibi 3 bloktan oluşur. Bu bloklar <thead> (tablonun header bilgisi), <tbody> (tablonun gövde bilgisi – kayıtların listelendiği alan) ve <tfoot> dan (sayfanın footer alanı) oluşur.

Bu 3 elementinde bir alt (child) elementi <tr> dir (table row) elementidir. Tablo satırı olarak kullanılmaktadır. <tr> elementinin alt elementi olan <td> (table data”) elementi içerisinde ise veriler

listelenir. Satirin hücresi olarak düşünebilirsiniz.

<th> elementi ise kullanım bakımından <td> nin aynisidir ancak thead içerisinde kullanıldığında varsayılan olarak içerisindeki değerleri ortalar ve kalın harflerle yazar…

<caption>Buraya tablomuzun ismini yazıyoruz.</caption>

<colgroup>Bu elementin içerisinde <col/> elementlerini kullanarak tablo satırlarımıza ‘sütun içeriği hizalama, dikey olarak sutun içeriği hizalama ve genişlik özelliklerini verebiliriz. Özellik  vermeyi soldan sağa doğru yapmaktadır.</colgroup>

Örnek;

<colgroup span="3" style="background-color: Red">
<col style="background-color: Fuchsia" />
<col style="background-color: Lime" />
<col style="background-color: Fuchsia" />
</colgroup>

HTML ortamında listeleme yapabilmek için size iki tip liste seçeneği sunulmaktadır. Bunlardan bir tanesi <ul> (unordered list) bir tanesi ise <ol> (ordered list) ‘dir. <ul> olarak ifade ettiğimiz listeler sayı bazlı değil işaret imi bazlı çalışır. <ol> listeleri ise sayısal listelerdir… <ol> ya da <ul> farketmeksizin her liste tipinin içerisinde <li> (list item) adli elementler bulunur

Örnek;

<ol type="A">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
<ol>
<li>Bornova</li>
<li>Karşıyaka</li>
<li>Alsancak</li>
<li>Çeşme</li>
</ol>
</ol>

Buraya kadar bütün block (ör;<h1>, <p>, <ul>, <table>) ve inline (ör;<b>, <td>, <a>, <img>) elementlerini gördünüz. Bu elementlere stil vermek için <div> ve <span> elemenlerini kullanmamız gerekmektedir.

<span> elementi sizin bir yazı içerisinde değişiklik yapmanızı sağlar.

Örnek;

<p>Az önce buradan <span style="color:blue">mavi</span> bir araba geçti </p>

</div> elementi ise sizin bir bölümünüzü tanımlayarak stil verir.

Örnek;

<div style="color:#0000FF">
<h3>Bir div öğresi başlığı</h3>
<p>Bu hergangi bir div öğesi.</p>
</div>

HTML ile input elementlerimizi form elementi içinde kullanmamız gerekmektedir. Başlıca input elementleri; text, checkbox, password, radio, button,file, multiple… Eğer birden fazla Checkbox kullanacaksak ve bunlardan sadece birinin işaretlenmesi öngörülüyorsa ikisinin de name bilgisinin aynı olması gerekmektedir.

Örnek(“text”);

<input type="text" value="sercan" />

Örnek(“checkbox”);

ASP.NET<input type="checkbox" />
ADO.NET<input type="checkbox" />
SQL SERVER<input type="checkbox" checked="checked" />

Örnek(“password”);

<input type="password" />

Örnek(“radio”);

Bay<input type="radio" name="cinsiyet" />
Bayan<input type="radio" name="cinsiyet" />

Örnek

("button","reset","submit");

<input type="button" value="Tamam" /> Form load olmaz.

<input type="reset" value="Temizle" /> Form load olmaz.

<input type="submit" value="Gönder" /> Form load olur.

Örnek(“file”);

<input type="file" />

Örnek(multiple);

<select multiple="multiple" style="height: 200px">
<optgroup label="Marmara Bölgesi">
<option>İstanbul</option>
<option>Bursa</option>
<option>İzmit</option>
</optgroup>
<optgroup label="Akdeniz Bölgesi">
<option>Adana</option>
<option>Mersin</option>
<option>Antalya</option>
</optgroup>
</select>

Html’de iframe ile bir siteyi ya da bir sitenin bir kısmını gösterebilirsiniz. Örnek olarak google maps verilebilir. Frame’inizin içerisinde görünen biçiminin yükseklik, genişliğini,  çerçevesini ayarlayabilir ve bağlantı linkini verebilirsiniz.

Örnek;

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" ></iframe>

YouTube iframe boyutlandırma

Şimdi sizlere Youtube üzerinden aldığımız iframe kodunun yükseliğini ve genişliğini manuel olarak nasıl değiştirebiliriz bundan bahsedeceğim, öncelikle bilmeniz gereken Yotube’tan video için iframe alırken de bu işlemi yapabilirsiniz, Paylaş > Ekle yolunu kullanarak iframe alabiliyoruz, hemen altta bulunan video boyutu seçeneğinden daha önce hazırlanmış boyutlarda yada özel boyutlar girerek iframe kodlarını alabilirsiniz.

Eğer daha önce iframe alarak bunu sitenizde kullanmaya başladıysanız tekrar Yutube’a girmenize gerek yok, iframe kodunun bütününde geçen width=”xx” (genişlik) ve height=”xx” (yükseklik) değerlerini değiştirerek istedğiniz boyutlandırmayı yapabilirsiniz, örnek kodda genişlik 853 yükseklik ise 480 olarak görünmekte.

<iframe width="853" height="480" src="//www.youtube.com/embed/52W0KvBUGwI" frameborder="0" allowfullscreen></iframe>
  • 1
  • 2