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

byশাকিল আব্দুল্লাহ •
0
WELLCOME BACK

H

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

Tooltips Code No. 31

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);
}

Tooltips Code No. 32

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);
}

Tooltips Code No. 33

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);
}

Tooltips Code No. 34

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);
}

Tooltips Code No. 35

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

Tooltips Code No. 36

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

Tooltips Code No. 37

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

Tooltips Code No. 38

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

Tooltips Code No. 39

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

Tooltips Code No. 40

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.

The post আপনার ওয়েবসাইট এর জন্য 50 প্রকার Tooltips Style নিয়ে নিন। || Part 04 appeared first on Trickbd.com.



from Trickbd.com https://ift.tt/GWMP4TQ
Tags:
Post a Comment (0)
Previous Post Next Post