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-widthkullanın. Birimlerpx,em,%, vb. olarak belirtilir. -
Kenarlık türünü
border-styleile 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)
- Stil Değerleri:
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-roundedsı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-roundedsı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-cornerssı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-radiusdeğ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-radiusgibi 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 / 25pxbelirtmek, yatay yarıçapı 50 piksel ve dikey yarıçapı 25 piksel yapar.
- Örneğin,
Ö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.outlineelementin dışında çizildiği içinborderın dışında görünür.borderelementin içinde çizildiği için boyutunu ve yerleşimini etkileyebilir.
Bu örnekte, outline özelliği şöyle ayarlanmıştır:.
outline-solidsınıfı, 2px kalınlığında düz kırmızı bir kontur ayarlar.outline-dashedsınıfı, 3px mavi kesik çizgili bir kontur ayarlar.outline-doublesınıfı, 4px kalınlığında yeşil çift çizgili bir kontur ayarlar.outline-offsetsı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,thickgibi belirli değerler veyapx,emgibi birimlerle belirleyebilirsiniz.
outline-style
outline-style, konturun stilini belirler.solid,dotted,dashed,double,groove,ridge,inset,outset,nonegibi 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,emgibi 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-shadowsınıfında, elemanın sağ alt kısmında bulanık siyah bir gölge görüntülenir. -
box-shadow-inset-shadowsı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-shadowsı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}insetkullanarak 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.
insetile 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.