Free AI web copilot to create summaries, insights and extended knowledge, download it at here

Abstract

s="hljs-comment">--param value and --param=value form.</span></pre></div><div id="35b2"><pre><span class="hljs-keyword">OPTIONS</span> DESCRIPTION -o, <span class="hljs-comment">--{no-}open A browser will be open as the default. Not to open it, use +o or --no-open.</span> -i, <span class="hljs-comment">--{no-}image A image will be open as the default. Not to open it, use +i or --no-image.</span> -b, <span class="hljs-comment">--bcolor BCOLOR Background color. Enclose with quotes. Default: #d0d0d0</span> -e, <span class="hljs-comment">--height HEIGHT Image height. Default: 1200px.</span> -d, <span class="hljs-comment">--dir OUTPUT_DIR Output directory. Use an absolute path without a trailing slash. Default: /home/shinichi/.cache/teffects directory.</span> -s, <span class="hljs-comment">--size SIZE Font-size. Use a number without a unit. Default: 10vw.</span> -t, <span class="hljs-comment">--text TEXT Your text to print.</span> -w, <span class="hljs-comment">--width WIDTH Image width. Use a number without px. Default: 1600px.</span> -h, <span class="hljs-comment">--help</span></pre></div><p id="9f71"><b>Examples</b></p><p id="d68b">The following code changes the text, background color, font size, and the directory where you want to save the image.</p><div id="261e"><pre> $teffects shade -t <span class="hljs-string">"MEDIUM"</span> -<span class="hljs-keyword">b</span> <span class="hljs-string">"#9161e2"</span> -s <span class="hljs-number">32</span> -d ~/Downloads</pre></div><figure id="26f0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*JZkI0H3rGO4l9zhSCjVqyw.gif"><figcaption>The output from teffects shade -t “MEDIUM” -b “#9161e2” -s 32 -d ~/Downloads. Image by the author.</figcaption></figure><h1 id="1c66">Rotate</h1><p id="a47d">Rotate is inspired by <a href="https://codepen.io/rachsmith/full/BNKJme">Rachel Smith’s Rotating text</a>. You can find the example at the top of this article and is generated with the following:</p><div id="9b40"><pre>$ teffects <span class="hljs-built_in">rotate</span> -t <span class="hljs-string">"Create header image"</span> -s <span class="hljs-number">4</span> <span class="hljs-string">"for Medium article"</span> <span class="hljs-string">"for Blog"</span> <span class="hljs-string">"for Email"</span> <span class="hljs-string">"for Presentation"</span> <span class="hljs-string">"for social media"</span> <span class="hljs-string">"from terminal"</span></pre></div><p id="c29b">This command won’t create an image since it is best seen on a browser. It will open the default browser with rotating texts.</p><p id="f676"><b>Options</b></p><p id="1e6a">Add the text you want to add using the <code>-t</code> option. Enclose with quotes if you have more than one word.</p><div id="7c93"><pre> $teffects <span class="hljs-built_in">rotate</span> -h Usage: teffects <span class="hljs-built_in">rotate</span> [options] [arguments]</pre></div><div id="e47e"><pre>Creates animaged rotating texts on <span class="hljs-selector-tag">a</span> browser. All parameters accepts <span class="hljs-attr">--param</span> value and <span class="hljs-attr">--param</span>=value <span class="hljs-selector-tag">form</span>.</pre></div><div id="4dc3"><pre> <span class="hljs-keyword">OPTIONS</span> DESCRIPTION -o, <span class="hljs-comment">--{no-}open A browser will be open as the default. Not to open it, use +o or --no-open.</span> -b, <span class="hljs-comment">--bcolor BCOLOR Background color. Enclose with quotes. Default: #eee</span> -p, <span class="hljs-comment">--padding PADDING Container padding. Default: 100px. e.g. 50px 100px.</span> -s, <span class="hljs-comment">--size SIZE Font-size. Use a number without a unit. Default: 6vw.</span> -t, <span class="hljs-comment">--text TEXT Your text to print.</span> -h, <span class="hljs-comment">--help</span></pre></div><p id="e9d0"><b>Examples</b></p><p id="7d5b">The following code changes the text and font size.</p><div id="74fb"><pre>$ teffects <span class="hljs-built_in">rotate</span> -t <span class="hljs-string">"You are"</span> inspiring <span class="hljs-string">"kind and friendly"</span> charming <span class="hljs-string">"energetic and funny"</span> -s <span class="hljs-number">5</span></pre></div><figure id="8c89"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*nzTQxrmucYBja0TpBU0n1g.gif"><figcaption>The output from effects rotate -t “You are” inspiring “kind and friendly” charming “energetic and funny” -s 5. Image by the author.</figcaption></figure><h1 id="e425">Stripe</h1><p id="c2c1">Stripe is inspired by Mandy Michael’s <a href="https://codepen.io/mandymichael/pen/PaBraK">Animating striped text with background clip and gradients.</a></p><p id="8b4a">It creates striped texts with gradient shades. Use the <code>-t</code> option to add your text. Use the <code>-s</code> options to change the font size in the <code>vw</code> unit.</p><div id="cbe9"><pre><span class="hljs-string"> $</span>teffects strip -t <span class="hljs-comment">"Lorem ipsum dolor sit amet"</span> -s <span class="hljs-number">8</span> -d ~/<span class="hljs-type">Downloads</span></pre></div><figure id="b3fc"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*aKvPPAEMEQe2HUzGLadnFA.gif"><figcaption>The output from teffects strip -t “Lorem ipsum dolor sit amet” -s 8 -d ~/Downloads. Image by the author.</figcaption></figure><p id="2b6f"><b>Options</b></p><p id="bf7e">The <code>-b</code> option change the background color. Enclose the hexadecimal code with quotes like <code>-b "#eee"</code>. The image dimensions are 1600px by 1200px and you can change them by using the <code>-w number</code> and <code>-h number</code> options. The unit for dimensions is in px. If you prefer not to open it, use the <code>+i</code> or <code>--no-image</code> flag.</p><div id="d112"><pre><span class="hljs-symbol">$ </span> teffects stripe -h Usage: teffects stripe [<span class="hljs-keyword">options</span>] [arguments]</pre></div><div id="9d23"><pre>Creates animaged stripe-texts. <span class="hljs-keyword">All</span> <span class="hljs-keyword">parameters</span> accepts <span class="hljs-comment">--param value and --param=value form.</span></pre></div><div id="b03e"><pre><span class="hljs-keyword">OPTIONS</span> DESCRIPTION -o, <span class="hljs-comment">--{no-}open A browser will be open as the default. Not to open it, use +o or --no-open.</span> -i, <span class="hljs-comment">--{no-}image A image will be open as the default. Not to open it, use +i or --no-image.</span> -b, <span class="hljs-comment">--bcolor BCOLOR Background color. Enclose with quotes. Default: #ffed94</span> -e, <span class="hljs-comment">--height HEIGHT Image height. Default: 1200px.</span> -d, <span class="hljs-comment">--dir OUTPUT_DIR Output directory. Use an absolute path without a trailing slash. Default: teffects/outputs directory.</span> -p, <span class="hljs-comment">--padding PADDING Container padding. Default: 100px. e.g. 50px 100px.</span> -s, <span class="hljs-comment">--size SIZE Font-size. Use a number wi

