العودة إلى الخريطة
Digital / Web UI

Chrome UI

سطح معدني عاكس بحزم ضوء قوية وقطوع داكنة وإحساس صناعي مصقول.

الحالة: جاهزCr
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>;
}