بازاریابی محتوا
ویژگیهای CSS3 که ممکن است از آنها آگاه نباشید: Flexbox، طرحبندی شبکه، ویژگیهای سفارشی، انتقالها، انیمیشنها و پسزمینههای متعدد
برگه های سبک آبشاری (CSS) به تکامل خود ادامه دهید و آخرین نسخه ها ممکن است دارای ویژگی هایی باشند که ممکن است شما حتی از آنها بی اطلاع باشید. در اینجا برخی از پیشرفتها و روشهای اصلی معرفی شده با CSS3 به همراه نمونههای کد آورده شده است:
- طرح بندی جعبه انعطاف پذیر (Flexbox): یک حالت طرح بندی که به شما امکان می دهد طرح بندی های انعطاف پذیر و پاسخگو برای صفحات وب ایجاد کنید. با flexbox، می توانید به راحتی عناصر را در یک ظرف تراز و توزیع کنید. در این مثال،
.container
استفاده های کلاسdisplay: flex
برای فعال کردن حالت طرح بندی flexbox. راjustify-content
دارایی تنظیم شده استcenter
برای مرکزیت افقی عنصر فرزند در داخل ظرف. راalign-items
دارایی تنظیم شده استcenter
برای مرکزیت عمودی عنصر فرزند. را.item
class رنگ پس زمینه و padding را برای عنصر فرزند تنظیم می کند.
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;
}
نتیجه
عنصر مرکزی
- طرح شبکه: حالت طرح بندی دیگری که به شما امکان می دهد طرح بندی های پیچیده مبتنی بر شبکه برای صفحات وب ایجاد کنید. با گرید، می توانید ردیف ها و ستون ها را مشخص کنید و سپس عناصر را در سلول های خاص شبکه قرار دهید. در این مثال،
.grid-container
استفاده های کلاسdisplay: grid
برای فعال کردن حالت طرح بندی شبکه راgrid-template-columns
دارایی تنظیم شده استrepeat(2, 1fr)
برای ایجاد دو ستون با عرض مساوی. راgap
ویژگی فاصله بین سلول های شبکه را تعیین می کند. را.grid-item
class رنگ پس زمینه و padding را برای آیتم های شبکه تنظیم می کند.
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;
}
نتیجه
مورد 1
مورد 2
مورد 3
مورد 4
- انتقال ها: CSS3 تعدادی ویژگی و تکنیک جدید برای ایجاد انتقال در صفحات وب معرفی کرد. به عنوان مثال
transition
ویژگی را می توان برای متحرک سازی تغییرات در خصوصیات CSS در طول زمان استفاده کرد. در این مثال،.box
class عرض، ارتفاع و رنگ پسزمینه اولیه عنصر را تعیین میکند. راtransition
دارایی تنظیم شده استbackground-color 0.5s ease
برای متحرک سازی تغییرات در ویژگی رنگ پس زمینه بیش از نیم ثانیه با یک تابع زمان بندی آسان در خارج. را.box:hover
کلاس رنگ پسزمینه عنصر را زمانی که نشانگر ماوس روی آن قرار دارد تغییر میدهد و انیمیشن انتقال را فعال میکند.
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;
}
نتیجه
شناور
اینجا!
اینجا!
- تصاوير متحرك: CSS3 تعدادی ویژگی و تکنیک جدید برای ایجاد انیمیشن در صفحات وب معرفی کرد. در این مثال، ما یک انیمیشن با استفاده از
animation
ویژگی. الف را تعریف کرده ایم@keyframes
قانون برای انیمیشن، که مشخص می کند جعبه باید از 0 درجه تا 90 درجه در مدت زمان 0.5 ثانیه بچرخد. وقتی جعبه روی آن قرار می گیرد،spin
انیمیشن برای چرخاندن جعبه اعمال می شود. راanimation-fill-mode
دارایی تنظیم شده استforwards
تا اطمینان حاصل شود که وضعیت نهایی انیمیشن پس از اتمام آن حفظ می شود.
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;
}
نتیجه
شناور
اینجا!
اینجا!
- ویژگی های سفارشی CSS: همچنین به عنوان شناخته متغیرهای 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>
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;
}