Monday, February 16, 2026

Mirror text in CSS

 <!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

  direction: rtl;

  unicode-bidi: bidi-override;

}

</style>

</head>

<body>

<h1>The unicode-bidi Property</h1>

<div>Some text. Default writing direction.</div>

<div class="ex1">Some text. Right-to-left direction.</div>

</body>

</html>


ref:- https://www.w3schools.com/cssref/tryit.php?filename=trycss_text_unicode-bidi

Snippets in chrome for CSS style


(function() {

  let style = `<style>

   .p-datatable .p-datatable-tbody>tr>td{

color: black;

}

  </style>`;

  document.head.insertAdjacentHTML("beforeend", style);

})();

Transform rotate CSS - Fast loader with CSS

 <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.loader {

  border: 16px solid #f3f3f3;

  border-radius: 50%;

  border-top: 16px solid blue;

  border-bottom: 16px solid blue;

  width: 120px;

  height: 120px;

  -webkit-animation: spin 1s linear infinite;

  animation: spin 400ms linear infinite;

}


@-webkit-keyframes spin {

  0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}


@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

</style>

</head>

<body>


<h2>How To Create A Loader</h2>


<div class="loader"></div>

</body>

</html>

==============================
with image

<img alt="Ashoka Chakra" loading="lazy" width="90" height="90" decoding="async" data-nimg="1" class="tw:animate-[spin_8s_linear_infinite]" style="color:transparent;" src="/home/chakras/ashok-chakra.svg">

.tw\:animate-\[spin_8s_linear_infinite\] {
    animation: spin 8s linear infinite;
}