With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
And if I put border-style: double then you know I can't pass two different color for the singe double border.
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {_x000D_
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);_x000D_
background-repeat: no-repeat;_x000D_
height: 100vh;_x000D_
}_x000D_
.double-border {_x000D_
background-color: #ccc;_x000D_
border: 4px solid #fff;_x000D_
padding: 2em;_x000D_
width: 16em;_x000D_
height: 16em;_x000D_
position: relative;_x000D_
margin: 0 auto;_x000D_
}_x000D_
.double-border:before {_x000D_
background: none;_x000D_
border: 4px solid #fff;_x000D_
content: "";_x000D_
display: block;_x000D_
position: absolute;_x000D_
top: 4px;_x000D_
left: 4px;_x000D_
right: 4px;_x000D_
bottom: 4px;_x000D_
pointer-events: none;_x000D_
}<div class="double-border">_x000D_
<!-- Content -->_x000D_
</div>If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {_x000D_
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);_x000D_
background-repeat: no-repeat;_x000D_
height: 100vh;_x000D_
}_x000D_
.double-border {_x000D_
background-color: #ccc;_x000D_
border: 4px solid #fff;_x000D_
box-shadow:_x000D_
inset 0 0 0 4px #eee,_x000D_
inset 0 0 0 8px #ddd,_x000D_
inset 0 0 0 12px #ccc,_x000D_
inset 0 0 0 16px #bbb,_x000D_
inset 0 0 0 20px #aaa,_x000D_
inset 0 0 0 20px #999,_x000D_
inset 0 0 0 20px #888;_x000D_
/* And so on and so forth, if you want border-ception */_x000D_
margin: 0 auto;_x000D_
padding: 3em;_x000D_
width: 16em;_x000D_
height: 16em;_x000D_
position: relative;_x000D_
}<div class="double-border">_x000D_
<!-- Content -->_x000D_
</div>