Techno Blender
Digitally Yours.


Browsing Tag

CSS

What are Discriminated union types?

Ann Roberts 0
Technology
In TypeScript, a discriminated union type is also called “tagged union types” or “algebraic data types”. It is a type that represents a value that can be one of several different types, with a tag indicating the type of the value. To create a discriminated union type in TypeScript, use the ‘|’ operator to combine the set of types. Here, the “discriminant” property can be used to distinguish between the different shapes of the object.  A discriminated union…

How to create Gooey Balls animation using HTML & CSS ?

Ann Roberts 0
Technology
<!DOCTYPE html><html>  <head>    <style>        body {            display: grid;            place-items: center;        }          .loader {            width: 70px;            height: 70px;            position: relative;            z-index: 999;        }          .loader::before, .loader::after {            content: '';            position: absolute;            width: inherit;            height: inherit;            border-radius: 50%;            mix-blend-mode: multiply;            animation:…

How to rotate shape loader animation using CSS ?

Ann Roberts 0
Technology
<!DOCTYPE html><html>  <head>    <style>        body {            display: grid;            place-items: center;        }          .loader {            display: flex;            gap: 0.6rem;        }          .box {            width: 50px;            height: 50px;            background: #0043bc;            animation: rotate 3s infinite;        }          .box:nth-child(2) {            animation-delay: 0.25s;        }          .box:nth-child(3) {            animation-delay: 0.5s;        }          …

How to use @counter-style rule to customize list item using CSS ?

Ann Roberts 0
Technology
In this article, we will see how the @counter-style rule can be used to customize each list item style in CSS. Most of the cases while developing web applications and web projects, we often make use of lists, i.e., an ordered list or unordered list, or a description list. Although, there exist some restrictions on the pre-defined list, i.e., we can style the list as numbers, alphabets, and roman numbers when we use an ordered list, whereas disc, circle square when we use an unordered list. If we need to style each list…

How to create button hover animation effect using CSS ?

Ann Roberts 0
Technology
<!DOCTYPE html><html>  <head>    <style>        body {              margin: 0;              padding: 0;              height: 40vh;              display: grid;              place-items: center;              background-color: #B3FFAE;            }                      ::selection {                color: white;                background-color: green;            }                      button {              position: relative;              font-size: 18px;              font-weight: bold;              …

Snowfall Animation Effect using CSS

Ann Roberts 0
Technology
  * {    padding: 0%;    margin: 0%;    box-sizing: border-box;}  body {    width: 100vw;    height: 100vh;    overflow-x: hidden;}    .container {    position: relative;    width: 100%;    height: 100%;    overflow: hidden;    background: url(    background-size: cover;    background-position: center;    background-repeat: no-repeat;}  .container::before {    content: "";    position: absolute;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.479);}    .text-content {    position: absolute;    top: 50%;…

Can a CSS class inherit one or more other classes ?

Ann Roberts 0
Technology
In this article, we will see how a class can inherit properties of other classes using CSS, along with understanding their basic implementations through the illustration. A descendent class can inherit any CSS property from the parent class by using Inheritance. Inheritance is the process by which genetic information is transmitted from parents to their children. For this, the members of the same families tend to have similar kinds of characteristics. A child of any element will inherit the properties of their parents,…

How to Map Mouse Position in CSS ?

Ann Roberts 0
Technology
<!DOCTYPE html><html>  <head>    <title>        How to Map Mouse Position in CSS ?    </title>      <style>        .container {            height: 100vh;            display: grid;            grid-template: repeat(10, 1fr) / repeat(10, 1fr);            position: absolute;            width: 100%;            height: 100vh;            top: 0;            left: 0;        }          .cell {            width: 100%;            height: 100%;            border: 1px solid gray;            z-index:…

Design a Carousel Column Expansion Animation Effect on Hover using CSS

Ann Roberts 0
Technology
<!DOCTYPE html>  <html>  <head>    <title>        Design a Carousel Column Expansion         Animation effect on Hover using CSS    </title>    <style>        * {            padding: 0;            margin: 0;        }          .card {            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            width: 210px;            height: 254px;            border-radius: 4px;            background: #7FB77E;            display:…