CSS3 چیست و چه تفاوتی با CSS دارد؟

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

با گسترش زبان برنامه نویسی و اهمیت بسیار زیاد HTML5، شناخت و استفاده از آخرین ورژن CSS به نام CSS3 ضروری می باشد. css3 با ورژن HTML5 در طراحی صفحات وب همراه می باشد و دارای ویژگی های جذاب و تفاوت های بسیاری با نسخه های پیشین خود می باشد. در این مقاله به معرفی کامل CSS3 و تمام نکات مهم و کاربردی آن می پردازیم و تفاوت css با css3 را نیز بیان می کنیم.

نسخه های CSS

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

نسخه CSS1

این نسخه اولین نسخه css بوده، که تنها دارای ویژگی و خواص مربوط به تعیین نوع فونت، تراز متن، فاصله ی عناصر، ایجاد لیست ها، اندازه فضای اشغالی توسط تگ ها و تعیین حاشیه می باشد. این ورژن از ویژگی هایی چون تعیین رنگ، تصویر پس زمینه، رنگ متون و تعیین مکان یک تگ برای قرار گرفتن در سمت چپ یا راست پشتیبانی نمی کند.

نسخه CSS2

توسعه دهندگان CSS برای بهبود نسخه اول خود، نسخه ای را معرفی کردند که علاوه بر ویژگی های نسخه اول، دارای امکانات و ویژگی های کاربردی ایجاد کادر دور عناصر، تعیین مکان آن ها در جهات مختلف، Selector ها، ادغام فایل های Css و … می باشد.

نسخه CSS3

نسخه CSS3 جدید ترین و آخرین ورژن CSS می باشد که نسخه پیشرفته دو نسخه CSS1 و CSS2 به حساب می آید. این نسخه علاوه بر ویژگی نسخه های قبلی خود، دارای ویژگی هایی چون ایجاد متن های چند ستونی، حاشیه های گرد، تعیین میزان شفافیت عنصر، استفاده از رنگ هایی که در مد های HSLA  HSL ،RGBA تعریف شده اند و ایجاد ساید برای متون می باشد که در ادامه این مقاله بیشتر به این نسخه از زبان  css می پردازیم. 

CSS3 چیست؟

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

ویژگی های CSS3

CSS3 علاوه بر ویژگی های CSS دارای 7 ویژگی بسیار کاربردی و مهمی می باشد که برنامه نویسان می توانند با استفاده از آنها صفحات وب زیبایی را طراحی نمایند.

Selector های جدید و پیشرفته

selector به طور کلی به معنی انتخاب و فراخوانی می باشد. این ویژگی امکان دسترسی، انتخاب کد های HTML را در CSS و بلعکس را برای برنامه نویس فراهم می کند. این قابلیت و ویژگی در css هم وجود داشت که تنها برنامه نویس می توانست به 2 روش کدهای مورد نظر خود را انتخاب نماید. این 2 روش در css3 به روش های مختلف تبدیل شده است.

پشتیبانی از فرمت‌های رنگی جدید

فرمت های رنگی که به آنها مدهای رنگی نیز گفته می شود، دارای مدل های مختلفی همچون RGB ,RGBA ,HEX ,HSLA ،HSL می باشد. هر کدام از این مدها یا فرمت های رنگی از ترکیب چند رنگ تشکیل شده اند و کاربرد هر کدام با هم متفاوت می باشد. یکی از جذاب ترین ویژگی CSS3 پشتیبانی از تمام فرمت های رنگی می باشد. 

گوشه‌های گرد (Border Radius)

یکی از باحال ترین و جذاب ترین ویژگی CSS3، ویژگی خمیده یا گرد کردن گوشه های عناصر در صفحات وب می باشد. برنامه نویس قبل از آشنایی با زبان CSS3 و این ویژگی، برای گرد یا خمیده کردن باید کلی کد می نوشت تا بتواند به سختی گوشه های عناصر را گرد یا خمیده نماید.

سایه برای اجسام (Box Shadow)

سایه یا Shadow یکی از ویژگی های دیگر CSS3 می باشد که برنامه نویس می تواند با تعیین مقادیر مناسب به اجسام حالت برجسته، 3 بعدی و سایه  بودن را بدهد. برنامه نویس با نوشتن کد box-shadow این ویژگی را بر روی اجسام اعمال می کند.

سایه برای متن ها (Text Shadow)

برنامه نویس علاوه بر روی اجسام می تواند بر روی متن های مورد نظر خود ویژگی سایه را اعمال نماید.  برنامه نویس می تواند با نوشتن کد text-shadow از این ویژگی استفاده نماید.

انواع گرادیانت (Gradient)

گرادیانت به افکتی گفته می شود که یک رنگ را به رنگ دیگری تبدیل می کند.  برنامه نویس به راحتی می تواند در زمان برنامه نویسی خود، با این ویژگی یک افکت زیبا و جذاب ایجاد نماید.

ساخت اشکال مختلف با CSS3

از نظر من و خیلی از برنامه نویسان، جذاب ترین ویژگی CSS3 ساخت اشکال می باشد که برنامه نویس می تواند اشکال زیر را به راحتی در صفحه خود بسازد و از آنها استفاده نماید.

• مربع
• مستطیل
• دایره
• بیضی
• لوزی
• مثلث با زوایای مختلف
• ستاره 6 پر
• ستاره 5 پر
• 5 ضلعی
• 8 ضلعی
• شکل قفل
• شکل قلب
• شکل بی نهایت
• شکل الماس
• شکل تخم مرغ
• شکل ماه
• شکل ذره بین
• لوگو یین یانگ
• شکل حباب صحبت کن
• شکل مهاجم فضایی یا ویروس

قابلیت های کاربری Css3

CSS3 علاوه بر قابلیت نسخه های پیشین خود، دارای ۹ قابلیت بسیار کاربردی می باشد که css3 را با نسخه های قبلی آن متمایز می کند.

• قابلیت transition یا انتقال

• قابلیت ایجاد تصویر متحرک یا animation 

• قابلیت گوشه نرم یا border-radius

• قابلیت جعبه سایه دار یا box-shadow

• قابلیت ایجاد عناصر دو بعدی و سه بعدی

• دارای قابلیت box-sizing

• پس زمینه و حاشیه های جذاب

• افکت های جذاب برای متن

• قابلیت طراحی ستون های متعدد

تفاوت css و css3 چیست؟

تفاوت های بین CSS3 و CSS شامل موارد زیر می باشد.

مزایایی که CSS3 برای ما ایجاد می کند!

تکنولوژی CSS3 علاوه بر ویژگی ها، قابلیت ها و تفاوت هایی که با CSS دارد، مزایایی را برای ما شما ایجاد می کند.

• طراحی یک قالب وب عالی بدون عکس های با کیفیت
• پشتیبانی کردن تمام مرورگرها از CSS3
• آسان کردن طراحی وب سایت برای برنامه نویس
• ایجاد افکت‌های حرکتی روی عناصر صفحات وب
• مشخص کردن میزان شفافیت عناصر مجزا کردن هر قسمت از قسمت ‌های دیگر
• اجرای سریع وب ‎سایت
• کد نویسی کم با حجم سبک تر

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم