WELLCOME BACK
H
ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..
Code 11
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--b: 2em; /* base */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--r: 1.2em; /* the radius */
padding: 1em;
border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r);
background: 0/calc(100% + var(--h)) 100%
linear-gradient(45deg,#490A3D,#F8CA00); /* the gradient */
position: relative;
z-index: 0;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 calc(-1*var(--h)) 0 0;
background-image: inherit;
clip-path: polygon(calc(99% - var(--h)) max(0%,var(--p) - var(--b)/2),100% var(--p),calc(99% - var(--h)) min(100%,var(--p) + var(--b)/2),50% 50%);
}
Example:
Code 12
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--b: 2em; /* base */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--r: 1.2em; /* the radius */
padding: 1em;
border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2);
background: 100%/calc(100% + var(--h)) 100%
linear-gradient(-45deg,#5E412F,#78C0A8); /* the gradient */
position: relative;
z-index: 0;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 0 calc(-1*var(--h));
background-image: inherit;
clip-path: polygon(var(--h) max(0%,var(--p) - var(--b)/2),0 var(--p),var(--h) min(100%,var(--p) + var(--b)/2),50% 50%);
}
Example:
Code 13
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
var(--p) calc(100% + var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
border-image: fill 0//var(--h) 0
conic-gradient(#5E412F 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: var(--b) 0;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 100%,
var(--p) calc(100% + var(--h) + var(--b)*(1 - 1/sin(var(--a)/2))),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 100%);
border-image: fill 0/0 var(--b)/var(--h) 0
conic-gradient(#4ECDC4 0 0); /* the background color */
}
Example:
Code 14
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 0,
var(--p) calc(-1*var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 0);
border-image: fill 0//var(--h) 0
conic-gradient(#5E412F 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: var(--b) 0;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 0,
var(--p) calc(-1*var(--h) - var(--b)*(1 - 1/sin(var(--a)/2))),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 0);
border-image: fill 0/0 var(--b)/var(--h) 0
conic-gradient(#eb6841 0 0); /* the background color */
}
Example:
Code 15
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(100% 100%,0 100%,0 0,100% 0,
100% max(0% ,var(--p) - var(--h)*tan(var(--a)/2)),
calc(100% + var(--h)) var(--p),
100% min(100%,var(--p) + var(--h)*tan(var(--a)/2)));
border-image: fill 0//0 var(--h)
conic-gradient(#18173b 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 var(--b);
clip-path: polygon(100% 100%,0 100%,0 0,100% 0,
100% max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)),
calc(100% + var(--h) + var(--b)*(1 - 1/sin(var(--a)/2))) var(--p),
100% min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)));
border-image: fill 0/var(--b) 0/0 var(--h)
conic-gradient(#79bd9a 0 0); /* the background color */
}
Example:
Code 16
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
0 max(0% ,var(--p) - var(--h)*tan(var(--a)/2)),
calc(-1*var(--h)) var(--p),
0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)));
border-image: fill 0//0 var(--h)
conic-gradient(#18173b 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 var(--b);
clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
0 max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)),
calc(-1*var(--h) - var(--b)*(1 - 1/sin(var(--a)/2))) var(--p),
0 min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)));
border-image: fill 0/var(--b) 0/0 var(--h)
conic-gradient(#cf9d38 0 0); /* the background color */
}
Example:
Code 17
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--r: 1.2em; /* the radius */
--b: 5px; /* border width */
--c1: #0D6759;
--c2: #F02475;
padding: 1em;
border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2)) min(var(--r),var(--p) - var(--h)*tan(var(--a)/2))/var(--r);
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
var(--p) calc(100% + var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
background: var(--c1);
border-image: conic-gradient(var(--c1) 0 0) fill 0/
var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: var(--b);
border-radius: inherit;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)),
var(--p) calc(100% + var(--h) - var(--b)/sin(var(--a)/2)),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)));
background: var(--c2) content-box;
border-image: conic-gradient(var(--c2) 0 0) fill 0/
var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;
}
Example:
Code 18
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--r: 1.2em; /* the radius */
--b: 5px; /* border width */
--c1: #0D6759;
--c2: #FA2A00;
padding: 1em;
border-radius: min(var(--r),var(--p) - var(--h)*tan(var(--a)/2)) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) var(--r)/var(--r);
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 0,
var(--p) calc(-1*var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 0);
background: var(--c1);
border-image: conic-gradient(var(--c1) 0 0) fill 0/
0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,var(--p) - var(--h)*tan(var(--a)/2))/var(--h) 0 0 0;
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: var(--b);
border-radius: inherit;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) var(--b),
var(--p) calc(var(--b)/sin(var(--a)/2) - var(--h)),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) var(--b));
background: var(--c2) content-box;
border-image: conic-gradient(var(--c2) 0 0) fill 0/
0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),var(--p) - var(--h)*tan(var(--a)/2))/var(--h) 0 0 0;
}
Example:
Code 19
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--r: 1.2em; /* the radius */
--b: 5px; /* border width */
--c1: #0D6759;
--c2: #86B8B1;
padding: 1em;
border-radius: var(--r)/min(var(--r),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2));
clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
calc(-1*var(--h)) var(--p),
0 max(0% ,var(--p) - var(--h)*tan(var(--a)/2)));
background: var(--c1);
border-image: conic-gradient(var(--c1) 0 0) fill 0/
max(0%,var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: var(--b);
border-radius: inherit;
clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
var(--b) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
calc(var(--b)/sin(var(--a)/2) - var(--h)) var(--p),
var(--b) max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
background: var(--c2) content-box;
border-image: conic-gradient(var(--c2) 0 0) fill 0/
max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
}
Example:
Code 20
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
var(--p) calc(100% + var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
border-image: fill 0//0 0 var(--h) 0
repeating-linear-gradient(45deg,#5E412F 0 8px,#ccc 0 16px); /* the border gradient */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: var(--b) 0;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 100%,
var(--p) calc(100% + var(--h) + var(--b)*(1 - 1/sin(var(--a)/2))),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 100%);
border-image: fill 0/0 var(--b)/0 0 var(--h) 0
linear-gradient(60deg,#CC333F,#79BD9A); /* the background gradient */
}
Example:
তো আজ এই পর্যন্তই। পরের পর্বের জন্য অপেক্ষায় থাকুন।
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 02 appeared first on Trickbd.com.
source https://trickbd.com/web-development/3046000
Comments
Post a Comment