Below is the code
HTML
<div class="fgimg">
</div>
CSS
.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
Here is the demo :
http://jsfiddle.net/sathish_opr/03kkqywy/1/
When we hover on the image, image position changes.
I would like to see the border color of the image when hovered on, but image position changes automatically :(
what could be the problem ?
You either set an invisible border on the image in the normal state:
border: 3px outset transparent;
Or you could apply:
box-sizing: border-box;
This way, the border is calculated to the inside of the width and height. (the 200px width for example)
DEMO TIME:
http://jsfiddle.net/03kkqywy/4/
BTW:
you don't need any prefixing on border-radius anymore.
But if you do, allways put the non prefix property as the last one of those.
Now Define your
.fgimg{
border: solid 3px transparent;
}
Demo Link
This happens because you haven't set a border to the image initially. When you hover, the border is added to the overall width of the image and hence you can see it move.
Set a transparent border to the image initially. This way the border is already added o the width of the image and the image won't be moving when you hover over it.
.fgimg{
border:outset;
border-color: transparent;
}
http://jsfiddle.net/sathish_opr/03kkqywy/1/
css code
.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
border: solid 3px transparent;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
url http://jsfiddle.net/03kkqywy/3/demo
Related
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 1 year ago.
I want to style a button and make it look like this:
I tried the code below, but it looks totally different.
button {
width: 500px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
}
I am interested in the border radius.
I suggest you to use something like this:
button {
width: 500px;
height: 30px;
border-radius: 15px; /* here we just change the radius to a fixed one, according to fixed height */
border: none; /* here we remove black border */
background-color: #f0f0f0;
}
For text, you can use text formating.
You have border-radius wrong. With your border-radius : 50%, will try to make the button oval kind of shape. So use px units to make rounded corners. Also there is default border on the button, so you have to set border to none. Below css would do the same thing :
button {
width: 500px;
height: 30px;
border-radius: 10px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
font-family: monospace;
}
Set border-radius to px instead of %. Half of the height (30px) will make it nice and round. Anything less will make it less rounded.
button {
width: 500px;
height: 30px;
border-radius: 15px;
background-color: #f0f0f0;
}
button {
width: 500px;
height: 30px;
border-radius: 15px;
border: none;
background-color: #f0f0f0;
}
<button>text here</button>
This question already has answers here:
Half circle with CSS (border, outline only)
(6 answers)
Closed 4 years ago.
Can you provide me a suggestion on how to cut this circle into half? Also float them on between left and right.
.hello {
background-color: red;
width: 200px;
height: 180px;
border: transparent;
border-radius: 50%;
opacity: 0.50;
}
<div class="hello"></div>
This can be done purely on CSS making use of borders. Keep note that height has to be half of the width to give the half circle.
border-top-left or right-radius is the thing that adds the curve. So adding that extra +10 to it makes up for the space the border(which is set to 10px) creates. That way you get a perfect semi circle.
Try this:
#hello {
width: 200px;
height: 100px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
float: right; /* Change this to left to float it to left */
}
<div id="hello"></div>
I have made it float right. Just change the value to left to change to float: left;
Hope this helps!
you should first make 2x1 Rectangle, then with border-radius make it round, but in just to side. see below code:
.half-circle {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
border: 1px solid red;
}
To make an awesome CSS shapes you can see this cheatsheet page.
Here is a screen for the question above http://prntscr.com/66o7rf .
When I use border-radius in parent div and overlap another background with same value of border-radius, there appears a small space ( in screen, white space appears ).
I tried using background in :before and :after , but i don't think is a good way to do it.
Can anybody help with this?
body{
background: grey;
}
div {
width: 200px;
height: 200px;
background: #000;
border-radius: 10px;
padding-top: 160px;
overflow: hidden;
}
.footer {
width: 200px;
height: 40px;
background: #f00;
}
<div>
<div class="footer"></div>
</div>
When you use border-radius in parent div, dont set overflow: hidden to it. And for overlapping div or child div of it add border-radius to it but 2px less than parent div.
Example:
div{
background: #fff;
border-radius: 10px;
}
.child{
background: blue;
border-radius: 8px;
}
I'm trying to create an HTML element that looks like this:-
Basically, a <div> or other element with a border, and the internal (possibly multi-line) text centred within the div, but extending into the border area.
So far, the only scheme I have that works is to use three(!) divs : One for the border, a second one as a container for the third one, to ensure the vertical centring is right.
<div class="BORDER" style = "left: 190px; top: 50px;">
</div>
<div class = "WRAPPER" style = "left: 190px; top: 50px;">
<div>TEST THREE</div>
</div>
This feels awkward: Is there a way of achieving the same look using fewer elements?
Restrictions (clarified)
The text can have one or more lines
The border will be an image, and will eventually be stretched via the border-image mechanism.
JSFiddle with CSS and some other (failed) attempts is here. http://jsfiddle.net/6wB3k/
I'm not sure if it's adaptable to your real use case but I can achieve your display with only one div :
HTML :
<div class=dystroy>TEST FOUR</div>
CSS :
.dystroy {
position: fixed;
left: 50px; top: 50px;
margin: 0px;
padding: 16px;
height : 48px;
width : 50px;
display : table-cell;
vertical-align : middle;
text-align : center;
color: #000000;
font-size : 16px;
font-family : Calibri;
}
.dystroy:after {
position: relative;
display : table-cell;
top: -48px; left:0px;
border: solid;
border-width: 16px 16px;
border-color: #e0e0e0;
height: 32px;
width: 50px;
content:" ";
z-index:-1;
font-size : 16px;
}
Demonstration
EDIT : in fact there's no real dynamic vertical centering here, which would need an additional div.
If you are open to use CSS3 shadows, then you can try this:
Fiddle: http://jsfiddle.net/6wB3k/2/
div {
width: 50px;
height: 50px;
text-align: center;
border: 1px solid #ccc;
-webkit-box-shadow: 0 0 0px 11px #ccc inset;
}
Syntax: box-shadow: x-offset y-offset blur spread #color inset
You can experiment with blur and size to adjust according to your requirements.
Update:
As per your comment regarding the need to use border-image, here is one try using background-image instead of a 9-grid border-image. I think, this can suit your purpose of using images?
Updated Fiddle: http://jsfiddle.net/6wB3k/3/
div {
width: 50px;
height: 50px;
display: table-cell;
vertical-align: middle;
text-align: center;
background-image: url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11);
background-position: left top, left bottom, top right, bottom right;
background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
}
The following works:
<div style="border: 9px solid #ccc; width: 40px;">
<p style="margin: 0 -.5em;">Test text</p>
</div>
However, if you're spilling over your border, it's not strictly a border in the literal sense so much as it is a background image; perhaps there's another way of looking at your layout?
I have the following CSS :
<style type="text/css">
body {background-color:#b32501;}
.roundcorner {
position:absolute;
background-color: #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 10px;
width: 350px;
bottom:35%;
right:500px;
}
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px;
}
.centeredSplash {
position:relative;
width:100%;
height:100%;
background:url(coming-soon.png) center center no-repeat;
}
</style>
Following HTML:
<div class="centeredSplash">
<div class="roundcorner">
<input type="text" style="width:80%"></input>
</div>
</div>
My basic requirement is that I have a 800x600 splash background with an empty space for HTML text box.
I need to have the splash background centered (no matter what resolution) and then I need to place my text box relative to the image so that it always display at that particular location.
With the above code I am able to achieve that but as soon as I reduce the size of my browser I notice that my text box starts to move away and lose its position, can anyone please help me out with this?
You should add
body {min-width: 800px;}
Working demo:
JSFIddle