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>
Related
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>
FIDDLE DEMO
I've got a problem where I have a container that has a max-height set, however for an unknown reason the wrapper constantly shows the vertical scroll bar.
The only thing I can find that might be the problem is the :after pseudo class on the .right class. If I remove this the scroll bars go. Why is this? The :after content is positioned absolutely, it shouldn't have any affect on the scroll bar...
For reference, the max-height that's not being reached is set on the .emails class
This is the CSS that matters - couple of extra bits on the fiddle;
.indicator_triangle {
position: absolute;
bottom: -24px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 12.5px 20px 12.5px;
border-color: transparent transparent #fff transparent;
}
.comm_dd {
position: absolute;
top: 15px;
border: 3px solid $green;
display: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
border: 3px solid $green;
width: 170px;
background-color: #fff;
z-index: 10;
list-style: none;
margin: 0;
padding: 5px;
width: 350px;
font-size: 12px;
.e_container {
.emails {
overflow-y: auto;
// min-height: 180px;
max-height: 350px;
border-top: 1px solid $grey_med;
}
h4 {
margin-top: 0;
margin-bottom: 5px
}
p {
color: #888;
margin-bottom: 4px;
}
}
.left {
width: 72%;
float: left;
div {
margin-right: 15px;
}
}
.right {
width: 25%;
float: left;
font-size: 11px;
&:after {
position: absolute;
top: 14px;
right: 4px;
content:"\00b0";
font-size: 32px;
}
}
.subj {
font-weight: bold;
}
li {
line-height: 16px;
a {
position: relative;
padding: 6px 5px;
display: block;
color: $grey;
border-top: 1px solid #ddd;
color: #888;
padding: 7px 5px;
&:hover {
background-color: darken(#fff, 10%);
}
}
.remaining_count {
top: 9px;
right: 9px;
}
&:first-child a {
border-top: none;
}
}
.indicator_triangle {
top: -15px;
left: 5px;
}
}
You could set overflow:hidden to the .comm_dd li selector to prevent the :after pseudo content from causing the overflow on the list item.
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
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>