Using CSS, I am trying to create a unique "grip" background that signifies an element is draggable. You can refer to this link:
Currently, I have assigned a class called dnd to the item, and my CSS code looks like this:
.dnd {
background: #99bbee; /* looking for dynamic change */
padding: 1em;
margin: 2em;
border-radius: 0.25em;
width: 14em;
transition: all 0.25s;
}
.dnd:hover {
box-shadow: 0.25em 0.25em 0.3em rgba(0,0,0,0.2);
margin: 1.75em 2.1em 2.25em 1.9em;
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.dnd:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.dnd::before {
content: " ";
display: inline-block;
width: 1.5em;
height: 2em;
margin: -0.5em 0.75em -0.5em -0.5em;
background-color: transparent;
background-size: 0.5em 0.5em;
background-position: 0 0;
background-image:
-webkit-linear-gradient(#99bbee 50%, transparent 50%),
-webkit-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
-moz-linear-gradient(#99bbee 50%, transparent 50%),
-moz-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
-o-linear-gradient(#99bbee 50%, transparent 50%),
-o-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
linear-gradient(#99bbee 50%, transparent 50%),
linear-gradient(to right, rgba(0,0,0,0.2) 50%, transparent 50%);
}
While this setup creates background boxes on the grip, I want to make the grip pseudo-element more versatile without relying on a fixed background color like #99bbee; using rgba(0,0,0,0.2) is fine. Is there a way to modify the CSS background image to handle different background colors?
Here is a jsfiddle link for reference: https://jsfiddle.net/luken/r69wfwjd/5/
Update in 2021: With widespread support for CSS Variables, they might be the optimal solution.