I'm trying to create semi-transparent borders like on this screenshot. I could only achieve this.
How to make the borders look like those on the screenshot?
There is a CSS3 property for the background that you can use in order to have a semi-transparent borders that stay outside the background of the element. It's called background-clip. By default its property is background-clip: border-box;.
In you case you should probably use:
background-clip: padding-box;
That way the background will touch the borders but will not cover them so they will stay semi-transparent.
Reference: http://www.w3schools.com/cssref/css3_pr_background-clip.asp
Another options is using box-shadow in stead of border. For example:
element { box-shadow: 0 0 0 5px rgba(255, 255, 255, .5; }
It will have the same effect.
you dont. you just create an element behind your box and style it to look like a border:
body{
background:url(http://fc07.deviantart.net/fs70/f/2013/174/3/e/recycled_texture_background_by_sandeep_m-d6aeau9.jpg) 1000px 1000px;
}
.boxContainer{
width:500px;
height:200px;
display:block;
margin:0 auto;
position:relative;
}
.boxContainer .border{
width:100%;
height:100%;
display:block;
background:white;
opacity:0.3;
border-radius:10px;
position:absolute;
}
.boxContainer .box{
display:block;
margin:10px;
width:calc(100% - 20px);
height:calc(100% - 20px);
background:#EEEEEE;
position:absolute;
border-radius:5px;
}
<div class="boxContainer">
<div class="border"></div>
<div class="box"></div>
</div>
UPDATE:
here is an example of how it would look on your website:
Fiddle
Related
How would I create a "short" vertical border between columns in xaringan / remark?
I want to add a vertical border between columns in my slides, but one that's only about 80% the height of the div. Here's the xaringan example for two column layout: https://slides.yihui.name/xaringan/#15
I suppose the css for the border of the left column could look something like this:
.pull-left {
border-right-width: 1px;
border-right-style: solid;
padding-right: 2px
}
But how can I get it to be a little shorter than the height of the div?
Yes, you can create 80% height from the parent div
<div></div>
div {
height:200px;
width:500px;
background:gold;
position:relative;
border-top:10px solid grey;
border-bottom:2px solid #000;
}
div:after {
content:"";
position:absolute;
top:20%;
right:0;
width:2px;
height:60%;
background:#000;
}
I've been trying to look around as I know there are a lot of questions, tutorials, tools to achieve a two solid background but the problem is that I can't achieve a simple design.
My Layout: http://i.stack.imgur.com/b4qO7.jpg
What I exactly can't achieve:
Having the grey color start at the middle of the first box no matter what the resolution is and I'm unable to do that with the Gradient tool.
Make that shadow like effect disappear when I apply it using CSS.
Here's what I achieved so far:
background: -webkit-linear-gradient(top, white 0, White 370px, white 301px, #818285 301px, #818285 300px, #818285 100%) no-repeat;
I hope you can look at my question as different not as a duplicate because I've been looking for a while with no success to find a similar case.
By adding percentages after you set the colors in your linear-gradient property, you can achieve this affect:
html, body{ margin:0; padding:0; height:100%; width:100%; background:#000; }
#container{
width:95%;
height:90%;
margin:auto;
background:-webkit-linear-gradient( #fff 0%, #fff 40%, #999 40%, #999 100% );
background:linear-gradient( #fff 0%, #fff 40%, #999 40%, #999 100% );
/*Vertical Align*/
position:relative;
top:50%;
transform:translateY( -50% );
}
#content{
width:80%;
height:80%;
background-color:#eee;
margin:auto;
/*Vertical Align*/
position:relative;
top:50%;
transform:translateY( -50% );
}
p{
margin:0; padding:0; text-align:center;
/*Vertical Align*/
position:relative;
top:50%;
transform:translateY( -50% );
}
<html>
<body>
<div id="container">
<div id="content"><p>Div Content Here<p></div>
</div>
</body>
</html>
The more stops or color transitions you add, the crisper this effect should be.
I used a work around I'm not sure if this is a clean fix but It's diffidently what I want.
HTML
<body>
<div class="bg_2"></div>
</body>
CSS
body {
background-color: grey;
}
.bg_2 {
background-color: white;
width: 100%;
height: 380px;
position: absolute;
top: 0;
z-index: -1;
}
This method helped me achieving a clean separation between the two colors because I don't know why the gradient technique leaves a soft shadow effect between the stops which is not very neat. Also the grey part of my background will start always at a fixed position.
Bonus: If you need to build the background to move will scrolling to maintain the two color background no matter the height of the page you can change the position from absolute to fixed.
This question already has answers here:
How to make an inverse transparent circle in CSS [duplicate]
(2 answers)
Transparent hollow or cut out circle
(7 answers)
Closed 8 years ago.
Is there a way to get this effect in CSS ?
I try to play with this css but it cuts only first layer.
div{
width:300px;
height:300px;
position:relative;
overflow:hidden;
}
div:before{
content:'';
position:absolute;
bottom:50%;
width:100%;
height:100%;
border-radius:100%;
box-shadow: 0px 300px 0px 300px #448CCB;
}
The simplest way is to use a transparent DIV with overflow hidden (the gray one)
than inside simply put a circle with box-shadow with really large spread.
html, body{height:100%;}
body{
background: url(http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/FIFA-Street-London1web.jpg?cb=1330546446) 50% / cover;
}
.hasCircle{
width:150px;
height:300px;
position:relative;
overflow:hidden;
float:left;
}
.hasCircle:after{
content:" ";
position:absolute;
left:0; right:0;
margin:100px auto;
width:100px;
height:100px;
border-radius:50%;
box-shadow: 0 0 0 1000px #444;
}
<div class="hasCircle"></div>
<div class="hasCircle"></div>
<div class="hasCircle"></div>
As you can see above I've used the :after pseudo element which might prevent some text in .hasCircle to be visible (due to the overlapping pseudo-element), but it's just to get an idea, you can do it using a real element like:
<div class="boxTransparentOverflow">
<div class="theTransparentCircleWithGraySpread"></div>
Some text
</div>
Hey so I'm trying to create a nested div element so that it lies within another div element but fills up its parent entirely except for a perfect border around it that 30 px or so like this http://s23.postimg.org/su2o83m7v/div.png
I've tried padding, margins and positioning with css but cant seem to keep its width and the bottom part of the padding, any suggestions?
Two ways to go about this.
1) Box-sizing
.OuterDiv {
box-sizing:border-box;
border:30px solid green;
}
.InnerDiv {
background-color:red;
border:4px solid blue;
}
Here is the jsFiddle for it.
2) Position absolute
.OuterDiv {
position:relative;
height:100px;
background-color:green;
}
.InnerDiv {
position:absolute;
top:30px;
left:30px;
right:30px;
bottom:30px;
background-color:red;
border:4px solid blue;
}
Here is the jsFiddle for that.
Personally I would choose the first option any day of the week (hell of a lot easier to maintain, and really you should use box-sizing:border-box; for everything), but if you desperately need IE7 support the second one will work there whereas the first is only IE8+.
Try the below code
<html>
<head>
<style>
.outer{
height:200px;
width:200px;
padding:30px;
background-color:#ff0000;
}
.inner{
height:100%;
width:100%;
background-color:#00FF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
I am giving the outer div padding of 30px, and rest is simple just made height & width 100%
used background-color to show the div differently
I found this too work as well
#parent
{
border:1px solid black;
background:#ddd;
display:inline-block;
}
#child
{
width:180px;
margin:30px;
background:grey;
}
http://jsfiddle.net/Y37su/
I want a CSS inset box-shadow to appear on top of the elements inside of the container with the box-shadow, specifically background colors of child-elements.
Demo: http://jsfiddle.net/Q8n77/
<div class="parent">
foo
<div class="content">bar</div>
</div>
<style>
.parent {
box-shadow : inset 0 0 5px 0 black;
}
.content {
background : #EEE;
}
</style>
Any ideas? Can do whatever with the HTML, but need to be able to click-through, so no 100% width/height DIVs on top of everything.
If all you need is to have the inset shadow show through background colors, you can use transparent rgba (or hsla) colors rather than hex codes;
.parent {
box-shadow: inset 0 0 5px 0 black;
}
.content {
background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}
Demo at http://jsfiddle.net/Q8n77/7/
Not everyone has the ability to change HTML structure. If you can only access the CSS, you could try the following from this post: https://stackoverflow.com/a/13188894/491044
Alternatively, you can use a pseudo element:
HTML:
<div>
a
</div>
CSS:
div {
height:300px;
color:red;
position:relative;
}
div:before {
content:'';
display:block;
box-shadow:inset 0 0 10px black;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
One possibility is to play with the padding.
.parent {
box-shadow : inset 0 0 5px 0 black; padding:.23em;
}
http://jsfiddle.net/jasongennaro/Q8n77/6/
you could try to position an overlay div on top of your parent with position: absolute; and give that the shadow (untested theory) with something like this:
HTML
<div class="parent">
<div class="overlay"></div>
foo
<div class="content">bar</div>
</div>
CSS
.parent {
position: relative;
}
.content {
background : #EEE;
}
.parent .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow : inset 0 0 5px 0 black;
}
You can set box-shadow on both parent and child.
Adding this approach since this is how I solved my version of this problem.
I basically add a ::before, or another element with a drop shadow in the parent, but offset it so only the shadow part is showing. Also I give the parent a overflow:hidden. This way, the content should still be interactive. :)
Mileage may vary depending on exact markup of course. But thought I should add this here.
codepen: http://codepen.io/mephysto/pen/bNPVVr
.parent {
background:#FFF;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.parent::before{
content:"";
display:block;
width:100%;
height:25px;
margin-top:-25px;
box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}
I would like to add something with xec's answer.
I liked your suggestion. But I think it has to do with the transparency of the inner element. If the inner element has certain transparency then the shadow will appear.
Also, the strength of the shadow also depends on the transparency. The more transparent the inner element, the stronger the shadow and the strongest when the background color is transparent.
For example, if the background color is rgba(255,255,255,0.5) then the shadow will appear stronger than when it is rgba(255,255,255,0.7). And even if you use rgba scheme and your alpha value is 1 or the background color is rgba(255,255,255,1) then also the show will not show up.
Given that, it is not possible to show the shadow if the inner element has an opaque background color.
See the 3 examples here for reference: https://codepen.io/rajatkantinandi/pen/PoJgMMw?editors=1100
If you need shadow on top only, this will do it:
.element
{
box-shadow:inset 0px 3px 3px #BBB;
}