دروستکەری CSS
بەکارهێنانی بازرگانی
581 models
هیچ نیشانە ئاوییەک نیە
پێویست ناکات
مۆدێل:
+ GPT-5, Claude, Gemini
Describe a layout or component and get modern CSS3 - Grid + Flexbox, custom properties, container queries, color-mix(), :has() selectors, prefers-reduced-motion. Mobile-first by default. Self-hosted Qwen 3 Coder is free under the daily pool; premium models nail complex multi-component design systems.
ڕوونکردنەوە
هەڵبژاردەکانی پێشکەوتوو
ئەنجام
❤️ خۆشت دەوێت Free.ai؟ بڵێ بە هاوڕێکانت!
داخڵببە بۆ ئەوەی لینکی ڕاسپاردنەوە بەدەست بهێنیت و 30,000 تیک بۆ هەر هاوڕێیەک بەدەست بهێنیت.
زیاترت دەوێت؟
تۆمارکردنی بێ پارە: ٣٠,٠٠٠ توکن/ڕۆژ
تۆمارکردن
داواکاریەکەت پەرەپێدەدرێت...
کۆدی سی ئێس ئێس دروست بکە بەبێ پارە بە بەکارهێنانی AI
چۆن بەکاربهێنرێت دروستکەری CSS
1
داخڵکردنت بنووسە
نووسراوێک بنوسە، فۆڕمێک دابگرە، یان ئەوەی کە دەتەوێت باس بکە. هیچ حسابێک پێویست ناکات.
2
بژاردەکان
ئێمە لە چەند چرکەیەکدا داواکاریت بۆ ئەڵتەرناتیڤەکەمان دەنێرین بە بەکارهێنانی باشترین مۆدێلی سەرچاوەی کراوە.
3
دابەزاندن و هاوبەشکردن
دابەزێنە، کۆپی بکە، یان ئەنجامەکەت بەبەش بکە. بۆ بەکارهێنانی تایبەت و بازرگانی بێ نرخە
ئەم ئامرازە بەکاربهێنە لە ڕێگەی API
ئەم ئامرازە لە کۆدی خۆتەوە بە ئۆتۆماتیکی دابنێ. REST Endpoint کە هاوشێوەی OpenAI یە، بە ڕاستی کەرەوە، هیچ پێویستیەکی تر نییە بۆ SDK. نرخی کەرەوە لەگەڵ ناوەوەی وێبدا هاوشێوەیە.
curl -X POST https://api.free.ai/v1/chat/ \
-H "Authorization: Bearer sk-free-..." \
-H "Content-Type: application/json" \
-d '{"model": "qwen-coder", "messages": [{"role": "user", "content": "Write a Python function that reverses a string."}]}'دروستکەری CSS - FAQ
CSS3 - Grid + Flexbox layouts, custom properties (CSS variables), container queries, color-mix (), :has () selectors, logical properties, prefers-reduced-motion fallbacks. 8 style preset (Vanilla / Tailwind config / Sass / CSS Modules / BEM / Atomic utility / Print stylesheet / Animation). Mobile-first by default with container queries where they beat media queries.
بەڵێ - پەڕەی ستایلی پێکهاتەیەکی تەواو لە 3 کۆدکەری Qwen دا ~1,000 تیکۆن دەگرێت، لە ناو 6,000 ناناسراو / 30,000 نووسراوەی ڕۆژانە. پێشکەشکردنی Claude Sonnet / GPT-5 بۆ هەر بانگکردنێک بۆ سیستەمی دیزاینی زۆر پێکهاتەیی.
v0 by Vercel (free tier + $20/mo Pro) produces React + Tailwind components. Tailwind UI ($299 lifetime) is a paid component library. Cursor ($20/mo) and Copilot ($10-39/mo) help inside an IDE. Our tool is one-shot CSS - paste a description, get cross-browser-safe CSS. Pairs well with Tailwind: switch the preset to Tailwind config and we will write a tailwind.config.js + utility classes instead of raw CSS.
بەڵێ - تایبەتمەندی تایبەتمەندی CSS بۆ دیزاینکردن، @layer بۆ کۆنتڕۆڵی کێشکردن، پرسیارەکانی کۆت و بەند (@container) کە تیایدا گەورەکردنی پەیوەندیدار بە باوکەوە لە چاوپێکەوتنەکە زیاترە، :has بۆ ستایلی باوک، ڕەنگەکان وەک پێکەوە کردنی ڕەنگەکان و OKLCH بۆ دەستکاریکردنی ڕەنگەکانی کە بەخێرایی دەگات. بە جوانی دەگەڕێتەوە کاتێک پێویست دەکات.
پێشنیارکراوی ڕێکخستنی تایل ویندە هەڵبژێرە. دەرکەوتنی تایل ویندە 3.x ە کە بە بەستەری بەستراوە بە tailwind.config.js ەوە (ئێمە لەگەلیدا دروستی دەکەین ئەگەر داواکاری بۆ تایبەتمەندی کێشەکانت هەبێت). بۆ نیشاندانی HTML کە پۆلەکان دەبەستێتەوە، بگەڕێ بۆ /code/html/ و پێشنیارکراوی تایل ویندە هەڵبژێرە.
پێشبینیی Sass هەڵبژێرە. دەرکەوتن بەکاردەهێنێت. scss بەستەری زمان لەگەڵ @use مودێڵەکان (نەک @import کە بەکارنەهاتوون)، بەستەری کە یارمەتی ڕوونکردنەوە دەدات (نەک وەک دیزاین)، @mixin بۆ نمونەی بەکارهێنانی دووبارە، @function بۆ حسابی نرخ. هاوشێوە لەگەڵ Dart Sass 1.50+.
پێشبینی زیندووکردنەوە هەڵبژێرە. دەرکەوتن @keyframes بەکاردەهێنێت لەگەڵ کاتی بەزییر، هەڵسوکەوتی کەمکراو بەکاردەهێنێت: کەمکردنەوەی پەڕاوێزەکان بۆ گەیشتن، تەنها گۆڕانکاری لەسەر تایبەتمەندییەکان کە زیندوون. تەنها CSS کاتێک دەکرێت (گۆڕان، نەبینراو)؛ جاڤا سکریپت تەنها بۆ کاریگەریەکانی نا-CSS پێشنیار کراوە.
هەردووکیان - BEM هەڵبژێرە بۆ.بلۆک_ئەڵمێنتی--گۆڕانی ناو، یان ئامێری ئەتۆمی بۆ پۆلەکانی مەبەستی یەکجاری. بۆ بەشەکانی CSS کە لەژێر کاریگەریدان بێ ناوی کێشان پۆلەکانی CSS هەڵبژێرە، کە ناوی پۆلەکانی ناوەوەی ناوەکانی ناوەوە دروست دەکات.
بەڵێ - هەموو پێشبژاردنێک تایبەتمەندی تایبەتمەندی CSS بەکاردەهێنێت کە وەستاوە [data-theme=dark] هەروەها ڕەنگ-سکێما-پێوستە: پرسیاری ناوەوەی ناوەوەی تاریک. گۆڕینی نەخشەکە یەک هێڵە بۆ گۆڕینی تایبەتمەندی، هیچ کۆپیکردنەوەیەکی CSS نییە. پێشبژاردنی تەیڵ وێند بەکاردەهێنێت بۆ دابینکردنی dark: شێوەکان.
ئامانجی هەرە گرینگی کرۆم / فایرۆسک / سەفەرە (دوا دوو بڵاوکردنەوە سەقامگیرەکان). بەکاردەهێنێت @supports بۆ تایبەتمەندی پێشکەوتوو (: has (، پرسیاری کۆت و بەند) کە سەفەر 16+ گرنگە. دەگەڕێتەوە بۆ فێڵکسبۆکس کە سەفەری کۆن شەڕت لەگەڵ دەکات. بۆ IE11 پشتگیری - بەداخەوە، پێویستە /code/refactor/ بەکاربهێنیت بۆ بازدانە بە دەستی دەرچوونەکە.
پەڕەی ستایلی چاپکردن هەڵبژێرە. دەرکەوتن هەموو شتێک لە چاپکردنی @mediaدا دەگرێت، ڕەنگەکان ڕێکدەخات: بۆ پشتگوێخستن، ناوبژیوان و کرۆم دەشارێتەوە، قەبارەی وێنەکان بە شێوەیەکی گونجاو، پەڕەکان بە پاکی دابەشدەکات بە پەڕەی ناوەوە: لە کارتەکان دوور بکەوەوە. پەڕەی ئاراستەکردن لە ڕێگەی @pageەوە.
بەڵێ - پۆست بکە بۆ /v1/chat/ لەگەڵ هەمان پرسیاری سیستەم کە ئەم لاپەڕەیە دروست دەکات. ڕەوایەتیدان بە بارەر، ڕێژەی سنووردار. باش بۆ دیزاینکردنی توكێنی پاڵپشت یان بەرهەمهێنانی کتێبخانەی بەش. بەڵگەنامە لە /api/.
چۆن ئەم ئامرازە بایەخە دەکەی؟