css3 چیست؟ کاربردها و معرفی کامل css3

css3 چیست؟ کاربردها و معرفی کامل css3 را در این مقاله مورد بررسی قرار می‌دهیم. CSS3 جدیدترین نسخه از زبان Cascading Style Sheets است که برای کنترل ظاهر صفحات وب به کار می‌رود. این زبان قدرتمند، امکانات و قابلیت‌های جدیدی را به طراحان وب ارائه می‌دهد که به واسطه آنها می‌توانند صفحات وب جذاب‌تر و پویاتر با رابط کاربری بهتر طراحی کنند. با دویکس همراه باشید.

معرفی مختصر CSS3

این زبان مجموعه‌ای از قوانین را برای چیدمان، رنگ، فونت، انیمیشن و دیگر عناصر بصری صفحات وب را ارائه می‌دهد. CSS3 یک نسخه از زبان استایل‌دهی مبتنی بر وب است که برای طراحی و ایجاد نظم به صفحات وب استفاده می‌شود. این ویژگی جدیدترین نسخه از سی‌اس‌اس (CSS) است که برای ایجاد سبک و ظاهر جذابتر و پویا به وب‌سایت‌ها استفاده می‌شود و از سمت شرکت‌های توسعه‌دهنده مرورگرها مانند Mozilla، Google، Microsoft و… پشتیبانی می‌شود. همچنین استفاده صحیح از CSS3 می‌تواند سئوی صفحات وب را ارتقا دهد.

کاربردهای اصلی CSS3 شامل موارد زیر می‌شود:

• انیمیشن‌ها و ترنزیشن‌ها: با CSS3 می‌توانید انیمیشن‌های زیبا و ترنزیشن‌هایی را که قبلاً نیاز به جاوااسکریپت داشت، به راحتی با استفاده از خصوصیت‌هایی مانند transition و animation ایجاد کنید.
• تبدیل و تغییر اندازه‌ها: با CSS3 می‌توانید اندازه‌ها، انواع و ابعاد مختلفی از عناصر را تغییر دهید، از جمله این موارد شامل تغییر اندازه‌ها (scale)، چرخش (rotate)، تغییر موقعیت (translate) و شفافیت (opacity) است.
• سایزدهی دینامیک و ریسپانسیو: با استفاده از ویژگی‌های CSS3 مانند flexbox و grid، می‌توانید طرح بندی‌های دینامیک و ریسپانسیو برای صفحات وبسایت خود ایجاد کنید که به صورت خودکار به اندازه‌های مختلف صفحه و نوع دستگاه تطبیق می‌یابد.
• سایه‌ها و انواع حاشیه‌ها: CSS3 امکاناتی مانند سایه‌گذاری (box-shadow) و انواع مختلف حاشیه‌ها (border-radius) را فراهم می‌کند که به طراحی وبسایت‌ها زیبایی و ظرافت میبخشد.
• فونت‌های چندگانه: فونت‌های چندگانه به معنای استفاده از چندین فرمت و نوع فونت برای نمایش متن در وب‌سایت‌ها است. این امر به طراحان و توسعه‌دهندگان این امکان را می‌دهد تا فونت‌های مورد نظر خود را با فرمت‌های مختلفی که توسط مرورگرها و سیستم‌عامل‌ها پشتیبانی می‌شوند، ارائه دهند.
• نوشتاری، رنگ و تصاویر: CSS3 امکاناتی مانند text-shadow و text-outline را برای افزودن افکت‌های بصری به متن‌ها فراهم می‌کند. همچنین این امکان را به شما می‌دهد تا تصاویر و پس‌زمینه‌ها را به طور دینامیک و با استفاده از خصوصیت‌هایی مانند background-size و background-clip مدیریت کنید.

در ابتدا برخی مرورگرها از ویژگی های CSS3 پشتیبانی نمی‌کردند و مدتی طول کشید تا کاملاً سازگار شوند. CSS3 با نسخه های قبلی CSS سازگار است.

ماژول‌ها در CSS3

CSS3 از مجموعه‌ای از ماژول‌ها تشکیل شده است که هر کدام به یک بخش خاص از طراحی وب مربوط می‌شوند. این ماژول‌ها به طراحان وب امکان می‌دهند تا با استفاده از کدهای کمتر، صفحات وب پیچیده‌تری را طراحی کنند. برای سرعت بخشیدن به فرآیند CSS، آن را به قسمت‌های راحت‌تری تقسیم کردند که از آنها به عنوان ماژول یاد می‌شود.

برخی از مهم‌ترین ماژول‌های CSS3 عبارتند از:

