Categories
Web development

CSS visibility Property


CSS visibility Property

The CSS visibility property defines whether or not an element is visible.

Demo:

Click the “Try it” button to set the visibility property of the DIV element to “hidden”:



Hi!

Note: Hidden elements take up space on the page. Use the display property to remove an element from the document layout!

Syntax:

visibility: visible|hidden|collapse;

visible (default) – the element is visible.

hidden – the element is hidden (but still takes up space).

collapse – this value removes a row or column, but it does not affect the table layout.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  visibility: visible;
}

.b {
  visibility: hidden;
}
</style>
</head>
<body>

<p class="a">This paragraph is visible.</p>
<p class="b">This paragraph is hidden.</p>

</body>
</html>

Output:

This paragraph is visible.

This paragraph is hidden.

Example2:

<!DOCTYPE html>
<html>
<head>
<style>

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid #333;
}

td {
  border: 1px solid #333;
}


</style>
</head>
<body>

<table>
  <tr>
    <td>1</td>
    <td class="collapse">2</td>
    <td>3</td>
  </tr>
  <tr class="collapse">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

</body>
</html>

Output:

1 2 3
1 2 3
4 5 6

Enjoy coding!

Read also:

CSS float Property

CSS @import Rule

CSS margin Property

Categories
Web development

CSS display Property


CSS display Property

The CSS display property defines the display behaviour (the type of rendering box) of an element.

Syntax:

display: value;

Demo:

Click the “Try it” button to set the display property of the DIV element to “none”:



Hi!

none – the element is completely removed.

display: none;

block – displays an element as a block element. It starts on a new line and takes up the whole width.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
}

.text {
  display: block;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Output:

Some text…

Some text…

Some text…

inline – displays an element as an inline element. Height and width properties will have no effect.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  border: 2px solid #333;
}

.text {
  display: inline;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Output:

Some text…

Some text…

Some text…

contents – causes an element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself.

display: contents;

flex – displays an element as a block-level flex container.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  display: flex;
  border: 2px solid #333;
  justify-content: center;
  align-items: center;
}

.text {
  width: 70px;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Outline:

Some text…

Some text…

Some text…

grid – displays an element as a block-level grid container.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #2a9d8f;
  padding: 5px;
}
.grid-item {
  background-color: #e9c46a;
  border: 2px solid #333;
  padding: 10px;
  font-size: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div> 
</div>

</body>
</html>

Output:

1
2
3
4

inline-block – displays an element as an inline-level block container (you can apply height and width values).

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  border: 2px solid #333;
}

.text {
  display: inline-block;
  width: 70px;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Outline:

Some text…

Some text…

Some text…

inline-flex – displays an element as an inline-level flex container.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  display: inline-flex;
  border: 2px solid #333;
  justify-content: center;
  align-items: center;
}