Options

thout a unit. Default: 10vw</span> -t, <span class="hljs-comment">--text TEXT Your text to print.</span> -w, <span class="hljs-comment">--width WIDTH Image width. Use a number without px. Default: 1600px.</span> -h, <span class="hljs-comment">--help</span></pre></div><p id="38ca"><b>Examples</b></p><p id="b4fc">The following example changes the text, font size to <code>8wv</code>, background color to grey, and height to 600px.</p><div id="0b61"><pre> $teffects stripe -t <span class="hljs-string">"Lorem ipsum dolor sit"</span> -s <span class="hljs-number">8</span> -e <span class="hljs-number">600</span> -<span class="hljs-keyword">b</span> <span class="hljs-string">"#eee"</span> -d ~/Downloads</pre></div><figure id="3cee"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*btW-UH7QhL_OO4i4SSdjUA.gif"><figcaption>The output from teffects stripe -t “Lorem ipsum dolor sit” -s 8 -e 600 -b “#eee” -d ~/Downloads. Image by the author.</figcaption></figure><h1 id="2722">Jump</h1><p id="5503">Jump is inspired by <a href="https://codepen.io/kiran-r-raj/pen/QWvaPwE">kiran raj r’s Css Text Effect — fade Effect</a>. Bash script calculates the order according to the string length.</p><p id="b0eb">This won’t create a PNG image but it will open a browser to display the result.</p><figure id="e805"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*m9_NHVkHO_9_y1texPIQ3Q.gif"><figcaption>The output from teffects jump. Image by the author.</figcaption></figure><p id="1eb6"><b>Options</b></p><p id="1027">Use the <code>-b</code> and <code>-c</code> to change the background color and font color. Enclose hexadecimal code with quotes like <code>-b "#eee"</code>. Change the letter padding and container padding using the <code>-l</code> and <code>-p</code> options. The padding unit is in px. Use the text using the <code>-t</code> option and font size with the <code>-s</code> option.</p><div id="2b96"><pre><span class="hljs-symbol">$ </span> teffects jump -h
Usage: teffects jump [<span class="hljs-keyword">options</span>] [arguments]</pre></div><div id="c526"><pre>Creates animaged glowing texts on <span class="hljs-selector-tag">a</span> browser. All parameters accepts <span class="hljs-attr">--param</span> value and <span class="hljs-attr">--param</span>=value <span class="hljs-selector-tag">form</span>.</pre></div><div id="1e41"><pre><span class="hljs-keyword">OPTIONS</span> DESCRIPTION -o, <span class="hljs-comment">--{no-}open A browser will be open as the default. Not to open it, use +o or --no-open.</span> -b, <span class="hljs-comment">--bcolor BCOLOR Background color. Enclose with quotes. Default: aquamarine</span> -c, <span class="hljs-comment">--color COLOR Font color. Enclose with quotes. Default: #de38c8</span> -l, <span class="hljs-comment">--letterpadding LPADDING </span> Letter padding. <span class="hljs-keyword">Default</span>: <span class="hljs-number">10</span>px. e.g. <span class="hljs-number">5</span>px <span class="hljs-number">10</span>px. -p, <span class="hljs-comment">--padding PADDING Container padding. Default: 100px. e.g. 50px 100px.</span> -s, <span class="hljs-comment">--size SIZE Font-size. Use a number without a unit. Default: 6vw.</span> -t, <span class="hljs-comment">--text TEXT Your text to print.</span> -h, <span class="hljs-comment">--help</span></pre></div><p id="af97"><b>Examples</b></p><p id="6258">The following code changes text, font color, background color, and font size.</p><div id="c547"><pre>$ teffects jump -t <span class="hljs-string">"LOREM IPSUM"</span> -c <span class="hljs-string">"<span class="hljs-subst">#eee</span>"</span> -b <span class="hljs-string">"<span class="hljs-subst">#EF6667</span>"</span> -s <span class="hljs-number">4</span></pre></div><figure id="45e8"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*dpThNc1nYdellcvEf0RlLw.gif"><figcaption>The output from teffects jump -t “LOREM IPSUM” -c “#eee” -b “#EF6667” -s 4. Image by the author.</figcaption></figure><h1 id="c94d">Conclusion</h1><p id="881c">Using a GIF capture, you can use these images for your article, presentation, and email. Please let me know in the comment section if you are using it for your project.</p><p id="6e8d"><b>Get full access to every story on Medium by <a href="https://blog.codewithshin.com/membership">becoming a member</a>.</b></p><figure id="c583"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*DjTM9iFtVc2wlcWcOms7VQ.png"><figcaption><a href="https://blog.codewithshin.com/subscribe">https://blog.codewithshin.com/subscribe</a></figcaption></figure><h1 id="dfff">More on CSS Text Effects from Command line</h1><div id="8e82" class="link-block"> <a href="https://readmedium.com/another-three-css-text-effects-from-command-line-3a25e804e048"> <div> <div> <h2>Another Three CSS Text Effects from Command-Line</h2> <div><h3>Create article header images from your terminal</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*HGnnZ6XWJEKhyxCVVqdZdA.png)"></div> </div> </div> </a> </div><div id="280b" class="link-block"> <a href="https://readmedium.com/5-more-unique-text-effects-from-command-line-994e92b26386"> <div> <div> <h2>5 More Unique Text Effects from Command-Line</h2> <div><h3>Easy to create image headings with Teffects</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*xLOIKXkbhoq1RdctHE0UlQ.png)"></div> </div> </div> </a> </div><div id="9500" class="link-block"> <a href="https://readmedium.com/5-command-line-text-effects-for-your-programming-article-7f57bfb4c5eb"> <div> <div> <h2>5 Command-Line Text Effects for Your Programming Article</h2> <div><h3>Stand out from the crowd and make something different</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*MLpTVZ-zCB8xb3Ltwb_zHA.png)"></div> </div> </div> </a> </div><div id="ecd7" class="link-block"> <a href="https://readmedium.com/bash-script-to-clip-an-image-to-text-8adab80a7dfa"> <div> <div> <h2>Bash Script to Clip an Image to Text</h2> <div><h3>Create a stand-out article header image for your programming article</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*yj3qEFseLzHV-lUEeYqy4g.png)"></div> </div> </div> </a> </div></article></body>

