I tried to achieve Shadow effect on the border only like simulated in Adobe XD below
I tested to remove the color of background but it hides the shadow within container
<style>
body {
padding: 30px;
}
.border-shadow {
box-shadow: 1px 1px 5px black;
background-color: transparent;
width: 100px;
padding: 10px;
}
</style>
<div class="border-shadow">
tests
</div>
Is there any css only solution for this? Thank you.
here is an example of achieving your goal!
We use the pseudo-element ::before and blur() effect.
div {
position: relative;
width: 344px;
height: 121px;
border: 2px solid #bed5e6;
border-radius: 2px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 5px;
left: 5px;
border: 5px solid rgba(0,0,0,.07);
border-radius: 2px;
width: 100%;
height: 100%;
filter: blur(4px);
}
<div><h1>Test</h1></div>
You can combine an inset box shadow with a standard one to achieve this look:
#myDiv {
background: transparent;
border: 1px solid skyBlue;
box-shadow: inset 3px 3px 5px rgba(0,0,0,.1), 3px 3px 5px rgba(0,0,0,.1);
height: 100px;
width: 250px;
}
<div id="myDiv">
</div>
Alternatively, you can use the ::after psuedo-element and apply a thicker border and blur as follows:
#mydiv {
background: transparent;
border: 1px solid skyBlue;
height: 100px;
position: relative;
width: 250px;
}
#mydiv::after {
border: 3px solid #ccc;
content: '';
display: block;
filter: blur(2px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="mydiv"></div>
drop-shadow can also do it:
body {
padding: 30px;
}
.border-shadow {
border:1px solid;
filter:drop-shadow(4px 4px 3px red);
background-color: transparent;
width: 100px;
padding: 50px;
}
<div class="border-shadow">
</div>
been working for bout an hour before i posted the question, suprisingly i found the answer just moment after
by using filter css : drop-shadow i can achieve this effect
<style>
body{
padding:30px;
}
.border-shadow{
border:5px solid black;
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
background-color:transparent;
width:100px;
padding:10px;
}
</style>
<div class="border-shadow">
<div class="test-text">
Tests
</div>
</div>
here is the pen
Codepen
Related
I have code that provides me that
CSS Code:
.about-best-big-vector-right {
width: 1380px;
float: right;
border-top: 140px solid #272838;
border-left: 75px solid transparent;
position: relative;
outline: 3px solid #eda225;
outline-offset: .3rem;
-moz-outline-radius-bottomleft: 2em;
}
HTML Code: <div class="about-best-big-vector-right"></div>
But I want to achive that and can't make cornered bottom-left?
Don't use border for this, use skew transformation:
.box {
overflow: hidden;
width: 40%;
margin-left: auto;
}
.box::before {
content: "";
display: block;
margin-right: -10px;
height: 150px;
background: #000 content-box;
padding: 5px;
border: 4px solid orange;
transform-origin: top;
transform: skewX(30deg);
}
<div class="box">
</div>
I want to make a div that a 2px solid white border on the bottom, left, right, and most of the top except for a small part roughly 50px wide that will have a 1px solid green border. I know php if you think that will help. My current css is this...
div#ghostBox{
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
left: 550px;
top: 270px;
}
Btw I am making a game of pac-man.
You can keep the use of only one element and rely on gradient:
body {
background: pink;
}
.box {
width: 170px;
height: 100px;
border: 5px solid white;
border-top: none;
background: linear-gradient(to right, white 50px, green 0) 0 0/100% 5px no-repeat;
}
<div class="box">
</div
i think you want this (:
body{
background-color:black;
}
p{
color:white;
margin: 1px;
}
/* TEXT BOX */
div#ghostBox{
height: 100px;
width: 150px;
border: 2px solid white;
border-top: 5px solid white;
position: fixed;
left: 50px;
top: 50px;
color:red;
padding: 0px;
padding-top: 0px;
}
/* High text color line */
div#text{
border-top: 5px solid green;
position: absolute;
margin-top: 0px;
width: auto;
margin: 0px;
}
/* High color line after text */
div#notext{
border-top: 5px solid red;
margin-top: 0px;
width: auto;
margin: 0px;
}
<div id="ghostBox"><div id="text"><p>good luck
</p></div><div id="notext"></div></div>
You can do it using css after or before pseudo selector. Below is just an example . You can modify it according to your requirement
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
background: red;
}
div#ghostBox:after {
content: '';
width: 50px;
border: 2px solid green;
position: absolute;
padding-right: 50px;
}
<div id="ghostBox"> Ghost Box</div>
There may be better ways, but you could use a span at the beginning of the div:
Just set the border-top for the span and set its width:
(I removed the left and top properties for the example)
body {
background-color: red;
}
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
}
span {
border-top: 2px solid blue;
width: 50px;
position: absolute;
}
<div id='ghostBox'>
<span> </span> test
</div>
I am trying to make this in CSS.
But this is how it renders in IE11.
My code below works in Chrome, but not in IE 11. "www.CanIUse.com" says the clip rule works in IE11. What is wrong with my CSS?
body{margin: 50px;}
.bracket-container {
position: relative;
border: 0px solid green;
width: 25px;
height: 58px;
width: 25px;
padding: 0;
margin: 0;
}
#square-clip{
width: 24px;
height: 50px;
background: none;
border: 4px solid red;
border-left: 0;
border-radius: 8px;
clip: (0, 0,0, 25px);
position: absolute;
left:0;
}
#triangle-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 10px solid red;
border-bottom: 8px solid transparent;
position: absolute;
right:-12px;
top: 21px;
}
<h3>Using the new CSS Clip-path</h3>
https://caniuse.com/#search=clip-path</br>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip-path"></div>
</div>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip"></div>
</div>
No need to use clip at all, nor multiple divs.
Use just one, adjust the borders as needed for the bracket body, then a pseudo element for the triangle with the good ol' borders triangle technique
.bracket{
border: 4px solid red;
width:100px; height:150px;
border-left:none;
border-radius:0 10% 10% 0;
position:relative;
}
.bracket::after{
content:"";
width:20px; height:20px;
position:absolute;
left:100%;
top:50%; transform:translateY(-50%);
box-sizing:border-box;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
border-left:15px solid red;
}
<div class="bracket"> </div>
This is what I want to archive:
This is my code:
.mybox {
width: 200px;
height: 60px;
background-color: #00483b;
/* ... and other simple stuff border: THIS IS MY PROBLEM */
}
<div class="mybox">Text Inside</div>
How can I draw a white border around my div? This border should be some pixels inside the box. I am pretty sure that I have seen something like that or am I wrong and that is not possible? How should I proceed then?
You can use outline, which draws an additional border outside of the normal border.
.mybox {
width: 200px;
height: 60px;
background-color: #00483b;
border: 1px solid white;
outline: 3px solid #00483b;
}
<div class="mybox">Text Inside</div>
You can set a white border on the div and then use the box-shadow property to give the second outer border
.mybox {
width: 200px;
height: 60px;
background-color: #00483b;
border:1px solid white;
box-shadow: 0 0 0 3px #00483b;
}
<div class="mybox">Text Inside</div>
Check this solution.
.mybox {
width: 200px;
height: 60px;
background-color: #00483b;
border: 1px solid #fff;
outline: 3px solid #00483b;
color: #fff;
text-align:center;
vertical-align:middle;
display: table-cell;
vertical-align: middle;
font-weight:600;
letter-spacing:1px;
}
<div class="mybox">Text Inside</div>
Check This Solutions.
Another option is to use multiple box-shadows
.mybox {
width: 200px;
height: 60px;
background-color: #00483b;
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #00483b;
}
<div class="mybox">Text Inside</div>
You can also use :after pseudo element to create border.
.mybox {
background: #00483B;
padding: 20px 45px;
text-align: center;
display: inline-block;
color: white;
position: relative;
}
.mybox:after {
position: absolute;
width: calc(100% - 10px);
height: calc(100% - 10px);
transform: translate(-50%, -50%);
border: 1px solid white;
top: 50%;
left: 50%;
content: '';
}
<div class="mybox">Text Inside</div>
This is what I mean:
I want to put a border 2px in from the containing box. Is this possible using only CSS?
One way, using pseudo elements:
http://jsfiddle.net/1x2chmee/1/
.box {
width: 200px;
height: 100px;
background-color: orange;
position: relative;
padding: 16px;
}
.box:after {
content: "";
position: absolute;
left: 2px;
right: 2px;
top: 2px;
bottom: 2px;
border: 2px solid #fff;
}
This method is a bit verbose, but it is well-supported by browsers and flexible.
Another example with a few more options: http://jsfiddle.net/1x2chmee/2/
You can also use the CSS outline property:
.yourDiv {
height:300px;
width:500px;
background-color: #E9967A;
outline-style: solid;
outline-offset: -10px;
outline-width: 3px;
outline-color: #fff;
}
Fiddle here: http://jsfiddle.net/H7KdA/39/
More info about this CSS property: http://www.w3schools.com/css/css_outline.asp
Browser support: http://caniuse.com/#feat=outline
Edit: IE9 and IE10 don't support outline-offset:
<div class="lol"> <span class="title">This is a title</span> </div>
.lol{
width: 300px;
height:200px;
background: #ff8800;
position: relative;
}
.lol:after{
content:'';
width: 280px;
height:180px;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
border:3px solid #fff;
}
.title{
display: block;
text-align: center;
color: #fff;
font-family: verdana;
font-size: 1.3em;
padding-top: 20%;
}
See it here
You can use specific CSS3 box-shadow rules.
-moz-box-shadow: inset #B3B3B3 0 -1px 0 0;
-webkit-box-shadow: inset #B3B3B3 0 -1px 0 0;
box-shadow: inset #B3B3B3 0 -1px 0 0;
original post: How can I make inner border using CSS3?