• Selectors Level 3 (انتخاب‌گرهای سطح 3): این ماژول شامل مجموعه‌ای از انتخاب‌گرها و قوانین مربوط به انتخاب عناصر در HTML است. این شامل انتخاب‌گرهای ساده مانند نام تگ، کلاس، آیدی، ویژگی‌های متنوع مانند نقطه دو (Pseudo-classes) و عناصر متوالی (Adjacent sibling selectors) می‌شود.
• Box Model (مدل جعبه): این ماژول شامل قوانین مربوط به ساختار مدل جعبه (Box Model) در CSS است. این شامل ابعاد (dimensions)، (margins)، (borders)، فضای داخلی (padding) و نحوه نمایش عناصر HTML در مرورگرها می‌شود.
• Backgrounds and Borders (پس‌زمینه‌ها و حاشیه‌ها): این ماژول قوانین مربوط به تصاویر پس‌زمینه، رنگ‌ها، حاشیه‌ها و خطوط (بوردرها) را در CSS3 تعریف می‌کند. این شامل ویژگی‌هایی مانند background-image، border-radius و box-shadow می‌شود.
• Color (رنگ): این ماژول شامل قوانین مربوط به تعریف و استفاده از رنگ‌ها در CSS3 است. این شامل مدل رنگ RGBA، HSLA و سایر ویژگی‌های مربوط به رنگ مانند opacity می‌شود.
• Fonts (فونت‌ها): این ماژول قوانین مربوط به فونت‌ها در CSS3 را تعریف می‌کند. این شامل ویژگی‌هایی مانند font-family، font-size، font-weight و @font-face برای استفاده از فونت‌های سفارشی می‌شود.
• Transitions (ترنزیشن‌ها): این ماژول شامل قوانین مربوط به ایجاد ترنزیشن و انیمیشن‌ها در CSS3 است. این شامل ویژگی‌هایی مانند transition-property، transition-duration و transition-timing-function می‌شود.

همچنین، ماژول‌های دیگری نیز وجود دارند که ویژگی‌های مشخصی را در CSS3 تعریف می‌کنند، از جمله Flexbox، Grid، Multi-column Layout، Text Effects و…، این ماژول‌ها هر کدام به طریقه‌ای به توسعه وب کمک می‌کنند و امکاناتی جدید و پیشرفته‌تر در زمینه طراحی و استایل‌دهی وب را فراهم می‌کنند.

مزیت اصلی ماژول ها تضمین این است که همه استایل ها برای یک مولفه خاص در یک مکان نگهداری می شوند و فقط در مورد آن مولفه اعمال می شوند و نه چیز دیگری.

مزایای استفاده از ماژول‌ها:

• کاهش حجم کد: با استفاده از ماژول‌ها می‌توانید با استفاده از کدهای کمتر، صفحات وب پیچیده‌تری را طراحی کنید.
• سازگاری با مرورگرهای مختلف: ماژول‌های CSS3 به طور کامل توسط مرورگرهای مدرن پشتیبانی می‌شوند.
• قابلیت ارتقا: ماژول‌ها به طور مداوم در حال ارتقا و بهبود هستند.

بررسی اجمالی ویژگی های جدید Css3

در ادامه به بررسی برخی از ویژگی‌های جدید css3 به صورت دقیق‌تر میپردازیم و هر کدام را مورد بررسی قرار می‌دهیم. این ویژگی‌ها شامل Box Shadow، Opacity، Rounded Corners و… است.

Box Shadow ها در css3

با استفاده از خاصیت box-shadow در CSS3 می‌توانید سایه‌هایی به عناصر HTML خود اضافه کنید. این قابلیت به شما امکان می‌دهد تا ظاهر عناصر را بهبود ببخشید. این خاصیت شامل چندین پارامتر است که می‌توانید آن‌ها را تنظیم کنید.ویژگی box-shadow در CSS3 به شما امکان می‌دهد سایه‌هایی را به عناصر اضافه کنید و با ایجاد جلوه‌ای سه‌بعدی، عمق را در طرح‌های وب خود افزایش دهید.

