I have implemented a bubble tooltip in my application.I have written this css for creating it:
.tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
}
.tooltipDemo:hover:before
{
border: solid;
border-color: transparent #E5E4E2;
border-width: 6px 6px 6px 0px;
bottom: 21px;
content: "";
left: 155px;
top: 5px;
position: absolute;
z-index: 95;
}
.tooltipDemo:hover:after
{
background: #fff;
background: #E5E4E2;
border-radius: 5px;
color: #666;
width: 150px;
left: 160px;
top: -5px;
content: attr(alt);
position: absolute;
padding: 5px 15px;
z-index: 95;
}
HTML Code:
<a href="#" alt="Please Enter Name" class="tooltipDemo">
<asp:ImageButton ID="ImageButton19" runat="server"
ImageUrl="Images/customer-logo-01.jpg" />
</a>
I am able to display a tooltip but i want a shadow around the tooltip.
What changes do i need to do in my current css?
you need to add CSS3 box-shadow where you want the shadow to be appeared.
In your case
.tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
}
Change your .tooltipDemo:hover:after to
.tooltipDemo:hover:after
{
background: #fff;
background: #E5E4E2;
border-radius: 5px;
color: #666;
width: 150px;
left: 160px;
top: -5px;
content: attr(alt);
position: absolute;
padding: 5px 15px;
z-index: 95;
-webkit-box-shadow: 0px 0px 5px black;
box-shadow: 0px 0px 5px black; /*This line added*/
}
Check out this Working Fiddle
Related
<span className={style.tooltip}>
<text className={style.textHeaderTooltip}>Telegram token</text>
</span>
.tooltip {
position: absolute;
z-index: 100;
width: 218px;
height: 175px;
box-shadow: 0 15px 20px rgba(19, 43, 95, 0.29);
background-color: #575f7a;
margin-left: 61rem;
margin-top: 23rem;
padding-top: 25px;
padding-left: 25px;
&::after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #575f7a;
transform: rotate(-90deg);
}
}
How to make triangle be a part of my tooltip, I can't understand what is the reason that this isn't the same block. What should I do to get a better variant of this tooltip version?
I have an animated button which has an text below it, and it was made with an :after selector. That button shifts 2px downward when it is active(clicked) and box-shadow gets removed hence giving the click effect. But this is also changing the position of element created with :after selector. How can I make the text to be always still?
.start {
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #444444;
margin-left: 20px;
margin-top: 8px;
background-color: #FC0102;
box-shadow: 0px 2px 5px black;
position: relative;
}
.start:active {
box-shadow: 0px 0px 5px black;
top: 2px;
}
.start:after {
content: "Start";
position: absolute;
top: 25px;
font-size: 13px;
left: -4px;
}
<div class="start"></div>
Add the same amount of offset to the pseudo text on :active:
.start:active:after {
margin-top: -2px;
}
Snippet:
.start {
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #444444;
margin-left: 20px;
margin-top: 8px;
background-color: #FC0102;
box-shadow: 0px 2px 5px black;
position: relative;
}
.start:active {
box-shadow: 0px 0px 5px black;
top: 2px;
}
.start:after {
content: "Start";
position: absolute;
top: 25px;
font-size: 13px;
left: -4px;
}
.start:active:after {
margin-top: -2px;
}
<div class="start"></div>
This question already has answers here:
CSS box shadow around a custom shape?
(3 answers)
Closed 5 years ago.
Hi Guys i am trying to add a box shadow around the custom shape created using css
like the below image
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>
Declare values for the pseudo-element width & height
properties;
purge the borders;
then rotate the pseudo-element in question;
now apply box-shadow as required;
grab a nice cold one;
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 0px 5px 3px #000000;
}
div::after {
position: absolute;
z-index: 2;
content: "";
left: 100%;
width: 32px;
height: 32px;
background: #50b3cf;
transform: rotate(46deg);
transform-origin: 0 0;
box-shadow: 3px -3px 5px 0px #000000;
}
div::before { /* ver 2.0 Patch */
content: "";
position: absolute;
background: #50b3cf;
top: 0;
bottom: 0;
width: 25px;
right: 0;
z-index: 9;
}
<div></div>
.box{
border:1px solid white;
width:400px;
height:150px;
margin-left:40px;
box-shadow: 0 0 9px 3px rgba(0,0,0,0.5);
}
.arrow {
width: 100px;
height: 100px;
position: relative;
top:20px;
left:-100px;
overflow: hidden;
box-shadow: 0 10px 10px -17px rgba(0,0,0,0.5);
transform: rotate(270deg);
}
.arrow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: white;
transform: rotate(45deg);
top: 76px;
left: 25px;
box-shadow: -2px -2px 9px 0px rgba(0,0,0,0.5);
}
<div class="box">
<div class="arrow"></div>
</div>
Try this code
Maybe this what you are looking to do.
The first one with box shadow, the second one doesn't has box shadow but you can add it using this code box-shadow: 0px 0px 6px 0px #000;in class "arrow-r"
<style type="text/css">
.main-box{
position: relative;
padding: 0 35px 90px;
}
.box{
font-size: 20px;
position: relative;
display: inline-block;
clear: both;
margin-bottom: 8px;
padding: 13px 14px;
vertical-align: top;
border-radius: 5px;
}
.arrow-l {
float: left;
color: #fff;
background-color: #08abf4; box-shadow: 0px 0px 6px 0px #000;
}
.arrow-r {
float: right;
color: #1a1a1a;
background-color: #e2e2e2;
}
.box:before{
position: absolute;
top: 24px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.left:before {
left: -4px;
background-color: #08abf4;
}
.box:before{
position: absolute;
top: 21px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.right:before {
right: -4px;
background-color: #e2e2e2;
}
</style>
<div class="main-box">
<div class="box arrow-l left">
I'm Liam Lababidi
</div>
<div class="box arrow-r right">
What about u?
</div>
</div>
You want to use box-shadow: 10px 10px 5px #888888; for this. Each px indicates what side and the # indicates the color.
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 10px 5px #888888;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>
I'm trying to create speech bubbles like below using Viewport Sized Typography
Everything works. It's not ideal but works... only problem is that the "arrow" wont stay at its place when resizing window it moves either inside or outside of bubble after resize
Here is my code so far:
.speechBubble {
position: relative;
display: inline-block;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 3vw yellow;
background-color: #000000;
border: 3px solid #FFF;
-webkit-border-radius: 58px;
-moz-border-radius: 58px;
border-radius: 50%;
padding: 0px 100px 0px 100px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
max-width: 30vw;
}
.speechBubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 3vw 11.3vw 2vw 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 0;
left: 4.5vw;
top: -30px;
display: block;
transform: rotate(53deg);
}
.speechBubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 3vw 11.3vw 2vw 0;
border-color: transparent #000000;
display: block;
width: 0;
z-index: 1;
left: 5vw;
top: -25px;
transform: rotate(53deg);
display: block;
}
.speechBubbleContent {
position: relative;
width: 80%;
margin: 0 auto;
text-transform: uppercase;
padding: 30px;
line-height: 3.7vw;
font-size: 3.7vw;
max-width: 40vw;
}
<div class="speechBubble">
<div class="speechBubbleContent">Some realy really really long text</div>
</div>
I want to create a ribbon effect like on this image (the red part of image):
When I try to create an arrow effect with borders, the shape of object is completely destroyed:
HTML code:
Kategorija
CSS code so far (without trying to create the arrow):
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
box-shadow: 0px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
Any idea how can I create this?
Made a fiddle here. Couldn't solve it without a b tag though. I used b because it is so small
HTML
Kategorija<b></b>
CSS
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
box-shadow: 3px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #760000 transparent transparent #760000 ;
}
.mali_oglas_kategorija b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #760000 #760000 ;
}
body { padding: 50px;}
you could also use a skewed element if this was required for hit-testing as well.
Something like:
.rib {
margin-left: 20px;
height: 40px;
width: 200px;
position: relative;
background: gray;
color: white;
line-height: 40px;
text-align: center;
}
.rib:before,
.rib:after {
content: "";
position: absolute;
right: -10px;
top: 0;
height: 50%;
width: 40px;
background: inherit;
}
.rib:before {
transform: skewX(-45deg);
}
.rib:after {
transform: skewX(45deg);
top: 50%;
}
.shad {
position: absolute;
height: 40px;
width: 20px;
top: 0%;
left: 0;
background: dimgray;
transform-origin: top left;
transform: skewY(45deg);
z-index: -1;
box-shadow:inset 0 0 10px black;
}
<div class="rib">123
<div class="shad">
</div>
</div>