5 Animated CSS Text Effects from Command Line

Use CLI to create animated header images

The output from teffects rotate. Image by the author.

Table of Contents
· Introduction
· Installation
· Glow
· Shade
· Rotate
· Stripe
· Jump
· Conclusion
· More on CSS Text Effects from Command line

Introduction

Teffects can generate animated text effects. I introduced Neon and Blob in my last article. Both are text graphics that can also have animation effects. Since it is best to capture animation with GIF images, Teffects opens a browser after creating a PNG image. In this article, you will find CSS animated text effects added to Teffects.

If you prefer not to open a browser, use the +o or --no-open flag.

I used GIPHY Capture to create GIF images from a browser for all images in this article.

Installation

Homebrew

$ brew tap shinokada/teffects
$ brew install teffects

Awesome package manager

$ awesome install shinokada/teffects

Apt

Download the latest Debian package from the releases page.

$ sudo apt install /path/to/teffects_XXXXX-X_all.deb

Glow

Glow is inspired by kiran raj r’s Css Text Effect — Glow Effect3. Each letter glows in order. Bash script calculates the timeing according to the string length.

The code for the above GIF image is:

$ teffects glow -t "Teffects Glow Effects"

Options

Use the -b and -g options for background and glow colors. Enclose the hexadecimal code with quotes like, -b "#eee". Use the -l and -p options for letter padding and container padding. Use the -s option for the font size in vw unit and -t option for text you want to add.

