I will attach an image with the effect I'm trying to achive using html and css.
Instead of the black color, I'll have an image, and I want to make an white overlay to give the impression of a round bottom. This could be done using an background image but I'd like to make this using css and keep that option as a last resort.
Setting 50% to border-bottom-left-radius and border-bottom-right-radius should give you the expected results.
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
div {
background-color: black;
width: 400px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div></div>
Something like this:
div {
background-color: orange;
width:500px;
height:200px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
overflow: hidden;
}
<div>
<img src="http://lorempixel.com/output/city-q-c-640-480-5.jpg">
</div>
This shape can be achieved by using 2 HTML elements.
We set the rectangular primary element to overflow: hidden.
The child element should be shaped as an oval (can be done via border-radius), and scaled+translated a bit so that it has only the bottom edge within the main element area.
Please try this jsFiddle.
Related
I am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
I have a query in relation to images, using just html and css (if possible).
I would like to have an image (e.g wallpaper image of a city at night) transformed into a circular shape with a surrounding border.
Hopefully i would use this image also as a button, and add text to it.
So for example a picture of a football stadium in the middle, circular in shape. Surrounded by a small border. When you click on the image (which will have text on it) you are transferred elsewhere...I will have 4 of these in a line on my poage.
Thanks
All help in this matter would be greatly appreciated
<div class="circular"><a></a></div>
.circular {
border: solid 1px
width: 300px; //edit this
height: 300px; //edit this
border-radius: 150px; // a half of width and height will cause a circle
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}
Just answering your position question, check the answer here https://stackoverflow.com/a/19461564/2012904
The flexbox is a good method.
See this demo
HTML:
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
CSS:
.round{
display:table-cell;
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
border:2px solid #cc0000;
background:url("http://www.placehold.it/100x100");
vertical-align:middle;
text-align:center;
}
Using the css property border-radius you can round the edges of an element. If you use border-radius: 50% you will end up with a circular image.
So, if you had the following HTML:
<img src="some.url" class="circle">
and the following css:
.circle{ border-radius: 50%;}
You will end up with a rounded image. In order to have a circular image, the dimensions of the element that border-radius is being applied to must be square. So, you will need to set a height and width property in the css as well.
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
}
You should be aware if you are not using a square image and are applying the dimensions directly to the image, you could end up stretching or smushing the image.
To add the border to the image, you need to include the border property in your css:
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
border: red solid 2px;
}
Alternatively, you could just create a button element and add the image as a background image to that element like this:
//html
<button class="circle"></button>
//css
.circle{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius: 50%;
border: red solid 2px;
height: 150px;
width: 150px;
}
This will create a button element with a background image from the url specified. The background-size property will ensure that the image is always large enough to cover the button. The background-position will center the background image inside the button so that the portion of the image that is shown on the button will be from the center of the background image.
This might be a better option for you since you can change the background-position property to position a background image and keep the focus of that image in the center of the new circular element you have created.
In order to use the round image as a button you have a few ways you can go. The best would be to use pure javascript or use jQuery to select the rounded element and add a click event handler.
You could also wrap the rounded element in an <a> element and simply turn the rounded element into a link. Like this:
<button class="circle"></button>
In this case, you could remove the button if you wanted:
However, make sure you then add display: block; to your css for the .circle class:
.circle{
display: block;
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius:50%;
width: 150px;
height: 150px;
border: red solid 2px;
}
Is it possible to apply border-radius in the background-image of a text <input> or <textarea>?
The border-radius property applies to either an inline or a block level element.
Therefore, you can created rounded corners on a input and a textarea element.
However, the border-radius property does not affect any background image associated with an element.
The short answer is: no.
To illustrate, if you have the following HTML:
<textarea class="ex1" name="theText" >Example 1</textarea>
and apply the following CSS:
textarea.ex1 {
border-width: 0;
border-radius: 10px;
background-color: beige;
padding: 5px;
width: 200px;
height: 200px;
}
textarea.ex2 {
border-width: 0;
border-radius: 10px;
background: lightgray url(http://placekitten.com/150/150)
center center no-repeat;
padding: 5px;
width: 200px;
height: 200px;
}
you see that the textarea element has rounded corners, but the rounded corners do not affect the background image.
See Demo Fiddle
Workarounds are possible by using absolute positioning of extra sibling elements, but that is outside of the scope of your question.
Yes. Check this out-
Border-radius on background-image
Follow the above link to get the complete details.
I have 40*40px png with transparent background with a 30*30px circle in the middle.
I would like to use that png as a button with a simple hover effect, but i want the hover effect to take place only when the cursor is actually on the circle, not on the transparent background.
Is there a plain HTML+CSS solution for this? I tried to check it here and on other forums, but I didn't find anything.
Yes, you can do this with HTML and CSS. First create a circle element and place it before your image. Then wrap both your image and the circle in a container, like this:
<div class="container">
<div class="circle"></div>
<img src="your-image.jpg" />
</div>
Then, use position: absolute to position the circle on top of the image (align it with the circle that's in the image), and use the + selector to select the next adjacent element when the circle is hovered.
.container {
position: relative;
}
.circle {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #222;
}
.circle:hover+img {
border: 5px solid aqua;
}
See DEMO.
Check out this script if you need to activate hover/click only when mouse is within the circle (and not in the square bounding box) http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/
It’s not possible in CSS only, as all elements are treated as rectangles, even if they are rendered with rounded corners.
I've a div using css 3,i'm placing a circle but when i place objects,it is going out of circle because div is still there and it is rectangle.
Can i use some thing instead of div and make circle.My objective is i need a circle ,when i place objects ,it should not move out of circle.
Thanks
There's no actual way of making an element circular. You can make it look circular using the well-known border-radius 'trick'.
To create the effect that the the text/contents of the div are only inside the borders of the circle, you can make sure it's filled within the largest square contained in the circle, using padding. Here's a visual illustration:
Here's a demo: little link.
HTML:
<div>
Glee is awesome! Glee!
</div>
CSS:
div {
border: 1px solid black;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 15px;
height: 70px;
width: 70px;
overflow: hidden;
}
Edit: for images, you have two cases:
You want the div to have a circular background. In this case, use the background-clip: padding-box; property (you need vendor-prefixed versions for this to work). Here's a demo: little link.
You have an img tag inside your div -- you can use the prior method.
If you create a div with a border-radius equal to it's sides then you should have what you're looking for.
Creating Circular div for CSS3 compatible browsers
In HTML5 there is an element called canvas. It can be used to draw, using javascript, and therefore also for animation. This might help you, if you only want to draw. Else you could go with the z-index property in css
create a div and give it border-radius
width: 230px;
height: 230px;
border-radius: 165px;
-webkit-border-radius: 165px;
-moz-border-radius: 165px;