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.
Related
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;
}
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 designing a page which has the following HTML structure.
<div id="event">
<div id="event-image">
<div id="event-image-background">
</div>
<img src="image_url_here">
</div>
<div id="event-title">
EVENT 1
</div>
<div id="event-details-summary">
Event Summary Here
</div>
<div id="event-description">
</div>
</div>
And I am using the following CSS for the structure.
#event{
position: relative;
}
#event-image{
text-align: center;
margin: 0px auto;
border: 1px solid #fff;
box-shadow: 0px 5px 10px -7px #CCC, -5px 10px 10px -7px #CCC;
overflow: hidden;
}
#event-image-background{
background: url('image_url_here') no-repeat;
background-size: cover;
opacity: 0.1;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
}
#event-image img{
opacity: 1;
z-index: 3;
border: 1px solid rgba(204, 204, 204, 0);
}
The problem I am facing is that the background that I have applied to event-image-background is overflowing into the other divs, namely event-title and others that follow. I am not really good at CSS, and have no clue what's going wrong. Kindly help.
Thanks :)
PS: I dont really want to use the max-height option, as the image that I will be adding via img src will have variable height for each event.
Try adding overflow: hidden; to #event-image-background.
Protip, I'd recommend favoring styling on classes (e.g. .event-image-background and <div class="event-image-background">) rather than ids. See: http://css-tricks.com/the-difference-between-id-and-class/.
I'm trying to display an inset shadow on two elements and overlay them so they look like well with tab. Everything looks great except for one corner where I cannot figure out how to make it look smooth. (highlighted with yellow).
JsFiddle for test
this is my html:
<div class="container">
<div class="outerWell">
<div class="well" style="padding-top:15px">
text
</div>
</div>
<div class="well" style="margin-top:40px">
test
</div>
</div>
and then I have css that creates shadow and hides one side of shadow with overflow:hidden
(.well class is taken from bootstrap)
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
overflow:hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 0 5px 1px #888;
-webkit-box-shadow: inset 0 0 5px 1px #888;
box-shadow: inset 0 0 5px 1px #888;
}
.outerWell {
width: 200px;
overflow: hidden;
padding-bottom: 10px;
height: 35px;
margin-top: -40px;
position:absolute;
}
Is there an easy way to fix my issue, or maybe a better way to do what I'm trying to achieve?
You could probably pull this off with some creative use of pseudo elements. Have a look at this post on CSS-Tricks.
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>