تفاوت css و css3

تفاوت css و css3 چیست ؟ در این مقاله با ما همراه باشید چراکه اطلاعات بسیار خوبی را در اختیار شما قرار خواهیم داد . اولین گزینه که نظر کاربر را هنگام رویارویی و ورود به یک وب سایت جلب می‌کند بدون شک طراحی ظاهری آن است . به جرات می‌توان گفت زیبایی بصری یک سایت در وهله اول از عملکرد آن بسیار مهم‌تر است و اگر بتوانیم در نگاه اول ، با طرحی زیبا نظر کاربر خود را جلب کنیم می‌توانیم امیدوار باشیم که بازدید کننده می‌تواند در ادامه تبدیل به یک مشتری هدف شده و همچنین دوباره به وب سایت ما بازگردد .

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

برای فرانت‌اند کار ، زبان css اصلی ترین ابزار برای طراحی قالب وب‌سایت است و بدون این زبان به هیج عنوان نمی‌توان ظاهر جذاب و گرافیکی مورد انتظار را ایجاد کرد . زبان css یک زبان برای طراحی سایت و زبان برنامه نویسی نیست . ابزارهایی همچون بوت استرپ و Tailwind و … همگی با زبان css توسعه پیدا کرده‌اند لذا تسلط بر این زبان بسیار مهم و حیاتی است و هراندازه که زمان خالی داشتید بروی یادگیری و تمرین این زبان صرف کنید .

زبان css یک تحول بسیار عظیم در طراحی قالب‌های سایت ، اپلیکیشن حتی برنامه‌های ویندوز و … بود . هم اکنون شما می‌توانید با وارد شدن به بخش‌های طراحی در سیستم عامل خودتان ، فایل‌هایی با پسوند css را مشاهده کنید . این زبان درحال حاضر در نسخه 3 یعنی Css3 درحال ارائه است و قبلا نسخه 2 از این زبان روی کار بود .

اکنون قصد داریم تا برای طراحان عزیز که با زبان css سروکار دارند و یا به تازگی شروع به یادگیری این زبان نموده‌اند ، تفاوت‌های اساسی بین css و css3 را بصورت منظم شرح دهیم . همچنین اگر علاقمند به یادگیری این زبان به شکلی فوق العاده کامل و یکبار برای همیشه هستید ، می‌توانید از دوره آموزشی مجموعه ما استفاده کنید :

همانطور که گفته شد زبان Html چارچوب و اسکلت یک وب‌سایت را تشکیل می‌دهد و Css به عنوان پوست و مو و در نهایت لباس یک وب سایت عمل می‌کند . Css امروزه امکانات زیادی در اختیار ما قرار داده است ولی از ابتدا همه این ویژگی‌ها را در اختیار خود نداشت و همانند بقیه زبان‌های طراحی یا برنامه نویسی ، براساس نیاز روز و به مرور بروزرسانی شده است .

تاریخچه زبان Css را مختصر بشناسیم

قبل از بررسی تفاوت css و css3 نگاهی خیلی کوتاه به تاریخچه خود Css داشته باشیم اما نه اندازه‌ای که حوصله شما سر رود ! اولین نسخه css در سال 1996 طراحی شده و تحت عنوان نسخه css1 منتشر شد . این نسخه ویژگی هایی برای تراز بندی متون و فاصله عناصر در صفحه ، لیست‌ها و همچنین تعیین نوع فونت را ممکن کرده بود . در این نسخه برخی از دستورات مهم و ضروری نیز مثل تعیین رنگ ، قراردادن تصویر پس زمینه و یا تعیین مکان یک تگ از نوع html برای قرار گرفتن در سمت راست و چپ صفحه وب وجود نداشت.