.text {
  width: 70px;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Output:

Some text…

Some text…

Some text…

inline-grid – displays an element as an inline-level grid container.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container2 {
  display: inline-grid;
  grid-template-columns: auto auto;
  background-color: #2a9d8f;
  padding: 5px;
}

.grid-item2 {
  background-color: #e9c46a;
  border: 2px solid #333;
  padding: 10px;
  font-size: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container2">
  <div class="grid-item2">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item2">3</div>  
  <div class="grid-item2">4</div>
</div>

</body>
</html>

Output:

1
2
3
4

inline-table – the element is displayed as an inline-level table.

<!DOCTYPE html>
<html>
<head>
<style>

.example {
display: inline-table;
border: 2px solid #333;
padding: 10px;
text-align: center;
}

</style>
</head>
<body>

<div class="example">
<img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg">
<p>Ghost</p>
</div>
</body>
</html>

Output:

Ghost

list-item – let the element behave like a li element.

<!DOCTYPE html>
<html>
<head>
<style>

.one {
display: list-item;
list-style-position: inside;
}

</style>
</head>
<body>

<div class="one">Some text...</div>

</body>
</html>

Output:

Some text…

run-in – displays an element as either block or inline, depending on context.

display: run-in;

table – let the element behave like a table element.

<!DOCTYPE html>
<html>
<head>
<style>

.col {
  border: 1px solid #333;
  padding:2px;
}

</style>
</head>
<body>

<div class="table" style="display: table; border: 2px solid #333;">
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…
Some text…
Some text…Some text…
Some text…

table-caption – let the element behave like a caption element.

<html>
<body>
<div style="display:table;">
<h4 style="display: table-caption; height: 20px; background-color: #fefae0;margin:0; padding:10px;">Hello!</h4>
<div style="display: table-cell;width: 20%;background-color: #ccd5ae;" >Some text...</div>
<div style="display: table-cell;width: 80%;background-color: #faedcd;">Some text...some text...</div>
</div>
</body>
</html>

Output:

Hello!
Some text…
Some text…some text…

table-column-group – let the element behave like a colgroup element.

display: table-column-group;

table-header-group – let the element behave like a thead element.

display: table-header-group;

table-footer-group – let the element behave like a tfoot element.

display: table-footer-group;

table-row-group – let the element behave like a tbody element.

display: table-row-group;

table-cell – let the element behave like a td element.

<!DOCTYPE html>
<html>
<head>
<style>

.col {
  border: 1px solid #333;
  padding:2px;
}

</style>
</head>
<body>

<div class="table" style="display: table; border: 2px solid #333;">
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…
Some text…
Some text…Some text…
Some text…

table-column – let the element behave like a col element.

<!DOCTYPE html>
<html>
<head>
<style>

.example-table {
  display: table;
}
.row-1 {
  display: table-row;
}
.cell-example {
  display: table-cell;
}
.column-1 {
  display: table-column;
  background-color: #ccd5ae;
}
.column-2 {
  display: table-column;
  background-color: #faedcd;
}

</style>
</head>
<body>

<div class="example-table">
  <div class="column-1"></div>
  <div class="column-2"></div>
  <div class="row-1">
    <div class="cell-example">Some text...some text...</div>
    <div class="cell-example">Some text...some text...</div>
  </div>
  <div class="row-1">
    <div class="cell-example">Some text...some text...</div>
    <div class="cell-example">Some text...some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…some text…
Some text…some text…
Some text…some text…
Some text…some text…

table-row – let the element behave like a tr element.

<!DOCTYPE html>
<html>
<head>
<style>

.col {
  border: 1px solid #333;
  padding:2px;
}

</style>
</head>
<body>

<div class="table" style="display: table; border: 2px solid #333;">
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…
Some text…
Some text…Some text…
Some text…

Read also:

CSS position Property

CSS padding Property

CSS white-space Property

Categories
Web development

CSS word-wrap Property


CSS word-wrap Property

The CSS word-wrap property let the long words be able to be broken and wrap onto the next line.

Demo:

Syntax:

word-wrap: normal|break-word;

normal (default) – break words only at allowed break points.

break-word – allows unbreakable words to be broken.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.a, .b {
  width: 140px; 
  border: 1px solid #333;
}

.a {
  word-wrap: normal;
}

.b {
  word-wrap: break-word;
}
</style>
</head>
<body>

<h4>word-wrap: normal;</h4>
<div class="a">CSSwordwrapProperty.</div>

<h4>word-wrap: break-word;</h4>
<div class="b">CSSwordwrapProperty.</div>

</body>
</html>

Output:

word-wrap: normal;

CSSwordwrapProperty.

word-wrap: break-word;

CSSwordwrapProperty.

Enjoy coding!

Read also:

CSS letter-spacing Property

CSS line-height Property

CSS overflow Property

Categories
Web development

CSS word-break Property


CSS word-break Property

The CSS word-break property defines how words should break when reaching the end of a line.

Demo:

Syntax:

word-break: normal|break-all|keep-all|break-word;

normal (default) – uses default line break rules.

break-all – to prevent overflow, the word may be broken at any character.

keep-all – word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behaviour is the same as the value “normal”

break-word – to prevent overflow, the word may be broken at arbitrary points.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  width: 130px; 
  border: 1px solid #333;
}

.a {
  word-break: normal;
}

.b {
  word-break: keep-all;
}

.c {
  word-break: break-all;
}
</style>
</head>
<body>

<h4>word-break: normal;</h4>
<p class="a">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

<h4>word-break: keep-all;</h4>
<p class="b">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

<h4>word-break: break-all;</h4>
<p class="c">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

</body>
</html>

Output:

word-break: normal;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

word-break: keep-all;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

word-break: break-all;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

Enjoy coding!

Read also:

CSS white-space Property

CSS word-spacing Property

CSS word-spacing Property

Categories
Web development

CSS color Property


CSS color Property

The CSS color property defines the color of text.

Demo:

Click the “Try it” button to set the text color of the DIV element to “#ff006e”:



myDIV




Syntax:

color: color;

color – defines the text color (Hexadecimal, RGB, RGBA, HSL..).

Example1:

Set the text color with a HEX value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: #3a86ff;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example2:

Set the text color with an RGBA value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: rgba(155, 56, 56, 0.9);
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example3:

Set the text color with a HSLA value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: hsla(59, 43%, 61%, 0.8);
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

Read also:

CSS background-color Property

CSS border-color Property

CSS font-family Property

Categories
Web development

HTML summary Tag


HTML summary Tag

The HTML <summary> element specifies a visible heading for the <details> tag. The heading can be clicked to view/hide the details.

Example1:

<!DOCTYPE html>
<html>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Example2:

Style with CSS details and summary elements:

<!DOCTYPE html>
<html>
<head>
<style>
details > summary {
  padding: 5px;
  width: 200px;
  background-color: #f5f3f4;
  border: none;
  box-shadow: 2px 2px #333;
  cursor: pointer;
}

details > p {
  background-color: #f5f3f4;
  padding: 5px;
  margin: 0;
  box-shadow: 2px 2px #333
}
</style>
</head>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Enjoy coding!

Read also:

HTML caption tag

HTML input tag

HTML label tag

Categories
Web development

HTML open Attribute


HTML open Attribute

The HTML open attribute defines that the information should be visible by default.

The HTML open attribute can be used on the following element:

<details>

Syntax:

<details open> 

Example:

<!DOCTYPE html>
<html>
<body>

<details open>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

The example shows a details element that is visible by default:

HTML

HTML defines the structure of the web page.

Read also:

HTML progress tag

HTML pre tag

HTML caption tag

Categories
Web development

HTML details Tag


HTML details Tag

The HTML <details> tag defines additional information that the user can open and close on demand.

Note: The HTML <summary> element is used in conjunction with the <details> tag to define a visible heading for the information.

Example:

<!DOCTYPE html>
<html>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Attributes:

open – defines that the details/ information should be visible to the user.

Read also:

HTML datalist tag

HTML picture Tag

HTML Select, Option and Optgroup tags

Categories
Web development

CSS Printer Animation


To learn how to create the CSS Printer Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="printer-animation" class="printer-animation">
  <div class="printer">
  <input id="button" type="checkbox"> 
    <label class="button" for="button"></label>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="trace"></div>
    <div class="paper">
    </div>
  </div>
  </div>

Step2.

Add CSS

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

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

input#button {
  display: none;
}

