دیجی اسکریپت

سلامی دوباره به شما همراهان دوست داشتنی میهن وردپرس. حالتان خوب است؟ اینبار هم در خدمت شما هستیم با آموزش خاصیت های پرکارد CSS البته قسمت ششم! در قسمت قبل راجب دو خاصیت پرکاربرد که زیبایی خاصی به صفحات سایتمان می بخشد یعنی text-shadow و box-shadow صحبت کردیم. لطفا به آموزش جلسه قبل مراجعه کنید و خوب آن ها را تمرین کنید تا ملکه ذهنتان شود. در این جلسه می خواهیم راجب خاصیت transition با هم صحبت کنیم و به طور کامل یادش بگیریم. با من همراه باشید…

ترنزیشن ها (tarnsition) چه کاری انجام می دهند؟

به طور کلی و خلاصه می توانیم بگوییم transition افکتی است که اجازه می دهد یک عنصر از استایل اول به استایل دوم به تدریج و با وقفه زمانی تغییر کند نه به صورت آنی و لحظه ای.

به تصویر زیر نگاهی بیاندازیذ :

ویژگی property :

از property برای تعیین ویژگی هایی که قرار است transition روی آن ها اعمال شود استفاده می شود. مثلا width ، background ، color و… بیشتر مواقع property را برابر all قرار می دهیم. دقت داشته باشید که property حتما باید مشخص شود.

ویژگی duration :

مدت زمان اجرای transition یعنی مدت زمانی را که می خواهید المان شما از style یک به style دو برسد. مثلا تغییر رنگ از آبی به قرمز در ۵ ثانیه.

نکته ۱ : واحد آن برابر s-ms است.(ثانیه و میلی ثانیه)

نکته ۲ : پیشفرض آن ۰ است که فوری انجام می شود.

ویژگی timing-function :

سرعت و جلوه ی transition را مشخص می کند :

ease : مقدار پیشفرض است. جلوه ی شروع آرام و در انتها آرام.

linear : جلوه ی با سرعت یکنواخت در شروع و پایان.

ease-in : جلوه ی با سرعت کم شروع و با سرعت زیاد به اتمام.

ease-out : جلوه ی با سرعت زیاد شروع و با سرعت کم به اتمام.

ease-in-out : جلوه ی با سرعت کم شروع ، بین انیمیشن کمی سرعت افزایش و با سرعت کم به اتمام.

cubic-bezier : جلوه ی مقادیر دلخواه شما بین ۰ و ۱

ویژگی delay :

ویژگی delay یک مکث قبل از انجام transition مثلا ۵ ثانیه قرار می دهد و بعد اجرا می شود.

نکته ۱ : واحد آن برابر s-ms است.(ثانیه و میلی ثانیه)

نکته ۲ : پیشفرض آن ۰ است یعنی بدون مکث و فوری شروع می شود.

مختصر نویسی transition ها :

می توانیم تمامی ویژگی ها را در یک خط و به صورت مختصر بنویسیم. من هم همین روش را پیشنهاد میکنم. تصویر زیر نحوه استفاده از تمام ویژگی ها را به صورت یکجا نمایش می دهد :

 

نمایش صحیح transition در مرورگرها :

برای اینکه ویژگی transition در تمامی مرورگرها به صورت صحیح کار کند ، نیاز داریم از یک سری قوانین پیروی کنیم. البته اکثرا نسخه های پایین مرورگرها به این قوانین نیاز دارند و مرورگرهای بروز و امروزی آنقدر پیشزفته و مدرن هستند که نیازی به این قوانین ندارند. با این حال برای محکم کاری هم که شده مجیوریم از این قوانین پیروی کنیم تا سایتی که طراحی کردیم کمترین میزان باگ و خرابی را داشته باشد.

مرورگر سافاری به پیشوند -webkit- نیاز دارد.

ie 9 و نسخه های قبلی این ویگی را پشتیبانی نمی کند.

کروم ۲۵ و نسخه های قبلی آن -webkit-

فایرفاکس ۴ تا ۱۵ -moz-

خب دوستان برای این جلسه تا همین جا کافی است… تا بعد…

