تولیدکننده ویژگی‌های CSS: ایجاد گرادیان‌ها، سایه‌ها و حاشیه‌ها

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

ژنراتور ویژگی CSS

نوع گرادیان

خطی

دایره‌ای

زاویه90°

رنگ ۱

موقعیت ۱0%

رنگ ۲

موقعیت ۲100%

CSS تولید شده

پیش‌نمایش

کپی به کلیپ بورد

📚

مستندات

تولیدکننده ویژگی CSS: ایجاد گرادیانت‌ها، سایه‌ها و گوشه‌های گرد زیبا

مقدمه‌ای بر تولیدکننده ویژگی CSS

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

با تولیدکننده ویژگی CSS ما، می‌توانید:

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

این ابزار پیش‌نمایش‌های آنی از سفارشی‌سازی‌های شما را ارائه می‌دهد و به شما اجازه می‌دهد دقیقاً ببینید اثرات CSS شما قبل از پیاده‌سازی در پروژه چگونه به نظر می‌رسد. این رویکرد بصری آزمایش با تنظیمات مختلف و دستیابی به ظاهر مناسب برای عناصر وب شما را آسان‌تر می‌کند.

درک ویژگی‌های CSS

گرادیانت‌ها

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

گرادیانت‌های خطی

گرادیانت‌های خطی رنگ‌ها را در طول یک خط مستقیم انتقال می‌دهند. شما می‌توانید کنترل کنید:

جهت/زاویه: جهت جریان رنگ (0-360 درجه) را تعیین می‌کند
ایستگاه‌های رنگ: رنگ‌هایی که بین آن‌ها انتقال می‌یابند
موقعیت‌های رنگ: جایی که هر رنگ در گرادیانت شروع و پایان می‌یابد

نحو CSS برای گرادیانت‌های خطی به این شکل است:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

به عنوان مثال، یک گرادیانت از قرمز به آبی در زاویه ۴۵ درجه:

1background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);
2

گرادیانت‌های شعاعی

گرادیانت‌های شعاعی رنگ‌ها را از یک نقطه مرکزی به سمت بیرون در یک الگوی دایره‌ای یا بیضوی انتقال می‌دهند. شما می‌توانید سفارشی‌سازی کنید:

شکل: دایره یا بیضی
ایستگاه‌های رنگ: رنگ‌های موجود در گرادیانت شما
موقعیت‌های رنگ: جایی که هر رنگ در گرادیانت شروع و پایان می‌یابد

نحو CSS برای گرادیانت‌های شعاعی به این شکل است:

1background: radial-gradient(shape, color1 position1%, color2 position2%);
2

به عنوان مثال، یک گرادیانت دایره‌ای از قرمز در مرکز به آبی در لبه‌ها:

