CSS ile sekmelerle tasarım yapmak, web sitelerinin daha kullanıcı dostu ve etkileyici olmasını sağlar Sekmeler, sitenin farklı bölümleri arasında gezinmeyi kolaylaştırır ve sayfaları daha iyi organize eder Seyahat sitelerinde rotaları, e-ticaret sitelerinde ürün kategorilerini, bloglarda makaleleri sekmeli bir şekilde organize edebilirsiniz Sekmelerin HTML etiketleri olan div, ul ve a gibi etiketler kullanarak tasarlanabilir Sekmelerin boyutları, stilleri, arka plan rengi, fontu gibi özellikleri CSS kodları ile kişiselleştirilebilir Ayrıca etkileşimli bir kullanıcı deneyimi oluşturmak için JavaScript kodları da kullanılabilir Responsive tasarım için media queries ve Flexbox kullanabilirsiniz Sekmeler, web tasarımında sıkça kullanılan bir araç olduğu için HTML ve CSS bilgisine sahip olmanız web sitesi tasarımınızda bir avantaj sağlayacaktır

CSS'te sekmelerle tasarım yapmak, web sitelerinin daha etkileyici ve kullanıcı dostu olmasına olanak tanır. Sekmeler, sitenin farklı bölümleri arasında gezinmeyi kolaylaştırarak sayfaların daha iyi organize edilmesini sağlar ve kullanıcıların istedikleri alana hızlı bir şekilde erişmelerine yardımcı olur. Bu yazıda, CSS'te sekmelere yönelik bazı tasarım ipuçlarından bahsedeceğiz.

Bir sayfaya sekmeler eklemek için ilk olarak bir HTML sayfası oluşturmalısınız. Daha sonra CSS koduyla sekmeleri oluşturabilirsiniz. Sekmelerin eklenmesi için birçok farklı yöntem vardır. Ancak en popüler yöntemlerden biri, sekme etiketlerini kullanmaktır. İlgili HTML kodu, <div> etiketi içinde yer alan <ul> etiketi ile başlar. Her <li> öğesi, bir sekmeyi temsil eder. <a> etiketi, sekmeler arasında gezinmek için kullanılabilir. Bu sekmeler, CSS stil özellikleri kullanılarak özelleştirilebilir.

HTML kodunu ve sekmeleri oluşturduktan sonra, sekmelerin stil özellikleri ayarlanabilir. Örneğin, sekmelerin arka plan rengi, fontu ve ön plan rengi gibi özellikleri ayarlanabilir. Ayrıca sekmelerin boyutu ve stili de özelleştirilebilir. CSS kullanarak sekmelerin stillerini ayarlamak, tasarımınızı kişiselleştirmenize olanak tanır.

Birçok durumda, sekmelerin boyutu, sayfanın geri kalanına göre daha küçük olmalıdır. Sekmeler, sayfa içindeki diğer öğelerle uyumlu görünmek için yeniden boyutlandırılabilir. CSS, sekmelerin boyutuyla ilgili özelliklerin kolayca ayarlanabilmesine olanak tanır. Bu sayede, sekmelerin sayfanın geri kalanına göre daha profesyonel görünmesi sağlanabilir.

Sekmeler sadece gezinme için kullanılmakla kalmaz, aynı zamanda kullanıcılarla etkileşim kurmak için de kullanılabilirler. Örneğin, bir sekme tıklanarak içerik değiştirilebilir veya görüntülenebilir. Bunu yapmak için, JavaScript koduyla etkileşimli sekmeler oluşturabilirsiniz. Radio butonlar kullanarak da etkileşimli sekmeler oluşturabilirsiniz.

Sekmeler sadece yatay olarak değil, dikey olarak da kullanılabilirler. Dikey sekme oluşturmak için HTML kodunda bazı değişiklikler yapılması gerekmektedir. Dikey sekmelerle, kullanıcılar sayfaya daha fazla içerik ekleyebilirler ve bu içeriklere kolay erişebilirler.

