Articles
CSS'e Giriş
Kutu modeli dekorasyonuyla ilgili CSS özellikleri

Kutu modeli dekorasyonuyla ilgili CSS özellikleri

Bu makale, kutu modeli dekorasyonuyla ilgili CSS özelliklerini açıklar.

Kenarlıklar ve gölgeler gibi özellikleri nasıl yazacağınızı öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Dekorasyon

border Özelliği 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

border özelliği, bir öğenin çerçevesini ayarlamak için CSS'de kullanılır. border, genişlik, stil ve renk olmak üzere üç ögeden oluşur ve bu ögeler öğenin çerçevesini belirlemek için birleştirilir.

borderın Temel Yapısı 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • Kenarlığın kalınlığını belirtmek için border-width kullanın. Birimler px, em, %, vb. olarak belirtilir.

  • Kenarlık türünü border-style ile belirtin. Aşağıdaki değerleri belirtebilirsiniz.

    • Stil Değerleri:
      • none (kenarlık yok)
      • solid (düz çizgi)
      • dotted (noktalı çizgi)
      • dashed (kesikli çizgi)
      • double (çift çizgi)
      • groove (oymalı çizgi)
      • ridge (kabartmalı çizgi)
      • inset (içe gölgeli çizgi)
      • outset (dışa gölgeli çizgi)

Kenarlığın rengini border-color ile belirtin. Renk, renk adları, rgb(), rgba(), hex vb. kullanılarak belirtilebilir.

Her Bir Kenar için Bireysel Ayarlar 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Ayrıca her bir taraf için farklı stiller belirleyebilirsiniz.

Genişlik, Stil ve Renk için Bireysel Ayarlar 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

border-width, border-style ve border-color kullanarak her bir özelliği ayrı ayrı belirtebilirsiniz.

border-radius ile Birleştirme 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

border-radius özelliğini kullanarak köşeleri yuvarlatabilirsiniz.

border-radius Özelliği 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

border-radius özelliği, bir öğenin köşelerini yuvarlatmak için kullanılır. Bir HTML öğesinin dört köşesini düzgünce kavisli hale getirerek, kare veya dikdörtgenleri yuvarlatılmış bir tasarıma dönüştürebilirsiniz.

Açıklama:

  • border-radius-all-rounded sınıfı, tüm köşeleri 20 piksel ile yuvarlak hale getirir ve düzgün yuvarlanmış bir kutu oluşturur.
  • border-radius-top-left-rounded sınıfı yalnızca sol üst köşeyi 20 piksel ile yuvarlak hale getirir, diğer köşeler kare olarak kalır.
  • border-radius-ellipse-corners sınıfı elips şeklinde köşeler oluşturur ve yatay olarak genişletilmiş yuvarlak bir kutu sağlar.

border-radius özelliğinin biçimi 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • border-radius değerleri genellikle piksel veya yüzde olarak belirtilir. Ayrıca, 1 ila 4 arasında değer belirleyebilirsiniz.
    • Tek bir değer belirtmek, tüm köşeleri eşit şekilde yuvarlatır.
    • İki değer belirtmek, ilk değeri sol üst ve sağ alt köşelere, ikinci değeri sağ üst ve sol alt köşelere uygular.
    • Dört değer belirterek, her bir köşe için farklı bir yarıçap belirtebilirsiniz. Değerler, sol üst köşeden saat yönünde uygulanır.
  • Ayrıca border-top-left-radius gibi bireysel olarak da belirtebilirsiniz.
1border-radius: 50px / 25px;
  • border-radius özelliği, köşeleri elips yapmak için dikey ve yatay yarıçapları ayrı ayrı belirtebilir. Bu durumda, / işareti ile ayırın.
    • Örneğin, 50px / 25px belirtmek, yatay yarıçapı 50 piksel ve dikey yarıçapı 25 piksel yapar.

Özet

  • border-radius, bir öğenin köşelerini yuvarlatmak için kullanılan bir özelliktir.
  • Köşelerin yuvarlaklığını piksel veya yüzde cinsinden belirtebilir, tüm köşelere, belirli köşelere uygulayabilir ya da onları elips hale getirebilirsiniz.
  • Esnek tasarımlar ve kullanıcı arayüzlerini özelleştirmek için faydalıdır.

outline Özelliği 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

outline özelliği, bir elementin çevresine çizilen çizgiyi ayarlamak için kullanılan bir CSS özelliğidir.

outline, border ile benzerdir ancak şu noktalarda farklılık gösterir:.

  • outline, elementin kutu modelini etkilemez, bu yüzden elementin yerleşimini etkilemez.
  • outline elementin dışında çizildiği için borderın dışında görünür.
  • border elementin içinde çizildiği için boyutunu ve yerleşimini etkileyebilir.

