Categories
CSS Web development

How to add stroke/ outline to the text in CSS?

How to add stroke/ outline to the text in CSS?

Demo:

*to see the text on the website click here.

Step1.

Add HTML

Create a div element and add some text:

<div class="text">Outline</div>

Step2.

Add CSS

Set the position of the text and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Style the text:

.text {
  font-size: 100px;
  font-family: tahoma;
  font-weight: 900;
  -webkit-text-fill-color: #2a9d8f; 
  -webkit-text-stroke: 5px #264653;
  text-shadow: 5px 5px 10px #333;
}

Enjoy coding!

Read also:

CSS Slide Text Animation/ Slide Effect

Pure CSS Rainbow Text Animation

Categories
CSS Web development

How to place text over an image?

How to place text over an image?

To learn how to position text over an image with CSS follow the steps below:

Demo:

Step1.

Add HTML

Create the image container and add an image:

<div class="image-container">
  <img src="https://lenadesign.org/wp-content/uploads/2020/07/css-ice-cream.jpg" alt="ice-cream">
  <div class="left-b">Some Text...</div>
  <div class="left-t">Some Text...</div>
  <div class="right-t">Some Text...</div>
  <div class="right-b">Some Text...</div>
  <div class="center">Some Text...</div>
</div>

Step2.

Add CSS

Use CSS to position the text on an image (in the center, top right, top left, bottom right or bottom left):

.image-container {
  position: relative;
  text-align: center;
  color: #000;
  font-size:35px;
}

.left-b {
  position: absolute;
  bottom: 10px;
  left: 18px;
}

.left-t {
  position: absolute;
  top: 10px;
  left: 18px;
}

.right-t {
  position: absolute;
  top: 10px;
  right: 18px;
}