Responsive tasarım, mobil cihazlar gibi farklı ekran boyutlarında doğru görüntüyü sağlamayı amaçlar. Sekmelerin sayfada doğru şekilde olması, bir sayfanın kullanıcılar tarafından düzgün bir şekilde görüntülenmesini sağlamak için çok önemlidir. Sekmelerin responsive tasarımı, sayfanızın farklı boyutlarda cihazlarda mükemmel şekilde görüntülenmesini sağlar.

Media queries, farklı ekran boyutlarına uygun stili seçmek için kullanılabilir. Media queries ile mobil cihazlar ve desktop bilgisayarlarda farklı sekmeler kullanabilirsiniz.

Flexbox, responsive tasarım için özellikle kullanışlıdır. Flexbox, sekmelerin otomatik olarak yeniden boyutlandırılmasına olanak tanır. Bu sayede, sekmeler boyutlandırılırken orantılı olarak korunabilirler. Böylece sayfa, farklı cihazlarda kusursuz şekilde görüntülenebilir.

Sekmeler, web sitelerinde popüler bir tasarım ögesidir. Birçok farklı sekmeli tasarım örneği mevcuttur. Örneğin, galeriler, portföyler veya ürün listeleri gibi birçok farklı tasarımda sekmeler kullanılabilir. Bu tasarımların nasıl oluşturulacağına dair ipuçları, sekmelerin tasarımını ve uygulamalarını anlamak isteyenler için çok değerli olabilir.

Sekmelerin Eklenmesi

Sekmeler web tasarımında sıkça kullanılan işlevsel araçlardır. Özellikle sayfaların düzenli gösterilmesi ve kullanıcıların aradıklarına hızlı bir şekilde erişebilmeleri için oldukça önemlidirler. Peki, sekmelerin CSS kullanılarak nasıl eklenileceği hakkında bilgi sahibi misiniz? Bu yazımızda size sekme eklemeyi öğreteceğiz!

İlk olarak, sekmelerin eklenmesinde kullanılan temel yapı HTML'de oluşturulmaktadır. Tablo (

) yapısına benzer bir yapı olan
etiketi kullanılarak sekmeler hazırlanır. Sonrasında ise CSS ile bu yapılar istenilen şekle getirilir.

Sekmelerin HTML kodlamasında her sekmeye ait bir div etiketi tanımlanır. Bu etiketlere öncelikle birer class ismi verilir ve CSS içerisinde bu class isimleri kullanılarak sekmelerin görünümleri düzenlenir. Sekme içerikleri ise div etiketi altında yer alan span etiketi içerisinde yazılır.

Örneğin, 3 adet sekmeli bir yapı oluşturmak için öncelikle HTML kodlamasında 3 adet div etiketi tanımlanır ve bu etiketlere class isimleri verilir. Daha sonra, sekmelerin içerikleri span etiketi içerisine yazılır. CSS içerisinde ise her bir sekmeye ait class isimleri kullanılarak arka plan rengi, yazı tipi, boyut gibi özellikler düzenlenir. Bu şekilde, sekme yapısı oluşturulur.

Sekmelerin eklenmesi adım adım yapılacak olursa, öncelikle HTML kodlamasında sayfa içerisinde her bir sekmeye ait div etiketleri tanımlanır. Daha sonra, her bir div etiketine class isimleri verilir ve sekmelerin içerikleri span etiketi içerisine yazılır. CSS içerisinde ise her sekmeye ait class ismi kullanılarak sekmelerin boyutları, arka plan rengi, fontu vb. özellikleri düzenlenir.

Sonuç olarak, sekmelerin eklenmesi oldukça kolaydır ve herhangi bir web sayfasının düzenli bir şekilde gösterilmesi için önemlidir. Önemli olan nokta ise HTML kodlaması ve CSS stil tanımlamalarının doğru bir şekilde yapılmasıdır. Bu şekilde web sayfaları kullanıcılar tarafından daha rahat bir şekilde gezilebilir ve aradıkları bilgileri daha hızlı bir şekilde bulabilirler.




