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>
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>
My attempt is like this:
.circle{
height: 80px;
width: 80px;
border: 6px solid #098688;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
position: relative;
width: 100px;
height: 57px;
border: solid 5px #098688;
border-color: transparent transparent #098688 transparent;
border-radius: 7px 7px 167px 154px;
text-align: left;
}
<div class="circle">
<h2>15+</h2>
</div>
<div class="box"></div>
<p>Years in Business</p>
If I minimize the height to take it close to the circle then the curve becomes flat But I need this like the way it is shown in the image.
You can do this with one element like below:
.box {
width: 80px;
height: 80px;
border-radius: 50%;
padding:5px; /*distance between full border and bottom boroder*/
/*full border */
background:
radial-gradient(farthest-side,transparent calc(100% - 6px), #098688 calc(100% - 5px))
content-box;
/* bottom border */
border: 5px solid transparent;
border-bottom-color:#098688;
display:flex;
align-items:center;
justify-content:center;
}
<div class="box">
<h2>15+</h2>
</div>
Another idea with box-shadow:
.box {
width: 80px;
height: 80px;
border-radius: 50%;
/*full border */
box-shadow:
0 0 0 5px #ffffff inset,
0 0 0 10px #098688 inset;
/* bottom border */
border: 5px solid transparent;
border-bottom-color:#098688;
display:flex;
align-items:center;
justify-content:center;
}
<div class="box">
<h2>15+</h2>
</div>
It would work with an absolute positioning, shown below, a relative positioning will not allow you to overlap divs
.box {
position: absolute;
top: 12.5%;
left: 0%;
width: 100px;
height: 57px;
border: solid 5px #098688;
border-color: transparent transparent #098688 transparent;
border-radius: 7px 7px 167px 154px;
text-align: left;
}
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
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 have got problem with positioning 2 divs inside a div. I want to have 2 divs next to each other but I dont know how. Here is my html
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
</div>
And this is my CSS:
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
}
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
You can check it out here how it looks. http://jsfiddle.net/VcU7J/
Thank you for any help!
EDIT: I also tried to add float elements into to the CSS but it screwed it more. :/
There are several ways to do this. The most traditional being to use CSS' float property your two divs:
CSS
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float:left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
/* this is needed to make sure your container background
"contains" your floated divs */
overflow:auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
float:left
}
fiddle
More on floats here
Use css floats to position divs next to each other, but do not forget to clear the floats after your done.
#game {
float:left;
}
#confirm {
float: right;
}
.clear {
clear: both;
}
and then the html would look like:
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
<div class="clear"></div>
</div>