CSS colors rgba - rgb

 https://www.w3schools.com/css/css_colors_rgb.asp

<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>

rgba

alpha

Dashboard templates like blogger free

 https://adminlte.io/blog/bootstrap-dashboard-examples/

adminlte

easy

https://coreui.io/demos/bootstrap/5.0/free/#

https://dashboardpack.com/live-demo-preview/?livedemo=391511

https://preview.keenthemes.com/metronic8/demo1/

https://themes.kopyov.com/limitless/demo/template/html/layout_1/full/index.html

How to create 3d text with CSS - 3d illustration

<style>

 .css-3d-text {

  

   

   

    text-shadow: 0px 0px 0 rgb(250,188,2),

                 1px 1px 0 rgb(245,183,0),

                 2px 2px 0 rgb(240,178,0),

                 3px 3px 0 rgb(235,173,0),

                 4px 4px 0 rgb(230,168,0),

                 5px 5px 0 rgb(225,163,0),

                 6px 6px 0 rgb(220,158,0),

                 7px 7px 0 rgb(215,153,0),

                 8px 8px 0 rgb(210,148,0),

                 9px 9px 0 rgb(205,143,0),

                 10px 10px  0 rgb(200,138,0),

                 11px 11px 10px rgba(0,0,0,0.6),

                 11px 11px 1px rgba(0,0,0,0.5),

                 0px 0px 10px rgba(0,0,0,.2);

 }

</style>

<div class="css-3d-text">3D TEXT</div>

https://www.html-code-generator.com/css/3d-text-generator 

or try this 

style="text-shadow: rgb(200, 33, 100) 1px 1px 1px !important; -webkit-text-stroke: 1px !important;"

Displaying Different Texts Sequentially from an Array with javascript

 const outputElement = document.getElementById('output');

const textArray = ['First text message.', 'Second text message.', 'Third text message.'];

let currentIndex = 0;

function displayNextText() {

    if (currentIndex < textArray.length) {

        // Replace the entire content with the current text

        outputElement.innerHTML = textArray[currentIndex];

        currentIndex++;

        // Schedule the next text to be displayed after a delay (e.g., 2 seconds)

        setTimeout(displayNextText, 2000); // 2000 milliseconds = 2 seconds

    }

}

// Start the display sequence

displayNextText();

===============================

Text Sequentially with CSS

<div class="text-container">

  <div class="text-item">First Text</div>

  <div class="text-item">Second Text</div>

  <div class="text-item">Third Text</div>

</div>

.text-container {

  display: grid;

  grid-template-areas: "content";

}

.text-item {

  grid-area: content;

  opacity: 0;

  animation: slideIn 6s infinite;

}

/* Stagger animation with delays */

.text-item:nth-child(1) { animation-delay: 0s; }

.text-item:nth-child(2) { animation-delay: 2s; }

.text-item:nth-child(3) { animation-delay: 4s; }

@keyframes slideIn {

  0% { opacity: 0; }

  10% { opacity: 1; }

  30% { opacity: 1; }

  40% { opacity: 0; }

  100% { opacity: 0; }

}

Text blur effect in css

 backdrop-filter: blur(0px);

-webkit-backdrop-filter: blur(0px);

or simple use, if above is not working

.element-to-blur {

  filter: blur(0.2px); /* The radius value controls the intensity of the blur */

}

Note:- There are lot of property in filer property example contrast, brightnexx, saturate, hue etc.

Typing effect with CSS - Typing with CSS - Typing with Javascript

     <style>

        .typing-effect {

    overflow: hidden; /* Hide the full text initially */

    border-right: .15em solid orange; /* Blinking cursor effect */

    white-space: nowrap; /* Prevent text from wrapping */

    margin: 0 auto; /* Center the text */

    letter-spacing: .15em; /* Spacing between characters */

    width: 0; /* Start with a width of 0 */

    animation: 

        typing 30.5s steps(150, end) forwards, /* Typing animation */

        blink-caret 0.5s step-end infinite; /* Blinking cursor animation */

}

/* Keyframes for the typing animation */

@keyframes typing {

    from { width: 50 }

    to { width: 100% }

}

/* Keyframes for the blinking cursor */

@keyframes blink-caret {

    from, to { border-color: transparent }

    10% { border-color: orange; }

}

    </style>

<html>

  <p class="typing-effect">Hello, world! This is a CSS typing effect.</p>

</html>

=======================

Typing with javascript

const element = document.getElementById('sequence');

const fullText = 'IT Solutions Professional Work Ethic';

let index = 0;

function typeText() {

    if (index < fullText.length) {

        // Use the addition assignment operator (+=) to append the next character

        element.innerHTML += fullText[index]; //

        index++;

        // Schedule the next character to be added after a delay (e.g., 100ms)

        setTimeout(typeText, 100);

    }

}