.printer-animation, .printer {
  position: relative;
  top:-35px;
}

Style the printer:

.top {
  position: absolute;
  background-color: #282c30;
  width: 160px;
  height:70px;
  border-radius: 20px 20px 0 0;
  border:5px solid black;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  box-shadow: inset 20px 0 #1e2124;
  z-index:-1;
}

.middle {
  position: absolute;
  background-color: #4a4f55;
  border: 5px solid black;
  width: 250px;
  height:100px;
  border-radius: 20px;
  top:30px;
  left:-130px;
  box-shadow: inset 20px 0 #373b3d;
  z-index:5;
}

.trace, .trace:before {
  position: absolute;
  background-color: #282c30;
}

.trace {
  border:5px solid black;
  width: 160px;
  height: 80px;
  border-radius: 10px;
  left:-85px;
  top:110px;
  box-shadow: inset 0 35px #1e2124;
  z-index:2;
}

.trace:before {
  content:"";
  width: 60px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  top:80px;
  left:45px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  border-left: 5px solid black;
}

.trace:after {
  position: absolute;
  content:"";
  width: 5px;
  height: 50px;
  background-color: black;
  left: 20px;
  top:15px;
  box-shadow: 60px 0 black, 115px 0 black;
}

.paper {
  position: absolute;
  border: 5px solid black;
  background-color: white;
  width:120px;
  height: 140px;
  top:-70px;
  left: -65px;
  z-index:3;
}

.button {
  position: absolute;
  z-index:30;
  border-radius: 50%;
  border: 5px solid black;
  background-color: #fd6e49;
  width:15px;
  height: 15px;
  left: 90px;
  cursor: pointer;
  top:45px;
  animation: pulse 1.5s infinite;
}

.button:active {
  background-color: #52dc97;
}

.button:hover {
  animation: none;
}

