hey there i wonder if any of you have come across a similar issue? i am working on an ad section of the webpage and its got a really cool background that i would like to carry on into sections of the elements so i have a box that hold a box for a rss feed into updates made on the website and then i have a box for adverts. here is my html:
<div class="side">
<div id="ad">
bla
</div>
<div id="rss_news">
double bla
</div>
</div>
and the css:
.side {
float: left;
background-color: black;
width: 300px;
min-height: 710px;
padding: 0 0 0 0px;
margin-top: 25px;
border: 1px solid white;
border-radius: 8px 8px 8px 8px;
opacity: 0.3;
}
#ad {
border: 1px solid blue;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
#rss_news {
border: 1px solid yellow;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
as you can see and as i was anticipating the side class immits his attributes on the ones nested within him. is there a way that i could somehow tell the other id tags to ignore that opacity?
thanks in advance :D
There is no way to make descendants ignore the parent's opacity.
You can use rgba/hsla colors to get a partially transparent background, without affecting the children's visibility. Example:
.side {
background-color: rgba(0,0,0, 0.3);
}
Demo: http://jsfiddle.net/ywQy5/
See also:
MDN: hsla colors
MDN: rgba colors
You can use css3 rgba property for this & for IE you can use IE filter.Write like this:
.side{
background-color: rgba(0,0,0, 0.5);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE*/
zoom: 1;
}
Related
Today I was trying to create a card in HTML/CSS with hidden border which appears after hovering on a card. I came up with this code, which works fine for me:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
I just want to know if there isn't any better way of doing this. This works fine since I don't need to animate it, but is this a proper way of hiding border or not? Thanks for Your answers.
EDIT: I think I should edit my question since I don't want to use box-sizing: border-box property. I'd like to hide my border with "content-box". And here border: none won't work.
Your solution is the right way to handle this problem.
Others have commented that to hide the border you should use border: 0px or border: none but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.
I would use exactly the same method you have used.
You can also adjust the background-clip to avoid the border to overlap the background:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
background-clip:padding-box;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
To hide border use border:none instead border: 5px solid rgba(0,0,0,0);
When you use border: 5px solid rgba(0,0,0,0); means you apply border but with transparent color.
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: none;
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
.card{
border: 0px solid black;
}
.card:hover{
border: 5px solid black;
}
I think that is your solve
I am trying to create a box shadow but as soon as another box hits it the box shadow is invisible. I'd like to have the box-shadow go over the other box.
Here an example of what is going wrong. As you can see there is a shadow where there is not box.
Fiddle
HTML
<header>
</header>
<div id="content">
</div>
CSS
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
}
#content {
width: 350px;
height: 300px;
margin: 0 auto;
background: #CCCCCC;
}
HTML elements are positioned statically by default in document normal flow.
You have to position the header as relative and add a higher z-index (if needed) to bring that element at the top of the others without changing layout, as follows:
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
position: relative;
z-index: 10; /* optional */
}
WORKING DEMO.
try position:absolute or relative for the header
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
position:absolute;
width:100%;
}
#content {
width: 350px;
height: 300px;
margin: 0 auto;
background: #CCCCCC;
}
JSfiddle
Im wondering if its possible to round corners just on the background of the page, so for example -
body{background-color:#7A991A;
so I would like to round each corner of the page?
thank youu
You'll have to give the html element a background color:
html, body {
height: 100%;
}
html { background: white }
body {
background-color:#7A991A;
border-radius: 20px;
}
Here's the fiddle: http://jsfiddle.net/wYKa3/
you can use this:
body{
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius: 4px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);
box-shadow: 0 2px 2px rgba(0,0,0,0.3);
background:#7A991A;
}
it's a background with rounded and shaddaw color corners.
You may also want to use -webkit-border-radius and -moz-border-radius, like so:
body {
background-color:#7A991A;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
To increase compatibility with different browsers.
you can see this CSS with browsers compatibility level:
html, body {
height: 100%;
background: white
}
body {
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius: 20px;
background:red;
}
demo:- http://jsfiddle.net/trzpK/
I don't think this's possible. Since "body" is the entire document, then if you round corners of the page, what should appear underneath?
Maybe you can just wrap page content in a <div> element which will have full width and full height, and then you set rounded corners on it instead of body. Then you set body's background to a color different to that of the full-size div and you're set. Something like this should work:
HTML:
<body>
<div id="content">
<!-- Your content here -->
</div>
</body>
CSS:
body { background-color: #000000; }
#content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
border-radius: 10px;
}
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>