منځپانګه بازار
د CSS3 ځانګړتیاوې چې تاسو شاید خبر نه یاست: فلیکس باکس، گرډ ترتیب، دودیز ملکیتونه، لیږدونه، حرکتونه، او ډیری شالیدونه
کاسکیډینګ سټایل شیټونه (سی ایس ایس) پرمختګ ته دوام ورکړئ او وروستي نسخې ممکن ځینې ځانګړتیاوې ولري چې تاسو یې حتی خبر نه یاست. دلته ځینې لوی پرمختګونه او میتودونه دي چې د CSS3 سره معرفي شوي، د کوډ مثالونو سره:
- د انعطاف وړ بکس ترتیب (Flexbox): د ترتیب حالت چې تاسو ته اجازه درکوي د ویب پاڼو لپاره انعطاف وړ او ځواب ویونکي ترتیبونه رامینځته کړئ. د فلیکس بکس سره، تاسو کولی شئ په اسانۍ سره په کانټینر کې عناصر تنظیم او توزیع کړئ. د دې مثال، د
.container
ټولګي کارولdisplay: flex
د فلیکس باکس ترتیب حالت فعالولو لپاره. دjustify-content
ملکیت ټاکل شوی دیcenter
په کانتینر کې د ماشوم عنصر په افقی ډول مرکز کړئ. دalign-items
ملکیت ټاکل شوی دیcenter
د ماشوم عنصر عمودی مرکز ته. د.item
ټولګي د ماشوم عنصر لپاره د شالید رنګ او پیډینګ ټاکي.
د HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
سی ایس ایس
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
د پايلو
مرکزي عنصر
- د گرډ ترتیب: بل ترتیب حالت چې تاسو ته اجازه درکوي د ویب پاڼو لپاره پیچلي گرډ پر بنسټ ترتیبونه جوړ کړئ. د گرډ سره، تاسو کولی شئ قطارونه او کالمونه مشخص کړئ، او بیا عناصر د ګریډ په ځانګړو حجرو کې ځای په ځای کړئ. په دې مثال کې، د
.grid-container
ټولګي کارولdisplay: grid
د گرډ ترتیب حالت فعالولو لپاره. دgrid-template-columns
ملکیت ټاکل شوی دیrepeat(2, 1fr)
د مساوي عرض دوه کالمونو جوړولو لپاره. دgap
ملکیت د ګریډ حجرو ترمنځ فاصله ټاکي. د.grid-item
کلاس د گرډ توکو لپاره د شالید رنګ او پیډینګ ټاکي.
د 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>
سی ایس ایس
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
د پايلو
توکی 1
توکی 2
توکی 3
توکی 4
- لیږدونه: CSS3 په ویب پاڼو کې د لیږد رامینځته کولو لپاره یو شمیر نوي ملکیتونه او تخنیکونه معرفي کړل. د مثال په توګه، د
transition
ملکیت د وخت په تیریدو سره د CSS ملکیتونو کې بدلونونو متحرک کولو لپاره کارول کیدی شي. په دې مثال کې، د.box
ټولګي د عنصر لپاره عرض، قد، او ابتدايي پس منظر رنګ ټاکي. دtransition
ملکیت ټاکل شوی دیbackground-color 0.5s ease
په نیمه ثانیه کې د شالید رنګ ملکیت کې بدلونونه د اسانه کولو وخت کولو فعالیت سره متحرک کول. د.box:hover
کلاس د عنصر شالید رنګ بدلوي کله چې د موږک پوینټر په هغې باندې وي، د لیږد حرکت حرکت کوي.
د HTML
<div class="box"></div>
سی ایس ایس
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
د پايلو
هور
دلته!
دلته!
- انیمیشنونه: CSS3 په ویب پاڼو کې د متحرکاتو جوړولو لپاره یو شمیر نوي ملکیتونه او تخنیکونه معرفي کړل. په دې مثال کې، موږ په کارولو سره یو حرکت اضافه کړی دی
animation
ملکیت موږ تعریف کړی دی a@keyframes
د حرکت لپاره قاعده، کوم چې مشخص کوي چې بکس باید د 0 ثانیو په موده کې له 90 درجو څخه 0.5 درجو ته وګرځي. کله چې کڅوړه پورته شي، دspin
حرکت د بکس د ګرځولو لپاره پلي کیږي. دanimation-fill-mode
ملکیت ټاکل شوی دیforwards
ترڅو ډاډ ترلاسه شي چې د انیمیشن وروستی حالت د پای ته رسیدو وروسته ساتل کیږي.
د HTML
<div class="rotate"></div>
سی ایس ایس
.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;
}
د پايلو
هور
دلته!
دلته!
- د CSS دودیز ملکیتونه: د د سی ایس ایس متغیرونه، دودیز ملکیتونه په CSS3 کې معرفي شوي. دوی تاسو ته اجازه درکوي په CSS کې خپل دودیز ملکیتونه تعریف او وکاروئ، کوم چې ستاسو د سټایل شیټونو په اوږدو کې د ارزښتونو ذخیره کولو او بیا کارولو لپاره کارول کیدی شي. د CSS متغیرونه د یو نوم لخوا پیژندل شوي چې د دوه ډیسکونو سره پیل کیږي، لکه
--my-variable
. په دې مثال کې، موږ د CSS متغیر تعریف کوو چې د -primary-color په نوم یادیږي او ورته ارزښت ورکوو.#007bff
، کوم چې نیلي رنګ دی چې معمولا په ډیری ډیزاینونو کې د لومړني رنګ په توګه کارول کیږي. موږ دا متغیر د تنظیم کولو لپاره کارولی دیbackground-color
د تڼۍ عنصر ملکیت، په کارولو سرهvar()
فعالیت او په متغیر نوم کې تیریږي. دا به د تڼۍ لپاره د شالید رنګ په توګه د متغیر ارزښت وکاروي.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- څو پس منظرونه: CSS3 تاسو ته اجازه درکوي د عنصر لپاره ډیری شالید عکسونه مشخص کړئ ، د دې وړتیا سره چې د دې موقعیت کنټرول او سټیکینګ ترتیب. پس منظر د دوو انځورونو څخه جوړ شوی دی،
red.png
اوblue.png
، کوم چې په کارولو سره بار شويbackground-image
ملکیت لومړی انځور،red.png
، د عنصر په ښۍ ښکته کونج کې موقعیت لري ، پداسې حال کې چې دوهم عکس ،blue.png
، د عنصر په ښي کونج کې موقعیت لري. دbackground-position
ملکیت د هر عکس موقعیت کنټرول لپاره کارول کیږي. دbackground-repeat
ملکیت د دې کنټرول لپاره کارول کیږي چې څنګه عکسونه تکرار شي. لومړی انځور،red.png
د تکرار نه کولو لپاره ټاکل شوی (no-repeat
)، پداسې حال کې چې دویم انځور،blue.png
د تکرار لپاره ټاکل شوی (repeat
).
د HTML
<div id="multibackground"></div>
سی ایس ایس
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}