.paper:before {
  content:"Don't forget to smile :)";
  position: absolute;
  font-family: arial;
  text-align: center;
  top: 50px;
  transform: scaleY(-1);
  opacity:0;
}

Animate the button and the paper:

input#button:checked ~ .paper {
  animation: print 2.2s linear forwards;
}

input#button:checked ~ .paper:before {
  animation: display 2.2s linear forwards;
}

@keyframes print {
  0% {transform: translateY(0);z-index:3;}
  50% {transform: translateY(200px);z-index:3;}
  79% {transform: translateY(200px);z-index:3;}
  90% {transform: translateY(200px) rotateX(-90deg);z-index:3;}
  95% {transform: translateY(50px) scale(2);z-index:50;}
  100% {transform: translateY(50px) scale(2);z-index:50;}
}

@keyframes display {
  0% {opacity:0; transform: scaleY(-1);}
  28% {opacity:0; transform: scaleY(-1);}
  40% {opacity:1; transform: scaleY(-1);}
  80% {opacity:1; transform: scaleY(-1);}
  95% {opacity:1; transform: scaleY(1);}
  100% {opacity:1; transform: scaleY(1);}
}

@keyframes pulse {
  0% {
    transform:scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(253, 110, 73,.3);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(253, 110, 73,.3);
  }
}

Step3. (optional)

Add jQuery

To repeat the animation on double click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#printer-animation').mouseleave(function(){
    $(this).removeClass('clicked');
  }).dblclick(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

JS Simple Signature Pad

HTML & CSS Birthday Card

Categories
Web development

CSS cursor Property


CSS cursor Property

The CSS cursor property defines the mouse cursor that will be displayed when pointing over an element.

Demo:

Syntax:

cursor: value;

alias – the cursor specifies an alias of something is to be created.

<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
</style>
</head>
<body>

<p class="alias">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

all-scroll – the cursor specifies that something can be scrolled (in any direction).

<!DOCTYPE html>
<html>
<head>
<style>
.all-scroll {cursor: all-scroll;}
</style>
</head>
<body>


<p class="all-scroll">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

auto (default) – the browser settles a cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.auto {cursor: auto;}
</style>
</head>
<body>

<p class="auto">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

cell – the cursor specifies that a cell may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.cell {cursor: cell;}
</style>
</head>
<body>

<p class="cell">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

context-menu – the cursor specifies that a context-menu is available.

<!DOCTYPE html>
<html>
<head>
<style>
.context-menu {cursor: context-menu;}
</style>
</head>
<body>

<p class="context-menu">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

col-resize – the cursor specifies that the column can be resized horizontally.

<!DOCTYPE html>
<html>
<head>
<style>
.col-resize {cursor: col-resize;}
</style>
</head>
<body>

<p class="col-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

copy – the cursor specifies something is to be copied.

<!DOCTYPE html>
<html>
<head>
<style>
.copy {cursor: copy;}
</style>
</head>
<body>

<p class="copy">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

crosshair – the cursor render as a crosshair.

<!DOCTYPE html>
<html>
<head>
<style>
.crosshair {cursor: crosshair;}
</style>
</head>
<body>

<p class="crosshair">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

e-resize – the cursor specifies that an edge of a box is to be moved right (east).

<!DOCTYPE html>
<html>
<head>
<style>
.e-resize {cursor: e-resize;}
</style>
</head>
<body>

<p class="e-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ew-resize – specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.ew-resize {cursor: ew-resize;}
</style>
</head>
<body>

<p class="ew-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

grab – the cursor specifies that something can be grabbed.

<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grab; cursor: grab;}
</style>
</head>
<body>

<p class="grab">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

grabbing – the cursor specifies that something can be grabbed.

<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grabbing;cursor: grabbing;}
</style>
</head>
<body>

<p class="grabbing">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

help – the cursor specifies that help is available.

<!DOCTYPE html>
<html>
<head>
<style>
.help {cursor: help;}
</style>
</head>
<body>

<p class="help">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

move – the cursor specifies something is to be moved.

<!DOCTYPE html>
<html>
<head>
<style>
.move {cursor: move;}
</style>
</head>
<body>

<p class="move">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

n-resize – the cursor specifies that an edge of a box is to be moved up (north).

<!DOCTYPE html>
<html>
<head>
<style>
.n-resize {cursor: n-resize;}
</style>
</head>
<body>

