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.
Related
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;
}
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%;
}
#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>
How do you animate the text position smoothly. On hover, I want to re-position the text from text-align: center to text-align: left.
From this state:
To this state:
When I change the text-align on a :hover selector, the transition isn't smooth. It just jumps to the left alignment.
div.subject > div.subjectHeader {
height: 200px;
width: 100%;
color: white;
font-family: 'Lato', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
-moz-transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}
div.subject:hover > div.subjectHeader {
height: 30px !important;
line-height: 30px !important;
font-size: 1.5em !important;
text-align: left !important;
padding-left: 10px !important;
}
Here is the jsfiddle: Link to jsfiddle
The text-align property is not animatable, so CSS transitions will not be applied to it.
One possible workaround involves positioning your text inside a div absolutely and animating the left property instead. For example, modify your header HTML like this:
<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>
Then animate the CSS of .subjectHeaderInner using the left and margin properties. Don't change text-align as there's no way to animate that property. For example:
div.subject .subjectHeaderInner {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
-moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
left: 0;
margin-left: 0;
}
I updated your fiddle with this code: http://jsfiddle.net/kAPtL/5/
Other workarounds are possible depending on what kind of effect you want. There are some examples at Is it possible to transition text-alignment using CSS3 only?
Edit: Slightly better, since the closing animation can't be done with precision (without knowing the text length), I made it simpler but at least it doesn't look that bad.
This is an alternative that works pretty well, almost perfect I would say. The most notable trick is using white-space: nowrap to play with the box dimensions effectively.
HTML layout:
<div>
<h1>
<span>Some Title</span>
</h1>
<p>some cool explanation</p>
<p>more explanation</p>
</div>
CSS that delivers the magic:
div { border: 5px solid black; height: 18em; padding-top: 2em; position: relative; width: 20em; }
div:hover h1 { height: 1.2em; }
div:hover span { right: 10em; padding-top: 0; }
h1 { bottom: 0; height: 20rem; margin: 0; top: 0; width: 20rem; }
p { padding: 10px; }
span { font-size: 1em; left: 0; padding-top: 4em; position: absolute; right: 0; text-align: center; white-space: nowrap; }
h1, span { background: green; position: absolute; transition: all .3s ease; }
JSFiddle example