I have a fiddle that I created here that explains what I am trying to do exactly: Fiddle
Basically, I need to have text inside of the cloud and adjust the outside borders (that are using box-shadow effects) according to what is in the inside. Figured this is possible with just CSS, but perhaps it is not?
Can anyone provide an example or start for doing this?
Here is the code:
HTML:
<div class="container">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
<div class="cloud5"></div>
<div class="cloud6"></div>
<div class="cloud7"></div>
<div class="cloud8"></div>
<div class="inner">This is a CSS Cloud and is looking super cool, but need to figure out how to adjust the outside borders of the cloud so that they wrap around this text no matter how much text is in here.</div>
</div>
CSS:
.container {
display: inline-block;
position: relative;
width: 250px;
min-height: 250px;
left: 100px;
top: 10px;
margin-bottom: -20px;
}
.cloud1 {
position: absolute;
left: 20px;
top: 15px;
height:45px;
width:90px;
background: whitesmoke;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
box-shadow: inset 0px 0px 16px -4px white, 0px -1px 2px -2px black;
border-bottom: none;
z-index: 9;
}
.cloud2 {
position: absolute;
left: 80px;
top: 15px;
height: 45px;
width:80px;
background: whitesmoke;
border-radius: 80px 80px 0 0;
-moz-border-radius: 80px 80px 0 0;
-webkit-border-radius: 80px 80px 0 0;
box-shadow: inset 0px 2px 16px -4px white, 0px -1px 2px -1px black;
z-index: 6;
}
.cloud3 {
position: absolute;
left: 140px;
top: 45px;
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 2px 0 4px -3px black;
z-index: 7;
}
.cloud4 {
position: absolute;
left: 140px;
top: 120px;
height:60px;
width:30px;
border-radius: 0 60px 60px 0;
-moz-border-radius: 0 60px 60px 0;
-webkit-border-radius: 0 60px 60px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
z-index: 8;
}
.cloud5 {
position: absolute;
left:55px;
top: 165px;
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 1px 2px -2px black;
z-index: 8;
}
.cloud6 {
position: absolute;
left:0px;
top: 165px;
height:30px;
width:60px;
border-radius: 0 0 60px 60px;
-moz-border-radius: 0 0 60px 60px;
-webkit-border-radius: 0 0 60px 60px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 2px 2px -2px black;
z-index: 7;
}
.cloud7 {
position: absolute;
left: -30px;
top: 80px;
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 8;
}
.cloud8 {
position: absolute;
left: -15px;
top: 35px;
height:60px;
width:45px;
border-radius: 60px 0 0 60px;
-moz-border-radius: 60px 0 0 60px;
-webkit-border-radius: 60px 0 0 60px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 7;
}
.inner {
position: absolute;
width: 135px;
height: 90px;
left: 5px;
top: 60px;
background: whitesmoke;
z-index: 10;
padding: 10px;
}
So thinking if I put a min-height on the elements instead of using height that this would do the trick, but it doesn't :(
First remove all absolute positioning. (as I mentioned in the comments)
Next place the whitesmoke background on the title element instead of it's parent element (which has padding) and you get a pretty good result.
.title {
position: relative;
text-align: center;
background: whitesmoke; /* here */
}
You can experiment with adding pseudo elements around the title to add circles around the top-left and bottom right areas of the text.
.title:before {
content: '';
display:inline-block;
width: 100%;
height: 50%;
position: absolute;
left: -40px;
z-index: -1;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
border-radius: 100%;
background: whitesmoke;
top:0;
}
.title:after {
content: '';
display:inline-block;
width: 100%;
height: 50%;
position: absolute;
right: -40px;
z-index: -1;
box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
border-radius: 100%;
background: whitesmoke;
bottom:0;
}
Updated FIDDLE (I updated the fiddle you posted in the comments)
Please Check the Fiddle
CSS
.container {
display: inline-block;
position: relative;
width: 250px;
min-height: 250px;
left: 100px;
top: 10px;
margin-bottom: -20px;
}
.cloud1 {
position: absolute;
left: 20px;
top: 15px;
height:45px;
width:90px;
background: whitesmoke;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
box-shadow: inset 0px 0px 16px -4px white, 0px -1px 2px -2px black;
border-bottom: none;
z-index: 9;
}
.cloud2 {
position: absolute;
left: 80px;
top: 15px;
height: 45px;
width:110px;
background: whitesmoke;
border-radius: 80px 80px 0 0;
-moz-border-radius: 80px 80px 0 0;
-webkit-border-radius: 80px 80px 0 0;
box-shadow: inset 0px 2px 16px -4px white, 0px -1px 2px -1px black;
z-index: 6;
}
.cloud3 {
position: absolute;
left: 150px;
top: 45px;
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 2px 0 4px -3px black;
z-index: 7;
}
.cloud4 {
position: absolute;
left: 140px;
top: 120px;
height:90px;
width:30px;
border-radius: 0 60px 60px 0;
-moz-border-radius: 0 60px 60px 0;
-webkit-border-radius: 0 60px 60px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
z-index: 8;
}
.cloud5 {
position: absolute;
left:55px;
top: 165px;
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 1px 2px -2px black;
z-index: 8;
}
.cloud6 {
position: absolute;
left:0px;
top: 170px;
height:30px;
width:60px;
border-radius: 0 0 60px 60px;
-moz-border-radius: 0 0 60px 60px;
-webkit-border-radius: 0 0 60px 60px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 2px 2px -2px black;
z-index: 7;
}
.cloud7 {
position: absolute;
left: -30px;
top: 80px;
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 8;
}
.cloud8 {
position: absolute;
left: -15px;
top: 35px;
height:80px;
width:45px;
border-radius: 60px 0 0 60px;
-moz-border-radius: 60px 0 0 60px;
-webkit-border-radius: 60px 0 0 60px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 7;
}
.inner {
position: absolute;
width: 150px;
height: 70px;
vertical-align:middle;
left: 5px;
top: 40px;
background: whitesmoke;
z-index: 10;
padding: 5px;
}
I have tried and did my best.
Related
I have a square div with rounded corners. Inside this div, I need to make this shape:
I want to do it with pure css, but there are two problems:
Little 1px green artifacts I can't get rid off (you can see them on the bottom and right sides)
I need a 1px red border around #login_form to also appear on top of my oval shapes.
Maybe there is a better way to cut the ovals.
Here is a jsfiddle of the below:
#login_form {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
#green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div id="login_form">
<div id="white_ovale"></div>
<div id="green_ovale"></div>
</div>
you need overflow: hidden
you need a 3rd inner div which adds the border (Just think of an independent border that stacks i top of the others)
BTW: Don't id everthing. Use classes. Use id only if you need to. And try not the nest ids.
As a rule of thumb I use only class for CSS and idfor JS only
http://jsfiddle.net/Lt4x3ufg/1/
.login_form {
margin-left:auto;
margin-right:auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border:1px solid red;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
}
.login_form .border {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid red;
border-radius: 10px;
}
.login_form .white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form .green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div class="login_form">
<div class="white_ovale"></div>
<div class="green_ovale"></div>
<div class="border"></div>
</div>
Single element solution
There is no need for extra markup. We can create:
the two shapes inside the div with ::before and ::after
the red border with the containing div itself
The excess background is cut off with overflow: hidden
Nice Advantage: Because IE 8 does not support the border-radius property, and will render an ugly square, we can use the double colon (::) for the pseudo elements. IE 8 does not recognise this syntax and will render just the red box. This is the modern syntax and valid CSS.
Note: For child elements to overlap the green shape, they should be given position: relative and z-index: 1
Browser Compatibility: Due to the border-radius property, IE 9 +. It is unlikely that you need the browser prefixes for the border-radius property.
Complete Example
I have condensed the CSS as much as possible.
.login_form {
margin: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border-radius: 10px;
overflow: hidden;
border: 1px solid red;
}
.login_form::before,
.login_form::after {
content: '';
display: block;
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form::after {
right: -31px;
bottom: -21px;
width: 149px;
height: 75px;
background: #72B038;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
}
<div class="login_form"></div>
I'm trying to create a tooltip that looks like this using CSS:
This is how i'm trying to solve it: http://jsfiddle.net/NXLuZ/
So, basically i'm using css3 masking:
div:after {
width: 61px;
height: 10px;
background: #fff;
-webkit-mask-image: radial-gradient(circle 10px at 0px 0, transparent 0, transparent 10px, black 11px);
top: -10px;
right: 0px;
position: absolute;
content: '';
display: block;
}
Looks good on regular displays, but you can see the problem when you're viewing it on a retina display or when you're trying to zoom in:
Because i'm using a gradient as a mask, it looks a bit blurry when the color changes in the gradient. Its important to mention, that the rounded corner needs to be transparent, because the background is not fixed behind it.
Any idea how can i fix this issue?
You can do it with a box shadow:
.demo{
position: absolute;
left: 400px;
top: 106px;
background: #fff;
width: 200px;
height: 200px;
-moz-border-radius:10px 0 10px 10px;
-webkit-border-radius:10px 0 10px 10px;
border-radius:10px 0 10px 10px;
-moz-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
box-shadow: 3px 4px 20px rgba(0,0,0,.5);
line-height:200px;
text-align:center;
color:#dbdbdb;
}
.demo:before {
content: '';
width: 50px;
position: absolute;
right: 0px;
top: -26px;
height: 16px;
background: #fff;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
display: block;
}
.demo:after {
width: 10px;
height: 10px;
background: transparent;
top: -10px;
right: 50px;
position: absolute;
content: '';
border-bottom-right-radius: 100%;
box-shadow: 50px 0px 0px 50px white;
clip: rect(0px, 60px, 50px, 0px);
display: block;
}
fiddle
I have two overlapping divs that have css3 box shadows. The trouble is that even when I set the z-index I will still need to eliminate one of the div's box-shadow. I have seen cases where negative spreads and zero values are used but I don't think that would work here.
The code I have now is:
#bulb-top {
position: relative;
width: 280px;
height: 280px;
background-color: #E5F7A3;
-webkit-border-radius: 280px;
-moz-border-radius: 280px;
border-radius: 280px;
border: 8px solid #FFF40C;
top: -430px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 4;
}
#bulb-bottom {
position: relative;
width: 140px;
height: 120px;
background-color: #E5F7A3;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
-webkit-border-radius: 0px 0px 30px 30px;
border-radius: 0px 0px 30px 30px;
border-left: 8px solid #FFF40C;
border-right: 8px solid #FFF40C;
border-bottom: 8px solid #FFF40C;
top: -455px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 5;
}
http://jsfiddle.net/minitech/g42vq/3/
You can use the ::before pseudo-element to block out one side of the box shadow. It's not perfect, but it might be enough for your situation. Here's the updated jsFiddle.
#bulb-bottom:before {
background-color: #E5F7A3;
content: '';
display: block;
height: 30px;
margin: 0 auto;
position: relative;
top: -10px;
width: 140px;
}
I am trying to do something like this image below with CSS to build the buttons and then an image sprite to show the center content of the button.
Here is a demo of the code I have so far, I am having trouble getting my sprite images to position correctly. Any help to improve this CSS to look more like my image above would be great. I think the actual HTML structure could be improved as well?
http://dabblet.com/gist/2212456
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">...</span>
</div>
<div class="switcher right">
<span id="right">...</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
Block & inline method
http://dabblet.com/gist/2213271
Absolute method
http://dabblet.com/gist/2213121
Hi you have not defined the position absolute in #left & #right so i controlled the sprite images through absolute positioned.
you can adjust your images through changes in position top,left,bottom,right whatever you need....
Here is your updated css :-
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
background-position: 16px -16px;
height: 15px;
left: 15px;
position: absolute;
top: 12px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
background-position: 0 -29px;
left: 15px;
position: absolute;
top: 13px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
or see the live demo:- http://dabblet.com/gist/2213048
Can't I have both box shadow inner and outer on the same div?
I've tried but it doesn't work
http://jsfiddle.net/CWuw8/
div{
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow: 10px 10px 10px;
box-shadow: 0 0 10px inset;
border-radius: 5px;
background: white;
}
body{background: #d14343}
<div></div>
You need to use comma to separate both shadows: http://jsfiddle.net/gryzzly/CWuw8/3/
And you must also specify the color for your shadow in order for it to be seen.
div{
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow:
10px 10px 10px #000,
inset 0 0 10px #000;
border-radius: 5px;
background: white;
}
body{background: #d14343}
<div></div>
Using CSS3 you can have multple box shadows just by seperating them by commas eg:
box-shadow: 10px 10px 10px, 0 0 10px inset;
You can have as many as you want.
Added a runable code snippet:
div {
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5),
0 0 10px rgba(255, 0, 0, .5) inset;
border-radius: 5px;
background: white;
}
body {
background: #fff
}
<div></div>