یک سلام پر انرژی به همراهان دوست داشتنی میهن وردپرس. به جلسه پنجم معرفی خاصیت ها کاربری CSS خوش آمدید. اگر قسمت های قبلی را پشت سر نگذاشته اید حتما همین الان ، قبل از خواندن این قسمت ، به سراغ قسمت های قبلی بروید و انها را خوب یاد بگیرید چون چینش خاصیت ها به ترتیب اهمیت آن ها بوده است و بهتر است ایتدا آن ها را یاد داشته باشید. به هر حال می خواهیم در این قسمت راجب دو خاصیت که زیبایی خاصی را به وبسایت شما اعمال می کنند صحبت کنیم. بله درست حدس زدید! می خواهیم خاصیت های سایه و shadow را با هم یاد بگیریم. آماده هستید؟ پس بزن بریم!

خاصیت box-shadow :

از این خاصیت برای ایجاد سایه برای عناصر و المان های html سایتمان استفاده می کنیم. تصویر زیر را مشاهده کنید تا بهتر متوجه شوید :

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

شماره یک inset :

این مورد اختیاری است یعنی می توانید آن را بنویسید یا از آن صرف نظر کنید. inset سایه را از سایه خارجی به سایه داخلی تغییر می دهد.

شماره دو horizontal :

مقدار افقی سایه را مشخص میکند. horizontal مقدار منفی هم قبول میکند.

شماره سه vertical :

مقدار عمودی سایه را مشخص میکند. vertical مقدار منفی هم قبول میکند.

شماره چهار blur :

blur مقدار تیرگی سایه را مشخص میکند. نوشتنش اختیاری است و مقدار منفی نمی گیرد. منظور از blur همان مات یا محو بودن سایه است.

شماره پنج spread :

میزان گستردگی سایه را مشخص می کند. منظور از گستردگی همان سایز سایه است. spread اختیاری است یعنی می توانید آن را ننویسید.

شماره شش color :

همانطور که از نامش پیداست رنگ سایه را مشخص میکند. جالب است بدانید color هم اختیاری است و رنگ پیشفرضش مشکی است.

چند نکته کنکوری!

۱- مقدار افقی و عمودی سایه اجبار هستند و سایر موارد اختیاری.

۲- می توانیم به المان مورد نظرمان سایه های چندگانه بدهیم که باید آن ها را با , از هم جدا کنیم. به صورت تصویر زیر :

۳- اگر گوشه های عنصری گرد شده باشد یعنی border-radius داشته باشد ، سایه آن ها به همان صورت رسم خواهد شد.

 

خاصیت text-shadow :

با استفاده از خاصیت text-shadow می توانیم به متن ایجاد شده مان سایه بدهیم.

شماره یک horizontal :

فاصله سایه با متن در راستای محور x را مشخص میکند. اگر + باشد به سمت راست و اگر منفی باشد به سمت چپ.

شماره دو vertical :

فاصله سایه با متن در راستای محور y را مشخص میکند. اگر مقدار مثبت باشد حرکت به سمت پایین و اگر مقدار منفی باشد حرکت به سمت بالا.

شماره سه blur :

blur میزان مات یا محو شدن سایه را مشخص می کند. این مورد اختیاری است. مقدار پیشفرضش ۰ است. اگر تعیین نشود ۰ اعمال میشود. اگر ۰ باشد لبه ی سایه کاملا واضح و تیز است و هر چه بیشتر شود لبه سایه مات تر و محوتر است.

شماره چهار color :

رنگ سایه را مشخص میکند.

چند نکته کنکوری!

۱- می توان چند سایه به متن داد. کافی است سایه ها با , از هم جدا شوند. تصویر زیر را ببینید :

۲- بهتر است سایه تان را به متن پاراگراف اعمال نکنید چون خوانایی را پایین می آورد. بهتر است برای عنوان ها از این خاصیت استفاده کنید.

 

خب! این قسمت هم به پایان رسید. حتما خوب موارد گفته شده را تمرین کنید. سایه ها می توانند در طراحی سایت و زیبایی آن نقش بسیار زیادی ایفا کنند. پیشنهاد میکنم حتما از آن ها به اندازه ی مناسب استفاده کنیم. تا بعد….