सीएसएस के साथ तत्व पृष्ठभूमि रंग को गहरा करना

उपयोगकर्ता इंटरफ़ेस को बढ़ाने में बटन जैसे इंटरैक्टिव तत्वों को उनकी उपस्थिति में बदलाव करके हाइलाइट करना शामिल है। होवर करने पर पृष्ठभूमि का रंग गहरा करना एक आम तरीका है।

प्रारंभ में, कोई अस्पष्टता को समायोजित करने का प्रयास कर सकता है, लेकिन यह रंग और पारदर्शिता दोनों को प्रभावित करता है। एक अधिक लक्षित समाधान मौजूद है।

विधि: एक डार्क लेयर को ओवरले करें

बैकग्राउंड-इमेज का उपयोग करके एक डार्क ओवरले बनाएं। यह विधि पृष्ठभूमि को गहरा करते हुए मूल पाठ रंग को सुरक्षित रखती है।

सीएसएस में ओवरले परत को लागू करें:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

यह तकनीक स्वचालित रूप से किसी भी पृष्ठभूमि रंग को गहरा कर देती है, यहां तक ​​कि कई रंगों को भी, जैसा कि उदाहरण में देखा गया है:

 some text 
इस ओवरले विधि का लाभ उठाकर, डेवलपर्स होवर पर तत्व पृष्ठभूमि रंगों को आसानी से गहरा कर सकते हैं, गहरे रंगों की मैन्युअल रूप से गणना करने की परेशानी के बिना उपयोगकर्ता की अन्तरक्रियाशीलता को बढ़ा सकते हैं।