دو سال بعد از ارائه نسخه 1 یعنی در سال 1998 میلادی ، css جدید با نسخه Css2 منتشر شد . این نسخه امکانات جدیدتری که مورد نیاز و انتظار طراحان بود به Css اضافه شد . برای مثال استایل بندی جداول ، تعیین مکان عناصر در جهات مختلف ، Selector ها و بسیاری امکانات دیگر! در این نسخه پشتیبانی از استایل‌های اختصاصی برای رسانه‌ها مثل پرینتر و دستگاه‌های شنیداری و همچنین امکان استفاده ازفونت های قابل دانلود فراهم شد .

به دلیل اینکه پیاده سازی برخی از استانداردهای Css2 مشکل بود نسخه اصلاح شده‌ای با نام Css2.1 منتشر شد و سپس مرورگرها نیز از نسخه Css2.1 پشتیبانی کردند و امروزه وقتی از Css2 صحبت می‌شود در حقیقت همان نسخه اصلاح شده یعنی Css2.1 مدنظر است .

یک سال بعد یعنی در سال 1999 اولین پیش نمایش Css3 منتشر شد کار بر روی Css3 به مدت چهار سال ادامه داشت . برخلاف Css2 که تنها از یک سند واحد تشکیل شده بود ، در Css3 مشخصات در چندین سند مختلف تحت عنوان ماژول ، بصورت جداگانه تقسیم شد که این امر باعث افزایش سرعت و ساده‌تر شدن Css3 نسبت به Css2 شده است .

اولین تفاوت css و css3 – پشتیبانی از فونت‌های جدید در  Css3

در نسخه‌های Css1 و Css2.1 طراحان سایت تنها می‌توانستند از فونت‌هایی استفاده کنند که مطمئن بودند در تمام دستگاه‌ها بصورت یکسان و صحیح نمایش داده می‌شوند اما با رونمایی Css3 ، تحول عظیمی برای پشتیبانی از فونت‌ها در دنیای وب رخ داد . طراحان از این پس مجبور نبودند تا از فونت‌های مطمئن استفاده کنند .

با استفاده از تغییرات جدید در Css3 فرانت‌اند کاران قادر هستند به راحتی با استفاده از دستور font-face@ امکان استفاده از  فونت‌هایی را داشته باشند که در سیستم کاربر ذخیره نشده بود و این فونت‌ها داخل پروژه اصلی قرار گرفته است . این تغییر مسبب زیبایی بیشتر قالب‌های سایت نیز شد . برای نمونه یک مثال ساده از نحوه استفاده از font-face@ را  در زیر مشاهده می‌کنید :

@font-face {
    font-family: name_delkhah;
    src: url(sansation_light.woff);
}

div {
    font-family: name_delkhah;
}

مبحث فونت در نسخه 3 تنها به این موضوع ختم نشد ! یکی از قابلیت‌های جذاب در Css3 در مبحث فونت ، پشتیبانی از انواع فرمت‌های مختلف است که می‌توان از خانواده فونت‌هایی با فرمت مختلف استفاده کرد . format هایی که می‌توان در پروژه‌های css3 استفاده کرد به شرح زیر است :