Sekme Stillerinin Ayarlanması

Sekmelerin tasarımı sadece sekmelerin eklenmesi ile sınırlı değildir. Sekmelerin arka plan rengi, fontu ve aur gibi stilleri de ayarlanmalıdır. Bu sayede sekmeler, diğer tasarım öğeleriyle uyumlu hale getirilebilir.

Öncelikle, sekmelerin arka plan rengi, fontu ve aur gibi stil öğeleri CSS kodları kullanılarak ayarlanabilir. Sekme arka plan rengi ayarlamak için background-color özelliği kullanılabilir. Benzer şekilde, font ve renk ayarlamaları için font-size, color ve text-decoration özellikleri kullanılabilir.

Sekmelerin arka plan rengi, fontu ve aur gibi stilleri ayrıca CSS sınıfları kullanılarak da ayarlanabilir. Bu sayede, farklı sekmelerin farklı stillere sahip olabileceği bir tasarım oluşturulabilir. CSS sınıflarını kullanarak sekmelerin stillerini ayarlamak son derece kolaydır ve tasarımın esnekliğini arttırır.

Sekme stillerini ayarlarken, kullanılacak özelliklerin sayısı tasarımın karmaşıklığına göre değişebilir. Özellikler arasındaki denge, tasarımın okunaklılığı ve estetiği açısından son derece önemlidir.

Sekmelerin tasarımı, web sitenizin görünümünü büyük ölçüde etkiler. Bu nedenle, sekmelerin stillerinin doğru şekilde ayarlanması, web sitenizin başarısı için son derece önemlidir.

Sekme Boyutları

Sekmelerin boyutu tasarımda önemli bir rol oynar. İyi bir tasarımda sekmelerin boyutu diğer öğelerle uyumlu olmalıdır. CSS kullanarak sekmelerin boyutu kolayca ayarlanabilir.

Bir sekmenin boyutunu ayarlamak için, öncelikle sekmelerin ana öğesinin genişliğini belirleyin. Daha sonra, sekmelerin içindeki metni veya resmi içeren öğenin genişliğini ayarlayın. Bu, sekmenin genişliğinin içindeki öğenin genişliğiyle aynı olacağı anlamına gelir.

Bununla birlikte, mobil cihazlar ve tabletler gibi farklı cihazlarda görüntülenen tasarımlarda, sekmelerin boyutları değişebilir. Bu durumda, medya sorguları kullanarak sekmelerin boyutlarını ayarlamak önemlidir. Bu, sekmelerin görünümünü farklı cihazlara uyacak şekilde dinamik olarak değiştirebilir.

Aşağıdaki tablo, farklı boyutlarda sekmelerin nasıl görüneceğini göstermektedir:

Sekme Boyutu	Görünümü
25%
33%
50%
75%

Yukarıdaki tablo, farklı boyutlarda sekmelerin nasıl görüneceğine dair genel bir fikir vermektedir. Ancak, her tasarımda sekmelerin boyutu farklı olabilir ve bu nedenle boyutların deneme yanılma yöntemiyle belirlenmesi gerekebilir.

Etkileşimli Sekmeler Oluşturma

Etkileşimli sekmeler, web sitelerinde kullanılan sıkça karşılaşılan bir özelliktir ve kullanıcıların birçok sayfayı gezinmelerine gerek kalmadan tek sayfa üzerinde istedikleri içeriğe erişmelerini sağlar. Bir sekmenin içeriğinin kullanıcının isteğine göre görüntülenmesi, zaman kazandırmasının yanı sıra, sayfanın daha düzenli ve profesyonel durmasını da sağlar.

Sekmelerle etkileşim kurmanın birkaç farklı yolu vardır. Bu yöntemler arasında JavaScript kullanarak veya radio butonlar kullanarak etkileşimli sekmeler oluşturmak yer alır.

JavaScript kullanarak etkileşimli sekmeler oluşturmak, sayfada sekmeler arasında geçiş yapmak için bir geçiş etkisi oluşturur ve kullanıcının sekme içeriğini göstermesine olanak tanır. Bu yöntem, sekme içeriklerinin boyut ve tarz açısından farklı olması durumunda iyi bir seçenektir.