Bu örnekte, outline özelliği şöyle ayarlanmıştır:.

  • outline-solid sınıfı, 2px kalınlığında düz kırmızı bir kontur ayarlar.
  • outline-dashed sınıfı, 3px mavi kesik çizgili bir kontur ayarlar.
  • outline-double sınıfı, 4px kalınlığında yeşil çift çizgili bir kontur ayarlar.
  • outline-offset sınıfı, kontur ile element arasında 10px mesafe ayarlar.

Temel Sözdizimi 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width, konturun kalınlığını belirler.
  • thin, medium, thick gibi belirli değerler veya px, em gibi birimlerle belirleyebilirsiniz.
outline-style
  • outline-style, konturun stilini belirler.
  • solid, dotted, dashed, double, groove, ridge, inset, outset, none gibi stiller belirleyebilirsiniz.
outline-color
  • outline-color, konturun rengini belirler.
  • İsimler, HEX, RGB vb. kullanarak herhangi bir rengi belirleyebilirsiniz.
outline-offset
  • outline-offset, kontur ile element arasındaki mesafeyi belirler.
  • px, em gibi birimlerle kesin değerler belirleyebilirsiniz.

box-shadow Özelliği 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

box-shadow özelliği, elementlere gölgeler eklemek için kullanılır. Bu özellik kullanılarak, elementlerin çevresinde gölgeler oluşturulabilir ve bir boyut ve derinlik hissi ifade edilebilir.

Açıklama:

  • box-shadow-basic-shadow sınıfında, elemanın sağ alt kısmında bulanık siyah bir gölge görüntülenir.

  • box-shadow-inset-shadow sınıfında, elemanın içinde bulanık bir gölge görüntülenir. Gölgenin içe doğru girmesiyle, çökük bir tasarım elde edebilirsiniz.

  • box-shadow-multiple-shadow sınıfında, siyah ve kırmızı olmak üzere iki gölge elemanın üzerine uygulanır. Farklı konumlarda görüntülendikleri için üç boyutlu bir etki elde edilir.

box-shadow Özelliği Formatı 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
Her bir değerin anlamı

Birinci yatay ofset, elemanın solundan gölgenin konumunu belirleyen yatay ofset değeridir. Pozitif bir değer belirtilirse gölge sağa, negatif bir değer belirtilirse sola yerleşir.

İkinci dikey ofset, elemanın üstünden gölgenin konumunu belirleyen dikey ofset değeridir. Pozitif bir değer belirtilirse gölge aşağıya, negatif bir değer belirtilirse yukarıya yerleşir.

Üçüncü bulanıklık yarıçapı, gölgenin bulanıklığını belirleyen bulanıklık miktarı değeridir. Değer ne kadar büyükse, gölge o kadar yayılır ve daha bulanık bir gölge oluşur. Pozitif bir değer belirtilirse gölge aşağıya, negatif bir değer belirtilirse yukarıya yerleşir. Bu isteğe bağlıdır ve varsayılan olarak 0'dır, yani gölgede bulanıklık yoktur.

Dördüncü yayılma yarıçapı, gölgenin ne kadar yayılacağını belirleyen yayılma aralığı değeridir. Pozitif bir değer belirtilirse gölge büyür, negatif bir değer belirtilirse küçülür. Bu değer de isteğe bağlıdır.

Beşinci renk, gölgenin rengini belirleyen renk değeridir. Renkler, CSS'te kullanılabilen renk adları, RGB, HEX, HSL ve diğer renk modelleri kullanılarak ayarlanabilir. Atlanırsa, elemanın varsayılan metin rengi (color özelliğinin değeri) uygulanır.

Ayrıca önce inset anahtar kelimesini belirtebilirsiniz. Inset anahtar kelimesinin belirtilmesi, gölgenin dış yerine elemanın içinde çizilmesini sağlar. Virgüllerle ayrılmış birden fazla gölge ayarlamak da mümkündür.

box-shadow Örneği

Temel gölge örneği 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • Yatay ofset 10px'dir, bu da sağa doğru 10 piksel bir gölge oluşturur.
  • Dikey ofset 10px'dir, bu da aşağıya doğru 10 piksel bir gölge oluşturur.
  • Bulanıklık yarıçapı 5px'dir, bu da 5 piksel bulanıklığa sahip bir gölge oluşturur.
  • Renk rgba(0, 0, 0, 0.5)'dir, bu da yarı saydam siyah bir gölge oluşturur.
İç gölge örneği 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • inset kullanarak gölge elemanın iç kısmına çizilir.
Birden fazla gölge örneği 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • Virgülle ayrılmış birden fazla gölge de ekleyebilirsiniz. Bu örnekte iki gölge uygulanmıştır: bir siyah gölge ve bir kırmızı gölge.

Özet

  • box-shadow, elementlere derinlik hissi katmak için gölgeler ekleyen bir özelliktir.
  • Yatay ve dikey ofsetler, bulanıklık, yayılma yarıçapı ve renk birleştirilerek çeşitli efektler elde edilebilir.
  • inset ile gölgeleri iç kısmına çizebilir ve aynı anda birden fazla gölge ekleyebilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Arka plan ile ilgili CSS özellikleriListe ile ilgili CSS özellikleri