$ teffects glow -h
Usage: teffects glow [options] [arguments]

Creates animaged glowing texts on a browser.
All parameters accepts --param value and --param=value form.

  OPTIONS                     DESCRIPTION
  -o, --{no-}open             A browser will be open as the default. Not to open it, use +o or --no-open.
  -b, --bcolor BCOLOR         Background color. Enclose with quotes. Default: #111
  -g, --gcolor GCOLOR         Grow color. Enclose with quotes. Default: #00c2ba
  -l, --letterpadding LPADDING 
                              Letter padding. Default: 10px. e.g. 5px 10px.
  -p, --padding PADDING       Container padding. Default: 100px. e.g. 50px 100px.
  -s, --size SIZE             Font-size. Use a number without a unit. Default: 6vw.
  -t, --text TEXT             Your text to print.
  -h, --help

Examples

The following example changes the letter padding to 2px, container padding to 150px, glow color and background color.

$ teffects glow -t "Teffects Glow Effects" -l "2px" -p 150px -g "#d100c6" -b "#4e4a7c"

The output from teffects glow -t “Teffects Glow Effects” -l “2px” -p 150px -g “#d100c6” -b “#4e4a7c”. Image by the author.

Shade

Shade is inspired by Rafael González’s Shaded Text. When the user hovers over texts with the cursor, it triggers animations. It generates an HTML and PNG image.

