Content Marketing
ميزات CSS3 قد لا تكون على دراية بها: Flexbox وتخطيطات الشبكة والخصائص المخصصة والانتقالات والرسوم المتحركة والخلفيات المتعددة
اوراق النمط المتعاقب (CSS) تستمر في التطور وقد تحتوي أحدث الإصدارات على بعض الميزات التي قد لا تكون على دراية بها. فيما يلي بعض التحسينات والمنهجيات الرئيسية المقدمة مع CSS3 ، جنبًا إلى جنب مع أمثلة التعليمات البرمجية:
- تخطيط الصندوق المرن (فليكس بوكس): وضع تخطيط يسمح لك بإنشاء تنسيقات مرنة وسريعة الاستجابة لصفحات الويب. باستخدام flexbox ، يمكنك بسهولة محاذاة العناصر وتوزيعها داخل الحاوية. n هذا المثال
.container
يستخدم الطبقةdisplay: flex
لتمكين وضع تخطيط Flexbox. الjustify-content
تم تعيين الخاصية لcenter
لتوسيط العنصر الفرعي أفقيًا داخل الحاوية. الalign-items
تم تعيين الخاصية لcenter
لتوسيط العنصر الفرعي عموديًا. ال.item
يحدد class لون الخلفية والحشو للعنصر الفرعي.
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 لون الخلفية والحشو لعناصر الشبكة.
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
تحدد فئة العرض والارتفاع ولون الخلفية الأولي للعنصر. الtransition
تم تعيين الخاصية لbackground-color 0.5s ease
لتحريك التغييرات التي تم إجراؤها على خاصية لون الخلفية لمدة تزيد عن نصف ثانية باستخدام وظيفة توقيت easy-in-out. ال.box:hover
يقوم class بتغيير لون خلفية العنصر عندما يكون مؤشر الماوس فوقه ، مما يؤدي إلى تشغيل حركة الانتقال.
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 يسمى اللون الأساسي ونعطيه قيمة#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;
}