In my page I have a menu icon on top left corner, and it is wrapped inside a circle, SO I used CSS3 border radius.
But the circle is not that smooth and I am getting some distortion along the corner. Is there any way to make it smooth.
If the height and width increased, I am getting the circle shape without distortion.
#container{
width:400px;
height:400px;
background:#000;
padding:100px;
}
#circle{
width:40px;
height:40px;
border-radius: 50%;
border:1px solid white;
}
<div id="container">
<div id="circle"></div>
</div>
Read this
http://www.sitepoint.com/how-to-get-smoother-rounded-corners/
and do lemme know if this helps
Related
I want to create a circle and a square. I want the square's focus to be the focus of the circle. That way when I make the shape larger or smaller it's position is still where I want it. How can this be done?
Basically as a learning tool, the image below is what I want to recreate using only html and css. But for my question, only focus on the outer circle and outer square please.
you could do it with a mix of translateand transform-origin.
basically center your elements in the container with:
position:absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
and as the square will not be centered if it's rotate 45 degrees, you change the origin with:
transform-origin: 85% -35%;
you have an example in this JSFIDDLE (hover over the elements to check them shrinking and expanding
You can use one div with a pseudo element. Both elements will resize together according to the width of the viewport :
.circ{
position:relative;
width:30%;
padding-bottom:30%;
border:1px solid #333;
border-radius:50%;
margin:0 auto;
}
.circ:after{
content:'';
position:absolute;
top:7.5%; left:7.5%;
width:85%; height:85%;
border:1px solid #333;
transform:rotate(45deg);
}
<div class="circ"></div>
How can I create two separate divs with css shapes to overlap each other? I need to be able to load content to the particular divs as well.
The shape is a circle then behind is a rounded rectangle. I need to be able to place custom img to fit within the circle and to place small copy and images into the rectangle.
Any suggestions? Right now, I just have all the content in one div.
<div class="box">
<img src="images/profile_image.png" /><br />
First Last <br />Chicago, IL
<br /></div>
Heres the CSS:
margin: 4px;
border: 1px solid #58585B;
text-align:left;
font-size:12px;
width:200px;
border-radius:10px;
For this task, I would use 2 divs and have the circle with a z-index value so that it will overlap the rectangle div. Make your border-radius size fairly large so that the circle div will accurately resemble that shape.
Try using this code:
CSS:
#circle {
background-color:#333333;
width:50px;
height:50px;
border-radius:25px;
z-index:10;
margin-left:25px;
}
#rectangle {
width:100px;
height:50px;
border-radius:10px;
background-color:#AAAAAA;
}
HTML:
<div id ="rectangle">
<div id="circle">
</div>
</div>
here's a jsFiddle
I want to make rounded images like this I have searched and googled but I did not find any solutions to make image rounded.I can do images rounded border like this but I dont know how to make the image itself rounded.Please help
Try this, Change radius by adjusting height and width. height and width should be equal and double of the radius you required
HTML :
<div id="round">
</div>
CSS :
#round{
height:100px;
width:100px;
border-radius:50%;
background:green;
overflow:hidden;
}
Fiddle Demo / updated
Check this for responsive circle DEMO
Use border-radius to achieve what you are looking for.
WORKING DEMO
The code:
img{border-radius:50%;}
If you specifically want a white box with a rounded image in it, you simply make a div with the said width & height you want.
Give it a background color and a border of 1px in the same background color.
Then in the div place an image with borderradius of 50% and width and height of 100% to fill the box and you're done.
Try this: http://jsfiddle.net/fWwgD/
<style type="text/css">
body
{
background-color:black;
}
#box
{
width:300px;
height:300px;
background-color:white;
border: 1px solid white;
}
.circle
{
border-radius:50%;
width:100%;
height:100%;
}
</style>
<div id="box">
<img src="https://www.gravatar.com/avatar/01f40d1a1219433e2f7ab40fab531142?s=32&d=identicon&r=PG&f=1" class="circle">
</div>
I'm looking for advice to reproduce (see this image) effect for my image hovers. My problem is that my images are fluid, and I haven't really been able to find any good tutorials on that subject combined with overlays.
I'm assuming I have to create a transparent png (white area + circle) which overlays the image on hover, and then the text overlaying that? And it all needs to resize accordingly with the image itself.
Also, the top border is not part of the image, it's generated with CSS, and I don't want that to be overlayed if possible.
Could anyone kindly point me in the right direction, or give advice if there's a better implementation? I'm rather lost.
Thank you in advance. :)
If the image is going to be contained in a div with a defined width, you can add an absolutely positioned div to that containing div that'll act as the overlay.
Assuming this snippet and that the opacity of the overlay is set to zero
<div class="picholder">
<img class="fancypics" src=http://placehold.it/500x650></img>
<div class="overlay"><p class="text_box">Hello World!</p></div>
</div>
the css for the hover effect would be
.picholder:hover .overlay{opacity:1;}
.picholder:hover .fancypics{opacity:0.7;}
That should create the hover effect, I believe you're going for. The following css should center the overlay and some other stuff. see here for more on centering divs vertically and horizontally
.overlay {
bottom: 0;left: 0; top: 0; right: 0;
height: 150px;
width: 150px;
margin: auto;
position: absolute;
background-color:#3f3f3f;
border-radius: 50%;
opacity:0;
}
.fancypics{width:100%;}
.text_box{
color:white;
weight:bold;
font-size:2em;
padding:10px;
padding-bottom:50%;
text-align:center;
}
and of course the fiddle
Just use background-color to set a transparent color:
Demo here
HTML
<div class="overlay">
<div>Hello</div>
<span>January 16. 2014</span>
</div>
CSS
.overlay {
position:relative;
width:200px;
height:200px;
border-radius:50%;
}
.overlay:hover {
background:rgba(0,0,0,0.5);
}
.overlay > div {
position:absolute;
color:#fff;
font:50px sans-serif;
width:100%;
top:33%;
text-align:center;
}
.overlay > span {
position:absolute;
color:#fff;
font:12px sans-serif;
width:100%;
top:67%;
text-align:center;
}
The stippled line at the border of the upper text can be achieved using either a border-bottom or a single-line image which you attach as background to the div.
Hope this helps.
I cropped an image in html & css . When i am coding a <span> tag the cropped image displayed. But I need to know how can I modify it.
I have the following code:
<style type="text/css">
.design {
padding-left:25px;
background:url('Flings.png') no-repeat top left;
display: inline-block;
height: 17px;
width: 0px;
margin-left: 550px;
}
</style>
<div style="height: 200px;">
<span class="design" style='font-size: 40px;'></span>
</div>
When I am using the span tag, the cropped image displayed. But I want to modify it.
Example:
<span class="desgin" style='color: red;'></span></h3>
I want to color the image itself and change it's size and I am little stuck here.
Hope you understood me well, I will be glad for any help.
Thanks!
So you want to scale and then colorise the image? You can scale the image using background-size but this isn't very well supported. CSS3 filters unfortunately don't have a colorize filter also.
You should do this using an <img> so scaling works without background-size and then use another transparent element on top of the image to provide the tint effect. Unfortunately <img> tags don't support pseudo-elements so need to use a wrapper.
jsFiddle
HTML
<div class="red-tint">
<img src="https://www.google.com.au/images/srpr/logo4w.png" />
</div>
CSS
img {
/* scale the image */
width:200px;
height:auto;
}
.red-tint {
position:relative;
display:inline-block;
}
.red-tint:after {
background: rgba(255, 0, 0, 0.5);
display:block;
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
}
Update
Ah you want to crop, then that's just a matter of using background-position. You will need to give negative left and top positions to background-position which represent the offsets from the top-left corner of the image. For example, this will draw a 200x100 chunk of the image which is 100px in from the left side of the image and 20 px down from the top.
jsFiddle
.design {
width:200px;
height:100px;
background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat;
background-position:-100px -20px;
}