I have been working on a project and I was able to create a double border css with box shadow... but the problem is I need a transparency on the first box..
I tried something:
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.box {
width: 5rem;
height: 3rem;
background-color: #789;
border: 3px solid black;
box-shadow: 8px -8px 0 -3px #ccc, 8px -8px 0 0 #000;
}
<div class="box"></div>
I need http://prntscr.com/nw6fed - the background of the first box should be transparent...Any help
You can get your second border with a pseudo element. I used :after in this example.
.box {
width: 200px;
height: 200px;
border: 3px solid cyan;
position: relative;
padding: 40px;
box-sizing: border-box;
}
.box::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
display: block;
top: 20px;
left: 20px;
border: 3px solid magenta;
}
<div class="box">
<h1>Text</h1>
</div>
Related
I am playing with CSS pseudo elements. As soon as the menu button gets hovered it receives a small orange underline. This element should stay as soon as the dropdown-container is visible. Is there a light weight solution to achieve such behaviors?
In case pseudo elements aren´t the best solution for my need, I am open minded for different solutions.
https://jsfiddle.net/j3g49fwd/
$(".dropdown-btn").click(function() {
this.classList.toggle("increase")
$(".dropdown-container").toggle()
})
.wrapper {
position: relative;
top: 5vh;
margin: 40px 30px 30px 30px;
height: fit-content;
background: white;
border-radius: 10px;
box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
15px 15px 15px rgba(70, 70, 70, 0.12);
padding: 1vw;
}
.dropdown-btn {
display: flex;
justify-content: center;
padding: 10px 0px 10px 20px;
text-decoration: none;
display: block;
border: 1px solid transparent;
background: none;
height: fit-content;
min-height: 5vh;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
transition: all 0.3s ease-in-out;
}
.dropdown-btn:after {
content: "";
display: block;
margin: 3px 0 0 0;
width: 0;
height: 1px;
background: rgb(242, 123, 57);
transition: all 0.4s;
}
.dropdown-btn:hover::after {
width: 100%;
}
.dropdown-container {
display: none;
padding: 10px 20px 10px 20px;
margin: 0 0 2vh 0;
}
.increase {
font-size: 20px !important;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<button class="dropdown-btn">I am a menu button
<label class="menu-title" id="flow-menu-title"></label>
<i class="fa-solid fa-gear col-1 dropdown-icon"></i>
</button>
<div class="dropdown-container">
Hello Stackoverflow
</div>
</div>
</body>
</html>
if I understand you correctly, you should be able to edit the CSS just like this:
.dropdown-btn.increase::after,.dropdown-btn:hover::after {
width: 100%;
}
https://jsfiddle.net/bkefg9dt/
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'm trying to draw a circle with tick/checkmark inside it using pure css3
.success-checkmark {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
How can i achieve i have tried with the above code?
You can use content: '✔'; only on pseudo elements, so try using the following selector:
.success-checkmark:after {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 20px;
height: 20px;
text-align: center;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></div>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.circle {
position: relative;
background: #00B01D;
border-radius: 100%;
height: 120px;
width: 120px;
}
.checkMark {
position: absolute;
transform: rotate(50deg) translate(-50%, -50%);
left: 27%;
top: 43%;
height: 60px;
width: 25px;
border-bottom: 5px solid #fff;
border-right: 5px solid #fff;
}
<div class="wrapper">
<div class="circle">
<div class="checkMark"></div>
</div>
</div>
I found a template online to which I made modifications. Kindly check if this works for you.
:root {
--borderWidth: 7px;
--height: 25px;
--width: 12px;
--borderColor: white;
}
body {
padding: 20px;
text-align: center;
}
.check {
display: inline-block;
transform: rotate(45deg);
height: var(--height);
width: var(--width);
border-bottom: var(--borderWidth) solid var(--borderColor);
border-right: var(--borderWidth) solid var(--borderColor);
}
.behind {
border-radius: 50%;
width: 40px;
height: 40px;
background: black;
}
<div class="behind">
<div class="check">
</div>
</div>
css
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
}
vertical adjustment
line-height:20px;<--- adjust vertical alignment
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
width: 90px;
height: 90px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></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>