The default font size is 10vw and it only works for one line. You need to experiment with the font size and screen width to get the best results.

The output from teffects shade. Image by the author.

Options

You can change the background color using the -b option. Enclose the hexadecimal with quotes like, "#eee". The default image size is 1600px by 1200px and you can change them using the -w and -e options. Change texts using the -t option. Change the font size using the -s option and its unit is in vw. The default setting opens the created PNG image. If you prefer not to open it, use the +i or --no-image flag.

$ teffects shade -h
Usage: teffects shade [options] [arguments]

Creates animated shade-style texts.
All parameters accepts --param value and --param=value form.

OPTIONS                     DESCRIPTION
-o, --{no-}open             A browser will be open as the default. Not to open it, use +o or --no-open.
-i, --{no-}image            A image will be open as the default. Not to open it, use +i or --no-image.
-b, --bcolor BCOLOR         Background color. Enclose with quotes. Default: #d0d0d0
-e, --height HEIGHT         Image height. Default: 1200px.
-d, --dir OUTPUT_DIR        Output directory. Use an absolute path without a trailing slash. Default: /home/shinichi/.cache/teffects directory.
-s, --size SIZE             Font-size. Use a number without a unit.  Default: 10vw.
-t, --text TEXT             Your text to print.
-w, --width WIDTH           Image width. Use a number without px. Default: 1600px.
-h, --help

Examples

The following code changes the text, background color, font size, and the directory where you want to save the image.

$ teffects shade -t "MEDIUM" -b "#9161e2" -s 32 -d ~/Downloads

The output from teffects shade -t “MEDIUM” -b “#9161e2” -s 32 -d ~/Downloads. Image by the author.

Rotate

Rotate is inspired by Rachel Smith’s Rotating text. You can find the example at the top of this article and is generated with the following:

$ teffects rotate -t "Create header image" -s 4 "for Medium article" "for Blog" "for Email" "for Presentation" "for social media" "from terminal"

This command won’t create an image since it is best seen on a browser. It will open the default browser with rotating texts.

Options

Add the text you want to add using the -t option. Enclose with quotes if you have more than one word.

$ teffects rotate -h
Usage: teffects rotate [options] [arguments]

Creates animaged rotating texts on a browser.
All parameters accepts --param value and --param=value form.

  OPTIONS                     DESCRIPTION
  -o, --{no-}open             A browser will be open as the default. Not to open it, use +o or --no-open.
  -b, --bcolor BCOLOR         Background color. Enclose with quotes. Default: #eee
  -p, --padding PADDING       Container padding. Default: 100px. e.g. 50px 100px.
  -s, --size SIZE             Font-size. Use a number without a unit. Default: 6vw.
  -t, --text TEXT             Your text to print.
  -h, --help

Examples

The following code changes the text and font size.

$ teffects rotate -t "You are" inspiring "kind and friendly" charming "energetic and funny" -s 5