Alternatif olarak, radio butonların kullanılması ile de etkileşimli sekmeler oluşturulabilir. Bu sekmeler, sadece tek bir seçenek sunmak yerine, birden fazla seçenek sunar ve bu seçeneklerden birine tıklayarak sekme içeriğine erişim sağlanır.

Sekmelerle etkileşim kurarken, kullanıcı deneyimini iyileştirmek için sekme boyutlarına da dikkat edilmelidir. Sekmelerin boyutu içeriğe uygun olmalı ve kullanıcının kolayca seçim yapmasını sağlamalıdır.

Özetle, etkileşimli sekmeler, web sitelerinde gezinmeyi kolaylaştıran ve siteye profesyonel bir görünüm kazandıran önemli bir özelliktir. Bu sekmelerin oluşturulması için farklı yöntemler mevcuttur, ancak kullanıcı deneyimini ön planda tutarak tasarım yapılmalıdır.

JavaScript Kullanarak

Sayfada sekmelerin nasıl görüneceğini ve kullanıcının sekme arasında geçiş yaparken nasıl bir etkileşim yapılabileceğini özelleştirmek için CSS'te JavaScript kullanılabilir. Bu yöntem mobil cihazlarda da iyi sonuçlar verir.

Sekmelerin görüntülenmesi ve birbirleri arasında geçiş yapmak için JavaScript kullanabilirsiniz. Bunun için, her sekmeye bir id vermeniz gerekir. JavaScript, sekmeler arasındaki etkileşimi sağlayacak bir fonksiyon kullanır. Bu fonksiyona, hangi sekmelerin görüntüleneceğine dair bilgi vererek sekmeler arasında geçiş yapılabilir.

Aşağıda, HTML ve CSS kodlarına eklenip kullanabileceğiniz basit bir örnek vardır:

