Like this
With only this code
<span>1</span>
http://jsfiddle.net/MafjT/
You can use this css
span {
display: block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px; /* or 50% */
border-radius: 30px; /* or 50% */
background-color: black;
color: white;
text-align: center;
font-size: 2em;
}
Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.
This solution always renders a circle, regardless of content length.
But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/
Resize with content - Improvement
In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.
Using CSS3:
span
{-moz-border-radius: 20px;
border-radius: 20px;
border-color:black;
background-color:black;
color:white;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:1.3em;
}
http://jsfiddle.net/NXZnq/
You have many answers now but I try tell you the basics.
First element is inline element so giving it margin from top we need to convert it to block element. I converted to inline-block because its close to inline and have features of block elements.
Second, you need to giving padding right and left more than top and bottom because numerals itself extend from top to bottom so it gets reasonable height BUT as we want to make the span ROUND so we give them padding more on left and right to make room for BORDER RADIUS.
Third, you set border-radius which should be more than PADDING + width of content itself so around 27px you will get required roundness but for safely covering all numerals you can set it to some higher value.
Practical Example.
The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.
The Syntax:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Examples:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
I your case
span {
border-radius: 100px;
background: #000;
color : white;
padding : 10px 15px;
}
Check this Demo http://jsfiddle.net/daWcc/
In addition to the other solutions, http://css3pie.com/ does a great job as a polyfill for old internet explorer versions
EDIT: not necessary as of 2016
Related
I have some strange behaviour in using padding.
I have a div as a wrapper. This wrapper has a padding of 25px to both sides:
.wrapper #header #navline #log form .small {
height: 25px;
width: 180px;
padding: 5px 25px;
}
in that wrapper I have an input field with the following css:
input[type="text"],[type="password"] {
font-size: 10px;
width: 180px;
height: 18px;
line-height: 18px;
padding-left: 5px;
padding-right: 5px;
outline:none;
}
and as error class:
input.error {
background-image: url(../images/error.png);
background-repeat:no-repeat;
background-position: 160px 50%;
width: 165px;
padding-left: 5px;
padding-right: 20px;
position: absolute;
z-index: 3;
}
so I'm getting crazy through setting it up the right way. The problem is that chrome/safari and Firefox seems to be different in handling padding properties. For example when leaving height property in chrome/safari there is something like padding top/bottom automatically added to the input field. in firefox there is a different height of the input field. to show an image:
firefox:
chrome:
the main problem is that I would like to center the input field in the wrapper div. the width of the input should be 180px. this means there is 25px to each side left. the text padding is also 5px to each side. so when using padding properties the new the width of the input field is the width minus the padding. so this will be the first question. when using pading-left and padding-rightof 5px is this equal to 180px(width input field) minus 10px (padding) or is the padding 0px because of the left hand side +5px and right hand side -5px? so what will be the correct width of the input field?
Second question is regarding to the error class. In that I will add a picture and would like to increase the right hand padding from 5px to 20px. even here the question whats the width of the input field? I thought the logic behind would be 180px minus +5px left, -20px would be 165px?
Third question: I tried all method but the result was different to each browser. Is there a failure behind my logic because padding should be padding or not?
Add css3 box sizing to every element that has padding. It will fix the issue.
.text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
I want to Create Box shadow as given below.
As per my study of Box shadow. It takes below parameters:
DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}
Please, Find the jsfiddle for this.
To create above examples, I need to use box shadow.
For example 1, I used below style:
box-shadow:0px 10px 22px 0px gray;
Here, I am getting lighter shadow on top, left and right side also (which I don't want)
In example 2, I used below style:
box-shadow:10px 10px 22px 0px gray inset;
I don't want inner shading to right and bottom part.
Is it possible to remove unnecessary shading in box-shadow ?
You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero - see demo http://dabblet.com/gist/1579740
However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;
If you don't need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.
DEMO http://dabblet.com/gist/3149980
HTML for first shadow:
<div class="outer">
<div class="shadow1"></div>
</div>
CSS for first shadow
div {
width: 100px;
height: 100px;
}
.outer {
padding-bottom: 35px;
overflow: hidden;
}
.shadow1 {
box-shadow: 0px 10px 22px 0px gray;
background: #f0f0f0;
}
HTML for second shadow
<div class="shadow2"></div>
CSS for second shadow
.shadow2 {
box-shadow:10px 10px 22px 0px gray inset;
position: relative;
background: #f0f0f0;
}
.shadow2:before {
top: 22px;
bottom:0;
left:22px;
right:0;
position: absolute;
background: #f0f0f0;
content:'';
}
You can do it with some extra markup (an extra div wrapping the element so that it hides the other shadows you don't want)
Or you could use the shadow spread property (the 4th number in the box-shadow declaration) to shrink the shadow down to hide the side parts of your shadow.
This creates a smaller shadow on the bottom, but it requires no extra HTML.
http://jsfiddle.net/hBMQm/2/
#b {
position:absolute;
width:100px;
height:100px;
top:200px;
left:200px;
background-color:#F0F0F0;
text-align:center;
box-shadow:20px 20px 22px 0px gray inset;
}
Now you have the inner shadow, but not on you right, or bottom as you asked for. Did i misunderstand you?
box-shadow takes one more parameter the spread
using following code i was able to achieve the desired effect
box-shadow: 0px 20px 22px -20px gray inset;
see here http://jsfiddle.net/hBMQm/3/
I'm trying to create rounded corners with a header and a footer. I was able to force the header to be on top, but I don't understand why I can't force to footer to be at the bottom.
In fact, position absolute; bottom:0; does that but my footer in only the lenght of the text. When I add width:100%;, the footer becomes larger then the ???
Here you can see my code: http://jsfiddle.net/fleduc/GN9q5/
You set left: 0 and right: 0, not width: 100%; - see test http://jsfiddle.net/thebabydino/GN9q5/3/
You might also want to read this http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
It's true that you have absolute positioning here and width: auto won't do the trick in this case, but you have to understand that width: 100% means the width of the container without paddings and borders (unless you use box-sizing: border-box)
You have specified the div's width in px, so can you just specify the footer's width in px? Example: http://jsfiddle.net/GN9q5/4/
Only change this css and it is gonna work ;-)
.rcs .ftr {
margin:110px 0 0 0;
font-size:1.2em;
padding:5px 0px 5px 10px;
border-bottom-left-radius: 0.35em;
border-bottom-right-radius: 0.35em;
border-top:1px solid #AAAAAA;
}
See the test http://jsfiddle.net/GN9q5/5/
Absolutely-positioned elements are no longer part of the layout. They have no idea how big the parent element is, so you have to set the width to a static value.
You must set your width with a absolute value and calculate the padding.
For exemple:
If you have a width of 960px and a padding of "5px", your with must be 950px.
You SHOULD remove it for reason that I don't exactly know.
/*footer*/
.rcs .ftr {
margin:0;
font-size:1.2em;
padding:5px 5px 5px 10px;
position: absolute;
bottom: 0px;
width: 385px;
border-bottom-left-radius: 0.35em;
border-bottom-right-radius: 0.35em;
border-top:1px solid #AAAAAA;
}
You have the container width set to 400px. Left & right padding = 15px, so subtract that and set your width at 385px.
More info: absolute vs relative position width & height
Also, make sure to close all of your declarations.
I think I might already know the answer to this one but I need a sanity check!
Say I have
#gridtest{
width:590px;
}
I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:
#gridtestpercent{
width:59%; /*590/1000*/
}
If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do
#gridtest{
width:570px;
border:10px solid red;
}
I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.
If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?
Cheers!
You could use CSS3 calc() function,
.selector{
border: 5px solid black;
width: -moz-calc(50% - 10px);
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
SASS mixin
#mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
article {
border: 1px solid red;
#include calc( width, '100% - 2px')
}
You could use an inset box-shadow instead of a border:
box-shadow: 0px 0px 0px 10px red inset;
Just pad the inside of the container to compensate.
Edit: I write "pad" but of course if you use padding it'll throw off the box dimensions. Margin the content inside instead.
The accepted answer is not correct. You actually have 2 options:
Use the box-sizing property, so all the paddings and borders are considered part of the size:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
border: 2px solid black;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Or, use the outline property instead of the border property. You will still have problems with the paddings, but it's easier to add. Example:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
outline: 2px solid black;
}
Full explanation: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper div that you use to create your border. So the outside div would be 57% (in your example) with a background that is the color of your desired border. Then, the inner div would have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).
If you want to stay semantic you can use div { box-sizing:border-box; } or some absolutely positioned :after elements. See the post How do I add 1px border to a div whose width is a percentage?
In CSS3 you can also use the new box-sizing property to include the pixel and padding count into the width of the element:
box-sizing: border-box;
If possible, depending on your design, what I like to do is put the border as an absolute div with a width of 3px ( for example ) and a height higher than its parent div. I then set overflow hidden on the parent div.
I want to Create DIV based Flexible corners. as per shown in the Image.
This is Not regular rounded corner, but something more complicated. This is Something like challenge .
And Please Note that I want Image based rounded Corners, so please give answer as per requirments.
Thanks a Lot
Well, the easiest answer is: use CSS3:
#roundedCornerDiv {
-moz-border-radius: 1em; /* for mozilla-based browsers */
-webkit-border-radius: 1em; /* for webkit-based browsers */
border-radius: 1em; /* theoretically for *all* browsers
dependant on implementation of CSS3 */
border: 12px solid #ccc;
}
you should be able to do this with 9 explicitly sized and floated divs. the corner divs are fixed size and have background-url for the 4 corners and the side divs are repeat-y and top bottom divs have repeat-x
You should look into The Thrashbox approach for this.
You can use a series of spans and 4 images, one for each corner, to make a resizable rounded corner div. Like this:
div {
background: white url(topleft.gif) top left no-repeat;
}
div span {
display: block;
background: url(topright.gif) top right no-repeat;
}
div span span {
background: url(bottomright.gif) bottom right no-repeat;
}
div span span span {
padding: 2em;
height: 0; /* fixes a padding bug in IE */
background: url(bottomleft.gif) bottom left no-repeat;
}
div span span > span {
height: auto; /* sets the height back to auto for all other browsers */
}
And now for the HTML:
<div><span><span><span>Round corners!</span></span></span></div>
For an actual example and code please refer to this page for a working example and source code.
border-radius: 10px 10px 10px 10px;
first is the left-upper corner.
second is the right-upper corner.
third is the right-lower corner.
fourth is the lower-left corner.
you can use that basically in any tag where you want the round corners. just remember to specify the border like:
border: 2px solid black;
if you specify the border separately, eg:
border-left: 6px;
border-right: 6px;
border-top: 2px;
border-bottom: 2px;
you can get some awesome-looking stuff.