Uncategorized

আপনার ওয়েবসাইট এর জন্য 50 প্রকার Tooltips Style নিয়ে নিন। || Part 04

10 hours ago
10 hours ago
0 Comments

WELLCOME BACK

H

ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  background: border-box linear-gradient(60deg,#CC333F,#4ECDC4); /* the coloration */
  --_m: 100%/var(--s) var(--s) no-repeat;
  --_p: clamp(var(--r) + 3*var(--s)/2,var(--p),100% - var(--r) - 3*var(--s)/2);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    radial-gradient(100% 100% at 100% 100%,#0000 99%,#000 102%) calc(var(--_p) + var(--s)/2) var(--_m),
    radial-gradient(100% 100% at 0    100%,#0000 99%,#000 102%) calc(var(--_p) - var(--s)/2) var(--_m);
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;border-radius: calc(var(--r) + var(--s));
  background: border-box linear-gradient(-30deg,#D95B43,#ECD078); /* the coloration */
  --_m: 0/var(--s) var(--s) no-repeat;
  --_p: clamp(var(--r) + 3*var(--s)/2,var(--p),100% - var(--r) - 3*var(--s)/2);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    radial-gradient(100% 100% at 100% 0,#0000 99%,#000 102%) calc(var(--_p) + var(--s)/2) var(--_m),
    radial-gradient(100% 100% at 0    0,#0000 99%,#000 102%) calc(var(--_p) - var(--s)/2) var(--_m);
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --p: 50%; /* triangle position (0%:top 100%:bottom) */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  background: border-box linear-gradient(45deg,#490A3D,#F8CA00); /* the coloration */
  --_m:/var(--s) var(--s) no-repeat;
  --_p: clamp(var(--r) + 3*var(--s)/2,var(--p),100% - var(--r) - 3*var(--s)/2);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    radial-gradient(100% 100% at 100% 100%,#0000 99%,#000 102%) 100% calc(var(--_p) + var(--s)/2) var(--_m),
    radial-gradient(100% 100% at 100% 0   ,#0000 99%,#000 102%) 100% calc(var(--_p) - var(--s)/2) var(--_m);
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --p: 50%; /* triangle position (0%:top 100%:bottom) */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  background: border-box linear-gradient(-45deg,#5E412F,#78C0A8); /* the coloration */
  --_m:/var(--s) var(--s) no-repeat;
  --_p: clamp(var(--r) + 3*var(--s)/2,var(--p),100% - var(--r) - 3*var(--s)/2);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    radial-gradient(100% 100% at 0 100%,#0000 99%,#000 102%) 0 calc(var(--_p) + var(--s)/2) var(--_m),
    radial-gradient(100% 100% at 0 0   ,#0000 99%,#000 102%) 0 calc(var(--_p) - var(--s)/2) var(--_m);
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  border-bottom-left-radius: 0;
  background: border-box linear-gradient(60deg,#CC333F,#4ECDC4); /* the coloration */
  -webkit-mask:
    radial-gradient(100% 100% at 100% 100%,#0000 99%,#000 102%) 
      var(--s) 100%/var(--s) var(--s) no-repeat border-box,
    linear-gradient(#000 0 0) padding-box;
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  border-bottom-right-radius: 0;
  background: border-box linear-gradient(60deg,#CC333F,#4ECDC4); /* the coloration */
  -webkit-mask:
    radial-gradient(100% 100% at 0 100%,#0000 99%,#000 102%) 
      calc(100% - var(--s)) 100%/var(--s) var(--s) no-repeat border-box,
    linear-gradient(#000 0 0) padding-box;
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  border-top-left-radius: 0;
  background: border-box linear-gradient(-30deg,#D95B43,#ECD078); /* the coloration */
  -webkit-mask:
    radial-gradient(100% 100% at 100% 0,#0000 99%,#000 102%) 
      var(--s) 0/var(--s) var(--s) no-repeat border-box,
    linear-gradient(#000 0 0) padding-box;
}

Example

Css Code

.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  border-top-right-radius: 0;
  background: border-box linear-gradient(-30deg,#D95B43,#ECD078); /* the coloration */
  -webkit-mask:
    radial-gradient(100% 100% at 0 0,#0000 99%,#000 102%) 
      calc(100% - var(--s)) 0/var(--s) var(--s) no-repeat border-box,
    linear-gradient(#000 0 0) padding-box;
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  border-top-right-radius: 0;
  background: border-box linear-gradient(45deg,#490A3D,#F8CA00); /* the coloration */
  -webkit-mask:
    radial-gradient(100% 100% at 100% 100%,#0000 99%,#000 102%) 
      100% var(--s)/var(--s) var(--s) no-repeat border-box,
    linear-gradient(#000 0 0) padding-box;
}

Example

Css Code


.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  --s: 1.5em; /* triangle size */
  --r: 1em; /* the radius */

  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: calc(var(--r) + var(--s));
  border-bottom-right-radius: 0;
  background: border-box linear-gradient(45deg,#490A3D,#F8CA00); /* the coloration */
  -webkit-mask:
    radial-gradient(100% 100% at 100% 0,#0000 99%,#000 102%) 
      100% calc(100% - var(--s))/var(--s) var(--s) no-repeat border-box,
    linear-gradient(#000 0 0) padding-box;
}

THE END

S

o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.

Shares:
Leave a Reply