Digital / Web UI
Chrome UI
سطح معدني عاكس بحزم ضوء قوية وقطوع داكنة وإحساس صناعي مصقول.
Cr
الاستخدامات
- عناوين رئيسية
- أزرار أساسية
- إطارات فاخرة
المعاملات
- highlight bands
- contrast
- border
- reflection angle
- radius
AI Prompt
أنشئ سطح chrome مع تدرجات معدنية حادة وانعكاسات سوداء ولمعات بيضاء رفيعة وحافة مرآوية.
ملاحظات Tailwind
استخدم linear gradients متعددة بدلا من الصور، مع حدود دقيقة ومساحة داكنة حولها.
ملاحظات الأداء
التدرجات الثابتة خفيفة. تجنب تحريك خلفيات chrome الكبيرة باستمرار.
CSS
.chrome-ui {
border: 1px solid rgba(255,255,255,.28);
border-radius: 16px;
background:
linear-gradient(115deg, #0b0d0f 0%, #f4f7f6 18%, #7d8588 27%, #fefefe 36%, #14171a 49%, #b8c1c4 64%, #ffffff 74%, #2b3033 100%);
color: #050607;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 18px 50px rgba(0,0,0,.34);
}مثال React
export function ChromeButton({ children }) {
return <button className="chrome-ui">{children}</button>;
}