Tarkib Marketing
Siz bilmagan CSS3 xususiyatlari: Flexbox, Grid Layouts, Maxsus xususiyatlar, O'tishlar, Animatsiyalar va Ko'p Fonlar
Kaskadli uslublar jadvallari (CSS) rivojlanishda davom etadi va so'nggi versiyalarda siz hatto bilmagan ba'zi xususiyatlar bo'lishi mumkin. Bu erda kod misollari bilan bir qatorda CSS3 bilan kiritilgan asosiy yaxshilanishlar va metodologiyalar mavjud:
- Moslashuvchan quti tartibi (Flexbox): veb-sahifalar uchun moslashuvchan va sezgir tartiblarni yaratishga imkon beruvchi tartib rejimi. Flexbox yordamida siz konteyner ichidagi elementlarni osongina tekislashingiz va tarqatishingiz mumkin. bu misolda,
.container
sinfdan foydalanadidisplay: flex
flexbox layout rejimini yoqish uchun. Thejustify-content
mulk sozlangancenter
konteyner ichidagi bola elementni gorizontal markazlashtirish uchun. Thealign-items
mulk sozlangancenter
pastki elementni vertikal markazlashtirish uchun. The.item
class bola element uchun fon rangi va to'ldirishni o'rnatadi.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
natija
Markazlashtirilgan element
- Grid tartibi: veb-sahifalar uchun gridga asoslangan murakkab tartiblarni yaratishga imkon beruvchi boshqa tartib rejimi. To'r yordamida siz satrlar va ustunlarni belgilashingiz, so'ngra elementlarni gridning ma'lum kataklariga joylashtirishingiz mumkin. Ushbu misolda,
.grid-container
sinfdan foydalanadidisplay: grid
grid layout rejimini yoqish uchun. Thegrid-template-columns
mulk sozlanganrepeat(2, 1fr)
teng kenglikdagi ikkita ustun yaratish. Thegap
xususiyat panjara kataklari orasidagi masofani o'rnatadi. The.grid-item
class panjara elementlari uchun fon rangi va to'ldirishni o'rnatadi.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
natija
element 1
element 2
element 3
element 4
- O'tishlar: CSS3 veb-sahifalarda o'tishlarni yaratish uchun bir qator yangi xususiyatlar va texnikalarni taqdim etdi. Masalan,
transition
xususiyat vaqt o'tishi bilan CSS xususiyatlaridagi o'zgarishlarni jonlantirish uchun ishlatilishi mumkin. Ushbu misolda,.box
sinf element uchun kenglik, balandlik va boshlang'ich fon rangini o'rnatadi. Thetransition
mulk sozlanganbackground-color 0.5s ease
fon rangi xususiyatiga oʻzgarishlarni yarim soniya ichida osonlikcha kiritish funksiyasi bilan jonlantirish. The.box:hover
class sichqoncha ko'rsatkichi uning ustida turganda elementning fon rangini o'zgartiradi va o'tish animatsiyasini ishga tushiradi.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
natija
hover
Bu yerda!
Bu yerda!
- animatsiyalar: CSS3 veb-sahifalarda animatsiyalarni yaratish uchun bir qator yangi xususiyatlar va texnikalarni taqdim etdi. Ushbu misolda biz yordamida animatsiya qo'shdik
animation
mulk. Biz aniqladik@keyframes
animatsiya uchun qoida, bu quti 0 soniya davomida 90 darajadan 0.5 darajagacha aylanishi kerakligini belgilaydi. Quti ustiga kursor keltirilsa,spin
qutini aylantirish uchun animatsiya qo'llaniladi. Theanimation-fill-mode
mulk sozlanganforwards
animatsiyaning yakuniy holati tugagandan keyin saqlanishini ta'minlash uchun.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
natija
hover
Bu yerda!
Bu yerda!
- CSS maxsus xususiyatlari: Shuningdek, CSS o'zgaruvchilari, maxsus xususiyatlar CSS3 da joriy qilingan. Ular sizga CSS-da o'zingizning shaxsiy xususiyatlaringizni aniqlash va ulardan foydalanish imkonini beradi, bu sizning uslublar jadvallaringizdagi qiymatlarni saqlash va qayta ishlatish uchun ishlatilishi mumkin. CSS o'zgaruvchilari ikkita tire bilan boshlanadigan nom bilan aniqlanadi, masalan
--my-variable
. Ushbu misolda biz -primary-color deb nomlangan CSS o'zgaruvchisini aniqlaymiz va unga qiymat beramiz#007bff
, bu ko'p dizaynlarda asosiy rang sifatida keng qo'llaniladigan ko'k rang. Biz ushbu o'zgaruvchini o'rnatish uchun foydalandikbackground-color
yordamida tugma elementining xususiyativar()
funktsiyasi va o'zgaruvchi nomida o'tish. Bu tugma uchun fon rangi sifatida o'zgaruvchining qiymatidan foydalanadi.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Bir nechta fon: CSS3 element uchun bir nechta fon rasmlarini belgilash imkonini beradi, uning joylashuvi va stacking tartibini boshqarish imkoniyati. Fon ikkita rasmdan iborat,
red.png
vablue.png
yordamida yuklanadibackground-image
mulk. Birinchi rasm,red.png
, elementning o'ng pastki burchagida joylashgan, ikkinchi rasm esa,blue.png
, elementning chap yuqori burchagida joylashgan. Thebackground-position
xususiyat har bir tasvirning joylashishini boshqarish uchun ishlatiladi. Thebackground-repeat
xususiyat tasvirlarning qanday takrorlanishini nazorat qilish uchun ishlatiladi. Birinchi rasm,red.png
, takrorlanmaslik uchun sozlangan (no-repeat
), ikkinchi rasm esa,blue.png
, takrorlash uchun sozlangan (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}