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;
    }

    نتيجة

    Douglas Karr

    Douglas Karr هو CMO من أوبن إنسايتس ومؤسس Martech Zone. ساعد دوغلاس العشرات من الشركات الناشئة الناجحة في MarTech، وساعد في العناية الواجبة بأكثر من 5 مليارات دولار في عمليات الاستحواذ والاستثمارات في Martech، ويستمر في مساعدة الشركات في تنفيذ وأتمتة استراتيجيات المبيعات والتسويق الخاصة بها. دوغلاس هو أحد خبراء التحول الرقمي المعترف بهم عالميًا وخبير ومتحدث في MarTech. دوغلاس هو أيضًا مؤلف منشور لدليل Dummie وكتاب عن قيادة الأعمال.

    مقالات ذات صلة

    العودة إلى الزر العلوي
    اغلاق

    كشف Adblock

    Martech Zone قادر على تزويدك بهذا المحتوى دون أي تكلفة لأننا نستثمر موقعنا من خلال عائدات الإعلانات ، والروابط التابعة ، والرعاية. سنكون ممتنين إذا قمت بإزالة مانع الإعلانات الخاص بك أثناء عرض موقعنا.