ارسال: #1

15 ابزار CSS مبتنی بر وب برای طراحان وب


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

اگر شما HTML یا CSS را نمی شناسید و می خواهید یک وب سایت داشته باشید، Templatr می توانید برای چند ثانیه از طرح شما استفاده کنید .
بسیاری از طرح های ممکن شما می توانید انتخاب کنید، تصاویر و سایر عناصر گرافیکی و بسیاری از موارد دیگر را آپلود کنید.

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



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

<کلاس IMG = "aligncenter اندازه کامل فایل wp-تصویر-62154" عنوان = "CSS ژنراتور الگو است" src = "6.jpg" دگرساز = "" width = "570" height = "285" srcset = "https:/1stwebdesigner.com/wp-content/uploads/2012/01/Untitled-2src = "7.jpg 570w، https:/1stwebdesigner.com/wp -content/ارسال/2012/01/بدون عنوان-2-480x240src = "8.jpg 480W، 150W https://1stwebdesigner.com/wp-content/up...-150x75src = "9.jpg، https://را 1stwebdesigner .com/wp-content/uploads/2012/01/Untitled-2-65x33src = "10.jpg 65w، https:/1stwebdesigner.com/wp-content/uploads/2012/01/Untitled-2-282x141src = "11.jpg 282w "اندازه = "(حداکثر عرض: 570 پیکسل) 100vw، 570px"/>

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



دیگران: Firdamatic ، پورتال CSS ، CSS Creator ، ژنراتور چیدمان و ژنراتور چیدمان CSS.
ابزار Grid

سیستم گرید متغیر ممکن است یکی از بهترین سیستم های شبکه ای است که می توانید در اینترنت پیدا کنید. این اجازه می دهد تا شما به سرعت یک شیوه CSS برای وب سایت خود تولید کنید و بر اساس 960gs است، که ما کمی بیشتر از جاده بازبینی خواهیم کرد.

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



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

این ابزار به شما امکان پیش نمایش سیستم شبکه قبل از دانلود قالب کاملا کاربردی را می دهد.

Gradinator

960gs یک ژنراتور شبکه نیست، اما شما می توانید مقدار زیادی از سیستم های شبکه را از آن یاد بگیرید. برخی از قالب هایی که می توانید دانلود کنید وجود دارد و شما همچنین می توانید برخی از نمونه هایی از وب سایت هایی را که براساس شیوه های پیش فرض آنها ساخته شده است را مشاهده کنید. شما می توانید برخی جاوا اسکریپت های جاوا را پیدا کنید - adaptive.css باور نکردنی است و هر جاذبه دیگر مشابه هر روز هفته را می بیند - و ببینید که شبکه چگونه روی صفحات مختلف کار می کند.

960gs

دیگران: Generator Grid CSS Generator و CSS Grid Calculator.
ابزار برای رنگ های CSS

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

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

بیش از 11،000 طرح رنگ موجود است (همه رایگان) و شما حتی می توانید گزینه ای برای سفارشی کردن آنها. اگر شما یک حساب کاربری ایجاد کرده اید، می توانید طرح های رنگی خود را از انتخاب انتخاب کنید و دیگران را در وب سایت های خود به آنها القا کنید. یکی دیگر از ابزار باور نکردنی توسط Adobe ...



اگر چه کاملا متفاوت از مثال اول، Color Scheme Designer یک ابزار عالی دیگر است که به شما اجازه می دهد طرح هایی را در یک سطح دیگر ایجاد کنید. شما می توانید یک رنگ را انتخاب کنید، سپس یکی از گزینه های بالا - تک تک، تکمیل، سه گانه، تتراد، مشابه یا مقیاس مشابه - و اجازه دهید این ابزار کار خود را انجام دهد.

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


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



دیگران: پالت ژنراتور رنگ و کد های رنگی CSS
ابزار برای ناوبری و دکمه ها

منوی ساز CSS به شما امکان می دهد منوهای سفارشی CSS خود را ایجاد کنید و آنها را برای شما در یک ساده، قالب HTML/CSS، بنابراین شما می توانید آنها را از اینجا دانلود کنید و از آنها استفاده کنید.
ابزار دارای گالری مناسبی نسبتا بزرگ - عمودی، افقی و کشویی است - و به شما اجازه می دهد تا جزئیات آنها را سفارشی کنید. علاوه بر این، شما همچنین می توانید پلاگین های Adobe Dreamweaver را دانلود کنید و منوهای خود را بر روی کامپیوتر خود ایجاد کنید.
منوها متقابل سازگاری دارند و در تمامی مرورگرها (به استثنای انتقال اینترنت اکسپلورر) مشابه خواهد بود.



این تنها CSS ابزار منو که واقعا خارج از غرفه، برخی از آنهایی که دیگر شما می توانید یک نگاه هستند CSS ژنراتور منو، <یک عنوان = "من CSS منو" عکاس هنگام عکسبرداری = "http://www.mycssmenu.com/" هدف این است = "_ خالی"> منو CSS من و با Generator" href="http://www.tabsgenerator.com/" زبانهها ژنراتور را. < br>

Button Maker Online از Drive Dynamic اجازه می دهد تا دکمه های خود را ایجاد و سفارشی کنید ، سپس آنها را در طرح های خود دانلود و استفاده کنید.

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



این یکی بسیار شبیه به اول است، تنها شما منوها را به شیوه دیگری ایجاد کنید : با انتخاب سبک خود از چندین لیست کشویی. این کاملا یکسان است و تنها بستگی دارد که شما راحت تر با آن کار کنید.

ابزارهای فونت وب

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



Typester برای هدف همان تستر فونت بسیار کاربرد دارد، فقط ممکن است محبوب تر باشد و شما می توانید فونت های بیشتری را مشاهده کنید - حتی فونت های گوگل.

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

دیگران: سبک فونت CSS ، فونت CSS و Style Wizard متن، تنظیم نوع CSS .
سایر ابزار CSS

اگر می خواهید سریع سبک CSS پیش فرض را تولید کنید، سپس CSS Generator برای شما خواهد بود. این مشابه ابزارهایی است که برای سیستم های شبکه استفاده می شود، اما این یکی واقعا سیستم شبکه ای را حفظ نمی کند (بعدا باید آن را کد کنید).
با این حال شما می توانید یک شیوه نامه با رنگ های لینک، اندازه فونت، حاشیه ها، رنگ شناور و غیره ایجاد کنید - و در هنگام برنامه نویسی بعضی از زمان های ارزشمندی را در اختیار دارید.



CSS سریع هم همین کار را انجام می دهد، فقط شما حتی سفارشی سازی بیشتری دارید امکان دارد، به همین ترتیب در این مورد نیز نگاه کنید.

CSS تولید شده به نظر می رسد همیشه توسط W3C معتبر و روند بسیار سریع است، بنابراین شما می توانید بعد از نیم ساعت از تلویزیون لذت ببرید به جای برنامه نویسی پیش فرض های شیوه.


در حال حاضر من در ابزارهای CSS sprites به روز نمی شود، زیرا از آنها استفاده نمی کنم، اما برخی از بررسی ها SpriteGen Sprite Generator را پیشنهاد می کنند، CSS Sprites و CSS Sprites Generator


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

این فهرستی از ابزارهای CSS و ژنراتورهایی بود که می خواستم آگاهی را افزایش دهم. آیا شما برخی از دیگران را دوست دارید توصیه؟ src = "96.jpg

ارسال: #2

خیلی ممنونم من یک طراح وب هستم و این ابزار ها واقعا کاربردی می باشند.