I am trying to use border-box to create the effect of having a black 50% transparency border around 3 column images. I have read that in order to make the border move inwards to use padding and I cannot get it to work.
Here is my CSS code:
div.column-image {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1em solid rgba(0, 0, 0, 0.5);
padding: 5px;
float: left;
}
And this is the result
What I want is for the border to go inwards which will make the picture see through the border.
Here's an example:
I have tried to follow the examples from this tutorial: CSS Tricks: Transparent Borders with background-clip, and have failed.
Please help I don't know what to do ~
Edit: Here's the live version of the site
Would you be open to doing this through a background-image and box-shadow solution? It's better practice to keep it minimal and cut down on unnecessary markup (both in your CSS and HTML). All you need is one div that will contain both the border and image.
.transparent-bordered-image {
background-image: url(http://your-url-here);
background-size: cover;
box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
}
This is an example:
http://jsfiddle.net/fBY9z/1/
Like this? jsFiddle example
I added the border via a pseudo element placed on a wrapping div element.
Sadly, you can't use the psuedo element on the img itself, as the spec states:
12.1 The :before and :after pseudo-elements (reference)
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
HTML
<div id="imgwrap">
<img/>
</div>
CSS
#imgwrap {
position:relative;
display:inline-block;
}
#imgwrap:after {
content:"\A";
border:20px solid rgba(10, 0, 255, 0.5);
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
box-sizing: border-box;
-wekbit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
img { vertical-align:top; }
Related
I have a div which contains three child div's, and for some reason the first child div is properly positioned within its parent, but the other two children are positioned lower from the first child. The more content I add to the first child the lower the other children become positioned relative to the top of the container parent.
Heres a jfiddle showing you my problem: http://jsfiddle.net/gY72a/7/
the three children arent on the same line here but you can see the problem when you look at how high the first child is positioned compared to the second one.
Code is already in the jfiddle, but here is the css I am using:
/*Parent div in which all three children are nested*/
#main {
width: 80%;
min-width: 1000px;
background-color: #FFFFFF;
margin: 1% auto;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
/*First child*/
#leftside {
display: inline-block;
width: 18%;
margin: 10px 1% 8px;
padding: 1em;
background-color: rgba(0, 0, 0, 0.1);
}
/*Second Child*/
#innermain {
display: inline-block;
width: 50%;
margin: 10px 1% 8px;
padding:1em;
background-color: #eaeaea;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
/*Third child*/
#rightside {
width: 20%;
min-width: 320px;
padding: 1em 0px;
display: inline-block;
background: #FFFFFF;
margin: 10px 1% 8px ;
border-radius: 1px;
border: 1px solid rgba(0, 0, 0, 0.15);
}
The main problem here is that you are using `display:inline-block" and also that you are using a combination of percentages and margins with ems. Now, theoretically, you could have 3 blocks, and add their widths and the padding, and the margin - to all equal 100, but even if you wanted to go that route, you are using the inline-block method - which by default leaves a little unwanted space between each block, and throws off that number. Beyond that, padding and margins add to the size of the box, so if you have a box that is 20% wide, and has a padding of 1em and a margin of 1% - then it's 20%+2%+2em (+total border width) - and what does that equal? Well, I don't know - and the browser isn't going to love dealing with that either, because depending on window size, that number is going to be different. So, if you want to know the problem, those are the factors leading to the problems.
If you want a solution, then you have a few routes, but they depend on what you need to do. It doesn't appear as though you are building this site responsively. So in that case, you are working with a 1000px wide canvas. - and in that case, then there is no reason why you cant just use px to add up margin/padding/box size etc to equal 100. leave the boxes as display: block; and float them left.
If you want to come into the present, and start using a bit of modern stuff - you should read about box-sizing: border-box - What that does is change the box model so that the padding and borders of boxes moves inside the box and therefore doesn't add to it's size. It's really great and makes working with css a pleasure. Then you don't have to add stuff up to determine the box's size. - so - unless you need to support IE 7 - I would suggest you make it standard in your overall approach to CSS from now on. http://www.paulirish.com/2012/box-sizing-border-box-ftw/
If you are going to float the columns in their "wrapper" thing - then that wrapper thing is no longer going to regognize them in the same way, so you are going to have to look up clearfixing the div, or use overflow:hidden; (which has some issues) or float that wrapper itself to get them to live in the same world again, because floating takes the elements out of the regular flow.
In the case that you can go with box-sizing, then you still have to worry about margins(they don't move inside the box). So, you'll need to have those in percentages, or get another fancy way of making consistent gutter widths, but since you have a static sized site - I'm not going to go into that.
Here is a fiddle without all of your styles - to show how it works.
HTML
<div class="content-wrapper">
<div class="column what">
<h2>What We do</h2>
<p>Bla bla bla</p>
</div>
<div class="column main-content">
<h2>Latest News and Events</h2>
</div>
<div class="column where">
<h2>Where To Find Us</h2>
</div>
</div> <!-- .content-wrapper -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
overflow: hidden; /* should be clearfix instead */
}
.column { /* what the columns have in common */
float: left;
padding: 1em;
}
.what {
width: 25%;
margin-right: 1%;
background-color: orange;
}
.main-content {
width: 48%;
margin-right: 1%;
background-color: yellow;
}
.where {
width: 25%;
background: red;
}
You have specified display:inline-block for the divs below which should align them properly in a row with the widths given. But the width is taken by the content section of the div and the div adds the margins given to them with the width. This is why the blocks are jumping below one another.
When you apply box-sizing: border-box; to the divs, the width of the div will be calculated including the margins given to the corresponding divs.
Hope this helps you.
#main, #leftside, #innermain{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
This should do what you want:
#main div {
float: left;
}
I want to Create Box shadow as given below.
As per my study of Box shadow. It takes below parameters:
DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}
Please, Find the jsfiddle for this.
To create above examples, I need to use box shadow.
For example 1, I used below style:
box-shadow:0px 10px 22px 0px gray;
Here, I am getting lighter shadow on top, left and right side also (which I don't want)
In example 2, I used below style:
box-shadow:10px 10px 22px 0px gray inset;
I don't want inner shading to right and bottom part.
Is it possible to remove unnecessary shading in box-shadow ?
You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero - see demo http://dabblet.com/gist/1579740
However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;
If you don't need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.
DEMO http://dabblet.com/gist/3149980
HTML for first shadow:
<div class="outer">
<div class="shadow1"></div>
</div>
CSS for first shadow
div {
width: 100px;
height: 100px;
}
.outer {
padding-bottom: 35px;
overflow: hidden;
}
.shadow1 {
box-shadow: 0px 10px 22px 0px gray;
background: #f0f0f0;
}
HTML for second shadow
<div class="shadow2"></div>
CSS for second shadow
.shadow2 {
box-shadow:10px 10px 22px 0px gray inset;
position: relative;
background: #f0f0f0;
}
.shadow2:before {
top: 22px;
bottom:0;
left:22px;
right:0;
position: absolute;
background: #f0f0f0;
content:'';
}
You can do it with some extra markup (an extra div wrapping the element so that it hides the other shadows you don't want)
Or you could use the shadow spread property (the 4th number in the box-shadow declaration) to shrink the shadow down to hide the side parts of your shadow.
This creates a smaller shadow on the bottom, but it requires no extra HTML.
http://jsfiddle.net/hBMQm/2/
#b {
position:absolute;
width:100px;
height:100px;
top:200px;
left:200px;
background-color:#F0F0F0;
text-align:center;
box-shadow:20px 20px 22px 0px gray inset;
}
Now you have the inner shadow, but not on you right, or bottom as you asked for. Did i misunderstand you?
box-shadow takes one more parameter the spread
using following code i was able to achieve the desired effect
box-shadow: 0px 20px 22px -20px gray inset;
see here http://jsfiddle.net/hBMQm/3/
I think I might already know the answer to this one but I need a sanity check!
Say I have
#gridtest{
width:590px;
}
I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:
#gridtestpercent{
width:59%; /*590/1000*/
}
If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do
#gridtest{
width:570px;
border:10px solid red;
}
I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.
If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?
Cheers!
You could use CSS3 calc() function,
.selector{
border: 5px solid black;
width: -moz-calc(50% - 10px);
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
SASS mixin
#mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
article {
border: 1px solid red;
#include calc( width, '100% - 2px')
}
You could use an inset box-shadow instead of a border:
box-shadow: 0px 0px 0px 10px red inset;
Just pad the inside of the container to compensate.
Edit: I write "pad" but of course if you use padding it'll throw off the box dimensions. Margin the content inside instead.
The accepted answer is not correct. You actually have 2 options:
Use the box-sizing property, so all the paddings and borders are considered part of the size:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
border: 2px solid black;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Or, use the outline property instead of the border property. You will still have problems with the paddings, but it's easier to add. Example:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
outline: 2px solid black;
}
Full explanation: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper div that you use to create your border. So the outside div would be 57% (in your example) with a background that is the color of your desired border. Then, the inner div would have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).
If you want to stay semantic you can use div { box-sizing:border-box; } or some absolutely positioned :after elements. See the post How do I add 1px border to a div whose width is a percentage?
In CSS3 you can also use the new box-sizing property to include the pixel and padding count into the width of the element:
box-sizing: border-box;
If possible, depending on your design, what I like to do is put the border as an absolute div with a width of 3px ( for example ) and a height higher than its parent div. I then set overflow hidden on the parent div.
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;
}
How to give border to any element using css without adding border-width to the whole width of element?
Like in Photoshop we can give stroke- Inside , center and outside
I think default css border properties is center like center in photoshop, am i right?
I want to give border inside the box not outside. and don't want to include border width in box width.
outline:1px solid white;
This won't add the extra width and height.
Check out CSS box-sizing...
The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Depending on your intended browser support you can use the box-shadow property.
You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).
Example:
box-shadow: 0 0 0 1px black; // Outside black border 1px
or
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
One great advantage of using box shadow is you can get creative by using multiple box shadows:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.
I ran into the same issue.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
This answer allows you to specify one single side. And would work in IE8+ - unlike using box-shadow.
Of course change your pseudo elements properties as you need to single out a specific side.
* New and Improved *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
This allows ability to use border and hit multiple sides of a box.
Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.
Use outline to create a border OUTSIDE a div without modifying div width.
Here an example:
https://jsfiddle.net/4000cae9/1/
Notes:
border-box currently it is not supported by IE
Support:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
As abenson said, you can use an outline but one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
With this html:
<body>
<div>A block</div>
<div>Another block</div>
</body>
One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
And the html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
Use padding when there is no border. Remove padding when there is a border.
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}
Essentially, just replace the 2px padding with 2px borders. Div size remains the same.
Usually, layout shifting is the problem.
If you don't need border-radius then outline: 1px solid black; works.
If you do, make the border transparent and change its color when it's supposedto show:
/* RELEVANT */
.my-div {
border-radius: 8px;
border: 2px solid transparent;
}
.my-div:hover {
border: 2px solid #ffffffa8;
}
/* NOT RELEVANT */
.pretty {
color: white;
padding: 10px 20px;
background: #0077b6;
font-size: 16px;
transition: border .15s ease-out;
cursor:pointer;
}
<button class="pretty my-div">
Button
</button>
In your case can you fudge it by subtracting half the border from the padding? (-2.5 from the padding if your border is 5px wide, you can't have negative padding so to go smaller reduce the overall width of the box). You can add an extra 2.5px to the margin to keep the overall box the same size.
I really don't like this suggestion, but I don't think there is a way do handle this cleanly.
Thus, you're trying to achieve the same as the well known IE box model bug? That's not possible. Or you want to support clients with IE on Windows only and choose a doctype which forces IE into quirksmode.
Another option, if your background color is solid:
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}
outline:3px solid black || border:3px solid black
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>