// Start the sequence

typeText();

Note: for demo you can check CSS framework https://picocss.com/

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 - Snippet 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;

}

ref:- https://impact.indiaai.gov.in/home/chakras/ashok-chakra.svg

https://impact.indiaai.gov.in/

ref:-https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader2

Font Sharpness in CSS - Font bold in CSS - Font darkness

  -webkit-text-stroke: 0.2px;

text-shadow: #fff 0px 0.5px 0.5px; 

and you can use color of font to black in CSS

color: black;

or 

filter: drop-shadow(1px 1px 1px black);

    font-weight: 400;

ref:- https://medium.com/better-programming/improving-font-rendering-with-css-3383fc358cbc

Vibration of font in chrome - Shaking of font in chrome - transform in css - color change in second - Keyframes in CSS - blinking in CSS - blinking in css - color blinking

HTML

<img src="https://ik.imagekit.io/ikmedia/css-image-effects/new-york_lbAbZZKZG.jpg" alt="new york" />

</br>

img {

  width: 300px;

}

img:hover {

  /* Start the shake animation and make the animation last for 0.5 seconds */

  animation: vibrate 0.1s;

  /* When the animation is finished, start again */

  animation-iteration-count: infinite;

}

@keyframes vibrate {

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

  10% { transform: rotate(-1deg); }

  20% { transform: rotate(1deg); }

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

  40% { transform: rotate(1deg); }

  50% { transform: rotate(-1deg); }

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

  70% { transform: rotate(-1deg); }

  80% { transform: rotate(1deg); }

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

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

}

OR

<p class="vibrating-text"> dfdf dfd ddfd df</p>

CSS

@keyframes vibratetext {

  0% { transform: translate(0, 0); }

  20% { transform: translate(-1px, 1px); }

  40% { transform: translate(-1px, -1px); }

  60% { transform: translate(1px, 1px); }

  80% { transform: translate(1px, -1px); }

  100% { transform: translate(0, 0); }

}

How to add styles to live website in chrome - How to change styles to live website in chrome - How to change background color in live website in chrome

 > Open developer tools in chrome

> Go to sources tab and select overrides tab

> Click on "select folder for overrides" and Select the folder where you want to change the overrides

> Right click on element of website and change color of background or style 

> Click on sources tab and Page tab and save the css file in folder where you select the folder above.

If you want to delete, goto sources tab and goto overrides tab and delete overrides. And the website will be able to run as it was.

Note:-

After the above steps, For Enable styles that you edit, right click and inspect  > Go to Sources> Overrides> Check Enable Local Overrides 

 For disable styles that you edit, right click and inspect  > Go to Sources> Overrides> UnCheck Enable Local Overrides or refresh page will disable style overrides

or you can use stylebot extension in chrome.

Spinner loader masking - bootstrap - with gif image

with bootstrap class 

 .spinner-grow{

           display: block;

              position: fixed;

              z-index: 1031; /* High z-index so it is on top of the page */

              top: 50%;

              right: 50%; /* or: left: 50%; */

        }

        .model {

            display: none;

            position: fixed;

            z-index: 1200;

            top: 0;

            left: 0;

            height:

CSS to background to black and loader by dev

 <body>

<div class="container1">

<div class="ring"></div>

        <div class="ring"></div>

        <div class="ring"></div>

        <p>Loading...</p>

</div>

</body>

how to disable css class property - style

 use

'auto' or 'none'

ref:- https://stackoverflow.com/questions/11939519/turn-off-css-property

https://stackoverflow.com/questions/5963099/how-do-i-disable-form-fields-using-css

How to make a button left right

 style="float:right"

Website master page theme template basics

> First there should be Logo on top than on same row website name

>Than header(menu)

> Than content 

>Than Footer

Rrandom color changing background color webkit chrome

<style>

    body {background-color: yellow;} 

</style>-

---------------------

$(function() {

    if ($.browser.webkit) {

        $("body").css("background", "#4d4d4d");

    }

});

----------------------

<style type="text/css">

    body {

    -webkit-animation: colorchange 60s infinite; 

    animation: colorchange 20s infinite;

}

@-webkit-keyframes colorchange {

     0%  {background: #33FFF3;}

    25%  {background: #78281F;}

    50%  {background: #117A65;}

    75%  {background: #DC7633;}

    100% {background: #9B59B6;}

}

@keyframes colorchange {

     0%  {background: #33FFF3;}

    25%  {background: #78281F;}

    50%  {background: #117A65;}

    75%  {background: #DC7633;}

    100% {background: #9B59B6;}

}   

</style>