I require below requirements with pure CSS. What I tried unsuccessfully for my aim at http://jsfiddle.net/5rH5R/
what I try to achieve with a generic image:
and verbally:
One letter in a circle which is centered in both directions
Letter in circle will be dynamic so CSS setting shouldn't be for some specific letters only (will be the first letter of the comment author's name)
diameter of the circle may be changed in the future (40px for the time being)
letter must not overflow out of the circle
letter must be as large as possible
I don't have any font-family restriction. If answer requires monospace family, it's OK.
the code in jsfiddle link is given below. Can you please help me if this is achievable?
HTML
<p><span class="step"><span class="letter">Ş</span></span></p>
CSS3
html5doctor.com CSS resetting CODE here
.step {
background: #cccccc;
border-radius: 2.5em; /* 40px */
-moz-border-radius: 2.5em; /* 40px */
-webkit-border-radius: 2.5em; /* 40px */
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 5em;
text-align: center;
width: 5em;
font-size:1em;}
.letter{font-size:5em;background:orange;position:relative;top:.1em;}
I changed your CSS a little:
.step {
background: #cccccc;
border-radius: 50%; /* 40px */
-moz-border-radius: 2.5em; /* 40px */
-webkit-border-radius: 2.5em; /* 40px */
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 5em;
text-align: center;
width: 5em;
height: 5em;
font-size:1em;
}
.letter{
font-size:4em;
}
Basically I set width and height of step to be the same. I set border-radius to 50%, which will always create a circle if the width and height are the same, even if the dimensions change in the future.
You can play with the font-size of the .letter a bit to make the letter as big as possible.
Related
I wanna create a responsive button so I cannot use "px" values for the border radius. If I try to use "%" values I never get to the format which I want. Basically the same button but instead of border-radius=100px; something responsive with "%".
Following a snippet.
.button-in-main-box{
background-color: #04AA6D;
border:1px solid ;
height: 15px;
padding: 15px 0;
width: 40%;
border-radius: 100px;
display: block;
text-align: center;
}
<span class = button-in-main-box>Löse Aufgabe</span>
This should work for you border-radius: 5%/100%;
There are more details about it in here: https://www.w3.org/TR/css-backgrounds-3/#the-border-radius
Try using rem. It is responsive tho.
.button-in-main-box{
background-color: #04AA6D;
border:1px solid ;
height: 15px;
padding: 15px 0;
width: 40%;
border-radius: 20rem;
display: block;
text-align: center;
}
<span class = button-in-main-box>Löse Aufgabe</span>
The border-radius property defines the radius of the element's corners and it sometimes take more than one value depending on what you want to achieve,
A simple rule
/* If one value is set, `radius` applies to all 4 corners. */
border-radius: 15px;
/* If two values are set, the first applies to top-left and
bottom-right corner, the second applies to top-right and
bottom-left corner. */
border-radius: 15px 15px;
/* Three values: The second value applies to top-right and
also bottom-left. */
border-radius: 15px 15px 15px;
/* Four values apply to the top-left, top-right, bottom-
right, bottom-left corner */
border-radius: 15px 15px 15px 15px;
Keep in mind that , percentages , refer to corresponding dimension of the border box.
You may specify the value of border-radius in percentages. This is particularly useful when wanting to create a circle or elipse shape,
/* create a circle */
border-radius: 50%;
Try using rem or em unit. Rem is relative to the root font size of your html document while em is relative to the font size of the element or nearest parent.
.button-in-main-box{
background-color: #04AA6D;
border:1px solid ;
height: 15px;
padding: 15px 0;
width: 40%;
border-radius: 6.25rem;
display: block;
text-align: center;
}
<span class = button-in-main-box>Löse Aufgabe</span>
It looks like the value of border-radius depends on the height of the button which includes height + padding.
You may set and use those two value within a css var(--myCssVar) and calc(). It will adapt itself the value to set to border-radius.
examples:
.button-in-main-box {
/* update using css var to calculate border-radius according to height + padding */
--height: 15px;
--padding: 15px;
box-sizing: content-box;/*keep it that way */
height: var(--height);
padding: var(--padding) 0;
border-radius: calc(var(--height) + var(--padding));
/* original op's rules */
background-color: #04AA6D;
border: 1px solid;
width: 40%;
display: block;
text-align: center;
}
<span class="button-in-main-box">Löse Aufgabe</span>
<hr> give it a different height and padding via a reset of CSS var() used
<span class="button-in-main-box" style="--height:30px;--padding:40px">Löse Aufgabe</span> what about font-size and em ?
<span class="button-in-main-box" style="font-size:10px;--height:1.5em;--padding:0.5em">Löse Aufgabe</span>
ressources:
CSS variable
https://developer.mozilla.org/en-US/docs/Web/CSS/var()
The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
CSS calc() function
https://developer.mozilla.org/en-US/docs/Web/CSS/calc()
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML
<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>
and the below style
#personName {
display: block;
}
#moreInfo {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
font-weight: bold;
font-style: italic;
display: inline-block;
}
The problem is I also have this style
* {
box-sizing: border-box;
}
which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- https://jsfiddle.net/ds9sqr0y/ . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.
That's because box-sizing: border-box includes both the border and the padding in the height computations.
Which means that if you create an element with height: 30px and padding-top: 5px, it will be 35px tall (height + padding) but with setting box-sizing: border-box, it will be 30px tall.
In your specific case, you can increase the height and width to the following to make it look like you want to:
width: 57px;
height: 57px;
As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.
#moreInfo {
...
padding: 0;
font: 30px Arial, sans-serif;
...
}
How do I vertically align the characters/text inside an input without changing the height of the input (it has to be exactly 28px)? The input has this CSS, so I don't understand why it has some padding-top (?):
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="asdg">
Some letters like g, p and q get cut off
Removing the margin-bottom doesn't help.
https://jsfiddle.net/4rtL6415/
There is no padding top, it's about font size. I've changed your snippet input with a special char that fit the whole height (I'll explain below):
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="ￂgs">
This image:
Explain how a font is construct. 99% of the time you'll see characters with Body < EM and that's why we may think that there is a sort of padding-top.
Sometimes, you'll cross characters for which Body == EM, that's the case of ￂ (and a lot of others).
What you are seeing is not a bug but a feature. From here you have 3 choices:
Changing the font-size;
Changing the input height;
Changing the font-family for one that doesn't "overflow".
The choice is all yours.
The Problem
In some fonts, characters with descenders, like g, p, q, and y, "overflow" the vertical space defined by the font-size property. Normally, that's not a problem, because the line-height property provides enough extra space to accommodate the descenders. However, if the characters are placed in a container element with a fixed height that's less than the line-height, the descenders may get clipped if that's how the container handles overflow (text inputs being one example of such).
If you were hoping to bump the text up a few notches to avoid the clipping, then you'll be disappointed to know that there is currently no way to reposition text within its own line-height. (vertical-align, in case you were wondering, positions an inline element relative to its parent.) However, there are a few CSS tricks that we can use to achieve the same visual effect...
Solution 1 (Webkit only)
This one works by giving the input a large enough height to fit the font's lower extremities, and then using clip-path to trim it back down to 28px. This is probably the most elegant solution, but unfortunately, clip-path isn't well supported outside of Webkit browsers (Chrome, Safari, Opera).
input {
display: inline-block;
padding: 0;
border: none;
height: 32px;
font-size: 28px;
line-height: 32px;
font-family: arial;
background: #cdcdcd;
vertical-align: baseline;
-webkit-clip-path: inset(4px 0px 0px 0px);
clip-path: inset(4px 0px 0px 0px);
}
input: <input value="asdg">
Solution 2
This one was inspired by DebRaj's answer, but mine uses an inline-block wrapper instead of a block (not sure how you would use it otherwise). Like the previous solution, it increases the height of the input, but instead of using clip-path to trim it back down, it uses a container element with overflow: hidden;. This is probably the most practical approach until support for clip-path improves.
.text {
display: inline-block;
vertical-align: baseline;
overflow: hidden;
margin: 7px 0 -7px 0;
height: 28px;
}
.text > input {
margin-top: -4px;
border: none;
padding: 0;
background: #cdcdcd;
font-size: 28px;
line-height: 32px;
font-family: arial;
}
input:<span class="text"><input value="asdg"></span>
Solution 3
Although you can't reposition text within its own line-height, this may be the next best thing. If you set the line-height to something less than the font-size, the text will indeed move upward relative to its normal baseline. That means you can bring the clipped parts into view without changing the container height. Unfortunately, if you try this with a text input, you'll discover a strange quirk: line-height is completely ignored if it's less than the input's height. So we'll have to substitute a different element, and turn it into an editable textbox somehow. That can be accomplished with the contenteditable attribute.
.fauxTextInput {
display: inline-block;
vertical-align: baseline;
margin: 6px 0 -6px 0;
padding: 0 3px 0 3px;
width: 9em;
height: 28px;
overflow: hidden;
font-size: 28px;
line-height: 23px;
font-family: arial;
background: #cdcdcd;
}
Faux input: <span class="fauxTextInput" contenteditable>asdg</span>
As #Thomas mentioned there is a default spacing as per font construction rules. If we concentrate the output you want to achieve is make font exact same height at the input area, you can wrap your input into a div and give that a height to adjust the input into it using as a mask.
Here is the code:
<div class="input-wrapper">
<input value="asdg">
</div>
CSS:
.input-wrapper{
position: relative;
font-family: arial;
width: 100%;
height: 90%;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.input-wrapper input {
display: block;
width: 100%;
height: 124%;
margin-top: -0.19em;
margin-bottom: 0em;
font-size: 28px;
padding: 0;
outline-offset: 0;
border: none;
}
.input-wrapper input:focus{
outline-offset: 0;
outline: 0;
border: none;
box-shadow: none;
}
fiddle: https://jsfiddle.net/x8jmLp8m/12/
Hope that helps.
Although there have been plenty of answers. I thought I'd add my solution to the bunch.
In this Fiddle, you can see how I managed to create an input field with a span tag, and the contenteditable attribute. The pros of taking this route are that the input field can stretch and wrap and that we can make it exactly 28px high.
In the CSS, I've added the following rules that are important:
span{
display: inline-block;
font-size: 25px; /*higher than 25px simply doesn't fit a 28px container*/
line-height: 1;
padding: calc(-.5em + 14px) 0;
}
display, of course, to style the bunch
font-size to declare the height of the font
line-height of 1 to make sure the text actually takes up 25px by default.
a padding of calc(-.5em + 14px) 0. And that's the tricky part
Because of this padding, the element will stay 28px high, while still centering the text. See the table below to see how the calculation works. The font-size and output * 2 always add up to a minimum of 28.
font-size | calculation | output |
--------------------------------------
50px | calc( -25px + 14px) | -11px | a negative padding translates to a padding of 0
25px | calc(-12.5px + 14px) | 1.5px |
20px | calc( -10px + 14px) | 4px |
15px | calc( -7.5px + 14px) | 6.5px |
10px | calc( -5px + 14px) | 9px |
With this code, you can edit the span's height by editing the 14px part in the calc, and edit the font-size without having to recalculate yourself
Hope this helps
Edited your fiddle here
The problem is your font is larger than the height of the element enclosing it. So you just need to set both the height and line-height to a couple of px larger than the font size you're using.
Hope this helps.
Just decrease the font-size:
input {
font-family: arial;
font-size: 20px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="asdg">
I hope this will help you know what you want to achieve
In CSS, the line-height
property sets the height of
an entire line of text, so the
difference between the font-
size and the line-height is
equivalent to the leading (as
shown in the diagram above).
And our css is this
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
Here we have set line-height and font size equal and because of that decent is getting cut.So you either need to decrease font-size or increase line-height.
input {
height:34px;
}
Just change height and line-height to 40px or more.
https://jsfiddle.net/525raf3L/
input {
font-family: arial;
font-size: 28px;
line-height: 40px;
height: 40px;
padding: 0 12px;
border: none;
outline: none;
background: yellow;
}
<input value="asdg">
I have IBAN (e.g. CZ5220100000000123456789) and for better readability I would like to insert whitespace after every fourth character (CZ52 2010 0000 0001 2345 6789). But internet banking accepts only IBAN without whitespace and if someone copy this IBAN, he has to remove these whitespaces before pasting it.
In paragraph I would solve it like this:
<style type="text/css">
span { margin-right: 0.5em }
</style>
<p><span>CZ52</span><span>2010</span><span>0000</span><span>0001</span><span>2345</span>6789</p>
But is it possible to achieve this (without JS) inside input tag that doesn't support html?
http://jsfiddle.net/r3g6nhsa/
Please, correct my english.
As far as I know it can be achieved only with JS, however you can try this - JSFiddle.
HTML
<div class="iban">
<input type="text" value="CZ5220100000000123456789" />
<span>CZ52 2010 0000 0001 2345 6789</span>
</div>
CSS
.iban {
position: relative;
}
.iban span {
position: absolute;
margin-right: 0.5em;
padding: 1em;
}
.iban:hover span {
display: none;
}
.iban input {
display: none;
}
.iban:hover input {
display: inline;
}
input {
position: absolute;
padding: 1em;
}
.iban span, input {
font-family: Tahoma;
font-size: 12px;
width: 200px;
border: 1px solid gray;
}
Note: I didn't check if this works on mobile devices/touch screens. I recommend to use some JS solution. If user change text in the input - text in the span won't change.
You could eventually use background and a font-family like courier:
.iban {
letter-spacing: 1px;/* makes it easier to read for some of us */
font-family: courier;/* all letters/numbers have same width */
display: inline-block;/* keep them together */
background: linear-gradient(to left, lightgray 50%, transparent 50%) left yellow;/* draw some colors behind */
background-size: 33.33% /* cause we need it to repeat 3 times */
text-shadow: 0 0 1px black; /* increase thickness */
}
<span class="iban">CZ5220100000000123456789</span>
It makes it easier to read and easy to copy/paste :)
http://codepen.io/anon/pen/QbzLEy
input version :(please, use em or rem values to size& for letter-spacing to fit to font-size)
.iban {
letter-spacing: 0.125em;
width: 18em;
font-family: courier;
background: linear-gradient(to left, #ccc 50%, transparent 50%) right tomato;
background-size: 33.33%;
margin: 0 5px;
padding: 0;
font-size: 1em;
border: none;
}
<p>IBAN: <input class="iban" value="CZ5220100000000123456789" /></p>
http://codepen.io/anon/pen/ZGVzyy
Place in the value attribute between the characters you want separated by a space.
How can i increase the round corner button width dynamically depends on the text size in CSS ?
i have 10 round corner buttons with different text size base, i want the solution is buttons size should increase dynamically based on text size....
Is any solution for this using HTML and CSS, or any other way to solve using scripting language.
Help..,
jsfiddle to see it in action: http://jsfiddle.net/XAU8V/
HTML:
<div class="container">
Small
Medium
Large
</div>
CSS:
.button {
border: 1px solid #96d1f8;
background: #65a9d7;
padding: 5px 30px;
color: white;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
.small {
font-size: 14px;
}
.medium {
font-size: 20px;
}
.large {
font-size: 30px;
}
The border radius is in "em", so it is in relation to the parent value (even though it's not really a parent in this example). Em's can get a little tricky due to inheritance.