Photoshop Question posted in
The official user guide can be found here.

How to animate a black and white dashed border like a "Photoshop selection"?

When I select something with one of the selection tools in Photoshop, an animated streaming black-and-white colored dashed stroke (border) surrounds the selection.

 _ _ _ _ _ _ _ _ _ _
|                   |
|                   |
|                   |
|_ _ _ _ _ _ _ _ _ _|

Is there an CSS-only way to recreate this border style?

Perhaps use the below GIF as a stroke’s background image?

→ selection animation photoshop

I figured this CSS is not possible:

.selected {
  border: 1px solid url("selection.gif");
}

I tried a black dashed border on top of a white solid border, however could not find a way to animate or offset somehow.

Update:

I have been made aware of some borders that are dashed and stream. However these are single coloured, and have open ’empty’ spaced gaps between dashes. I’m looking for a Photoshop selection style version:

white dash → black dash → white dash → black dash

Instead of:

Black dash → empty space → black dash → empty space

Like so:

enter image description here

Update 2

This code-pen by mister St.G from Minneapolis comes close, however is a single coloured version with gaps.

Tags:

2

Answers


  1. 0

    What I can infer from your post is that you want to have a dashed border.
    Here’s what to do:

    #bordered-image {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}
    Login or Signup to reply.
  2. 0

    It’s close! however this would result in a one colour dashed version
    and not a two coloured (black and white) Photoshop selection style
    variant.

    You can use this solution and simply just change colors as @chojnicki and @Pablo already have said in comments.

    body{ background-color:blue; }
.border {
  height: 100px;
  width: 200px;
  background: linear-gradient(90deg, black 50%, white 50%), linear-gradient(90deg, black 50%, white 50%), linear-gradient(0deg, black 50%, white 50%), linear-gradient(0deg, black 50%, white 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search