بازاریابی محتوا

ویژگی‌های 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;
    }

    نتیجه

    Douglas Karr

    Douglas Karr CMO از است OpenINSIGHTS و بنیانگذار Martech Zone. داگلاس به ده‌ها استارت‌آپ موفق MarTech کمک کرده است، به بررسی دقیق بیش از 5 میلیارد دلار در خرید و سرمایه‌گذاری Martech کمک کرده است، و همچنان به شرکت‌ها در پیاده‌سازی و خودکارسازی استراتژی‌های فروش و بازاریابی کمک می‌کند. داگلاس یک متخصص و سخنران تحول دیجیتال و MarTech است. داگلاس همچنین نویسنده کتاب راهنمای Dummie و کتاب رهبری تجاری است.

    مقالات مرتبط

    بازگشت به دکمه بالا
    نزدیک

    Adblock شناسایی شد

    Martech Zone می تواند این محتوا را بدون هیچ هزینه ای در اختیار شما قرار دهد زیرا ما از طریق درآمد تبلیغاتی، پیوندهای وابسته و حمایت های مالی از سایت خود کسب درآمد می کنیم. اگر در حین مشاهده سایت ما، مسدود کننده تبلیغات خود را حذف کنید، خوشحال خواهیم شد.