.myElement {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

پارامترها:

• horizontal-offset: (اختیاری) فاصله افقی سایه از عنصر را مشخص می‌کند (مقادیر مثبت سایه را به سمت راست و مقادیر منفی به سمت چپ حرکت می‌دهند).
• vertical-offset: (اختیاری) فاصله عمودی سایه از عنصر را مشخص می‌کند (مقادیر مثبت سایه را به سمت پایین و مقادیر منفی به سمت بالا حرکت می‌دهند).
• blur-radius: (اختیاری) میزان تاری سایه را مشخص می‌کند (مقادیر بالاتر سایه‌ای نرم‌تر و منتشرتر ایجاد می‌کنند).
• spread-radius: (اختیاری) مشخص می‌کند که سایه تا چه حد فراتر از عنصر گسترش می‌یابد (مقادیر مثبت سایه را بزرگ‌تر و مقادیر منفی آن را کوچک‌تر می‌کنند).
• color: (اختیاری) رنگ سایه را مشخص می‌کند.
• inset: (اختیاری) به جای سایه بیرونی، یک سایه داخلی ایجاد می‌کند (سایه‌های داخلی در داخل حاشیه عنصر ظاهر می‌شوند).

Opacity در css3

Opacity در CSS3 یک ویژگی است که به شما اجازه می‌دهد تا شفافیت یک المان HTML را تنظیم کنید. این ویژگی از یک مقدار عددی بین 0 و 1 استفاده می‌کند، که 0 به معنای کاملاً شفاف (یا نامرئی) و 1 به معنای کاملاً قابل مشاهده (یا بی‌شفاف) است. به طور کلی، مقدار بزرگتری از opacity موجب کمتر شدن شفافیت می‌شود.

به عنوان مثال، اگر می‌خواهید یک المان را نیمه شفاف کنید، می‌توانید از مقدار 0.5 برای opacity استفاده کنید:

.myElement {
opacity: 0.5;
}

به عنوان مثال ، می توانید opacity را روی تصاویر یا سایر عناصر HTML اعمال کنید. کاربرد آن شامل ایجاد جلوه‌های محو شدن، ایجاد لایه های شفاف، تنظیم شفافیت تصاویر و ایجاد واترمارک است.

مثالی برای ایجاد افکت محو شدن:

.element {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.element:hover {
opacity: 1;
}

می توانید از opacity در کنار سایر خصوصیات مانند background-color و color برای ایجاد جلوه های بصری پیچیده استفاده کنید.

Rounded Corners

گوشه‌های گرد (Rounded Corners) یک ویژگی مهم در CSS3 هستند که به شما این امکان را می‌دهند تا گوشه‌های المان‌های HTML را به شکل گرد تغییر دهید. این ویژگی به طراحی و توسعه وب سایت‌ها کمک می‌کند و ظاهری زیبا و بصری برای المان‌ها ایجاد می‌کند.

برای اعمال گوشه‌های گرد، شما می‌توانید از ویژگی border-radius در CSS استفاده کنید. این ویژگی به شما اجازه می‌دهد تا شعاع گوشه‌های یک المان را تعیین کنید. مقدار این ویژگی می‌تواند یک عدد یا یک مقدار درصدی باشد که نشان دهنده شعاع گوشه‌ها است.

در CSS3، گوشه‌های گرد با استفاده از ویژگی border-radius ایجاد می‌شوند. این ویژگی به شما اجازه می‌دهد تا انحنای گوشه‌های یک عنصر را تعریف کنید و یه effect گرد ایجاد کنید. قبل از انتشار CSS3 ، توسعه دهندگان برای تولید گوشه های گرد مجبور بودند کد طولانی بنویسند. اکنون کافی است که ویژگی CSS3 با  border-radius را روی عناصر HTML اعمال کنید.

.rounded-corner {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

رنگهای جدید در css3

در CSS3، مجموعه‌ای از رنگهای جدید و قدرتمند معرفی شده است که به طراحان وب امکانات بیشتری را برای کار با رنگها می‌دهد. این رنگها از جمله رنگهای RGBA، HSLA، و رنگهای شفاف می‌باشند که اجازه می‌دهند تا رنگهایی با شفافیت مختلف تعیین شوند.

رنگ‌های RGBA: در CSS3، مجموعه‌ای از رنگهای جدید و قدرتمند معرفی شده است که به طراحان وب امکانات بیشتری را برای کار با رنگها می‌دهد. این رنگها از جمله رنگهای RGBA، HSLA، و رنگهای شفاف می‌باشند که اجازه می‌دهند تا رنگهایی با شفافیت مختلف تعیین شوند.

رنگ‌های HSLA: در این نوع، رنگ با استفاده از سه مولفه: رنگ (Hue)، اشباعیت (Saturation) و روشنایی (Lightness) تعیین می‌شود. همچنین یک مقدار شفافیت (Alpha) نیز در انتهای مقادیر اضافه می‌شود. مقادیر Hue، Saturation و Lightness بین 0 و 100 یا بین 0 و 360 (برای Hue) مشخص می‌شوند.

دسته بندی کلی رنگ‌ها شامل موارد زیر است:

• RGBA
• HSL
• HSLA
• Gradient Colors

مقاله css3 چیست؟ به پایان رسید لطفا نظرات و سوالات خود را برای ما ارسال کنید همچنین می‌توانید در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.