<p class="n-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ne-resize – the cursor specifies that an edge of a box is to be moved up and right (north/east).

<!DOCTYPE html>
<html>
<head>
<style>
.ne-resize {cursor: ne-resize;}
</style>
</head>
<body>

<p class="ne-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nesw-resize specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.nesw-resize {cursor: nesw-resize;}
</style>
</head>
<body>

<p class="nesw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ns-resize specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.ns-resize {cursor: ns-resize;}
</style>
</head>
<body>

<p class="ns-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nw-resize – the cursor specifies that an edge of a box is to be moved up and left (north/west).

<!DOCTYPE html>
<html>
<head>
<style>
.nw-resize {cursor: nw-resize;}
</style>
</head>
<body>

<p class="nw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nwse-resize – specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.nwse-resize {cursor: nwse-resize;}
</style>
</head>
<body>

<p class="nwse-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

no-drop – the cursor specifies that the dragged item cannot be dropped here.

<!DOCTYPE html>
<html>
<head>
<style>
.no-drop {cursor: no-drop;}
</style>
</head>
<body>

<p class="no-drop">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

none – no cursor is rendered for the element.

<!DOCTYPE html>
<html>
<head>
<style>
.none {cursor: none;}
</style>
</head>
<body>

<p class="none">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

not-allowed – the cursor specifies that the requested action will not be executed.

<!DOCTYPE html>
<html>
<head>
<style>
.not-allowed {cursor: not-allowed;}
</style>
</head>
<body>

<p class="not-allowed">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

pointer – the cursor is a pointer and specifies a link.

<!DOCTYPE html>
<html>
<head>
<style>
.pointer {cursor: pointer;}
</style>
</head>
<body>

<p class="pointer">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

progress – the cursor specifies that the program is busy (in progress).

<!DOCTYPE html>
<html>
<head>
<style>
.progress {cursor: progress;}
</style>
</head>
<body>

<p class="progress">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

row-resize – the cursor specifies that the row can be resized vertically.

<!DOCTYPE html>
<html>
<head>
<style>
.row-resize {cursor: row-resize;}
</style>
</head>
<body>

<p class="row-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

s-resize – the cursor specifies that an edge of a box is to be moved down (south).

<!DOCTYPE html>
<html>
<head>
<style>
.s-resize {cursor: s-resize;}
</style>
</head>
<body>

<p class="s-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

se-resize – the cursor specifies that an edge of a box is to be moved down and right (south/east).

<!DOCTYPE html>
<html>
<head>
<style>
.se-resize {cursor: se-resize;}
</style>
</head>
<body>

<p class="se-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

sw-resize – the cursor specifies that an edge of a box is to be moved down and left (south/west).

<!DOCTYPE html>
<html>
<head>
<style>
.sw-resize {cursor: sw-resize;}
</style>
</head>
<body>

<p class="sw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

text – the cursor specifies the text that may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.text {cursor: text;}
</style>
</head>
<body>

<p class="text">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

URL – a comma-separated list of URLs to custom cursors – always define a generic cursor at the end of the list, in case none of the URL-defined cursors can be used.

<!DOCTYPE html>
<html>
<head>
<style>
.url {cursor: url(https://lenadesign.org/wp-content/uploads/2022/06/cursor.png),auto;}
</style>
</head>
<body>

<p class="url">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

vertical-text – the cursor specifies vertical-text that may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {cursor: vertical-text;}
</style>
</head>
<body>

<p class="vertical-text">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

w-resize – the cursor specifies that an edge of a box is to be moved left (west).

<!DOCTYPE html>
<html>
<head>
<style>
.w-resize {cursor: w-resize;}
</style>
</head>
<body>

<p class="w-resize;">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

wait – the cursor specifies that the program is busy.

<!DOCTYPE html>
<html>
<head>
<style>
.wait {cursor: wait;}
</style>
</head>
<body>

<p class="wait">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

zoom-in – the cursor specifies that something can be zoomed in.

<!DOCTYPE html>
<html>
<head>
<style>
.zoom-in {cursor: zoom-in;}
</style>
</head>
<body>

<p class="zoom-in">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

zoom-out – the cursor specifies that something can be zoomed out.

<!DOCTYPE html>
<html>
<head>
<style>
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>

<p class="zoom-out">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

Enjoy coding!

CSS caret-color Property

CSS @font-face Rule

CSS height Property