I have a css code here as plunktr. I am able to draw icons using HEX code, but I am not able to make perfect circle using css for the tick icon.
Here is what I have used:
.tick-icon::after {
content: '\2713';
border-radius: 50%;
background-color: red;
font-size: 2rem;
color: #ffffff;
}
What I see is more like an oval shape. How to make it a perfect circle ?
To get a circle the pseudo element has to have height and width set to the same dimension. If this isn't done specifically then the system just bases the size on the dimensions of the character, which are not square.
This snippet uses a CSS variable to set the font size (as you have in your code) and then does a calculation to set the dimension of the surrounding pseudo element - obviously change the multiplier to what you want.
.tick-icon {
position: relative;
}
.tick-icon::after {
--size: 10rem;
content: '\2713';
position: absolute;
top: 0;
left: 0;
text-align: center;
border-radius: 50%;
background-color: red;
font-size: var(--size);
--dimension: calc(1.5 * var(--size));
width: var(--dimension);
height: var(--dimension);
color: #ffffff;
}
<div class="tick-icon"></div>
Set width/height:
.tick-icon::after {
content: '\2713';
border-radius: 50%;
background-color: red;
font-size: 2rem;
width: 2.5rem;
height: 2.5rem;
text-align: center;
display: inline-block;
color: #ffffff;
}
Related
I'm having trouble with a SCSS/CSS styling idea, I want to fill the space before or after the last line of a heading with a solid line. The last line of text does not have a set width (it varies depending on screen size) I'm open to any suggestions.
Here's what I want to achieve when the text is aligned right or left.
|Here is some text on screen| |Here is some text on screen|
|very cool -----------------| or |----------------- very cool|
| | | |
| | | |
EDIT Code added for clarity:
HTML
<h1>You're the painter, we just want to see you paint.</h1>
CSS (that is how far I've got)
h1{
font-family: "doesntMatter";
font-style: bold;
font-size: 2rem;
text-align: left;
}
h1::after{
display: inline-block;
line-height: 0;
position: relative;
bottom: 2.5rem;
border-bottom: 10px solid red;
width: 100%;
content: "";
}
I found a solution to my problem, if you take this code here and run it, the last line will be struck through.
.container {
width: 100%;
padding-inline: 2rem;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
overflow-x:hidden;
}
.text::after {
position: absolute;
left:0;
bottom: 0.9rem;
width: 100%;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
But if you remove left:0; from the text::after styling, it magically jumps over to fill the blank space at the end.
I added a margin-left: 1rem to give the things some breathing room but yea I really don't know what's going on.
I don't know how it works but it just kind of does, if the .text{} element has overflow-x: hidden applied to it then the effect will cutoff at the width of the header.
.container {
width: 100%;
padding-inline: 2rem;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
overflow-x: hidden;
}
.text::after {
position: absolute;
bottom: 0.9rem;
width: 100%;
margin-left: 1rem;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
That is one way to do the effect, if you want the line to spill off the page, you apply overflow-x: hidden to the .container{} element and remove if from the .text{}... since my container is 100% width the line goes off the page and works as intended.
.container {
width: 100%;
padding-inline: 2rem;
overflow-x: hidden;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
}
.text::after {
position: absolute;
bottom: 0.9rem;
width: 100%;
margin-left: 1rem;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
The line responds to any changes in the width of the last line. There's a few edge cases that I'm going to have to look into like if the last line of text practically fills the entire width of the header, then there's just a little nub at the end.
But it's been fixed! I hope this helps anyone in the future that couldn't figure out the right combination of words to google to find a solution.
Building on what you have already, this snippet puts the text within a span element. This enables a white padding which can overwrite that part of the red line which is under the actual text.
h1 {
font-family: "doesntMatter";
font-style: bold;
font-size: 2rem;
text-align: left;
position: relative;
}
h1>span::after {
display: inline-block;
position: absolute;
border-bottom: 10px solid red;
width: 100%;
left: 0;
margin-top: -11px;
content: "X";
color: transparent;
z-index: -1;
}
h1>span {
background: white;
padding-bottom: 11px;
}
<h1><span>You're the painter, we just want to see you paint.</span></h1>
Note - it's a little bit hacky, including positioning 1px different from the height of the line. This is because on modern screens which use more than one screen pixel for a CSS pixel the system can 'leave behind' traces of color when it is positioning (e.g. a screen pixel - not a whole CSS pixel).
JSFiddle, won't work in Stack Snippet for some reason:
https://jsfiddle.net/m3aoswyx/2/
I have a custom checkbox, like this:
<label for="name" class="customCheckboxLabel">
<input type="checkbox" name="name" class="customCheckboxInput" />
<span>Foo</span>
</label>
With the following SCSS:
.customCheckboxLabel {
span {
font-size: 3em;
padding-bottom: 2px; //This is ignored.
}
.customCheckboxInput {
appearance: none;
-webkit-appearance: none;
-moz-appearance:none;
width: 3em;
height: 3em;
background-color: transparent;
border: 2px solid red;
border-radius: 0.5em;
transition: all 0.5s;
&:checked {
transform: rotate(45deg);
border-color: black;
&::after {
content: "\2022";
font-size: 6em;
color: #41b883;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
line-height: 0.1em; //This is random
}
}
}
}
This results in a circle appearing when the box is checked, that is not quite centred within its containing square. I have been able to approximately centre it using line-height set to random values, but this value must be changed for every checkbox height/width, and after element font size. This doesn't really work for what I need. What I really want, is for the only size definition to be the font-size of the span, and the width/height of the checkbox. The after-element should simply fill the checkbox (with a small amount of padding) and be centred
Additionally, I've been trying to add a bit of padding to the bottom of the span, but this is totally ignored. I just want the span and the checkbox to be vertically aligned.
One solution for creating a centralized circle, in this case, would be to make it different using background-color, positioning, relative dimensions, auto margin and border-radius.
&::after {
content: '';
text-align: center;
width: 50%;
height: 50%;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #41b883;
border-radius: 50%;
}
Is it possible to change the size of the text-shadow?
This is what i want to achive:
If it's not, what do you recommend?
May be it is not the best but its one way of doing this as in my opinion this effect looks difficult to achieve with text-shadow.
Here are the necessary steps:
Use HTML5 data-* attribute to store the same text as in DOM node.
Use :before or :after pseudo element to draw this text below the normal text.
Apply css3 scale() transformation and other necessary styles.
.text {
font-family: Arial, sans-serif;
font-weight: bold;
display: inline-block;
letter-spacing: -4px;
vertical-align: top;
margin: 30px 110px;
line-height: 60px;
color: skyblue;
font-size: 0;
}
.text span:first-child {
color: pink;
}
.text span {
display: inline-block;
vertical-align: top;
position: relative;
letter-spacing: 0;
font-size: 50px;
}
.text span:before {
content: attr(data-title);
transform-origin: 0 100%;
transform: scale(1.7);
position: absolute;
opacity: 0.3;
bottom: -8px;
z-index: -1;
left: 0;
}
.text span + span:before {
left: 22px;
}
<div class="text">
<span data-title="o">o</span>
<span data-title="ferta">ferta</span>
</div>
For example, syntax for text-shadow is: text-shadow: 1px 1px 5px #ff0000;
First value is for x position.
Second value is for y position.
Third value is for radius and it's the size you are looking for! ;-)
If you try text-shadow: 1px 1px 50px black; you will have a very big shadow over the text.
#border {
position: static;
z-index: 1;
width: 120px;
height: 120px;
margin-left: 92% ;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
margin-left: 93%;
z-index: 2;
color: white;
font-weight: bold;
}
<div id="border"></div>
<div id="text">Users online</div>
I can't post the image here, cuz I have less than 10 reputation, so try to imagine it please. I want to place it's "Users online" inside the border, how should I do this? Thanks.
I'm assuming you are trying to have an element with a semitransparent background.
Since you are using the opacity property on the element with an id of border.
The problem here is that z-index will not have any effect, if the position is set to static, which is the default value for div elements.
The other thing is, that you should be using a relative positioned parent to make your life easier and have more control over the elements since positioned elements will leave the normal document flow and result in new stacking order.
Here you can find good information on the the z-index property, stacking and the document flow.
This is one solution to your problem.
body {
background:black;
}
.holder {
position:relative;
}
#border {
position: absolute;
z-index:1;
right:0;
width: 120px;
height: 120px;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
position: absolute;
z-index:2;
right:0;
width: 120px;
height: 120px;
padding: 15px;
text-align: center;
color: white;
font-weight: bold;
}
<div class="holder">
<div id="border"></div>
<div id="text">Users online</div>
</div>
But i would actually try to solve this with a different approach, because i find the above solution a bit to complex and it involves to much positioning, so if all you need is a semitransparent background just make use of the background property with an rgba value. Here is an example.
.user-panel {
float:right;
height: 120px;
width: 120px;
padding: 15px;
border-radius: 11px;
/* fallback for browser that do not support rgba */
background: #ccc;
/* semitransparent background */
background: rgba(0, 0, 0, .2);
text-align: center;
color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
<header>
<div class="user-panel">Users online</div>
</header>
Hope that helps.
Change
position: static;
to
position: absolute;
for #border. That way, border will be "removed from the flow" (i.e. other elements will ignore it). You may need to adjust the margin-left property for #text so it properly aligns.
Fiddle: https://jsfiddle.net/xzdmLt33/1/
This question already has answers here:
CSS circles without width or height? : Is this possible with pure CSS or not?
(4 answers)
Closed 7 years ago.
It appears setting my border-radius to either 50% or 100% didn't do the trick and gives the span tag a stretched appearance. Is it possible to get this circle perfectly symmetrical without setting a height or width to it?
span {
background: #232323;
border-radius: 50%;
color: #fff;
display: inline-block;
font-family: Arial, sans-serif;
padding: 6px;
}
<span>x</span>
A solution is to just set the width to the computed font height:
width: 1em;
span {
background: #232323;
border-radius: 50%;
color: #fff;
display: inline-block;
padding: 6px;
width: 1em;
text-align: center;
}
<span>x</span>
Something like this maybe?
span {
background: #232323;
border-radius: 100%;
color: #fff;
display: inline-block;
font-family: arial;
font-size: 20px;
text-align: center;
width: 1.35em;
padding-bottom:.2em;
}
span.medium {
font-size: 50px;
}
span.ridikulus {
font-size: 500px;
}
<span >x</span>
<span class="medium">x</span>
<span class="ridikulus">x</span>
To provide an alternative approach, instead of relying on border-radius, I was thinking about using a glyph • and position that on the span tag.
The size can be adjusted using font-size.
The big advantage is that you don't need to generate a perfect circle.
span {
color: #fff;
position: relative;
line-height: 1;
display: inline-block;
padding: 10px;
}
span:before {
content:'\02022';
color: #000;
font-family: sans-serif;
font-size: 10rem;
position: absolute;
z-index: -1;
line-height: 0;
left: -14px;
top: 20px;
text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
<span>x</span>