معرفی سایتهای کاربردی برای CSS : قسمت 1

- visibility ٢ mode_comment

با سلام خدمت همه دوستان سون لرنی امروز میخوام تعدادی سایت که در زمینه css به ما کمک میکنن و کدنویسی مارو سریع تر میکنن ، به شما معرفی کنم.این سایت ها رو در دو قسمت برای شما معرفی میکنم.

 

1. Cubic-bezier cubic-bezier اگه یادتون باشه در قسمت transition ها در css3 ، یک خاصیت بنام transition-timing-function وجود داشت که مقادیری رو می پذیرفت ، مانند ease و linear و ....... یکی از این خصوصیت ها cubic-bezierبود که 4 تا مقدار رو میگرفت .این خصوصیت پیشرفته تر از همشونه و با این خصوصیت میشه انواع دیگه رو به راحتی ساخت.کار کردن با این خصوصیت یک مقدار سخت و گیج کننده هست.این سایتی که معرفی کردم کار مارو خیلی راحت میکنه. به این صورت که ما میایم و با استفاده از اون اهرم ها و تنظیماتی که وجود داره ، transition-timing-function مدنظر خودمونو میسازیم و بعد با استفاده از دکمه SAVE اونو کپی میکنیم و در فایل CSS خودمون paste میکنیم.

 

2. Animatable Animatable در این سایت تعدادی Animation قرار داده شده که با hover کردن روی هر کدام از آنها انیمیشن مربوط به آن شکل اجرا میشود. با کلیک کردن بر هر کدام از آنها اطلاعاتی راجع به آن انیمیشن در اختیار ما قرار خواهد گرفت.

 

3. The Web Font Combinator font-combinator با استفاده از این سایت میتوانید ابتدا تنظیماته مورد نظر از قبیل font و size و color و ...را بر روی متن انجام داده و آنرا در مرورگر مشاهده کنید تا به مدل مورد نظر برسید و بعد این مقادیر را در کدهای CSS خود وارد کنید.متن هایی که در این سایت قرار دارند رو نیز میشه تغییر داد و متن مورد نظر خودتونو بنویسید.البته این سایت بیشتر برای متن های انگلیسی هست.

 

4. Border Radius border-radius با استفاده از این سایت میتونیم border-radius مدنظر خودمونو به راحتی با استفاده از چهار عددی که در چهار گوشه شکل قرار داره بسازیم و کد مربوطه رو کپی کنیم و در کدهای CSS خودمون وارد کنیم.

 

5. Button Maker Button Maker با استفاده از این سایت و امکاناتی که در اون قرار داده شده میتونید استایل مورد نظرتون رو به دکمه ای که وجود داره بدید و تغییرات رو عینا مشاهده کنید و بعد از اتمام کار روی اون دکمه کلیک کنید و کدهای مربوطه را کپی کرده و در مقصد paste کنید.

comment دیدگاه کاربران

سلام
من به قسمت پنجم یعنی Button Maker رفتم و کد مربوط به فایل css رو کپی کردم.
حالا کلاس یا ایدی مربوطه رو باید به چه بخشی بدم؟
مثلا ایدی ش رو به باید به کد لینک یا کد تصویر بدم یا چیز دیگه ای؟
ایدش هم با button شروع میشه.

محمد اسفندیاری

دوست عزیز بیشتر برای button به کار میره این سایت ولی برای چیزای دیگه هم میشه ازون استفاده کرد….باید به عنصر مورد نظر class = button بدهید و کار تمامه
برای مثال :
DIV
BUTTon
و ….
اگه حل نشد بگید تا بیشتر توضیح بدم
یا علی

نیاز به لاگین

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