.right-b {
  position: absolute;
  bottom: 10px;
  right: 18px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Enjoy coding!

Categories
JQuery Web development

Zoom text/ changing font-size and width on hover (jQuery)

Zoom text/ changing font-size and width on hover (jQuery)

Demo:

*to see the zoom effect on the website click here.

To create the zoom text effect on hover with jQuery follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add jQuery

Step1.

Add HTML

<div class="text">He  was  an  old  man  who  fished  alone  in  a  skiff  in  the  Gulf  Stream  and  he  had  gone  eighty-four days now without taking a fish. In the first forty days a boy had been with him. But  after  forty  days  without  a  fish  the  boy’s  parents  had  told  him  that  the  old  man  was  now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at  their  orders  in  another  boat  which  caught  three  good  fish  the  first  week.  It  made  the  boy  sad  to  see  the  old  man  come  in  each  day  with  his  skiff  empty  and  he  always  went  down to help him carry either the coiled lines  or  the  gaff  and  harpoon  and  the  sail  that  was  furled  around  the  mast.  The  sail  was  patched  with  flour  sacks and, furled, it looked like the flag of permanent defeat.   The  old  man  was  thin  and  gaunt  with  deep  wrinkles  in  the  back  of  his  neck.  The  brown blotches of the benevolent skin cancer the sun brings from its [9] reflection on the tropic  sea  were  on  his  cheeks.  The  blotches  ran  well  down  the  sides  of  his  face  and  his  hands  had  the  deep-creased  scars  from  handling  heavy  fish  on  the  cords.  But  none  of  these scars were fresh. They were as old as erosions in a fishless desert. 
</div>

Step2.

Add CSS

Set the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style the text:

.text {
  width: 400px;
  height: 350px;
  font-size:14px;
}

Step3.

Add jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Tip: Don’t forget to add jQuery library in the <head> section!

$(document).ready(function() {
  var oldSize = parseFloat($(".text").css('font-size'));
  var newSize = oldSize  * 2;
  var oldWidth = parseFloat($(".text").css('width'));
  var newWidth = oldWidth  * 1.5;
  
  $(".text").hover(
    function() {
     $(".text").animate({ fontSize: newSize, width: newWidth}, 100);
    },
    function() {
    $(".text").animate({ fontSize: oldSize, width: oldWidth}, 100);
   }
 );
});

Enjoy coding!

Categories
HTML JavaScript Web development

HTML Canvas Text

HTML Canvas Text

To start to draw text on a canvas, use the following properties and methods:

font

fillText(text,x,y)

strokeText(text,x,y)

The HTML canvas font property sets the current font properties for text content on the canvas. The HTML canvas fillText() method draws filled text on the canvas, and the HTML canvas strokeText() method draws text (no fill) on the canvas.

Example1: Filled Text

<!DOCTYPE html>
<html>
<body>

<canvas id="basicText" width="200" height="100"
style="border:1px solid #333;">
</canvas>

<script>
var canvas = document.getElementById("basicText");
var ctx = canvas.getContext("2d");
ctx.font = "25px Verdana";
ctx.fillText("Hello World",27,60);
</script>

</body>
</html>

Output:

Example2: Stroke Text

<!DOCTYPE html>
<html>
<body>

<canvas id="basicText" width="200" height="100"
style="border:1px solid #333;">
</canvas>

<script>
var canvas = document.getElementById("basicText");
var ctx = canvas.getContext("2d");
ctx.font = "25px Verdana";
ctx.strokeText("Hello World",27,60);
</script>

</body>
</html>

Output:

HTML canvas stroke text

To fill text in color add fillStyle property, and to align the text add the textAlign property.

The HTML canvas textAlign property sets the current alignment for text content, according to the anchor point.
The HTML canvas textAlign can have the following values:
center/ end/ left/ right/ start(default).

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="alignCanvas" width="300" height="200"
style="border:1px solid #333;">
</canvas>

<script>
var canvas = document.getElementById("alignCanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Tahoma";
ctx.fillStyle = "#e76f51";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>

</body>
</html>

Output:


The HTML canvas measureText() method returns an object that contains the width of the specified text (you can use this method if you need to know the width of a text, before writing it on the canvas.).

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="measureText" width="300" height="150" style="border:1px solid #333;"></canvas>

<script>
var c = document.getElementById("measureText");
var ctx = c.getContext("2d");
ctx.font = "25px Tahoma";
var txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
ctx.fillText(txt, 10, 100);
</script>

</body>
</html>

Output:


Enjoy coding!

Categories
CSS Web development

CSS Perspective Text Effect

CSS Perspective text

Demo:

*to see the CSS Perspective Text Effect on the website click here.

To create the CSS Perspective Text Effect follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="perspective-text"></div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fca311;
}

Style the text:

.perspective-text {
  position: relative;
  transform-style: preserve-3d;
  perspective:900px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.perspective-text:before, .perspective-text:after {
  position: absolute;
  content:"PERSPECTIVE";
  transition: .2s;
  font-size: 100px;
  font-family: arial;
  font-weight: 900;
  transform-style: preserve-3d;
  transform: rotateY(-55deg);
}
  
.perspective-text:after {  
  color: #14213d; 
  left:-355px;
}
.perspective-text:before {
  color: #e5e5e5;
  left:-348px;
}

Add the hover effect:

.perspective-text:hover:before {
  transform: rotateY(55deg);
  color: #14213d; 
}

.perspective-text:hover:after {
  transform: rotateY(55deg);
  color: #e5e5e5;
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Mirror/ Reflection Text Effect

CSS Mirror/ Reflection Text Effect

Demo:

*to see the CSS Mirror/ Reflection Text Effect on the website click here.

To create the CSS Mirror/ Reflection Text Effect follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="mirror-text">MIRROR
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style the text and create the mirror effect:

.mirror-text {
  position: relative;
  font-size:120px;
  font-weight: 900;
  font-family: arial;
  color: #4895ef;
}

.mirror-text:before {
  content:"MIRROR";
  position: absolute;
  top:85px;
  transform: rotate(180deg) scaleX(-1);
  opacity:0.5;
  
}

.mirror-text:after {
  content:"";
  position: absolute;
  left:0;
  width:850px;
  height:100px;
  top:105px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 24%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,1) 100%);
}

Add the CSS @media rule to display the effect properly on smaller screens:

@media only screen and (max-width: 600px) {
  .mirror-text {
    font-size: 80px;
  }
  .mirror-text:before {
    top:60px;
  }
  .mirror-text:after {
    top:55px;
  }
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Sliced Text Effect

CSS Sliced Text Effect

Demo:

*to see the CSS Sliced Text Effect on the website click here.

To create the CSS Sliced Text Effect follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="sliced-text">
  <div class="sliced"></div>
  <div class="shadow"></div>
  <div class="text">SLICED</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e63946;
}

Style the text:

.sliced-text {
  position: relative;
  font-size:120px;
  font-weight: 900;
  font-family: arial;
  color: white;
}

.shadow {
 position: absolute;
 width: 600px;
 height: 100px;
 background-color: #e63946;
 transform: rotate(-7deg);
 top:0;
 left:-100px;
 overflow: hidden;
}

.sliced {
  position: relative;
  width:400px;
  height:100px;
  background-color: #e63946;
  filter: drop-shadow(0 80px 35px rgba(0,0,0,0.2));
  transform: rotate(-7deg);
}

.shadow:before {
  content:"SLICED";
  position: absolute;
  left:90px;
  top:30px;
  transform: rotate(7deg);
}

.text {
  position: absolute;
  z-index:-1;
  top:30px;
  left:3px;
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Text Change on Hover

CSS Text Changing on Hover

Demo:

*to see the CSS Text Change Animation on the website click here.

To create the CSS Text Change on Hover follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="square">
  <div class="text"><span>Hover Me</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Create the rectangle:

.square {
  position: relative;
  width: 250px;
  height: 80px;
  border: 7px solid #333;  
  box-shadow: 10px 10px rgba(0,0,0,0.5);
}

.square:before {
  position: absolute;
  content:"";
  width: 0px;
  height: 80px;
  background-color: #333;
  transition: width .5s ease;
}

Style the text:

.text {
  position: relative;
  font-size:50px;
  color: #333;
  font-family: Tahoma, sans-serif;
  text-align: center;
  margin:7px;
}

Add transitions on hover:

.square:hover:before {
  width: 250px;
}
.square:hover .text:before {
  content:"Thanks!";
  color: #fff;
}

.square:hover span {
  display: none;
}

Enjoy coding!

Read also:

How to change the text on Hover?

CSS Parallax Scrolling Effect

CSS Toggle Switch

Categories
CSS Web development

CSS Fonts

About text and fonts in HTML I have mentioned already a few weeks ago here. You could learn there about basic text formatting which you can input in the HTML document. Today I would like to take a deeper look at text and fonts which we can use in CSS. The CSS font properties define the font family, boldness, size, and style of the text. 

CSS fonts

In CSS, there are two types of font-family names. 

Generic family (sans-serif, serif, monospace)- a group of font families with a similar look (like “Serif” or “Monospace”).

Serif fonts have small lines at the ends of some characters. Sans-serif where “sans” means without. These fonts do not have the lines at the ends of the characters. 

Monospace, all monospace characters have the same width.  

Font family- a specific font family (like “Times New Roman” or “Arial”)

CSS fonts

The font family of the text is set with the font-family property. Start with the font you want, and end with the generic family, to let the browser a pick similar font in the generic family, if no other fonts are available. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
  font-family: "Times New Roman", Times, serif;
}

p.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Output:

CSS fonts

The font-style property is mostly used to specify italic text. This property has three values. 

Normal – the text is shown normally.

Italic – the text is shown italics. 

Oblique – the text is “leaning” (oblique is similar to italic but less supported). 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

Output:

CSS fonts

The font-size property sets the size of the text. Being able to manage text size is very important in web design. However, you shouldn’t use font size adjustments to make paragraphs look like headings and in the opposite way, headings look like paragraphs (always use proper HTML tags like <p> or <h1>.  If you don’t specify the font size, the default size for normal text, like paragraphs is 16px. Setting the text size with pixels gives you full control over the text size.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Output:

CSS fonts

The font-weight property specifies the weight of the font.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

Output:

CSS fonts

Enjoy coding!