The output from effects rotate -t “You are” inspiring “kind and friendly” charming “energetic and funny” -s 5. Image by the author.

Stripe

Stripe is inspired by Mandy Michael’s Animating striped text with background clip and gradients.

It creates striped texts with gradient shades. Use the -t option to add your text. Use the -s options to change the font size in the vw unit.

$ teffects strip -t "Lorem ipsum dolor sit amet" -s 8 -d ~/Downloads

The output from teffects strip -t “Lorem ipsum dolor sit amet” -s 8 -d ~/Downloads. Image by the author.

Options

The -b option change the background color. Enclose the hexadecimal code with quotes like -b "#eee". The image dimensions are 1600px by 1200px and you can change them by using the -w number and -h number options. The unit for dimensions is in px. If you prefer not to open it, use the +i or --no-image flag.

$ teffects stripe -h
Usage: teffects stripe [options] [arguments]

Creates animaged stripe-texts.
All parameters accepts --param value and --param=value form.

OPTIONS                     DESCRIPTION
  -o, --{no-}open             A browser will be open as the default. Not to open it, use +o or --no-open.
  -i, --{no-}image            A image will be open as the default. Not to open it, use +i or --no-image.
  -b, --bcolor BCOLOR         Background color. Enclose with quotes. Default: #ffed94
  -e, --height HEIGHT         Image height. Default: 1200px.
  -d, --dir OUTPUT_DIR        Output directory. Use an absolute path without a trailing slash. Default: teffects/outputs directory.
  -p, --padding PADDING       Container padding. Default: 100px. e.g. 50px 100px.
  -s, --size SIZE             Font-size. Use a number without a unit. Default: 10vw
  -t, --text TEXT             Your text to print.
  -w, --width WIDTH           Image width. Use a number without px. Default: 1600px.
  -h, --help

Examples

The following example changes the text, font size to 8wv, background color to grey, and height to 600px.

$ teffects stripe -t "Lorem ipsum dolor sit" -s 8 -e 600 -b "#eee" -d ~/Downloads

The output from teffects stripe -t “Lorem ipsum dolor sit” -s 8 -e 600 -b “#eee” -d ~/Downloads. Image by the author.

Jump

Jump is inspired by kiran raj r’s Css Text Effect — fade Effect. Bash script calculates the order according to the string length.

This won’t create a PNG image but it will open a browser to display the result.

The output from teffects jump. Image by the author.

Options

Use the -b and -c to change the background color and font color. Enclose hexadecimal code with quotes like -b "#eee". Change the letter padding and container padding using the -l and -p options. The padding unit is in px. Use the text using the -t option and font size with the -s option.

$ teffects jump -h  
Usage: teffects jump [options] [arguments]

Creates animaged glowing texts on a browser.
All parameters accepts --param value and --param=value form.

OPTIONS                     DESCRIPTION
  -o, --{no-}open             A browser will be open as the default. Not to open it, use +o or --no-open.
  -b, --bcolor BCOLOR         Background color. Enclose with quotes. Default: aquamarine
  -c, --color COLOR           Font color. Enclose with quotes. Default: #de38c8
  -l, --letterpadding LPADDING 
                              Letter padding. Default: 10px. e.g. 5px 10px.
  -p, --padding PADDING       Container padding. Default: 100px. e.g. 50px 100px.
  -s, --size SIZE             Font-size. Use a number without a unit. Default: 6vw.
  -t, --text TEXT             Your text to print.
  -h, --help

Examples

The following code changes text, font color, background color, and font size.

$ teffects jump -t "LOREM IPSUM" -c "#eee" -b "#EF6667" -s 4

The output from teffects jump -t “LOREM IPSUM” -c “#eee” -b “#EF6667” -s 4. Image by the author.

Conclusion

Using a GIF capture, you can use these images for your article, presentation, and email. Please let me know in the comment section if you are using it for your project.

Get full access to every story on Medium by becoming a member.