1background: radial-gradient(circle, #ff0000 0%, #0000ff 100%);
2

سایه‌های جعبه

سایه‌های جعبه عمق و بعد به عناصر اضافه می‌کنند و اثرات سایه‌ای ایجاد می‌کنند. با تولیدکننده ما، می‌توانید کنترل کنید:

جابجایی افقی: چقدر سایه به‌صورت افقی گسترش می‌یابد
جابجایی عمودی: چقدر سایه به‌صورت عمودی گسترش می‌یابد
شعاع محو: چقدر سایه محو به نظر می‌رسد
شعاع گسترش: چقدر سایه گسترش می‌یابد
رنگ و شفافیت: رنگ و شفافیت سایه
گزینه درون‌زا: اینکه آیا سایه درون عنصر ظاهر می‌شود یا خیر

نحو CSS برای سایه‌های جعبه به این شکل است:

1box-shadow: h-offset v-offset blur spread color;
2

برای سایه درون‌زا، کلمه کلیدی inset را اضافه کنید:

1box-shadow: inset h-offset v-offset blur spread color;
2

به عنوان مثال، یک سایه نرم:

1box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
2

شعاع مرزی

شعاع مرزی گوشه‌های گرد را روی عناصر ایجاد می‌کند و ظاهر آن‌ها را نرم‌تر می‌کند. تولیدکننده ما به شما اجازه می‌دهد:

شعاع یکسانی برای همه گوشه‌ها تنظیم کنید
هر گوشه را به‌طور فردی سفارشی کنید (بالا چپ، بالا راست، پایین راست، پایین چپ)

نحو CSS برای شعاع مرزی به این شکل است:

برای گوشه‌های یکنواخت:

1border-radius: value;
2

برای گوشه‌های فردی:

1border-radius: top-left top-right bottom-right bottom-left;
2

به عنوان مثال، یک دکمه با گوشه‌های گرد:

1border-radius: 10px;
2

یا یک حباب گفت‌وگو با شعاع‌های گوشه متفاوت:

1border-radius: 20px 20px 5px 20px;
2

سایه‌های متنی

سایه‌های متنی عمق و تأکید به متن اضافه می‌کنند. با تولیدکننده ما، می‌توانید کنترل کنید:

جابجایی افقی: چقدر سایه به‌صورت افقی گسترش می‌یابد
جابجایی عمودی: چقدر سایه به‌صورت عمودی گسترش می‌یابد
شعاع محو: چقدر سایه محو به نظر می‌رسد
رنگ و شفافیت: رنگ و شفافیت سایه

نحو CSS برای سایه‌های متنی به این شکل است:

1text-shadow: h-offset v-offset blur color;
2

به عنوان مثال، یک سایه متن نرم:

1text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
2

نحوه استفاده از تولیدکننده ویژگی CSS

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

مرحله ۱: انتخاب یک ویژگی CSS

نوع ویژگی CSS که می‌خواهید تولید کنید را با کلیک بر روی یکی از چهار زبانه انتخاب کنید:

گرادیانت
سایه جعبه
شعاع مرزی
سایه متنی

مرحله ۲: سفارشی‌سازی تنظیمات خود

هر نوع ویژگی مجموعه‌ای از پارامترهای قابل سفارشی‌سازی منحصر به فرد خود را دارد:

برای گرادیانت‌ها:

نوع گرادیانت را انتخاب کنید (خطی یا شعاعی)
برای گرادیانت‌های خطی، زاویه را با استفاده از نوار لغزنده تنظیم کنید
رنگ‌ها را با استفاده از انتخابگرهای رنگ انتخاب کنید
موقعیت هر ایستگاه رنگ را با استفاده از نوارهای لغزنده تنظیم کنید

برای سایه‌های جعبه:

جابجایی افقی و عمودی را با استفاده از نوارهای لغزنده تنظیم کنید
شعاع محو و شعاع گسترش را تنظیم کنید
رنگ سایه را انتخاب کنید و شفافیت را تنظیم کنید
اگر می‌خواهید سایه درون‌زا باشد، کادر "سایه درون‌زا" را علامت بزنید

برای شعاع مرزی:

بین گوشه‌های یکنواخت یا تنظیمات گوشه‌های فردی انتخاب کنید
مقادیر شعاع را با استفاده از نوارهای لغزنده تنظیم کنید
تغییرات را در ناحیه پیش‌نمایش در زمان واقعی ببینید

برای سایه‌های متنی:

جابجایی افقی و عمودی را با استفاده از نوارهای لغزنده تنظیم کنید
شعاع محو را تنظیم کنید
رنگ سایه را انتخاب کنید و شفافیت را تنظیم کنید
اثر را بر روی متن نمونه در ناحیه پیش‌نمایش مشاهده کنید

مرحله ۳: کپی کردن CSS تولید شده

زمانی که از سفارشی‌سازی خود راضی هستید:

کد CSS تولید شده را که در جعبه کد نمایش داده شده است بررسی کنید
بر روی دکمه "کپی به کلیپ‌بورد" کلیک کنید
کد را در فایل CSS یا سبک درون‌خطی خود بچسبانید

این ابزار به‌طور خودکار کد CSS را در حین تنظیمات شما به‌روز می‌کند، بنابراین همیشه آخرین نسخه از سفارشی‌سازی شما را مشاهده می‌کنید.

کاربردهای عملی و موارد استفاده

گرادیانت‌ها برای عناصر UI

گرادیانت‌ها می‌توانند عناصر UI مختلفی را تقویت کنند:

دکمه‌ها: دکمه‌های جذاب با پس‌زمینه‌های گرادیان ایجاد کنید

1   .cta-button {
2     background: linear-gradient(45deg, #ff416c 0%, #ff4b2b 100%);
3     color: white;
4     padding: 10px 20px;
5     border: none;
6     border-radius: 5px;
7   }
8

سرصفحه‌ها و پاورقی‌ها: به بخش‌های صفحه جذابیت بصری اضافه کنید

1   header {
2     background: linear-gradient(to right, #2c3e50 0%, #4ca1af 100%);
3     color: white;
4     padding: 20px;
5   }
6

نوارهای پیشرفت: نشانگرهای پیشرفت را جذاب‌تر کنید

1   .progress-bar {
2     background: linear-gradient(to right, #1fa2ff 0%, #12d8fa 50%, #a6ffcb 100%);
3     height: 10px;
4     border-radius: 5px;
5   }
6

سایه‌های جعبه برای عمق و ارتفاع

سایه‌های جعبه می‌توانند حس سلسله‌مراتب و عمق ایجاد کنند:

کارت‌ها: به آن‌ها سایه‌های ملایم اضافه کنید تا اثر شناور ایجاد شود

1   .card {
2     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
3     padding: 20px;
4     background: white;
5   }
6

منوهای کشویی: حس ارتفاع برای پوشش‌ها ایجاد کنید

1   .dropdown {
2     box-shadow: 0 6px 12px rgba(0,0,0,0.15);
3     background: white;
4     border-radius: 4px;
5   }
6

ورودی‌های فرم در حالت تمرکز: بازخورد تعامل کاربر را تقویت کنید

1   input:focus {
2     box-shadow: 0 0 0 3px rgba(66,153,225,0.5);
3     outline: none;
4     border-color: #4299e1;
5   }
6

شعاع مرزی برای رابط‌های نرم‌تر

شعاع مرزی می‌تواند رابط‌ها را دوستانه‌تر کند:

عکس‌های پروفایل: ایجاد کانتینرهای دایره‌ای یا گرد برای تصاویر

1   .profile-pic {
2     border-radius: 50%; /* دایره کامل */
3     width: 100px;
4     height: 100px;
5     object-fit: cover;
6   }
7

دکمه‌ها: لبه‌های دکمه را نرم کنید تا حس دوستانه‌ای داشته باشد

1   .button {
2     border-radius: 8px;
3     padding: 10px 20px;
4     background: #4299e1;
5     color: white;
6   }
7

حباب‌های پیام: ایجاد رابط‌های شبیه به چت

1   .message-bubble {
2     border-radius: 18px 18px 18px 4px;
3     background: #e2f5fe;
4     padding: 12px;
5   }
6

سایه‌های متنی برای بهبود تایپوگرافی

سایه‌های متنی می‌توانند خوانایی را بهبود بخشند و به متن سبک اضافه کنند:

متن قهرمان: متن را در برابر پس‌زمینه‌های تصویری برجسته کنید

1   .hero-title {
2     text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
3     color: white;
4     font-size: 3rem;
5   }
6

اثر حکاکی: ظاهری برجسته ایجاد کنید

1   .letterpress {
2     text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
3     color: #444;
4     font-weight: bold;
5   }
6

متن نئون: اثرات درخشان ایجاد کنید

1   .neon-text {
2     text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
3     color: #fff;
4   }
5

سازگاری مرورگر و ملاحظات عملکرد

سازگاری مرورگر

در حالی که مرورگرهای مدرن از تمام ویژگی‌های CSS در تولیدکننده ما پشتیبانی می‌کنند، برخی از ملاحظات سازگاری وجود دارد:

گرادیانت‌ها: در تمام مرورگرهای مدرن به‌طور کامل پشتیبانی می‌شوند. برای مرورگرهای قدیمی‌تر، در نظر بگیرید که از پیشوندهای تولیدکننده استفاده کنید یا یک رنگ پشتیبان ثابت ارائه دهید:

1   .gradient-element {
2     background: #5433FF; /* رنگ پشتیبان */
3     background: -webkit-linear-gradient(45deg, #5433FF, #20BDFF);
4     background: linear-gradient(45deg, #5433FF, #20BDFF);
5   }
6

سایه‌های جعبه: در تمام مرورگرها به‌خوبی پشتیبانی می‌شود. برای نسخه‌های قدیمی IE، در نظر بگیرید که از روش‌های جایگزین مانند تصاویر مرزی یا تصاویر پس‌زمینه استفاده کنید.
شعاع مرزی: در تمام مرورگرهای مدرن پشتیبانی می‌شود. برای ظاهر یکسان در مرورگرهای قدیمی‌تر، در نظر بگیرید که از اشکال SVG یا تصاویر پس‌زمینه برای عناصر گرد استفاده کنید.
سایه‌های متنی: در مرورگرهای مدرن به‌خوبی پشتیبانی می‌شود. برای IE9 و پایین‌تر، در نظر بگیرید که از سبک‌های جایگزین استفاده کنید یا عدم وجود سایه را به عنوان یک کاهش تدریجی بپذیرید.

ملاحظات عملکرد

در حالی که ویژگی‌های CSS به‌طور کلی عملکرد خوبی دارند، اثرات پیچیده می‌توانند بر سرعت رندر تأثیر بگذارند:

چندین سایه جعبه: اعمال چندین سایه جعبه به عناصر می‌تواند سرعت رندر را کاهش دهد. در نظر بگیرید که برای بهبود عملکرد از لایه‌های سایه کمتری استفاده کنید.
گرادیانت‌های پیچیده: گرادیانت‌هایی با ایستگاه‌های رنگی زیاد می‌توانند بر عملکرد تأثیر بگذارند. در صورت امکان، گرادیانت‌ها را ساده کنید یا برای الگوهای بسیار پیچیده از تصاویر پیش‌ساخته استفاده کنید.
انیمیشن: انیمیشن ویژگی‌هایی مانند سایه جعبه می‌تواند مشکلات عملکردی ایجاد کند. در صورت امکان، به جای آن انیمیشن‌های تبدیل و شفافیت را انیمیشن کنید یا از ویژگی will-change برای بهینه‌سازی انیمیشن‌ها استفاده کنید.
دستگاه‌های موبایل: اثرات پیچیده CSS ممکن است تأثیر بیشتری بر عملکرد در دستگاه‌های موبایل داشته باشند. طراحی‌های خود را در دستگاه‌های مختلف آزمایش کنید و در نظر بگیرید که اثرات را برای نسخه‌های موبایل ساده کنید.

سوالات متداول

تفاوت بین گرادیانت‌های خطی و شعاعی چیست؟

گرادیانت‌های خطی رنگ‌ها را در طول یک خط مستقیم در یک جهت مشخص (زاویه) انتقال می‌دهند، در حالی که گرادیانت‌های شعاعی رنگ‌ها را از یک نقطه مرکزی به سمت بیرون در یک الگوی دایره‌ای یا بیضوی انتقال می‌دهند. گرادیانت‌های خطی برای پس‌زمینه‌ها، دکمه‌ها و انتقال‌های افقی/عمودی عالی هستند، در حالی که گرادیانت‌های شعاعی برای اثرات نورافکن، دکمه‌های دایره‌ای یا ایجاد یک نقطه کانونی مناسب هستند.

آیا می‌توانم چندین سایه جعبه روی یک عنصر ایجاد کنم؟

بله، می‌توانید چندین سایه جعبه را به یک عنصر واحد اعمال کنید و هر تعریف سایه را با یک کاما جدا کنید. به عنوان مثال:

1box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
2

این یک سایه اصلی زیر عنصر و یک سایه ملایم بالایی برای بعد بیشتر ایجاد می‌کند.

چگونه می‌توانم فقط برخی از گوشه‌ها را با شعاع مرزی گرد کنم؟

می‌توانید با استفاده از ویژگی border-radius که چهار مقدار را به ترتیب: بالا چپ، بالا راست، پایین راست، پایین چپ مشخص می‌کند، مقادیر شعاع متفاوتی برای هر گوشه تعیین کنید. به عنوان مثال:

1border-radius: 10px 0 0 10px;
2

این فقط گوشه‌های چپ (بالا چپ و پایین چپ) را گرد می‌کند و گوشه‌های راست را مربع باقی می‌گذارد.

چرا سایه متنی من در مرورگرهای مختلف متفاوت به نظر می‌رسد؟

رندر سایه متنی می‌تواند بین مرورگرها کمی متفاوت باشد به دلیل تفاوت در آنتی‌الیزینگ و موتورهای رندر. برای به‌دست آوردن نتایج متناسب، از مقادیر محو متوسط (۱-۳px) استفاده کنید و در مرورگرهای مختلف آزمایش کنید. سایه‌های بسیار ملایم (۰-۱px محو) اغلب بیشترین تنوع را بین مرورگرها نشان می‌دهند.

آیا می‌توانم این ویژگی‌های CSS را انیمیشن کنم؟

بله، اکثر ویژگی‌های CSS قابل انیمیشن هستند، اما برخی از آن‌ها عملکرد بهتری نسبت به دیگران دارند:

گرادیانت‌ها: نمی‌توانند به‌طور مستقیم با انتقال‌های CSS انیمیشن شوند، اما می‌توانید موقعیت پس‌زمینه را انیمیشن کنید یا از کلیدهای CSS برای تغییر بین تعاریف گرادیانت مختلف استفاده کنید
سایه‌های جعبه: می‌توانند انیمیشن شوند اما ممکن است مشکلات عملکردی ایجاد کنند؛ در نظر بگیرید که برای اثرات حرکتی از تبدیل استفاده کنید
شعاع مرزی: به‌طور روان انیمیشن می‌شود و به‌طور کلی عملکرد خوبی دارد
سایه‌های متنی: می‌توانند انیمیشن شوند اما ممکن است در حین انیمیشن مشکلات رندر متن ایجاد کنند

چگونه می‌توانم اطمینان حاصل کنم که اثرات CSS من قابل دسترسی هستند؟

هنگام استفاده از اثرات CSS، به این دستورالعمل‌های دسترسی توجه کنید:

حتی زمانی که از گرادیانت‌ها استفاده می‌کنید، کنتراست رنگ کافی را حفظ کنید
فقط به اثرات سایه برای نشان دادن عناصر تعاملی تکیه نکنید
اطمینان حاصل کنید که متن هنگام اعمال سایه‌های متنی قابل خواندن باقی می‌ماند
به کاربرانی که ترجیح می‌دهند حرکت کمتری داشته باشند، توجه کنید و با استفاده از media query prefers-reduced-motion جایگزین‌هایی ارائه دهید

آیا می‌توانم پیشوندهای تولیدکننده را با این ابزار تولید کنم؟

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

منابع و مطالعه بیشتر

MDN Web Docs: استفاده از گرادیانت‌های CSS
CSS-Tricks: راهنمای کامل گرادیانت‌های CSS
MDN Web Docs: سایه جعبه
CSS-Tricks: شعاع مرزی
MDN Web Docs: سایه متنی
Smashing Magazine: سایه‌های CSS، سفارشی‌سازی و انیمیشن
Can I Use: جدول‌های پشتیبانی ویژگی CSS
Web.dev: بهینه‌سازی عملکرد CSS

نتیجه‌گیری

تولیدکننده ویژگی CSS فرآیند ایجاد اثرات CSS زیبا و سفارشی برای پروژه‌های وب شما را ساده می‌کند. با ارائه یک رابط بصری برای طراحی گرادیانت‌ها، سایه‌های جعبه، شعاع‌های مرزی و سایه‌های متنی، نیاز به یادآوری نحوهای پیچیده یا تنظیم دستی مقادیر را از بین می‌برد.

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

امروز با آزمایش تنظیمات مختلف ویژگی‌های CSS شروع کنید تا طراحی‌های وب خود را تقویت کنید و رابط‌های کاربری جذاب‌تری ایجاد کنید!

💬

بازخورد

💬

برای شروع دادن بازخورد دادن درباره این ابزار، روی توست بازخورد کلیک کنید

🔗

ابزارهای مرتبط

کشف ابزارهای بیشتری که ممکن است برای جریان کاری شما مفید باشند