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

نسخه های CSS

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

  • نسخه CSS1:

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

  • نسخه CSS2:

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

  • نسخه CSS3:

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

 

CSS3 چیست؟

 

CSS | بی لرن

 

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

 

ویژگی های CSS3

 

ویژگی های CSS3 |بی لرن

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

بنر آموزش رایگان html و css | بی لرن

 

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

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

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

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

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

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

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

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

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

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

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

  • رابط کاربری (User Interface) بودن

 

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

 

تفاوت css3 با css | بی لرن

 

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

 

CSS3 CSS
انتخاب پیشرفته تگ های HTML محدود بودن انتخاب تگ های HTML
پشتیانی از تمام فرمت های رنگی (قدیمی و جدید) فرمت های رنگی محدود
گرد کردن گوشه عناصر با کد ساده گرد کردن گوشه عناصر با کد نویسی زیاد
ساخت افکت زیبا امکان ساخت افکت زیبا وجود ندارد
طراحی تعداد زیاد اشکال ساده، پیچیده و خیلی خاص طراحی محدود اشکال ساده
بارگذاری سریعتر صفحات سرعت بارگذاری صفحات، پایین می باشد
کاهش زمان برای طراحی صفحات وب برای طراحی صفحات وب زمان زیادی لازم می باشد
دارای بخش های مجزا به نام ماژول نداشتن ماژول
دارای ویژگی box-sizing برای پیدا کردن اندازه صحیح عناصر پشتیبانی نکردن از مدهای رنگی RGBA ، HSLA ، HSL
پشتیبانی از ایجاد چند ستونی کردن متن ها پشتیبانی از تک ستونی بودن متن ها
افکت های متنی  

 

مزایا و معایب CSS3

 

مزایا و معایب CSS3 | بی لرن

 

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

 

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

 

سخن پایانی

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

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