<!-- HTML --><div class="tabs">  <ul class="tab-nav">    <li><a href="#" onclick="openTab(event, 'tab1')">Tab 1</a></li>    <li><a href="#" onclick="openTab(event, 'tab2')">Tab 2</a></li>    <li><a href="#" onclick="openTab(event, 'tab3')">Tab 3</a></li>  </ul>    <div class="tab-content">    <div id="tab1">      <h3>Tab 1 Content</h3>      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>    </div>        <div id="tab2">      <h3>Tab 2 Content</h3>      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>    </div>        <div id="tab3">      <h3>Tab 3 Content</h3>      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    </div>  </div></div><!-- CSS -->.tab-nav {  margin: 0;  padding: 0;  list-style: none;}.tab-nav li {  display: inline-block;}.tab-nav li a {  display: block;  padding: 10px;  background-color: #fff;}.tab-nav li a.active {  background-color: #ccc;}.tab-content div {  display: none;}.tab-content div.active {  display: block;}

Yukarıdaki kodlar, sekme arasında geçiş yapmak için bir fonksiyon olan openTab()'ı çağıracaktır. Bu fonksiyon, hangi sekmelerin görüntüleneceğine dair bilgi verecektir. Bu kodlar, bir tab menüsü oluşturmak ve sekmeler arasında geçiş yapmak için gereken temel öğeleri içerir. Tab menüsü, ul etiketi tarafından oluşturulur ve sekmeler, li ve a etiketleri kullanılarak oluşturulur. Tab içeriği, div etiketi kullanılarak oluşturulur.

Bu yöntem, sayfanın yeniden yüklenmesi gerektiğinde sekmeler arasında hızlı ve sorunsuz bir geçiş sağlar ve kullanıcı arayüzlerini zenginleştirir.

Radio Buton Kullanarak

Radio butonlar, kullanarak etkileşimli bir sekme tasarımı oluşturmak oldukça kolaydır. Bu yöntem, CSS kullanımı kadar basit ve pratiktir. İlk adım olarak, kullanılacak olan HTML kodu ve CSS stil dosyası hazırlanmalıdır. Daha sonra, HTML koduna radio butonlar eklenir ve her bir buton, ayrı bir içerikle ilişkilendirilir.

Bu adımdan sonra, CSS kullanarak radio butonlara ve sekme içeriklerine stil verilir. Böylece, sekmelerin arka plan rengi, fontu ve aur düzenlenerek istenilen tasarım oluşturulabilir. İlgili CSS kodları hazırlandıktan sonra, etkileşimli sekme tasarımı tamamlanmış olur.

Bu yöntemle hazırlanan etkileşimli sekmeler hem kolay hem de kullanıcı dostudur. Kullanıcılar, sekmeler arasında kolaylıkla geçiş yapabilirler. Ayrıca, bu yöntemle oluşturulan sekmeler, tarayıcı ve cihazlar arasında uyumlu ve düzenli bir şekilde görüntülenebilir.

Radio buton kullanarak etkileşimli sekme tasarımı yapmak isteyenler için örneğin kodları şu şekildedir:

Bu kodlarda, her bir radio butonunun bir ID değeri vardır. Ayrıca, her bir sekmenin de bir class değeri bulunur. Bu şekilde, CSS dosyasında her radio buton ve sekme içeriği için farklı stil atamaları yapılabilir.

Radio butonları kullanarak etkileşimli sekme tasarımı oluşturmak oldukça basittir. Bu yöntem, herhangi bir website tasarımında kullanılabilecek pratik ve kolay bir tekniktir.

Dikey Sekmeler

Dikey sekme yapmak, yatay sekmelerle aynı mantıkta çalışır. Ancak, sekmelerin düzeni dikey olarak belirlenir ve her bir sekmeye geçiş yine aynı şekilde yapılır. Dikey sekmelerle tasarım yaparken, ekranın daraltıldığında veya genişletildiğinde sekmelerin tasarımının da buna uyumlu olması gerekir.

Bir dikey sekmeli tasarım yaparken, sıklıkla kullanılan yöntem, sekmelerin yan yana değil, üst üste yerleştirilmesidir. Bu sayede, kullanıcının sekmeler arasında kaydırmasına gerek kalmadan tüm sekmelere erişim sağlanabilir.

Dikey sekmeler oluşturmak için, HTML kodu içinde bir div kullanılarak sekmelerin ana kutusu oluşturulabilir. Bu div içinde, sekmelerin farklı bölümleri için başka div'ler de oluşturulabilir. Her bir div, sekmelerin arka plan rengi, fontu ve boyutunu belirleyen CSS stilleriyle özelleştirilebilir.

        <div class="sekmeler">          <div class="sekmeler-baslik">            <a class="aktif" href="#">Sekme 1</a>            <a href="#">Sekme 2</a>            <a href="#">Sekme 3</a>          </div>          <div class="sekmeler-icerik">            <div class="sekmeler-icerik1">              <p>Sekme 1 içeriği</p>            </div>            <div class="sekmeler-icerik2">              <p>Sekme 2 içeriği</p>            </div>            <div class="sekmeler-icerik3">              <p>Sekme 3 içeriği</p>            </div>          </div>        </div>      

        .sekmeler-baslik {          display: flex;          flex-direction: column;        }                .sekmeler-baslik a {          margin-bottom: 10px;        }                .sekmeler-icerik {          border: 1px solid #ccc;          padding: 10px;        }                .sekmeler-icerik div {          display: none;        }                .sekmeler-icerik1,        .sekmeler-baslik a.aktif + .sekmeler-icerik .sekmeler-icerik1,        .sekmeler-baslik a:nth-child(1):hover + .sekmeler-icerik .sekmeler-icerik1 {          display: block;        }                .sekmeler-icerik2,        .sekmeler-baslik a.aktif + .sekmeler-icerik .sekmeler-icerik2,        .sekmeler-baslik a:nth-child(2):hover + .sekmeler-icerik .sekmeler-icerik2 {          display: block;        }                .sekmeler-icerik3,        .sekmeler-baslik a.aktif + .sekmeler-icerik .sekmeler-icerik3,        .sekmeler-baslik a:nth-child(3):hover + .sekmeler-icerik .sekmeler-icerik3 {          display: block;        }      

Yukarıdaki örnekte, sekmeler için bir .sekmeler-baslik div'i ve sekmelerin içeriği için bir .sekmeler-icerik div'i oluşturuldu. CSS kodunda, sekmelerin görüntülenip gizlenmesi için display: none ve display: block özellikleri kullanıldı.

Dikey sekmelerle yapılan tasarımlar, yatay sekmelere göre daha az kullanılır. Ancak uygun durumlarda, dikey sekmelerin kullanımı, tasarımın daha şık ve modern görünmesine yardımcı olabilir.

Responsive Tasarım ve Sekmeler

Web siteleri artık sadece masaüstü cihazlarda değil, mobil cihazlarda da görüntüleniyor. Bu nedenle, tasarımların responsive yani duyarlı olması gerekiyor. Sekmeler de bu konuda önemli bir rol oynar. Sekmelerle duyarlı tasarım yapmak mümkündür.

Bunun için, media queries kullanarak sekmelerin boyutu ve stilini değiştirebilirsiniz. Media queries, ekran boyutuna göre CSS kodlarının değiştirilmesini sağlar. Buna göre, daha küçük ekranlarda sekmelerin boyutu ve fontu gibi özellikler değiştirilebilir.

Bir diğer seçenek ise Flexbox kullanmaktır. Flexbox ile sekmelerin gruplarına kolayca genişlik ve yükseklik belirlenebilir ve mobil görünüme uygun hale getirilebilir.

İyi bir responsive tasarım için, sekmelerin kaydırılabilir olması da önemlidir. Bu sebeple, mümkün olan en az sekmeye sahip olmalısınız ve sekmelerin boyutu küçüldükçe kaydırma özelliği de açık kalacak şekilde tasarlanmalıdır. Ayrıca, sekmelerin altındaki içeriklerin de açılması için hamburger menü gibi görsel bir araç kullanılabilir.

Bu ipuçlarını kullanarak, sekmelerin responsive bir şekilde tasarlanması mümkündür ve web sitelerin daha iyi bir kullanıcı deneyimi sunması sağlanabilir.

Media Queries Kullanılarak

CSS sekme tasarımları nasıl duyarlı bir hale getirilir? İşte media queries ile bunu nasıl yapabileceğin hakkında bilgi.

Media Queries, CSS kodunun belirli bir ekran boyutunda çalışmasını sağlayabilen güçlü bir araçtır. Bu araç, mobil cihazlar, tabletler ve masaüstü gibi farklı ekran boyutlarında görüntülemeyi optimize edebilir. İyi bir sekme tasarımı, media queries kullanıldığında muhteşem bir kullanıcı deneyimi sunabilir.

Media queires ile sekmelerin görünümünü optimize etmek için, ekran boyutuna göre CSS kodunun yeniden düzenlenmesi gerekir. Örneğin, 600 pikselden küçük bir genişliğe sahip bir ekrana sahip kullanıcılar için sekmelerin yatay yerleşim yerine, dikey geçiş yapması daha uygun olabilir. Bu yüzden, küçük ekran boyutları için birden fazla farklı media query kullanarak CSS kodunu optimize edebilirsiniz.

Bir örnek olarak, aşağıdaki kod bloğu, 768 pikselden daha küçük cihazlar için optimize edilmiştir. Bu kod bloğu, farklı CSS kodlarını kullanarak kullanıcıların daha iyi bir deneyim elde etmesine yardımcı olur:

Bu örnekte, media queries kullanarak CSS kodunu belirli ekran boyutlarına göre uyarlamanın nasıl yapılacağına dair bir örnek sunulmuştur. Ancak, farklı ekran boyutlarına göre özelleştirilmiş sekme tasarımları yapmak için başka teknikler ve CSS özelleştirmeleri de kullanılabilir.

Flexbox Kullanılarak

Flexbox, CSS'te sekmelerin duyarlı bir şekilde tasarlanmasına olanak tanıyan bir yöntemdir. Flexbox, sekmelerin içeriğine göre esnek ve dinamik bir şekilde boyutlandırılmasını sağlar. Bu sayede, sekmelerin boyutları ekranın büyüklüğüne ve içeriklerine göre otomatik olarak düzenlenir.

Flexbox kullanırken, sekmelerin ana bileşeni olan

etiketine 'display: flex' stil özelliği eklemelisiniz. Ardından, sekmelerin flex özelliklerini ayarlamak için 'flex-grow', 'flex-shrink', ve 'flex-basis' özelliklerini kullanabilirsiniz.

Bir diğer önemli nokta ise, sekmelerin içeriklerinin birbirinden farklı uzunluklarda olması durumunda, 'min-width' özelliğinin kullanılmasıdır. Bu sayede, sekmelerin içerikleri ekranın küçük boyutlu olduğu durumlarda da düzenli bir şekilde görüntülenir.

Flexbox kullanarak sekmelerin duyarlı bir şekilde tasarlanabilmesi, web sayfanızın uyumlu bir şekilde görüntülenmesi için son derece önemlidir. Unutmayın, web tasarımda günümüzde mobil uyumluluk ve kullanıcı deneyimi oldukça önem arz ediyor.




Sekmelerle Örnek Tasarımlar

CSS'te sekmelerin kullanımı sayesinde sayfalarımızı daha kullanışlı ve estetik hale getirebiliriz. Sekmeler, sayfada yer kaplamadan birden fazla içeriğin gösterilmesine yardımcı olur. Farklı stiller ve boyutlarla sekmeler yaparak her tasarıma uyumlu hale getirebilirsiniz. Peki, sekmelerle yapabileceğiniz tasarımlar nelerdir? Örneklerle birlikte inceleyelim.

Klasik tasarım seçeneği, sekmelerin bir dizisine sahip olur. Her sekmeler içeriklerin farklı bir kısmını temsil eder. Kullanıcılar her sekmeye tıkladığında, ilgili sekmeler için ayrılmış olan içerikler gösterilir.

HTML Kodu	CSS Kodu
<div class="tabs"> <ul> <li><a href="#pane1">Tab 1</a></li> <li><a href="#pane2">Tab 2</a></li> <li><a href="#pane3">Tab 3</a></li> </ul> <div id="pane1">Tab 1 content</div> <div id="pane2">Tab 2 content</div> <div id="pane3">Tab 3 content</div></div>	.tabs ul { list-style-type: none; margin: 0; padding: 0;}.tabs li { float: left; margin: 0 10px -1px 0; position: relative; left: 1px; line-height: 1.3em; background: #fff; border: 1px solid #ccc; border-bottom: 0; padding: 5px 10px;}.tabs a { color: #000; text-decoration: none;}.tabs div { border: 1px solid #ccc; padding: 15px; clear: both;}

Duyarlı tasarım seçeneği, sekmelerin bellekte yer kaplamadan her boyutta görüntülenebilmesine olanak tanır.

HTML Kodu	CSS Kodu
<div class="accordion"> <div class="tab">Tab 1 Content</div> <div class="tab">Tab 2 Content</div> <div class="tab">Tab 3 Content</div></div>	.accordion { border: none; margin: 0 0 30px 0; overflow: hidden; background-color: #f1f1f1;}.tabs { background: #fff; margin: -1px 0 0 0; position: relative; z-index: 100; display: flex; justify-content: space-between; overflow-x: auto; white-space: nowrap;}.tabs::-webkit-scrollbar { width: 0; height: 0; background-color: transparent;}.tab { display: none; padding: 10px; border-radius: 0;}

Yukarıdaki örnekler gibi farklı tasarımları birkaç CSS öğesi kullanarak kolayca yapabilirsiniz. Siz de sekmelerin birden fazla uygun tasarımını kullanarak web sitenizi kullanıcı dostu hale getirebilirsiniz.