CSS da kerakli qismlarni yaratish

CSS da kerakli qismlarni yaratish (37)

DjHuSo
#1 07:48:24, 21 Apr 2020

Salom!
Bu yerda CSS da kerakli qismlarni dizynini yaatamiz misol beriladi shiz shunga qarab shu koʻrinishni yasashingiz kerak boʻladi! Copy qilish mumkun emas!
Baholash tizimi ham mavjud:
2 ball urinib koʻrgani uchun
5 ball qisman tayyorlagani uchun
7 ball yarim tayyor mahsulot uchun
10 ball 100% natija uchun.
P/s bu mavzu css da bilimni oshirish uchun koʻchirishlarni yoʻqotish uchun PHP da masala yechish ga qoʻshimcha mavzu.

DjHuSo
#2 08:04:54, 21 Apr 2020

1 - masala 1 ta rasmni chitiga chiziq tortish kerak va doyraga olish kerak soya chiqarish kerak !

Mailzero
#3 08:54:23, 21 Apr 2020

Men ham urinib ko'ray:

<!DOCTYPE HTML>
 
<html>
 
<head>
    <title>Rasm CSS</title>
</head>
 
<body>
  <img style="border: 2px #6c6666 solid;
   border-radius: 50%;
   box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;"
   src="1.JPG" width="400" height="400" alt="">
</body>
 
</html>

Biriktirilgan fayllar [1]:
css.jpg (56.02 KB) (157 ↴)

Akbarali
#4 10:15:47, 21 Apr 2020

Kmuzon, # Kmuzon (21.04.2020 / 09:19)
Rasmni ustiga js urnatish kk qilolasmiАгар ёна шунақа саволларни берсангиз 1 сутка форум сиздан дам олади.

1. Мавзу CSS хақида.

2. Расм устига ЖСни чиқариб бўлмай.и ЖС орқали чиқаришингиз мумкун

Буни огохлантириш деб қабул қилинг. Зеро мақсадим банлистни тўлдириш эмас

DjHuSo
#5 10:44:34, 21 Apr 2020

REYTING (21.04.2020)
1. - Mailzero10 ball

MASALALAR:
1-MASALA (Rasmga soya berish). Activ

sobirjonovv
#6 11:17:26, 21 Apr 2020

Masalalarni soddalaridan boshlang, men ham urinib ko'ray va boshqalar ham

DjHuSo
#7 11:18:01, 21 Apr 2020

Mahmudjon, Eng onsoni ku bu

Akbarali
#8 12:13:54, 21 Apr 2020

Саволларни биз хам берсак бўладими ?

DjHuSo
#9 12:15:47, 21 Apr 2020

Akbarali, Albatta

gi8ri7
#10 12:44:37, 21 Apr 2020

Mahmudjon, # Mahmudjon (21.04.2020 / 11:17)
Masalalarni soddalaridan boshlang, men ham urinib ko'ray va boshqalar ham

Buni oftopic deb bilmaysizlar degan umiddaman!

Maslahat: Masalalarni osonlashtiring deyishni o’rniga siz uchun notanish bo’lgan
elementga ko’zingiz tushsa oddiy qilib “element css” deb googledan qidiring aniq bilaman 100 lab natijalar namunialari (+screen)lari bilan chiqadi bunarsani o’zingiz uchun kashf etgan bo’lasiz

Agar elemnt nima desez

.div_nomi { 
    background-color: #efefef;
    color: #323232;
    font-size: 16px;
}

Buyerda sariq rangda yozilganlar element ya’ni ikki nuqta ( : ) bilan tugagan atamalar

Akbarali
#11 12:54:32, 21 Apr 2020

Блок очинг ва унга #E2E1E0 рангини бериб ичида яна битта блок очиб унга #fff беринг ва чап, ўнг, пастироғи озоқ соя беринг. Ва ўртадаги #fff rangli blokka sichqoncha kelganda soya rangiz yanaham to`qlashsin

Biriktirilgan fayllar [2]:
15874556991.jpg (42.3 KB) (124 ↴)
15874557082.jpg (57.05 KB) (130 ↴)

AkmyradoffSoft
#12 16:45:51, 21 Apr 2020

DjHuSo, # DjHuSo (21.04.2020 / 10:44)
REYTING (21.04.2020)
1. - Mailzero10 ball

MASALALAR:
1-MASALA (Rasmga soya berish). Activbox-shadow orqali qilinadi

Akbarali
#13 16:46:49, 21 Apr 2020

ZET-PRO2003, # ZET-PRO2003 (21.04.2020 / 16:45)
DjHuSo, box-shadow orqali qilinadiQanday qilishni emas o`sha kodni tashlashingiz kerak

AkmyradoffSoft
#14 16:50:43, 21 Apr 2020

Akbarali, # Akbarali (21.04.2020 / 16:46)
ZET-PRO2003, Qanday qilishni emas o`sha kodni tashlashingiz kerakbilaman xoz, net ishlamay qoldi manda:

<img src="rasm_manzili.jpg" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.1);box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.1);">

gi8ri7
#15 18:48:21, 21 Apr 2020

ZET-PRO2003,

.div {
    box-shadow: maydoni ochroq rang;
}
 
.div:hover {
    box-shadow: maydoni to’qroq rang;
}

qil deyabdi

DjHuSo
#16 07:09:13, 22 Apr 2020

REYTING (22.04.2020)
1. - Mailzero 10 ball
2. - ZET-PRO2003 7 ball

MASALALAR:
1-MASALA (Rasmga soya berish).
2-MASALA (Сичқонча bn ishlash) Activ

Akbarali
#17 08:52:10, 22 Apr 2020

Кодларни ёзаётганда visted hover link active qilib yozib qo`ymaylik. Bo`lmasa osongina topib olishadi

DjHuSo
#18 22:02:18, 23 Apr 2020

Akbarali,

<!DOCTYPE HTML>
 
<html>
 
<head>
    <title>Border</title>
<style>
body{
background:#ccc;
}
 
.test{
background:#739e41;
padding:10px;
border-radius:5px;
}
.test1{
background:#fff;
border-radius:5px;
box-shadow:0px 10px 10px 1px #444;
}
 
.test1:hover{
box-shadow:0px 10px 10px 1px #000;
}
 
 
</style>
</head>
 
<body>
 
 <div class="test1">
 <div class="test">
 <br/>
  </div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 </div>
 
</body>
 
</html>