Float va Soyalar (shadows)

DarslarWeb dasturlash

Float va Soyalar (shadows)

Qadimgi, lekin hanuz kerakli float xususiyati hamda element va matnga chiroyli soya berish usullari.

30 daqiqa
CSS Advanced — Dars 12

Float va Soyalar

Matn oqimini boshqarish va elementga haqiqiy chuqurlik berish — ikki kichik, lekin muhim mavzu.

floatclearbox-shadowtext-shadow

Dars rejasi

5 ta mavzu
  1. 01Float nima?
  2. 02clear va matn oqimi
  3. 03box-shadow — element soyasi
  4. 04text-shadow — matn soyasi
  5. 05Ichki soya (inset)

1. Float nima?

float — elementni chapga yoki o'ngga «suzdiradi», va qolgan matn uning atrofidan oqib o'tadi. Asosan gazeta uslubidagi sahifalarda matn ichiga rasm joylashtirish uchun ishlatiladi.

1img {
2  float: left;        /* rasm chapga, matn o'ngdan oqadi */
3  margin: 0 16px 8px 0;
4}
5

6.ong {
7  float: right;       /* o'ngga */
8}
Matn ichida rasm
Natijajonli

2. clear va matn oqimi

Agar keyingi elementning float atrofidan oqishini istamasangiz — unga clear xususiyatini beramiz. clear: both — ikki tomondan ham float yo'qligini bildiradi.

1.footer {
2  clear: both;   /* oldingi float'lardan keyin yangi qatordan boshlanadi */
3}
1/* Clearfix hiylasi */
2.ota::after {
3  content: "";
4  display: block;
5  clear: both;
6}

3. box-shadow — element soyasi

box-shadow elementga soya beradi va uni sahifadan «ko'tarilgan» qilib ko'rsatadi. 4 ta asosiy qiymat bor: x, y, blur, rang.

1.karta {
2  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3  /*           x  y  blur    rang             */
4}
5

6/* Qattiqroq soya */
7.chuqur {
8  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
9}
10

11/* Bir nechta soya (vergul orqali) */
12.ikkilamchi {
13  box-shadow:
14    0 2px 4px rgba(0, 0, 0, 0.05),
15    0 10px 30px rgba(0, 0, 0, 0.15);
16}
Soya darajalari
Natijajonli

4. text-shadow — matn soyasi

text-shadow matn uchun soya beradi. Qiymatlari box-shadow bilan bir xil: x, y, blur, rang.

1h1 {
2  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
3}
4

5/* Neon effekti */
6.neon {
7  color: #fff;
8  text-shadow:
9    0 0 5px #fff,
10    0 0 15px #3b82f6,
11    0 0 30px #3b82f6;
12}
Matn soyasi namunalari
Natijajonli

5. Ichki soya — inset

box-shadow qiymatining oldiga inset so'zini yozsangiz, soya ichkariga tushadi. Shuning uchun element «bosilgan» yoki «o'yilgan» ko'rinadi.

1.ichkaridan {
2  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.2);
3}
4

5/* Bosilgan tugma effekti */
6.bosilgan:active {
7  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25);
8  transform: translateY(1px);
9}
Ichki soyalar
Natijajonli

Kichik test

0 / 4

1.float xususiyatining asosiy vazifasi hozir nima?

2.box-shadow qiymatlarining to'g'ri tartibi?

3.Soyani ichkariga tushurish uchun qaysi so'z qo'shiladi?

4.clear: both qachon kerak?

Mustaqil ish

0 / 5