brozek/website
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website.git synced 2025-10-10 06:51:13 +00:00
Code Issues Projects Releases Packages Activity

HTML pre code to Markdown code black

Browse source
This commit is contained in:
Brandon Rozek 2025-02-16 13:03:06 -05:00
parent 3b1974b3fd
commit e06d45e053
No known key found for this signature in database
GPG key ID: DFB0E78F805F4567
6 changed files with 127 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

100
content/blog/2015-10-03-animatable-text.md
View file

@ -17,7 +17,7 @@ kind:
- article
tags: ["Web", "CSS"]
---
This post is part 3 of my series on animation. In this post, I’ll show you different animations you can add onto text. If you haven’t already, you should check out [part 1](https://brandonrozek.com/2015/09/animatable-box-model/) and [part 2](https://brandonrozek.com/2015/05/animatable-border/) of this series. Animations on text can be used to bring attention, to add importance, or to convey a point. As with all animations, however, keep your user in mind and your text readable.
This post is part 3 of my series on animation. In this post, I'll show you different animations you can add onto text. If you haven't already, you should check out [part 1](https://brandonrozek.com/2015/09/animatable-box-model/) and [part 2](https://brandonrozek.com/2015/05/animatable-border/) of this series. Animations on text can be used to bring attention, to add importance, or to convey a point. As with all animations, however, keep your user in mind and your text readable.
<!--more-->
@ -28,77 +28,59 @@ This post follows along with a [Codepen demo](http://codepen.io/brandonrozek/ful
* Accepts certain keywords, or any positive number or length
* Initial value: normal
Line-height is the space between each line in a text block. It is commonly recommended that you use a unitless line-height because then it takes the font-size into consideration. When you use an unitless value, the browser determines the line-height by taking the unitless value and multiplying it by the element&#8217;s font-size. In the Codepen demo (#1), you can see the line-height decreasing while the opacity increases.
Line-height is the space between each line in a text block. It is commonly recommended that you use a unitless line-height because then it takes the font-size into consideration. When you use an unitless value, the browser determines the line-height by taking the unitless value and multiplying it by the element's font-size. In the Codepen demo (#1), you can see the line-height decreasing while the opacity increases.
<pre><code class="language-css">
```css
@keyframes line-height {
to {
opacity: 1;
line-height: 1.2;
}
}
.line-height {
opacity: 0;
line-height: 2.5;
animation: line-height .75s ease .2s infinite;
}
</code></pre>
```
### font-weight
* Accepts certain keywords or 100, 200, 300, 400, 500, 600, 700, 800, 900 (the higher the number, the darker the font-weight)
* Initial value: normal
Font-weight specifies the boldness of the text. If the typeface doesn&#8217;t come with multiple weights, then the animation would only happen between the weights that it does have. In the demo (#2), the text will go from normal weight to bold.
Font-weight specifies the boldness of the text. If the typeface doesn't come with multiple weights, then the animation would only happen between the weights that it does have. In the demo (#2), the text will go from normal weight to bold.
<pre><code class="language-css">
```css
@keyframes font-weight {
to { font-weight: 900;}
}
.font-weight {
font-weight: 100;
animation: font-weight 2s linear .2s infinite alternate;
}
</code></pre>
```
### font-size
* Accepts any length
* Initial value: medium
It is important to note that changing the font-size could change the value of other text properties that are dependent upon it. (Like unitless line-heights) In the demo (#3), you can see the text&#8217;s font-size shrinking.
It is important to note that changing the font-size could change the value of other text properties that are dependent upon it. (Like unitless line-heights) In the demo (#3), you can see the text's font-size shrinking.
<pre><code class="language-css">
```css
@keyframes font-size {
to { font-size: .1rem;}
}
.font-size {
font-size: 2rem;
animation: font-size 2s ease-out .1s infinite;
}
</code></pre>
```
### text-shadow
@ -106,25 +88,19 @@ It is important to note that changing the font-size could change the value of ot
* Color | Offset-X | Offset-Y | Blur-radius
* Initial value: none
Text-shadow applies a shadow to both the text and it&#8217;s text-decoration. Multiple shadows can be added, and they are applied from front to back. In the animation (#4), you can see the text&#8217;s shadow move.
Text-shadow applies a shadow to both the text and its text-decoration. Multiple shadows can be added, and they are applied from front to back. In the animation (#4), you can see the text's shadow move.
<pre><code class="language-css">
```css
@keyframes text-shadow {
to { text-shadow: 25px 10px 5px rgba(0, 0, 0, .9);}
}
.text-shadow {
font-size: 1.5rem;
text-shadow: -10px 5px 3.5px rgba(0, 0, 0, .3);
animation: text-shadow 1s ease 0s infinite;
}
</code></pre>
```
### text-decoration-color
@ -133,23 +109,18 @@ Text-shadow applies a shadow to both the text and it&#8217;s text-decoration. Mu
This sets the color for [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) (underlines, overlines, or strike-throughs) In the demo (#5), the strike-through changes from red to black.
<pre><code class="language-css">
```css
@keyframes text-decoration-color {
to { text-decoration-color: black;}
}
.text-decoration-color {
text-decoration-color: red;
text-decoration-line: line-through;
animation: text-decoration-color 2s linear 0s infinite alternate;
}
</code></pre>
```
### word-spacing
@ -158,21 +129,17 @@ This sets the color for [text-decoration-line](https://developer.mozilla.org/en-
Word-spacing defines the space between tags and words. Negative values bring the words closer to each other. In the demo (#6), you can see the word-spacing increase with &#8216;good bye!&#8217; where the word &#8216;bye!&#8217; is moving away.
<pre><code class="language-css">
```css
@keyframes word-spacing {
to { word-spacing: 5rem;}
}
.word-spacing {
word-spacing: normal;
animation: word-spacing 1s ease-in 0s infinite;
}
</code></pre>
```
### letter-spacing
@ -181,26 +148,35 @@ Word-spacing defines the space between tags and words. Negative values bring the
Letter-spacing specifies the spacing between text characters. Negative values bring the letters closer together. In the demo (#7), each letter gets separated from one another.
<pre><code class="language-css">
```css
@keyframes letter-spacing {
to { letter-spacing: 2rem;}
}
.letter-spacing {
letter-spacing: 0;
animation: letter-spacing .75s ease 0s infinite alternate;
}
</code></pre>
```
### Conclusion
These animations show the different things you can do with text. Perhaps you&#8217;ll add a small animation to a heading to bring depth and attention, or you&#8217;ll add some to the text of a button to scream &#8220;call to action&#8221;. Whatever you decide, I hope this post helped. I&#8217;ll see you again next time with another animatable post! 🙂
These animations show the different things you can do with text. Perhaps you'll add a small animation to a heading to bring depth and attention, or you'll add some to the text of a button to scream &#8220;call to action&#8221;. Whatever you decide, I hope this post helped. I'll see you again next time with another animatable post! 🙂
#### The links
[https://docs.webplatform.org/wiki/css/properties/line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) <https://developer.mozilla.org/en-US/docs/Web/CSS/line-height> <https://docs.webplatform.org/wiki/css/properties/font-weight>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight> <https://docs.webplatform.org/wiki/css/properties/font-size>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/font-size> <https://docs.webplatform.org/wiki/css/properties/text-shadow>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow> <https://docs.webplatform.org/wiki/css/properties/text-decoration-color>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color> <https://docs.webplatform.org/wiki/css/properties/word-spacing>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing> <https://docs.webplatform.org/wiki/css/properties/letter-spacing>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing>
- [https://docs.webplatform.org/wiki/css/properties/line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
- https://docs.webplatform.org/wiki/css/properties/font-weight
- https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
- https://docs.webplatform.org/wiki/css/properties/font-size
- https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
- https://docs.webplatform.org/wiki/css/properties/text-shadow
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
- https://docs.webplatform.org/wiki/css/properties/text-decoration-color
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
- https://docs.webplatform.org/wiki/css/properties/word-spacing
- https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing
- https://docs.webplatform.org/wiki/css/properties/letter-spacing
- https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing