I'm trying to recreate the following image in CSS:
I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image.
Any idea? Thanks.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
<span class="speech-bubble"></span>
You could do something like this using transform: skew(); and border-radius. I added z-index: -1 to the pseudo-element so it sits behind the <span> (I'm assuming you will put text inside).
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 70px;
height: 30px;
background-color: #ff0d1e;
transform: skew(55deg);
transform-origin: top right;
border-radius: 15% 0 0 0 / 25%;
z-index: -1;
}
<span class="speech-bubble"></span>
It's still slightly pointed, but if you used corner-specific border-radius properties you can get a similar effect.
Here I used border-top-left-radius and border-bottom-left-radius.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
border-top-left-radius:80%;
border-bottom-left-radius:200%;
}
<span class="speech-bubble"></span>
Related
I have the following html:
<div class="container">
<span class="word-container" >
<span tooltip-def="To sign or give formal approval to.">
<span class="define-word highlight-word">ratifying</span>
</span>
</span>
</div>
CSS:
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 50%;
position: absolute;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.
Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/
How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?
you are going great you only need to change the css. below is the css code apply and check.
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 10%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 20%;
position: relative;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
I've made the changes which can be viewed in the fiddle below
https://jsfiddle.net/5dtwr6zc/14/
.test{
overflow: visible;
}
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 150%;
position: absolute;
transform: translateX(-47%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript
I have circle shapes that are made of CSS, i'm trying to put a tool-tip that appears when i hover into the circle, any ideas on how to do that?
Here is my circle code:
#circle1 {
width: 52px;
height: 52px;
background: #f5e25d;
opacity: 0.9
-moz-border-radius: 50%;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div id="circle1"></div>
You can achieve this by putting an HTML element inside #circle1 (I used a span) for the tooltip, and using #circle1:hover to display the tooltip. Then I put a triangle as the ::after pseudo-element for the span. I used a CSS Triangle Generator to create the tooltip triangle.
.wrap {
overflow: auto;
padding: 10%;
width: 100%;
background: #eee;
box-sizing: border-box;
}
#circle1 {
display: block;
width: 52px;
height: 52px;
background: #f5e25d;
opacity: 0.9 -moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: 20px auto auto;
position: relative;
}
span.tooltip {
visibility: hidden;
position: absolute;
bottom: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
width: 200px;
background: #444;
color: white;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
text-align: center;
font-family: sans-serif;
}
span.tooltip::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #444444 transparent transparent transparent;
}
#circle1:hover span.tooltip {
visibility: visible;
}
<div class="wrap">
<a id="circle1">
<span class="tooltip">Tooltip, baby, yeah!</span>
</a>
</div>
I am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.
Consider the following -
#banner {
width: 100%;
height: 50px;
box-shadow: 0 0 10px #000000;
background: #63B0F2;
}
#circle {
position: relative;
top: 20px;
height: 80px;
width: 80px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #000000;
background-color: white;
}
<div id="banner">
<div id="circle">
</div>
</div>
Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?
To put it another way, so there is only shadow cast onto the background, but not each other?
Possible solution with pseudo-elements :before and :after. Just add to your CSS:
#circle:before{
position: absolute;
content: "";
width: 150%;
height: 50%;
left: -25%;
top: -10px;
background: #63B0F2;
}
#circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
}
DEMO
Add a second element for the shadow and position it behind the banner using z-index.
.shadow,
.circle {
display: block;
height: 120px;
width: 120px;
position: absolute;
bottom: -100%;
left: calc(50% - 62px);
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
border: 2px solid transparent;
z-index: -1;
}
.circle {
background: #e0e0e0;
border: 2px solid white;
}
See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100