I'm trying to add some css3 styles on an element, basing on an image model.
After many search, I've been able to have a some results, but not all I need.
You can see on the following image : http://soultherapy.free.fr/img/css3_need_screen.png
=> on the top : the effects I'm trying to reproduce in css3
=> on the bottom : the effects I was able to realize with css3 only : very very far from perfection ^^
As you can see, there are problems with border and shading of the right arrow...
Here is the html code :
<div class="span6">
the text<b></b>
</div>
And the css code :
.arrow-box, .arrow-box:hover {
position: relative;
display: inline-block;
font-weight: bold;
padding: 6px 12px 6px 30px;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-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);
outline: 1px solid #5e98ba;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid #c4c7c9;
border-left: 0;
}
.arrow-box:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.arrow-box:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba ;
}
.arrow-box b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba ;
}
Do you think what I'm trying to do is possible only with css3 ?
If it's the case, could you help me to find the correct css3 code.
Fiddle: http://jsfiddle.net/2cDnV/1/
I know my solution does not look exactly like your image but might help you to get started.
You can play around the code a bit to get what you want and to bring elegance to it.
You can find the jsFiddle here.
HTML:
<div class="marginer">
<div class="box">
<div class="boxIn">This is text</div>
<div class="boxArrowUp">
<div class="boxArrowUpIn"></div>
</div>
<div class="boxArrowDown">
<div class="boxArrowDownIn"></div>
</div>
</div>
</div>
CSS:
.marginer {
margin: 20px;
}
.boxIn {
float: left;
border: 1px solid #fff;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 8px 3px 6px rgba(0, 0, 0, .5);
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
box-shadow: 1px 4px 3px rgba(0, 0, 0, .5);
}
I've played a bit with shadows and tranforms to achieve the result.
Let me know if it helped you.
Here is the final code to obtain exactly the same result as in the original image : http://jsfiddle.net/developpeuse_web/TSFMT/1/
HTML :
<div class="box">
<div class="left-shadow"></div>
<div class="boxIn"></div>
<div class="boxArrowUp">
<div class="boxArrowUpIn"></div>
</div>
<div class="boxArrowDown">
<div class="boxArrowDownIn"></div>
</div>
</div>
CSS :
.left-shadow {
position: absolute;
height: 100%;
width: 23px;
left: 0px;
top: 0px;
background-image: -webkit-gradient(linear, left top, right top, from(#333333), to(transparent));
background-image: -webkit-linear-gradient(left, #333333, transparent);
background-image: -moz-linear-gradient(left, #333333, transparent);
background-image: -o-linear-gradient(left, #333333, transparent);
background-image: linear-gradient(left, #333333, transparent);
opacity: 0.44;
filter : alpha(opacity=44);
}
.boxIn {
float: left;
border: 1px solid #fff;
width: 100px;
height: 20px;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
}
Thanks Harshad !
Thanks...of course it helped me a lot !
If it's not perfect, well it's very close :)
In complement, I've just found another way to generate shadow, by using "-webkit-filter: drop-shadow". So I've add this attribute to .box element, and remove the grey box-shadow on all other elements (.box, .boxArrowUpIn:after, .boxArrowDownIn:after ) : http://jsfiddle.net/developpeuse_web/TSFMT/
.marginer {
margin: 20px;
}
.boxIn {
float: left;
border: 1px solid #fff;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
/* -webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 8px 3px 6px rgba(0, 0, 0, .5); */
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
/* box-shadow: 3px 2px 4px rgba(0, 0, 0, .5); */
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
/* box-shadow: 1px 4px 3px rgba(0, 0, 0, .5); */
}
Don't know if it's a better solution for browsers compatibility, but looks a little bit cleaner.
I think the last detail I have to do is to add an inner shadow on the left border, and it will be exactly what I need. I'll post the final code here.
Thanks very much !
Is it too late to enter the contest ?
The HTML
<div id="mysolution">MY SOLUTION<div id="arrow"></div></div>
The CSS
#mysolution {
color: red;
padding: 10px 9px 10px 25px;
position: relative;
display: block;
z-index: 1;
width: 170px;
height: 30px;
overflow: hidden;
}
#mysolution:after, #mysolution:before {
content: " ";
display: block;
left: -20px;
position: absolute;
width: 80%;
}
#mysolution:before {
z-index: -2;
height: 30%;
top: 11%;
-webkit-transform: skewX(-35deg);
background-image: linear-gradient(55deg, black, rgb(94, 152, 186) 30%);
border-right: 1px solid white;
border-top: 1px solid white;
box-shadow: 1.52px -1px 0px #5e98ba, 4px 4px 5px rgb(110, 110, 110);
}
#mysolution:after {
z-index: -1;
height: 28%;
bottom: 28.95%;
-webkit-transform: skewX(35deg);
background-image: linear-gradient(125deg, black, rgb(94, 152, 186) 30%);
padding-right: .8px;
border-right: 1px solid white;
border-bottom: 1px solid white;
box-shadow: 1.52px 1px 0px #5e98ba, 1.52px 0.5px 0px #5e98ba,-2px 4px 5px rgb(110, 110, 110);
}
#arrow {
position: absolute;
width: 0px;
height: 0px;
left: 0px;
top: 37px;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
z-index: -3;
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
fiddle
Just trying to do it with less divs and less CSS. (And picking ideas from the work already done... :-)
Related
The Code below shows tooltip at the right side using css when hovered as can been seen in the screenshot below
Please how do I make the tooltip to appear on the top of the name when hovered
<html><head>
</head>
<body>
<div data-tooltip="I am Nancy Moore">
<label>Name</label>
</div>
<style>
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 50px;
background: black;
color: white;
border-radius: 3px;
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid black;
border-bottom: 5px solid transparent;
}
</style>
</body></html>
did you mean that ?
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
label {
position: relative;
white-space: nowrap;
}
label:hover::before {
content: attr(data-tooltip);
bottom: calc(100% + 10px);
left: 50%;
position: absolute;
padding: 5px 10px;
background: black;
color: white;
border-radius: 3px;
transform: translate(-50%, 0);
}
label:hover::after {
content: '';
top: -10px;
left: 50%;
position: absolute;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
transform: translate(-50%, 0);
}
<label data-tooltip="I am Nancy Moore">Name</label>
Set the margin to 0 and z-index:1
margin: -3px 0 0 0;
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 0;
background: black;
color: white;
border-radius: 3px;
z-index:1
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid black;
border-bottom: 5px solid transparent;
}
<div data-tooltip="I am Nancy Moore">
<label>Name</label>
</div>
How I can get a border-radius like Instagram Stories?
I try this, but is not the same
padding: 10px 10px;
background: rgba(192,192,192,0.6);
border-radius: 27px;
I want this: instagram stories
Thanks ♥
some like this:
.stories {
width: 280px;
height: 520px;
background: url("http://i.imgur.com/H6YM808.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.content {
font-family: arial;
font-weight: bolder;
font-size: 1.8em;
color: white;
letter-spacing: -0.5px;
}
.text {
position: relative;
margin: 0 auto;
border-radius: 7px;
padding: 5px;
background: rgba(255, 255, 255, 0.7);
display: table;
text-align: center;
}
.a {
margin-top: 334px;
}
.b {
width: 128px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.c-t-left,
.c-t-right,
.c-t-left:before,
.c-t-right:before,
.c-t-left:after,
.c-t-right:after {
position: absolute;
top: 0;
content: "";
}
.c-t-left {
border-top: 7px solid rgba(255, 255, 255, 0.7);
border-bottom: 0 solid;
border-left: 7px solid transparent;
border-right: 0 solid;
left: -7px;
}
.c-t-left:before {
border-top: 3px solid #bcbfc3;
border-bottom: 0 solid;
border-left: 7px solid transparent;
border-right: 0 solid;
left: -11px;
top: -8px;
}
.c-t-left:after {
border-top: 7px solid #bcbfc3;
border-bottom: 0 solid;
border-left: 3px solid transparent;
border-right: 0 solid;
left: -2px;
top: -3px;
}
.c-t-right {
border-top: 7px solid rgba(255, 255, 255, 0.7);
border-bottom: 0 solid;
border-left: 0 solid;
border-right: 7px solid transparent;
right: -7px;
}
.c-t-right:before {
border-top: 3px solid #bcbfc3;
border-bottom: 0 solid;
border-right: 7px solid transparent;
border-left: 0 solid;
right: -11px;
top: -8px;
}
.c-t-right:after {
border-top: 7px solid #bcbfc3;
border-bottom: 0 solid;
border-right: 3px solid transparent;
border-left: 0 solid;
right: -2px;
top: -2px;
}
<div class="stories">
<div class="content">
<div class="text a">Hi stackoverflow!
<div></div>
</div>
<div class="text b"><span>This is an example</span>
<div class="c-t-left"></div>
<div class="c-t-right"></div>
</div>
</div>
</div>
I'm trying to create the following tooltip (not the contents within - just the box & arrow):
I'm having an issue getting the arrow to blend in correctly with the main box.
I created a Fiddle here with the code I have so far.
You will notice the arrow looks ok but just doesn't fit in 100%, I'm not sure how to finish it.
Below is the arrow code:
.arrow_box:after, .arrow_box:before {
border: 11px solid;
border-color: inherit;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom: 100%;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #f3f3f3;
border-width: 13px;
margin-left: -23px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #e1e1e1;
border-width: 15px;
margin-left: -25px;
}
http://jsfiddle.net/9uppsLqa/5/
.arrow_box {
border-radius: .1875em;
z-index: 99;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
background-color: #e1e1e1;
margin-top: 3em;
margin-left: .75em;
margin-right: .75em;
padding-left: 0;
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
width: 340px;
height: 160px;
}
.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom:100%;
}
.arrow_box:after {
border-bottom-color: #fafafa;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-bottom-color: #999;
border-width: 15px;
margin-left: -25px;
}
How do I create the following arrow using pure CSS ?
So Far, I have this:
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft">Left</div>
</div>
Here's a Working Fiddle
Or a bigger One
<div class="HalfCircleLeft"></div>
.HalfCircleLeft
{
margin: 100px;
height: 100px;
width: 50px;
border-radius: 0 50px 50px 0;
background-color: #cfa040;
position: relative;
}
.HalfCircleLeft:before
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
top: 40px;
left: 10px;
}
.HalfCircleLeft:after
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #cfa040;
top: 40px;
left: 13px;
}
Here's a first crude mockup based on your code and the css from cssarrowplease.com. Basically, it uses two CSS triangles, one a bit smaller than the other to create the arrow shape.
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:#00FF00;
}
.arrow_box {
position: relative;
top: 50%;
}
.arrow_box:after, .arrow_box:before {
right: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 255, 0, 0);
border-right-color: #00ff00;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 16px;
top: 50%;
margin-top: -16px;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft"><div class="arrow_box"></div></div>
</div>
I created a div tag with long text, so i decided to use overflow-y:auto; but applying this eats away my css properties like upper triangle, and glow effect in MY BROWSER.
view fiddle, http://jsfiddle.net/SFVC3/
.message_box {
position: absolute;
top:80px;
right:5px;
width: 350px;
height: auto;
padding: 10px;
background:#fff;
visibility: hidden;
max-height:400px;
overflow-y:auto;
border:solid 1px #719ECE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
-moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);
filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
z-index:9999;
}
.message_box:after, .message_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.message_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 9px;
right: 10%;
margin-right: -9px;
}
.message_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 10px;
right: 10%;
margin-right: -10px;
}