• (TrueType Fonts (TTF
• (OpenType Fonts (OTF
• (The Web Open Font Format (WOFF
• (The Web Open Font Format (WOFF 2.0
• SVG
• (Embedded OpenType Fonts (EOT

فرمت TTF یا همان TrueType Fonts که در داخل سیستم عامل هایی مثل ویندوز بخوبی پشتیبانی می‌شود را نیز می‌توان داخل پروژه‌های طراحی سایتی که با زبان css نسخه 3 طراحی شده است بدون مشکل استفاده کرد . محبوب‌ترین و متداول‌ترین فرمتی که برای فونت‌های پروژه وب استفاده می‌شود فرمت WOFF و همچنین WOFF 2.0 است .

Selector های پیشرفته در Css3

در Css2 طراحان فقط قادر بودند از نام کلاس ( Class ) ، آیدی ( id ) ، نام تگ ( h1 ) ، قوانین ترکیبی ( div > h1 ) ، صفت ( href ) ،  وضعیت  و سلکتور عمومی استار ( * ) برای انتخاب عناصر و استایل دهی به آن‌ها استفاده کنند . اما با معرفی Css3 ، سلکتورهای پیشرفته به عرصه طراحی وارد شدند و طراحان با توانایی و قدرتی بیشتر انتخاب عناصر و استایل دهی به آن‌ها را کنترل کردند .

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

element[name ^="string"]  صفت name  عنصر باید حتما با string شروع شود

element[name $="string"] صفت name عنصر باید به string ختم شود

element[name *="string"] صفت name عنصر حاوی کلمه string باشد

element[name|= "string"] صفت name عنصر برابر string باشد (در Css2 وجود داشت)

منظور از string یعنی رشته ! رشته به این معنی است که شامل حروف انگلیسی باشد . برای مثال عبارت ” Header__Div ” یک نام کلاس است و با رشته شروع شده است اما عبارت ” 12Div_Name ” توسط عدد شروع شده است و اصطلاحا Numeric است . البته که خود عبارت ” 12Div_Name ” یک رشته است . البته نامگذاری که در ابتدای آن شماره وجود داشته باشد صحیح نیست و این صرفا یک مثال برای روشن شدن بحث string است . در برنامه نویسی از بحث string یا همان رشته بسیار استفاده می‌شود .

انتخاب عنصرهای داخلی یک عنصر

یکی از دردسرهای اصلی در طراحی ، این است که بتوانیم المان‌ها و تگ‌های داخل یک تگ والد را انتخاب کنیم . یعنی اگر یک تگ Div اصلی داریم ، بتوانیم عناصر و Div های دیگری که داخل آن هستند را به راحتی و بدون اینکه صفت class یا id به فرزندان آن نسبت دهیم را استایل دهی کنیم . در css3 انتخابگرهایی رونمایی شدند که با قاطعیت می‌توان گفت تا سالهای زیادی راه‌گشا بوده و کافی خواهند بود چراکه انعطافی حیرت‌انگیز دربخش سلکتورها ایجاد کردند .

element: first-child انتخاب اولین فرزند موجود در داخل element (در Css2 وجود داشت)

element: last-child انتخاب آخرین فرزند یک عنصر

element: nth-child (n) انتخاب n امین فرزند یک عنصر

element: nth-last-child (n) انتخاب n امین فرزند عنصر از آخر

element: nth-last-child (odd) انتخاب فرزندان فرد

element: nth-last-child (even) انتخاب فرزندان زوج

انتخاب کننده‌هایی که در دسته ” Child ” هستند برای انتخاب عناصر مشابه استفاده می‌شوند یعنی اگر شما یک تگ Ul برای لیست داشته باشید و داخل آن تمامی تگ‌ها از نوع Li هستند و هیچ تگ دیگری در این بین نیست ، کاربردی هستند . اما اگر در این بین یعنی در لا‌به‌لای تگ‌های Li مثلا چند تگ P نیز وجود داشته باشد ، دیگر امکان استفاده درست از انتخابگرهای Child وجود ندارد و خوشبختانه css3 یک خانواده جالب دیگر برای این انتخاب‌‌ها رونمایی کرد که در دسته ” Type ” قرار دارند .

<ul>
	<li>List Item One</li>
	<li>List Item Two</li>
	<p>Some Text Here</p>
	<li>List Item Three</li>
	<p>Seo90 Css3</p>
</ul>

به مثال بالا دقت کنید . دقیقا مشابه با چیزی که توضیح دادیم . انتخاب عناصر موجود با همان نوع ؛ برای مثال انتخاب اولین عنصر از نوع p و یا آخرین عنصر از نوع p و یا n امین عنصر از نوع p از اول یا از آخر و … در بین تگ‌های غیر مشابه در یک بخش !

element: first-of-type

element: last-of-type

element: nth-of-type (n)

element: nth-last-of-type (n)

اگر در مورد تفاوت‌های بین nth-child و nth-of-type دچار شبه هستید می‌توانید از این صفحه ” تفاوت nth-child و nth-of-type در css ” دیدن کنید . توضیح کامل و دقیق دررابطه با تفاوت عملکرد این دو انتخابگر داخل مقاله مربوطه به شکل دقیق شرح داده شده است .

خصوصیات کادر ( Border ) در Css3

تفاوت css و css3 در بخش خصوصیات کادر یا همان border ها را نیز بشناسیم . یکی از ویژگی‌های جدید که در Css3 اضافه شد امکان گرد کردن گوشه های عناصر بود ( ایجاد radius ) البته در Css2 نیز امکان گرد کردن گوشه‌های عناصر وجود داشت ولی برای این کار باید کد های زیادی را می‌نوشتیم که کمی پیچیده بود اما در Css3 تنها با یک کد ساده میتوان این کار را انجام داد .

border-radius: 15px  این دستور روی هر عنصری که دارای عرض و ارتفاع و همچنین background یا border باشد ، هر 4 گوشه عنصر مورد نظر را به اندازه 15 پیکسل گرد خواهد کرد که البته می‌توان بجز واحد px ( پیکسل ) از واحدهای rem و همچنین % نیز استفاده کرد .

علاوه بر ویژگی گردکردن و نرم کردن گوشه‌های یک عنصر ، خصوصیات دیگری نیز در زمینه کادر اطراف یک عنصر اضافه شده است که در زیر به آنها اشاره شده است . خصوصیاتی مثل border-image-slice ، border-image ، border-image-outset و … که بسته به طراحی پروژه‌های خاص می‌بایست از آنها استفاده کرد . البته در این بین دستورات border-radius و همچنن دستور border-image ( البته بشرط استفاده از مشتقات همراه آن ) کاربردی هستند و بقیه دستورات به ندرت مورد استفاده قرار خواهند گرفت .

• border-radius
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-stretch
• border-image

همانطور که بالاتر اشاره شد به کاربردن دستور border-image به تنهایی کافی نخواهد بود و باید دستورات تکمیلی آن برای مثال border-image-width را نیز به کار گرفت . دستور border-image سبب خواهد شد تا بجای استفاده از رنگ‌های ساده برای حاشیه تصویر یا هر باکس خاص ، از تصویر نیز استفاده کنید ( البته تصاویری با ابعاد و شرایط خاص که درصورت استفاده درست ، بسیار نتیجه جذابی خواهد داشت . می‌توانید یک نمونه مثال را در صفحه ” The border-image Property ” مشاهده کنید .

خصوصیات جدید اضافه شده در پس زمینه

یکی دیگر از خصوصیات اضافه شده در Css3 که مسبب ارائه طرح‌هایی بسیار جذاب شد ، درمورد پس زمینه یا همان Backgrounds و امکان استفاده از چندین عکس بعنوان پس زمینه است چراکه قبلا تنها می‌توانستیم از یک عدد تصویر بعنوان Background استفاده کنیم اما اکنون در Css3 می‌توانیم توسط دستورات جدید ، اولا تصویر یا تصاویر پس زمینه را کنترل کنیم و دوما تعیین کنیم که تصاویر در کدام بخشی از منطقه موردنظر نمایش داده شود .

• background-repeat
• background
• background-attachment
• background-clip
• background-origin
• background-size

دستوراتی همچون background-clip و background-origin برای طراحی‌های بسیار زیر و دقیق مورد استفاده قرار خواهند گرفت و شاید شما بعنوان طراح قالب ، به ندرت به این دستورات نیاز داشته باشید اما زمانی که با نحوه کار آنها آشنایی داشته باشید ، مطمئنا برایتان جذاب خواهد بود که بتوانید خصوصیت background را بیشتر و دقیق‌تر کنترل کنید .

ایجاد سایه برای عناصر ( Shadows )

دیگر تفاوت css و css3 در این موضوع است ! بحث سایه . در Css3 برای زیباسازی بیشتر عناصر ، قابلیت ایجاد سایه برای عناصر تحت عنوان Box Shadow اضافه شده که با این ویژگی جدید می‌توان سایه‌های جذابی به عناصر اعمال کرد . برای مثال می‌توان باکمی خلاقیت و ذوق ، حالت سه بعدی برای المان‌ها ایجاد کرد به شکلی که نمای هرعنصر به نوعی جلوه کند که گویا از صفحه شما به شکلی خاص ، جدا شده است .

نمونه ساده‌ای از سایه یا همان shadow را در باکس بالا مشاهده می‌کنید . برای دستور shadow نیز می‌توان دستورات مختلفی را نوشت . حالت کلی برای دستور shadow به شکل زیر است :

box-shadow: 10px 10px 5px lightblue;

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

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

همانطور که بالاتر مطالعه کردید ، امکان استفاده از سایه‌ها در Css3 برای المان‌هایی که دارای عرض و ارتفاع هستند ایجاد شده بود اما علاوه بر ایجاد سایه برای عناصر ، با استفاده از خصوصیات Text Shadow نیز می‌توان برای متن سایه‌های  جذاب ایجاد کرد . این دستور نیز شباهت زیادی به box-shadow دارد .

h1 {
  text-shadow: 0 0 3px #FF0000;
}

استفاده از دستور text-shadow بسیار کاربردی نیست و تنها در پروژه‌های خاص خصوصا پروژه‌هایی که مربوط به دسته‌بندی هنری هستند دیده می‌شود و در پروژه‌های عمومی مثل فروشگاه اینترنتی و سایت‌های شرکتی و … کاربرد به مراتب کمتری دارد .

تفاوت css و css3 در ستون بندی

یکی دیگر از موارد تفاوت css و css3 در ستون بندی‌ها است ! در Css3 میتوان تعداد و اندازه عرض ستون‌ها را مشخص کرد این بدین معناست که شما می‌توانید محتوای یک بخش را در چند ستون متفاوت و در اندازه های مختلف نمایش دهید . علاوه بر این قادر هستید فاصله بین ستون‌ها را نیز به دلخواه تغییر دهید . همچنین می‌توان خطوطی به عنوان کادر بین ستون‌ها ایجاد کرد و رنگ و اندازه آن را تغییر داد .

درحالت نرمال ، اگر شما شروع به نوشتن متنی کنید ، این متن از جهتی که صفحه شما شروع می‌شود ( راست چین یا چپ چین بودن سایت ) شروع شده و هنگام رسیدن به انتهای صفحه ، متن به خط دوم خواهد شکست و به همین ترتیب کل متن در یک ستون عمودی به سمت پایین صفحه حرکت خواهد کرد ! اما می‌توان این متن را در داخل چند ستون نمایش داد .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.

همانطور که در تصویر بالا مشاهده می‌کنید ، می‌توان به کمک دستوراتی همچون column-count و column-width و column-gap ، محتوای یک قسمت را نه صرفا در یک ستون ، بلکه در تعداد ستون‌های دلخواه نمایش داد . دقیقا مثل نوشته‌هایی که در روزنامه‌ها و در چندین ستون چاپ می‌شوند .

column-width اندازه ستون ها را مشخص میکند

column-count تعداد ستون ها را مشخص میکند

column-gap فاصله بین ستون ها را مشخص میکند

column-rule-color رنگ کادر بین ستون ها را مشخص میکند

column-rule-style استایل کادر بین ستون ها را مشخص میکند (solid, dotted, double, …)

column-rule-width ضخامت کادر بین ستون ها را مشخص میکند

ویژگی column-count را بهتر است برای تگ‌‎های p و قسمت‌های متنی استفاده کنید چراکه خروجی مناسبی را خواهید داشت البته که استفاده از column-count برای هر پروژه طراحی وب مناسب نیست و بسته به طرح کلی قالب سایت باید تصمیم بگیرید که آیا لازم است از column-count و سایر مشتقات آن استفاده کنید یا خیر اما اطلاع داشته باشید که دستوری تحت عنوان column-count وجود دارد که می‌توان توسط آن ، تقسیم بندی ستونی را به شکلی تراز شده و هوشمند انجام داد .

گرادیانت ( GRADIENT ) در Css3

کسانی که با نرم افزارهای گرافیکی مثل فتوشاپ سروکار دارند ، نام ویژگی گرادیانت را حتما شنیده‌اند . به کمک این وِیژگی جدید در Css3 میتوان یک افکت رنگی ساده را به یک پس زمینه بسار زیبا و ترکیبی از رنگ‌ها تبدیل کرد .

همانطور که در تصویر بالا مشاهد می‌کنید ( البته با افکتی نرم ) GRADIENT متشکل از حداقل 2 طیف رنگی است ، که به تدریج از یک رنگ شروع شده و در پایان به یک رنگ خاص دیگری ختم می‌شود .  البته که میتوان در بین این دو رنگ ، چندین رنگ دیگر نیز استفاده کرد . همچنین می‌توان جهت ایجاد این افکت ، زاویه حرکت و ترکیب رنگ‌ها را نیز تنظیم کرد که با چه زاویه و به سمت چه جهتی این افکت ایجاد شود که یکی از جذاب ترین آیتم‌ها در تفاوت css و css3 نیز می‌باشد .

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

دستورات بالا نمونه‌هایی از linear-gradient هستند که می‌توان با کمی ذوق و البته عدم زیاده‌روی ، ترکیب رنگ‌هایی بسیار جذاب را ایجاد نمود . البته علاوه بر linear-gradient دستوری نیز تحت عنوان radial-gradient وجود دارد که به شکل دایره‌ای و از مرکز باکس مدنظر شما ، رنگ‌ها با یکدیگر ترکیب خواهند شد که برخلاف مدل linear-gradien است که ترکیب رنگ‌ها در آن خطی بود . حالت radial-gradient بسیار کم کاربرد است .

اکنون که صحبت از رنگ و پس زمینه است بد نیست اطلاع داشته باشد که CSS3 از رنگ‌های RGBA، HSLA، HSL نیز پشتیبانی می‌کند . کنترل رنگ به روش HSLA، HSL به نسب جدیدتر است که در نسخه 3 می‌توانید از آن لذت ببرید .

ویژگی جذاب transition

یکی از مهم‌ترین ویژگی‌هایی که در Css3 اضافه شده است امکان استفاده از ترنزیشن ( transition ) بود . این خاصیت به طراحان وب اجازه می‌دهد مقادیری از خصوصیت‌های یک عنصر را به تدریج و طی زمان یا مدتی مشخص تغییر دهند . این دستور شامل یک دستور اصلی و برخی مشتقات به شکل زیر است :

transition

transition-delay

transition-duration

transition-property

transition-timing-function

دستور transition مسبب ایجاد نرمی در تغییر خصوصیات المان ها خواهد شد . برای مثال اگر قصد داریم تا هنگام Hover شدن روی یک عنصر ( hover یعنی زمانی که با اشاره گر موس روی یک المان قرار می‌گیریم ) مثلا رنگ پس زمینه آن از قرمز به مشکی تغییر کند ، اگر دستور را به شکل زیر بنویسیم :

div:hover {
  background-color: #212121;
}

هنگام هاور شدن ، تغییر رنگ از قرمز به مشکی ، درلحظه و بصورت ناگهانی انجام خواهد شد اما اگر دستور به شکل زیر توسعه پیدا کند :

div:hover {
  background-color: #212121;
  transition: all 2s ease;
}

در این حالت در مدت زمان 2 ثانیه این تغییر رنگ انجام خواهد شد و درنتیجه یک حالت نرم برای تغییر رنگ خواهیم داشت . در مثال مشابه می‌توان اندازه عرض و ارتفاع و حتی شکل یک عنصر را به تدریج و در یک تایم مشخص به اندازه و شکل دیگری بصورت نرم تغییر وضعیت داد .

Animation ها در CSS3

به یکی از جذاب‌ترین موارد در تفاوت css و css3 خوش آمدید ! یکی از قابلیت های بسیار جذاب در Css3 انمیشن ها هستند که به طراحان امکان ایجاد عناصر متحرک در صفحات وب را خواهد داد . توسط یک انمیشن می‌توان استایل یک عنصر دلخواه را در مدت زمانی مشخص ، به استایلی دیگر و حتی به دفعات دلخواه تغییر داد .

انیمیشن ها را باید به شکلی ظریف و هوشمندانه به کار برد . در سایت‌های مختلف نمونه انیمیشن های متعددی وجود دارد و البته کدهای مربوط به ساخت انیمیشن که می‌توانید از آن‌ها داخل سایت خود استفاده کنید . نمونه دستورات ساخت انیمیشن به شکل زیر است :

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

animation

دستور اصلی برای ساخت و ایجاد انیمیشن دستور @keyframes است . تصور کنید که قصد داریم تا یک دستور انیمیشن برای یک Div ایجاد کنیم که رنگ آن از قرمز به زرد تغییر کرده و به شکل مرتب این اتفاق تکرار شود پس باید ابتدا انیمیشن را تعریف کرده و سپس به هریک از المان هایی که قصد داریم تا این انیمیشن روی آن اجرا شود ، این انیمیشن را اختصاص دهیم :

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

دررابطه با انیمیشن ها صحبت بسیار زیاد است و برای داشتن انیمیشن‌های جذاب لازم است تا کمی باتجربه بوده و به نسبت نمونه‌های بیشتری را برای خودتان آزمون و خطا کرده باشید .

پشتیبانی از ویژگی واکنشگرایی ( Responsive )

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

شاید اگر برخی سایت‌های قدیمی را مشاهده کنید ، هنگام بازکردن آنها در گوشی موبایل ، لازم است تا داخل صفحه زوم کنید تا بتوانید متون و سایر محتوای صفحه را بخوبی مشاهده کنید . اما اگر سایت ما یعنی سئو نود را داخل تلفن همراه خود باز کنید ، خواهید دید که داخل دستگاه شما ، نمای همه عناصر صفحه بسیار منظم و در زیر یکدیگر قرار دارند و اصلا نیازی به زوم کردن داخل صفحه نیست . در حقیقت خاصیت Responsive در سایت ما بخوبی نهادینه شده است . نسخه 2 زبان css از این ویژگی پشتیبانی نمی‌کرد اما در نسخه 3 می‌توانیم بخوبی وب سایت‌های ریسپانسیو طراحی کنیم . نمونه دستورات Responsive به شکل زیر هستند :

@media only screen and (max-width: 600px) {
  body {
    background-color: #414141;
  }
}

شرایطی همچون max-width و min-width به شما اجازه خواهند داد تا بتوانید با توجه به حداکثر یا حداقل عرض نمایشگر ، نحوه نمایش و یا تغییر وضعیت هر عنصر را تغییر دهید . ویژگی ریسپانسیو ، ازجمله مهم‌ترین و کاربردی‌ترین ویژگی جدید در Css3 بود که مسبب طراحی سایت‌های شکیل و منظم است .

امروزه برای ایجاد واکنشگرایی در وب سایت ، ابزارهایی تحت عنوان فریمورک بر بستر زبان طراحی Css ایجاد شده است تا بتوانیم بدون درگیر شدن با کدهای بسیار ، یک سیستم استاندارد و پذیرفته شده در سراسر دنیا را برای طراحی سایت استفاده کنیم . فریمورک بوت استرپ یکی از این ابزارها است که دوره آموزش کامل آن نیز در سئو نود تدریس شده است .

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

فیروز بیگلری ، 10 سال است که در زمینه برنامه نویسی وب سایت و همچنین سیستم های عامل فعالیت می کنم . متخصص وردپرس ، PHP کار ، علاقمند به فرانت اند ، تولید محتوا و سئو

اشتراک گذاری محتوا