چند لینک درباره گرادیان های CSS

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

• روز 22: شیب مخروطی — مانوئل ماتوزوویچ در روز 21 از مجموعه 100 روزه خود در مورد CSS مدرن، به شیب های مخروطی نگاه کرد، و یک نگاه سطح بالا به رنگ ها، زوایا، قرارگیری و توقف های رنگ ارائه کرد. سپس، در روز 22، از آن استفاده می کند ::backdrop شبه عنصر (به هر حال، توییتر به طور غیرمنتظره ای حسابش را تعلیق کرد - اگر بتوانیم به درست کردن آن کشتی کمک کنیم.)
• آیا واقعاً گرادیان شعاعی CSS را درک می کنید؟ - پاتریک بروست کار راهنما را در اینجا انجام داده است و من صادقانه بگویم که هنوز در حال انجام آن هستم. اما من قبلاً از توضیحات و دموهای واضح او در مورد چیزهایی که هنوز هم آنها را مخفی می کنم، مانند کلمات کلیدی برای اندازه و شکل یک گرادیان شعاعی، قدردانی می کنم. من قبلاً این را در خودمان پیوند می دهم راهنمای گرادیان های CSS!
• گرادیان های پس زمینه بسیار قابل تنظیم - هی، صحبت از گرادیان شعاعی، اسکات وندهیدستور العمل یکی با چندین رنگ متوقف شد هفته گذشته. چالش او ایجاد یک الگوی گرادیان بود که می‌توانست از تنوع رنگ‌های مختلف پشتیبانی کند، که اگر برای استفاده نبود، معمولاً کلاس‌های CSS و مقادیر رنگی را برای هر تغییر ایجاد می‌کرد. خواص سفارشی. به این ترتیب، او می تواند یک ویژگی سفارشی برای رنگ های مختلف و مقادیر قرارگیری برای هر توقف رنگ اختصاص دهد، سپس به سادگی مقادیر را بسته به زمینه به روز کند. و چه چیزی بیشتر این است که روشی که می توان ویژگی های سفارشی را با جاوا اسکریپت به روز کرد، به اسکات اجازه داد ابزاری برای سفارشی کردن الگوی گرادیان خود بسازید، که در انتهای پست سخاوتمندانه به اشتراک گذاشته شده است.
• الگوهای نیم‌تنی CSS - میشل بارکر با تفکیک دقیق الگوهای "نیم آهنگ" آنا تودور. این اثر کاملاً شبیه چاپ جوهر نقطه‌دار روزنامه‌های قدیمی است. در حالی که آنا استفاده می کند هودینی میشل در زیر کاپوت انیمیشن و افکت های شناور، به طور خاص به خود افکت نیمه تون و نحوه ساخت آن با گرادیان شعاعی نگاه می کند. من مخصوصاً عاشق روشی هستم که میشل نشان می دهد چگونه از یک شبکه مستقیم نقطه به شبکه ای که الگوی آن کمی تکان خورده است برسد. و تا انتها بچسبید تا ببینید که چگونه افکت را با a علامت گذاری می کند mask-image که از یک گرادیان خطی برای ایجاد یک افکت محو شدن استفاده می کند. من با این الگو کمی سر و صدا کردمهمچنین، و با چیزی تمیز که به نظر می رسد فیلتر لکه جوهر روان است، پیچید.
• یک راه‌حل ناوبری بی‌نظیر - به اریک مایر یک چالش طراحی جالب برای منو داده شد که در آن یک خط نقطه چین از پیوند "صفحه فعلی" خارج می شود و به بخشی از یک مرز نقطه چین بزرگتر در امتداد لبه سمت چپ محفظه محتوا تبدیل می شود. اریک همیشه یک نمونه عالی است چگونه مانند یک توسعه دهنده فرانت اند فکر کنیم، و او این کار را در اینجا انجام می دهد همانطور که او مسیر جایگزینی را که با استفاده از یک گرادیان خطی در هنگام برخورد با یک گیر با رویکرد استاندارد تنظیم طی کرده است، انجام می دهد. border-style: dotted روی عنصر
• خطوط چین دار گرادیان ماسک شده - اریک با ادامه آخرین پیوند نشان می دهد که نه تنها چگونه خط تیره های یک حاشیه سمت چپ را به خط تیره های یک تصویر شطرنجی متصل می کند، بلکه چگونه چشم طراحی پرسنیک او را متقاعد می کند که راه حل خود را برای تقلید وضوح پایین تر تغییر دهد. خط تیره های تصویر با استفاده از دو گرادیان پس زمینه خطی تکرار شونده به عنوان یک mask-image در شیب پس زمینه خیلی بدجنس و عالی!