JS fiddle : http://jsfiddle.net/Rkh8L/
I am trying to vertically middle div inside div. The class i want to be vertically middles is MonsterImage.
Here the whole code
<div style="float: left; text-align: center; vertical-align: middle; margin:10px;">
<asp:RadioButton ID="RdButtonMonsterImages" ClientIDMode="Static" runat="server" />
<div class="permonster" >
<div class="MonsterImage"></div>
</div>
</div>
.permonster
{
width: 130px;
height: 120px;
text-align: center;
vertical-align: middle;
border-top: 1px solid #f7fcff;
background: #ababab;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e6e8), to(#ababab));
background: -webkit-linear-gradient(top, #e3e6e8, #ababab);
background: -moz-linear-gradient(top, #e3e6e8, #ababab);
background: -ms-linear-gradient(top, #e3e6e8, #ababab);
background: -o-linear-gradient(top, #e3e6e8, #ababab);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-decoration: none;
padding:2px;
}
.MonsterImage
{
border-width: 0px; border-style: none;
background-image: url(http://static.monstermmorpg.com/images/csssprites/RegisterCSS.png);
background-color: transparent;
margin:auto;
background-repeat: no-repeat;
background-position: -0px -120px;
width: 130px;
height: 96px;
}
You can center (vertical and horizontal align) a div inside a div as below
HTML
<div id="parent">
<div id="child">
</div>
</div>
CSS
#parent {
background-color: #333333;
position: relative;
height: 300px;
width:300px;
}
#child {
background-color: #cccccc;
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
See this article which explains how it works.
Note: Background color is only for illustration purposes only.
See the result below.
You can't vertical-align that element, just add some margin to the top of your .MonsterImage class, something like margin-top:13px; should do it.
Hate to disappoint you, but this is just not possible with CSS alone.
Here's some things you can do:
use fixed top and bottom margins on the inner div, and leave the outer div's height at 'auto' (you'll lose control over the outer div's height)
hard-code everything (you'll lose automatic resizing, obviously)
use javascript to adjust the sizes on-the-fly after loading the document
Related
I've got this working nicely on objects with a solid background colour, by applying multiple box-shadows:
jsFiddle
html:
<div></div>
css:
div{width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: rgb(0,150,0);
box-shadow: -15px 0 12px rgba(0,150,0,0.2)
, -11px 0 10px rgba(0,150,0,0.4)
, -8px 0 8px rgba(0,150,0,0.6)
, -6px 0 6px rgba(0,150,0,0.8)}
This isn't ideal as you get shadow bleeding up and down from the element instead of just to the left, but it kinda does the job.
But what I really want is for it to work nicely with a background image, e.g. in this jsFiddle I'd like the colours on the edge of the div (or the edge of the background image at least) to be stretched out.
How can I do that? Can I?
Thank you
You could add a ::before then duplicate your element and blur it.
div{
position: relative;
width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
}
div::before {
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
position: absolute;
width: 55px;
height: 55px;
overflow: hidden;
z-index: -1;
filter: blur(5px);
content: "";
border-radius: 100%;
}
<div></div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 1 year ago.
I have an background image in shape of a circle. Have given it a yellow border. I would like to change the border to a gradient from yellow to white. I have seen many examples with square borders but none applied to circles. Here's my code:
.Profileimage{
background-image: url("images/profilePic.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50%;
width:100px;
height:100px;
border: 5px solid rgb(252,238,33);
}
<div class="Profileimage"></div>
Thanks!!
This Is Your Answer:
#cont{
background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
Maybe something like this?
.Profileimage{
position: relative;
background: linear-gradient(rgb(252,238,33), rgb(255,255,255));
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50%;
width:100px;
height:100px;
}
.Profileimage:after{
position: absolute;
display: block;
top: 5px;
left: 5px;
width: 90px;
height: 90px;
content: "";
background-color: #fff;
background-image: url("images/profilePic.jpg");
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
overflow: hidden;
}
Not sure if that's what you're looking for, but you can just set the background to the gradient, and then position an element over the top (here I'm using the 'after' pseudo selector)
Fiddle: http://jsfiddle.net/6ue88pu6/1/
I see that this question is already old, but i just had the same problem and i could fix it.
The trick is to wrap your div into another div.
.gradient-wrapper { padding: 10px; border-radius: 50%; display: inline-block;
background: yellow; // As fallback for browsers which do not support gradient
background: -webkit-linear-gradient(yellow, white);
background: -o-linear-gradient(yellow, white);
background: -moz-linear-gradient(yellow, white);
background: linear-gradient(yellow, white);
}
#maincircle { width: 100px; height: 100px; background: #424242; border-radius: 50%; }
<div class="gradient-wrapper">
<div id="maincircle">
</div>
</div>
Result:
Hope this helped!
I need to add padding to a class with a background image. However, when I do so, the padding isn't added to the background image, just the anchor. What am I doing wrong? Here's my CSS:
.heart {
width:200px;
height:18px;
background:url(/images/content/digital-learning/course-library/sprite-favorites.png) 0px 18px repeat-y;
padding-left: 20px;
display:block;
}
Try using margin-left: 20px; instead.
Margin is outside the container and padding is inside the container, so padding won't move the background of the container.
Background can show based on background-origin: content-box;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background: url('https://via.placeholder.com/50x100') left center repeat-y;
padding-left: 20px;
display: block;
background-origin: content-box;
}
<div class="container">
<div class="heart">x</div>
</div>
or
Another solution is background-position-x: 20px;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background-image: url('https://via.placeholder.com/50x100');
padding-left: 20px;
display: block;
background-position-x: 20px;
background-repeat: repeat-y
}
<div class="container">
<div class="heart">x</div>
</div>
Is there way to create inset border radius with css3? (Without images)
I need a border radius like this:
The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:
div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.
Obviously this depends on support for rgba and gradient, and accordingly should be treated as a progressive enhancement, or if it's essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn't support gradient even up through IE9).
You can achieve this by absolutely positioning transparent circle elements in the corners with box shadows. I used a combination of hidden overflowed divs containing spans, box shadows, borders, and pseudo selectors.
Check out my example.
This is the basic HTML and CSS you need to get started:
a {
display: inline-block;
width: 250px;
height: 100px;
background: #ccc;
border: 2px solid #000;
position: relative;
margin: 10px;
}
a div {
position: absolute;
top: 0;
overflow: hidden;
width: 15px;
height: 100%;
}
a div:after {
content: '';
background: #000;
width: 2px;
height: 75px;
position: absolute;
top: 12.5px;
}
a div:first-of-type {
left: -14px;
}
a div:first-of-type:after {
left: 0;
}
a div:last-of-type {
right: -14px;
}
a div:last-of-type:after {
right: 0;
}
a span {
display: block;
width: 30px;
height: 30px;
background: transparent;
position: absolute;
bottom: -20px;
right: -20px;
border: 2px solid #000;
border-radius: 25px;
box-shadow: 0 0 0 60px #ccc;
}
a div:first-of-type span {
left: -20px;
}
a div:first-of-type span:first-child {
top: -20px;
}
a div:first-of-type span:last-child {
bottom: -20px;
}
a div:last-of-type span {
right: -20px;
}
a div:last-of-type span:first-child {
top: -20px;
}
a div:last-of-type span:last-child {
bottom: -20px;
}
<a href="">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</a>
I don't think that it would be possible if the corners have to be transparent, however if the background is known, you can create a div in each corner with a rounded border. If those divs are then given the same background color as the page background the effect will work.
See my example here http://jsfiddle.net/TdDtX/
#box {
position: relative;
margin: 30px;
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #333;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.top-left {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.top-right {
top: -1px;
left: 190px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.bottom-left {
top: 90px;
left: -1px;
border-radius: 0 100% 0 0;
border-width: 1px 1px 0 0;
}
.bottom-right {
top: 90px;
left: 190px;
border-radius: 100% 0 0 0;
border-width: 1px 0 0 1px;
}
<div id="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
You could achieve this effect with the new css3-Border-images (well, it's images, but it scales without problems). But this is quite new and not very widely supported yet (well in all decent browsers (with prefixes) except IE to be precise;) ).
A nice article about border images on csstricks.
Browser Support
It doesn't look like that's possible. I tried a border-radius with a negative value just to see what would happen but it had no effect.
Edit:
Even if you break the box down into smaller parts, at some point you'd still have to create a transparent inset corner. The transparency is the tricky part that might prevent this from being possible without images. Basically, you'd have to be able to render a transparent circle with a non-transparent surrounding bg (and if that's possible in CSS, I'd love to know how :)
If you don't need transparency, there are ways to do it.
body {
background: #fff;
}
.div{
position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>
</body>
</html>
Example here
Hmm you could possibly make use of this little trick here to create Inset Border Radius
Then to support transparency you would have to probably add other blocks in between. More or less like the way the old rounded images used to be done; having a span for every corner with the transparent image. And spans on the sides and the top to fill up the empty space. Instead of using images you could use this trick to do it in CSS.
body {
background: #fff;
}
.div{
position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>
</body>
</html>
Any way to declare a size/partial border to a box in CSS? For example a box with 350px that only shows a border-bottom in its firsts 60px. I think that might be very useful.
Examples:
Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:
div {
width: 350px;
height: 100px;
background: lightgray;
position: relative;
margin: 20px;
}
div:after {
content: '';
width: 60px;
height: 4px;
background: gray;
position: absolute;
bottom: -4px;
}
<div></div>
I know, this is already solved and pixels were requested. However, I just wanted to share something...
Partly underlined text elements can easily achieved by using display:table or display:inline-block
(I just don't use display:inline-block because, yeah you know, the awkward 4px-gap).
Textual Elements
h1 {
border-bottom: 1px solid #f00;
display: table;
}
<h1>Foo is not equal to bar</h1>
Centering, display:table makes it impossible to center the element with text-align:center.
Let's work around with margin:auto...
h1 {
border-bottom: 1px solid #f00;
display: table;
margin-left: auto;
margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
Well, that's nice, but it's not partially.
As bookcasey already introduced, pseudo-elements are worth gold.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
<h1>Foo is not equal to bar</h1>
Offset, the underline is left aligned right now. To center it, just push the pseudo-element the half of its width (50% / 2 = 25%) to the right.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
margin-left: 25%;
width: 50%;
}
<h1>Foo is not equal to bar</h1>
...as davidmatas commented, using margin:auto is sometimes more practical, than calculating the margin-offset by hand.
So, we can align the underline to the left, right or center (without knowing the current width) by using one of these combinations:
Left: margin-right: auto (or just leave it off)
Middle: margin: auto
Right: margin-left: auto
Full example
.underline {
display: table;
margin-left: auto;
margin-right: auto;
}
.underline:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
.underline--left:after {
margin-right: auto; /* ...or just leave it off */
}
.underline--center:after {
margin-left: auto;
margin-right: auto;
}
.underline--right:after {
margin-left: auto
}
<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>
Block-Level Elements
This can easily be adopted, so that we can use block-level elements. The trick is to set the pseudo-elements height to the same height as its real element (simply height:100%):
div {
background-color: #eee;
display: table;
height: 100px;
width: 350px;
}
div:after {
border-bottom: 3px solid #666;
content: '';
display: block;
height: 100%;
width: 60px;
}
<div></div>
Here is another solution that rely on linear-gradient where you can easily create any kind of line you want. You can also have multiple lines (on each side for example) by using multiple background:
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
#ccc
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
#ccc
}
<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>
Here is another syntax to achieve the same as above:
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(#000 0 0) top /40% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0) bottom/ 60% 2px no-repeat,
#ccc;
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0)bottom left/ 60% 2px,
linear-gradient(blue 0 0) 60% 0 / 40% 2px,
linear-gradient(brown 0 0) left/ 3px 30%,
linear-gradient(orange 0 0) right / 3px 40%,
#ccc;
background-repeat:no-repeat;
}
<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>
I used a grid to build draw some of the borders.
See here.
Code:
/* ungrid without mobile */
.row {
width: 100%;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
}
/* things to change */
.row {
width: 70%;
margin: auto;
}
.mid.row>.col {
height: 150px;
}
/* draw box and align text */
.col {
text-align: center;
}
.top.left.col {
border-top: 1px solid black;
border-left: 1px solid black;
}
.top.right.col {
border-top: 1px solid black;
border-right: 1px solid black;
}
.bottom.left.col {
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.bottom.right.col {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.mid.row>.col {
border-left: 1px solid black;
border-right: 1px solid black;
vertical-align: middle;
}
.top.center.col {
position: relative;
top: -0.5em;
}
.bottom.center.col {
position: relative;
bottom: -0.5em;
}
<div class="row">
<div class="top left col"></div>
<div class="top center col">Top</div>
<div class="top right col"></div>
</div>
<div class="mid row">
<div class="col">Mid</div>
</div>
<div class="row">
<div class="bottom left col"></div>
<div class="bottom center col">Bottom</div>
<div class="bottom right col"></div>
</div>
CSS does not support partial borders. You'd need to use an adjacent element to simulate this.
Been playing a bit around with your solutions and came up with that.
I'd appreciate your comments and thoughts.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test file</title>
<style>
#box {
background-color: gray;
position: relative;
left: 10px;
top: 10px;
height: 180px;
width: 380px;
}
#grad1 {
position: absolute;
left: -10px;
top: -10px;
height: 40px;
width: 2px;
background-image: linear-gradient(red, red);
}
#grad2 {
position: absolute;
left: -10px;
top: -10px;
height: 2px;
width: 40px;
background-image: linear-gradient(red, red);
}
</style>
</head>
<body>
<div id="box">
<div id="grad1"></div>
<div id="grad2"></div>
</div>
</body>
</html>