CSS-Hintergrundmuster für Grip-Boxen

Question

Ich möchte CSS verwenden, um einen "Griff" -Hintergrund zu erstellen, der anzeigt, dass ein Element ziehbar ist. (Siehe https://ux.stackexchange.com/a/34639/39138)

Zur Zeit habe ich eine dnd Klasse für das Element und CSS, die wie folgt aussieht:

.dnd { 
    background: #99bbee; /* would like to be able to change this dynamically */ 
    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; /* fallback if grab cursor is unsupported */ 
    cursor: grab; 
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
} 
.dnd:active { 
    cursor: grabbing; 
    cursor: -moz-grabbing; 
    cursor: -webkit-grabbing; 
} 
.dnd::before { /* the grip */ 
    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 - unfortunately requires background color */ 
    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%); 
} 

... Das funktioniert am Griff ein paar Kisten als Hintergrund bei der Erstellung, aber ich möchte nicht das griff pseudo-element auf eine fest codierte hintergrundfarbe (in diesem fall #99bbee; es ist OK, dass es rgba(0,0,0,0.2) verwendet). Gibt es eine Möglichkeit, dieses CSS-Hintergrundbild so umzuschreiben, dass es w/r/t-Hintergrundfarbe flexibler ist? Hier

ist ein jsfiddle: https://jsfiddle.net/luken/r69wfwjd/5/

Answer 1

Sie können diesen Effekt erhalten mehrere Schatten für das Pseudo-Element mit:

.dnd { 
 
    background: tomato; 
 
    padding: 1em; 
 
    margin: 2em; 
 
    border-radius: 0.25em; 
 
    width: 14em; 
 
    transition: all 0.25s; 
 
    font-family: Arial; 
 
} 
 

 

 
.dnd::before { 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 0.5em; 
 
    height: 0.5em; 
 
    margin: 0em 1.5em 0em -1em; 
 

 
    background-color: transparent; 
 
    box-shadow: 0.5em -1em 0 gray, 
 
       0.5em -0.25em 0 gray, 
 
       0.5em 0.5em 0 gray, 
 
       0.5em 1.25em 0 gray, 
 
       1.25em -1em 0 gray, 
 
       1.25em -0.25em 0 gray, 
 
       1.25em 0.5em 0 gray, 
 
       1.25em 1.25em 0 gray; 
 
}

<div class="dnd"> 
 
Thing that can be dragged 
 
</div>

ich ein Snippet erstellt haben, in dem das Gitter immer eine dunklere Version des Hintergrunds.

Es gibt zwei diagonal Gradienten, dass die gemeinsamen

einen Platz zu schaffen

.dnd { 
 
    background: tomato; 
 
    padding: 1em; 
 
    margin: 2em; 
 
    border-radius: 0.25em; 
 
    width: 14em; 
 
    transition: all 0.25s; 
 
    font-family: Arial; 
 
} 
 

 

 
.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, 0.25em 0.25em; 
 

 
    background-image: 
 
linear-gradient(45deg, rgba(0,0,0,0.7) 0.1768em, transparent 0.1767em), 
 
linear-gradient(225deg, rgba(0,0,0,0.7) 0.1768em, transparent 0.1767em); 
 
    
 

 
}

<div class="dnd"> 
 
Thing that can be dragged 
 
</div>

Answer 2

Ich denke, die beste Option könnte ein SVG-Bild Hintergrund sein.

In der Tat, wenn Sie stackoverflow eigenen Griff betrachten, um die Textarea (.grippie) zu erweitern, wenn Sie eine Antwort schreiben, wird ein SVG background verwendet.

So ist die Idee, die CSS-Eigenschaft background mit url(...) und data uri als URL zu verwenden.

Der SVG-Code wurde von here übernommen.

.grip { 
 
    background-size: cover; 
 
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg=="); 
 
    width: 10px; 
 
    height: 15px; 
 
    cursor: grab; 
 
    cursor: -webkit-grab; 
 
    margin: 0.5em; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="container" draggable="true"> 
 
    <div class="grip"></div> 
 
    <div class="content">A thing with a grip</div> 
 
</div> 
 
<div class="container" draggable="true"> 
 
    <div class="grip"></div> 
 
    <div class="content">A thing with a grip</div> 
 
</div>