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

Broken faded border effect in CSS – Photoshop

I’m trying to achieve the teal colored border as shown

enter image description here

As, you can see, the border here does not have a consistent pattern, It is broken/faded at random positions. If not the exact, i would like to have the closest looking.

Is this possible with CSS. If not, any alternate to achieve that.

There is an border-image property but for that, I would need such image.
I have no idea of photoshop. So, the only options are CSS or using an image.
I would also appreciate suggestions where I can find such border images.

https://jsfiddle.net/2oeb569z/1/

HTML:

<div class="container">
  <div class="wrapper">
    <div class="content">

    </div>
  </div>
</div>

CSS:

.container {
  margin: auto;
  margin-top: 20px;
  width: 400px;
  height: 300px;
  background: #131313;
  position: relative;
}

.wrapper {
  position: absolute;
  margin-top: 30px;
  margin-left: 20px;
  width: 330px;
  height: 230px;
  background: white;
  padding: 10px 15px;
}

.content {  
  height: 90%;
  border: 0px solid teal;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(teal), to(transparent));
  background-image: -webkit-linear-gradient(teal, transparent);
  background-image: -moz-linear-gradient(teal, transparent), -moz-linear-gradient(teal, transparent);
  background-image: -o-linear-gradient(teal, transparent), -o-linear-gradient(teal, transparent);
  background-image: linear-gradient(teal, transparent), linear-gradient(teal, transparent);
  -moz-background-size: 7px 100%;
  background-size: 7px 100%;
  background-position: 0% 0, 100% 0;
  background-repeat: no-repeat;
}
Tags:

4

Answers


  1. 0

    perhaps this would work?

    border: 2px solid rgba(79, 211, 255, 0.2);

    the rgba(red, green, blue, hardness) allows you both to specify a color and give it some opacity level, hence you can create some fading affect

    Login or Signup to reply.
  2. 0

    You can create an image with some pattern of randomly faded borders. You can make it big enough that it fits any object that you want to have a border. When you create a border you crop the image. You can also have separate images for the top and left border.

    Login or Signup to reply.
  3. 0

    I have found some border frames here, mostly are in psd.

    You will have to use photoshop to edit, or the best way will be making your own using photoshop. It will be easy to achieve this by using border images.

    Login or Signup to reply.
  4. 0

    I created One effect using gradient try this,You can use image that is better

      #grad1 {
 

height: 200px;
width:300px;
background: -webkit-repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%); /* For Safari 5.1 to 6.0 */
background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%);/* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%); /* Standard syntax (must be last) */

}
    <!DOCTYPE html>
<html>
<head>


</head>
<body>


<div id="grad1"></div>



</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search