ایجاد استایل های زیبای CSS بدون کد نویسی

600 بازدید
چهارشنبه ۸ اردیبهشت ۱۳۹۵
ایجاد استایل های زیبای CSS بدون کد نویسیReviewed by جواد نبوی on Apr 27Rating: 3.5

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

CSS بدون کد نویسی

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

استایل های زیبای CSS بدون کد نویسی

برای ایجاد استایل های زیبای CSS بدون کد نویسی, سایت های زیادی وجود دارند. اما در این مطلب قصد داریم سایتی را به شما معرفی کنیم که امکانات بسیار خوب و جذابی را برای خلق استایل های CSS بدون کد نویسی ارائه می دهد. سایت CSSmatic سایتی است که به شما اجازه خلق استایل هایی مانند Gradient, Border radius, Noise Texture و Box Shadow را بدون یک خط کد نویسی, می دهد.

CSS بدون کد نویسی

برای شروع کار وارد سایت CSSmatic شوید. پس از ورود به این سایت, ۴ باکس آبی رنگ می بینید که هر کدام برای ایجاد استایل خاصی است. مثلا اگر می خواهید یک گرادینت ایجاد کنید کافیست روی باکسی کلیک کنید که عنوان Gradient Generator دارد. سپس وارد صفحه ای می شوید که تنظیمات مربوط به گرادینت مورد نظرتان را می توانید انجام دهید. سپس با کپی کردن کدی که سایت به شما میدهد, میتوانید از این گرادینت در صفحه وب خود استفاده کنید.

نکته جالب دیگری که در مورد این سایت وجود دارد این است که برای گرادینت, به شما کد Sass نیز می دهد.

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

CSS بدون کد نویسی

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

بدین منظور ابتدا روی یکی از طرح های پیشفرض که دارای دو رنگ می باشند کلیک کنید تا تنظیمات آن نمایان شود. این به دلیل آن است که تنظیمات ابتدایی به ساده ترین شکل ممکن باشد تا بتوانید هر طور دوست دارید آن را تغییر دهید. به طور مثال من روی اولین گرادینت ردیف بالا از سمت راست کلیک می کنم.

CSS بدون کد نویسی

حال باید از قسمت پایینتر یعنی بخشی که نوار گرادینت در آنجا قرار دارد, گرادینت دلخواهمان را بسازیم.

CSS بدون کد نویسی

در این نوار, اگر با فتوشاپ آشنایی داشته باشید احتمالا می دانید باید چه کار کنید. اما اگر نحوه کار را نمیدانید, ما توضیح میدهیم. دو دایره در بالا و دو دایره در پایین این نوار وجود دارد. دو دایره بالایی مربوط به نقطه توقف تاری تصویر (Opacity) است. دو دایره پایینی هم مربوط به نقطه توقف رنگ است. با جابجا کردن این دایره ها نقطه توقف رنگ ها تغییر می کند و درصد هر رنگ تغییر می کند. کافیست دایره ها را جابجا کنید و نتیجه را ببینید.

علاوه بر این, برای انتخاب رنگ ها باید روی هر کدام از دو دایره پایینی کلیک کنید تا جعبه رنگ باز شود. سپس رنگ مورد نظرتان را انتخاب نمایید.

همچنین در سمت راست نوار بالا, یک دکمه وجود دارد که با کلیک روی آن, جای دو رنگ گرادینت عوض می شود. به علاوه, برای اضافه کردن رنگی جدید, کافیست کمی پایینتر از نوار گرادینت, روی فضای خالی کلیک کنید تا یک دایره رنگی جدید اضافه شود.

در قسمت پایینتر هم تنیظمات دیگری وجود دارد که میتوانید آنها را امتحان کنید تا با نحوه کارشان آشنا شوید.

در نهایت و پس از انجام همه ی تنظیمات, در سمت راست یک باکس وجود دارد که کد های سی اس اس مربوط به گرادینت شما در آن قرار گرفته. این کد ها را کپی کنید و وارد فایل استایل قالب یا پروژه مورد نظرتان کنید.

CSS بدون کد نویسی

انجام تنظیمات مربوط به استایل های دیگر نیز در این سایت بسیار آسان است و کافیست وارد صفحه مربوط به آنها شوید تا با ایجاد استایل دلخواهتان و کپی کردن کد CSS آن, در صفحه وب دلخواهتان استفاده کنید.

از جمله سایت های دیگری که در این زمینه بسیار مفید هستند می توان به CSS3maker اشاره کرد که حتی امکانات بیشتری نسبت به CSSmatic برای ایجاد استایل های CSS بدون کد نویسی دارد. اما نقطه قوت CSSmatic نسبت به CSS3maker تنظیمات کامل تر آن برای ایجاد گرادینت و استایل های دیگر است.

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *