What I am trying to do:
http://gyazo.com/e1bd6baee9730b61655c43bf05a071f7.png
Problem:
The black border won't work on the right side.
Picture:
http://gyazo.com/34b53980f862700b7444f433382b8b2c
<body class="container">
<div class="contentbody">
<div class="content">
</div>
</div>
</body>
.contentbody {
margin-top: 10;
border: solid 1px #000;
}
.content {
background: #232224;
width: 940px;
height: 500px;
border: solid 1px #373638;
}
What have I done wrong?
Considering if you use a border on a border, it should work as two borders..
Thanks.
http://jsfiddle.net/Lucak/
.contentbody {
display: inline-block;
margin-top: 10;
border: solid 1px #000;
}
.content {
background: #232224;
border: solid 1px #373638;
width: 940px;
height: 500px;
}
Use css3...
Example
<div id="box-shadow"></div>
#box-shadow {
width: 200px;
height: 75px;
background-color: orange;
border: blue solid 1px;
box-shadow: 1px 0px 10px 5px rgba(0,0,255,0.5);
-webkit-box-shadow: 1px 0px 10px 5px rgba(0,0,255,0.5);
}
Greetings.
Related
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 am trying but failing miserably on trying to make a custom css border like this using the border-image shorthand property.Is there a way to do partial borders? Maybe there is a better way to achieve what I am trying to do? I could always just insert this image but it doesn't seem like this would resize well once you do that.
We can also achieve this by directly positioning the content inside the container as below.
Here we have positioned the content using margin, we can also do this by absolutely positioning the content.
.container {
border: 5px solid #000;
border-bottom: 0;
height: 10px;
margin-top: 15px;
}
.content {
background: #fff;
text-align: center;
border-left: 5px solid #000;
border-right: 5px solid #000;
height: 25px;
line-height: 25px;
width: 150px;
margin: -15px auto 0; /* height 25px + 5px border = 30/2 = 15 */
}
<div class="container">
<div class="content">Header</div>
</div>
Here is a responsive solution with less of code and with transparency:
.container {
text-align: center;
overflow: hidden;
border:5px solid;
border-image:linear-gradient(to bottom,transparent 10px,#000 10px,#000 100%) 4;
height:50px;
margin:5px;
}
.top {
display: inline-block;
position: relative;
padding: 0 10px;
}
.top::before,
.top::after {
content: "";
position: absolute;
top: calc(50% - 8px);
width: 100vw;
height: 15px;
padding: 5px 0;
box-sizing: border-box;
background: #000 content-box;
}
.top::before {
right: 100%;
border-right: 5px solid;
}
.top::after {
left: 100%;
border-left: 5px solid;
}
body {
background:pink;
}
<div class="container">
<div class="top">Hello</div>
</div>
<div class="container">
<div class="top">More Hello</div>
</div>
<div class="container">
<div class="top">H</div>
</div>
You can use display:flex to wrap and "play" with border to div inside wrap
.wrap{
display:flex;
width:100%;
}
.wrap div{
width:calc(100vw / 3);
}
.header{
text-align: center;
border-right: 5px solid black;
border-left: 5px solid black;
}
.border{
margin-top: 5px;
height:8px;
border-top: 5px solid black;
}
.b-left{
border-left: 5px solid black;
}
.b-right{
border-right: 5px solid black;
}
<div class="wrap">
<div class="border b-left"></div>
<div class="header">Header</div>
<div class="border b-right"></div>
</div>
I am trying to make a div with decoration borders. This div should be:
responsive
react to an resize operation
and adjust it's height and width depending on the embeded image
What I have figured out yet is this fiddle example and the final solution should be looks like exactly in this way:
.stack {
margin-top: 50px;
}
.c1 {
position: absolute;
z-index: 10;
border: 1px solid black;
width: 300px;
height: 300px;
background: red;
}
.c1 img {
width: 300px;
}
.c2 {
position: absolute;
z-index: 5;
background: bluex;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -5px;
margin-left: 6px;
width: 300px;
height: 300px;
}
.c3 {
position: absolute;
z-index: 1;
background: yellowx;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -10px;
margin-left: 11px;
width: 300px;
height: 300px;
}
<div class="stack">
<div class="c1">
<img src="https://dummyimage.com/300.png/09f/fff" />
</div>
<div class="c2"></div>
<div class="c3"></div>
</div>
Can anyone help me, to extend or rebuild this for the other requirements.
You can try multiple box-shadow
img {
border: 2px solid;
margin: 20px;
box-shadow:
6px -6px 0 #fff,
8px -8px 0 #000,
12px -12px 0 #fff,
14px -14px 0 #000;
}
<img src="https://dummyimage.com/300.png/09f/fff" />
I think this is what u need.
<div class="stack">
<div class="c1">
</div>
<div class="c2-a"></div>
<div class="c2-b"></div>
<div class="c3-a"></div>
</div>
.stack {
margin-top:50px;
position:relative;
}
.c1 {
z-index: 10;
border: 1px solid red;
width:95%;
background:red;
background-image:url('https://dummyimage.com/300.png/09f/fff');
background-repeat:no-repeat;
background-size:100% auto;
padding-top:70%; /*adjust the padding value */
}
.c2-a {
position:absolute;
z-index: 5;
background:bluex;
border-top: 1px solid black;
top:-7px;
right:3%;
width:90%;
}
.c2-b {
position:absolute;
z-index: 5;
background:bluex;
border-top: 1px solid black;
top:-15px;
right:0;
width:80%;
}
.c3-a {
position:absolute;
z-index: 1;
background:yellowx;
border-right: 1px solid black;
right:0;
top:-15px;
padding-top:70%;
}
.c3-b {
/* create the onther line lol */
}
http://jsfiddle.net/kqjwv48r/4/
Different solution with jquery:
$(document).ready(function(){
var width = $(".c1").width();
$(".c2").css({'width':(width +'px'), 'height':(width +'px')});
$(".c3").css({'width':(width +'px'), 'height':(width +'px')});
});
.stack {
margin-top: 50px;
}
.c1 {
position: absolute;
z-index: 10;
display: inline-block;
}
.c1 img {
box-sizing: border-box;
border: 1px solid black;
}
.c2 {
position: absolute;
z-index: 5;
background: bluex;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -8px;
margin-left: 8px;
}
.c3 {
position: absolute;
z-index: 1;
background: yellowx;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -15px;
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stack">
<div class="c1">
<img src="https://dummyimage.com/200.png/09f/fff" />
</div>
<div class="c3"></div>
<div class="c2"></div>
</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>
As shown below:
I want to draw a sector of a circle using borders only in order to make something like a chart, but if it's possible I don't want to use any plugins.
.circle {
background-color: transparent;
border: 4px solid #0c8a98;
border-radius: 100%;
height: 50px;
width: 50px;
}
<div class="circle"></div>
Do this. The border sides need to added individually.
.circle {
width: 50px;
height: 50px;
background-color: transparent;
border-top: none;
border-bottom: 4px solid #0c8a98;
border-left: 4px solid #0c8a98;
border-right: 4px solid #0c8a98;
border-radius: 100%;
}
<div class="circle"></div>