I have the following code in my CSS and HTML files:
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 200px 0px blue;
}
<div class="test"></div>
The shape this code produces is exactly what I want; however, I do not want the blue outline around the white part - is there anyway I can remove that?
To further clarify: here is what the shape currently looks like on a white background, and here is how I would like it to look like.
All help is greatly appreciated!
Perhaps a trick, to overlay a 2px white border over it is acceptable.
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px 0px 0 white, inset 200px 0px 5px blue;
position:relative;
}
.test:before{
content:'';
position:absolute;
border-radius:50%;
border:2px solid white;
z-index:1;
top:-1px;
right:-1px;
bottom:-1px;
left:-1px;
pointer-events:none;
}
<div class="test"></div>
Tell us what you want to achieve so we can know how to help you achieve it.
This little change made the blue outline go away and left you circle looking like eclipse
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 10px 0px blue;
}
Related
I created a round-image using following HTML
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
and CSS
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
}
I tried adding a new circle around the rounded image, failed eventually. How am I supposed to do this? Should I create a new div and add this rounded image inside it and style that div to make it round? I tried to achieve circled image in this google link https://www.gmail.com/intl/en/mail/help/about.html which is placed right below the slider.
Here is my fiddle of what I've gotten so far http://jsfiddle.net/adityasingh773/rzsmpmc9/
This is not so elegant solution, because it requires extra-html, but looks pretty fine, imho: (didn't experiment with pseudo-elements, maybe similar result can be achieved).
<div class="thumb-wrapper">
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
</div>
CSS:
.thumb-wrapper {
width: 170px;
height: 170px;
overflow: hidden;
border-radius: 50%;
background-color:#fefefe;
position:relative;
box-sizing:border-box;
border:1px solid #dedede;
-webkit-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
-moz-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
}
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
position:absolute;
left:8px;
top:9px;
box-sizing:border-box;
}
DEMO: http://jsfiddle.net/rzsmpmc9/5/
Tried adding an border?
<div>
<img class="thumb" src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
border:2px solid white;
box-shadow:0 0 0.5em white;
}
Optionally you may use an box shadow to produce a solid shadow, since the shadow doesn't compute within the element positioning and size, avoiding interference in your current layout.
you can simply add a border to your existing css
border: 3px blue solid;
http://jsfiddle.net/rzsmpmc9/2/
You can achieve same style as the link you have provided if u'll use an image, which is the most plausible way, but if you play with box-shadow u will most likely get the same thing.
box-shadow:2px 2px 4px green, -2px -2px 4px red;
check this.
If you can't see this problem then please try take a look at this codepen, here you should see what I mean.
I've tried several ways to fix it. Below in comments you can see one of them. Still it seems to render 1px rugged border between proper border and dropped shadow.
If it depends on browser renderer then is it a bug?
How to fix it properly for all modern browsers.
html{
background-color: #554343;
}
div{
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%;
border-width: 0; /* no result
border-width: 2px; // uncommented no result
border-style: solid;// uncommented no result even with inset*/
background-color: white;
box-shadow: inset 1px 1px 150px, inset -1px -1px 150px;
}
<div>
</div>
EDIT:
Tried also this way but without positive result:
html{
background-color: #554343;
}
.container{
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%; /* tried 49.5% but it's not acceptable */
box-shadow: inset 1px 1px 150px #000, inset -1px -1px 150px #000;
}
.content{
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
z-index: -1;
}
<div class="container">
<div class="content">
</div>
</div>
https://code.google.com/p/chromium/issues/detail?id=442335
Seems like opened Chrome bug. I couldn't come up with a solution for your case. Please vote this issue on bug tracker if you want it to be fixed sooner!
I am trying to show shadow of my container div by doing this.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
But this show shadow to right and bottom. I want to control the shadow. Can anyone guide me how can i show shadow to only one single side i-e right/left or top/bottom. Working Jsfiddle will help me to understand this. Thanks in advance
Please Try this demo
i hope i may helpfull for you
.box
{
margin:0;
padding:0;
float:left;
width:200px;
height:100px;
background:#ccc;
margin-left:20px;
-webkit-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
-moz-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
}
you can create like following:
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: inset 10px 0px 5px 0px rgba(0,0,0,0.81);
}
Above will show left side shadow. Also for right side shadow use:
box-shadow: inset -10px 0px 5px 0px rgba(0,0,0,0.81);
Check Fiddle here.
You can use Shadow Generator : Link
Here is what i want to create using html5 and css if its possible:
Red object is the shape, everything else has to be transparent, so the background will be visible.
I guess that its doable with css masks or maybe round corners, but i couldnt make it work.
Edited: [suggested transparent background solution]
CSS:
.outer{
width: 240px;
background: rgba(0,0,0,0.0);
height:240px;
border-right: 120px solid red;
border-bottom: 30px solid red;
position: relative;
z-index:1;
}
.outer:after {
content: '';
width: 240px;
height:240px;
border-radius: 0px 0px 50px 0px;
-webkit-border-radius: 0px 0px 50px 0px;
-moz-border-radius: 0px 0px 50px 0px;
-o-border-radius: 0px 0px 50px 0px;
-khtml-border-radius: 0px 0px 50px 0px;
background: rgba(0,0,0,0.0);
position: absolute;
top: -30px;
left: -30px;
z-index:2;
border: 30px solid #ccc;
}
HTML
<div class="outer"></div>
A WORKING DEMO
Here is the working solution for this problem using css mask. Working example.
Click on Share or News on the lower left box to see it in action. Disable mask-image for #smallScaleHolder from element ispector to notice the difference.
Ok...here is the better explanation on this...
I made a mask like this...
And here is the css:
-webkit-mask-image: url(../img/sliders/mask.png);
-o-mask-image: url(../img/sliders/mask.png);
-moz-mask-image: url(../img/sliders/mask.png);
mask-image: url(../img/sliders/mask.png);
-webkit-mask-composite: copy;
overflow:hidden;
Now all its child elements are not visible outside of the black area.
Note: css masks are only supported in chrome , safari and ios.
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>