الواجهات والتصميم

Progressive Blur

بواسطة Julien Thibeaut (ui-skills.com) 3.7k نجوم GitHub

عمل blur تدريجي بالـ CSS بطبقات backdrop-filter متراكبة بماسكات للعمق والنعومة عند حافة الشاشة.

#css#backdrop-filter#blur#depth

Claude Code Codex

نظرة عامة

Progressive Blur بيبني overlay بلور متدرّج ومتدرّج على خطوات من حافة الشاشة باستخدام طبقات backdrop-filter متعددة بماسكات. ده الإفكت اللي ورا الـ nav bars اللي بتتلاشى وحواف المحتوى الناعمة اللي في المواقع الحديثة، وكله بالـ CSS بس.

بتنفع في إيه

تلاشي حافة الـ header الثابت بنعومة
overlay بلور متدرّج فوق الصور
تنعيم أسفل المحتوى القابل للـ scroll
إضافة عمق للـ overlays

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install progressive-blur

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/progressive-blur ~/.claude/skills/progressive-blur

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/progressive-blur ~/.codex/skills/progressive-blur

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Frontend Design

عمل واجهات frontend مميزة بمستوى إنتاجي بعيداً عن جمالية الـ AI العامة — صفحات وكومبوننتس وartifacts وبوسترات.

Claude Code Codex

الواجهات والتصميم

Web Artifacts Builder

بناء artifacts HTML معقدة ومتعددة الكومبوننتس لـ Claude.ai باستخدام React وTailwind.

Claude Code Codex

الواجهات والتصميم

Animation Systems

حركة ويب بمستوى المنتجات زي Stripe وLinear وApple وVercel — إعدادات الـ easing والمدة والتناسق والأداء ووضع تقليل الحركة.

Claude Code Codex