I need to make a shape like the one below and was trying to get it working with CSS.
The closest I could get was like this. I had to push the shadow on the bottom part down or else it would overlap with the shadow on the top.
Is it possible to actually make the top version with CSS?
Working Example Here
CSS
.block-a {
display: block;
height: 200px;
width: 200px;
background-color: #8BC541;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 0;
border-radius: 10px;
border-bottom-right-radius: 0;
}
.block-b {
color: #fff;
text-align: center;
line-height: 40px;
position: relative;
display: block;
height: 40px;
width: 80px;
margin-left: 120px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px#000;
box-shadow: 0 0 10px #000;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #8BC541;
}
.block-b:before {
position: absolute;
background-color: #8BC541;
height: 11px;
width: 90px;
top: -11px;
left: -10px;
display: block;
content: "";
}
.block-b:after {
padding-left: 5px;
color: #fff;
content: "▲";
}
HTML
<div class="block-a"></div>
<div class="block-b">Login</div>
Image
It's an answer pile-on! Looks like you have lots of options to work with. I'll add another to the pile: http://jsfiddle.net/XrkJq/
Related
Take a look at these photos
JSFiddle link at the bottom
firefox:
chrome:
they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't
now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox.
the important styles for the main element is
float: left;
height: 30px;
line-height: 30px;
margin: 12.5px 0;
and for the Pseudo-element ::before
float: left;
display: block;
content: '\F011';
height: 30px;
line-height: 30px;
margin: 0 10px 0 0;
padding: 0 10px;
and the HTML for the element
<button class="like" onclick="item_like()">500</button>
this is the link of JSFiddle
run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?
Maybe try positioning the like absolutely using CSS
.like{
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
position:relative;
padding: 0 10px 0 40px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;}
.like::before{
position:absolute; top:0; left:0;
width:30px;
content: 'like';
margin: 0 10px 0 0;
padding: 0 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC; display:block; border:0;
}
I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:
.like:before {
float: none;
width: 30px;
content: "like";
margin: 0px 10px 0px 0px;
padding: 0px 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 0 4px;
}
.like {
float: none;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
padding: 0px 10px 0px 0px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border: medium none;
position: relative;
width: 88px;
text-align: right;
}
Fiddle: http://jsfiddle.net/79cEb/13/
I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.
Note that I added a overflow: hidden to the button, so the rounded borders are still visible.
This is the altered CSS:
.like {
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
padding: 0 10px 0 40px;
overflow:hidden;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;
position: relative;
}
.like::before {
float: left;
width:30px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
content:'\F011';
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
}
Also, see the updated Fiddle.
How do I make a button with CSS to look like this?
I've tried, but I can't imagine how should I make bottom line with borders like this.. My result: http://jsfiddle.net/UPpfw/
.button_push{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 189px;
height: 54px;
display: block;
}
.button_green{
background: #4ec9a6;
border-bottom: 7px solid #00a09a;
}
i've solve the problem and the solve was: http://jsfiddle.net/TmQzX/
.button_push{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 189px;
height: 54px;
display: block;
text-align: center;
line-height: 47px;
text-decoration: none;
}
.button_white{
background: #4ec9a6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 189px;
height: 49px;
display: block;
}
.try_button{
width: 189px;
height: 54px;
position: relative;
top: 212px;
margin: auto;
}
Do you need something like here?
I figured out that you need shadow for your button. and instead of border-bottom: 7px solid #00a09a;
I suggest use of box shadow
-webkit-box-shadow: 0 8px 3px -2px #00a09a;
-moz-box-shadow: 0 8px 3px -2px #00A09A;
box-shadow: 0 8px 3px -2px #00A09A;
Css:
.button_push{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 189px;
height: 54px;
line-height:54px;
display: block;
}
.button_green{
background: #4ec9a6;
border-bottom: 5px solid #00a09a;
text-align:center;
color: white;
text-decoration:none;
font-size:25px;
font-weight:bold;
font-family: Sans-Serif;
}
Fiddle: http://jsfiddle.net/UPpfw/6/
I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below
#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}
#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}
Maybe try something like this: http://jsfiddle.net/VNAZA/
Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.
.container{
position:relative;
width: 50px;
height: 150px;
}
.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
<div class="container">
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>
This is not possible with CSS.
Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.
Use z-index property.
#nameWidgeteMain, #nameWidgeteMain2 {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
#nameWidgeteMain2 {
z-index: -2;
border: 1px solid #dbe0e3;
}
.nameWidgeteCloseArea {
z-index: -1;
...
}
This is not merging but the result is the same.
I am trying to work this shape around an ad but still allow for normal text flow within it. You can see it is a quote and i have been making different id's and class's for curves. So it is really 3 elements with the borders overlapping as of right now but I feel it is making more work than it needs to be.
http://jsfiddle.net/dUKQe/
This is not 100% perfect yet (there seems to be some slight pixel variation between browsers to hammer out--I've spent too long on it already), but in general, this gets really close to what you seek through judicious use of pseudo-elements.
See the example fiddle.
HTML
<div id="text3" class="text">
<h4>Bruce Lee</h4>
<p><q>Be like water making its way through cracks. Do not be assertive, but adjust to the object, and you shall find a way around or through it. If nothing within you stays rigid, outward things will disclose themselves. Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot. Now, water can flow or it can crash. Be water, my friend.</q>
</p>
</div>
CSS
#text3 {
position: absolute;
top: 5px;
left: 5px;
z-index: 0;
}
.text h4 {
width: 228px;
color: #ffffff;
background-color: #012E40;
margin: 5px 5px 0 5px;
padding: 10px 10px 0 10px;
border: 3px solid #000000;
border-bottom-width: 0;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
position: relative;
}
.text h4:before {
content: '';
position: absolute;
width: 3px;
height: 3px;
right: -3px;
bottom: 0;
background-color: #012E40;
}
.text h4:after { /*upper light blue bkg */
content: '';
display: block;
background-color: #1B4E59;
border: 2px solid #000000;
width: 210px;
height: 3em;
padding: 5px;
margin-top: -9px;
margin-left: 2px;
margin-bottom: -2px;
border-bottom-width: 0;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
position: relative;
top: 10px;
z-index: 1;
}
.text p {
color: #ffffff;
margin: -3em 5px 5px 5px;
padding: 0 5px 5px;
width: 448px;
position: relative;
}
.text p:before { /* inset border corner */
content: '';
display: block;
width: 200px;
height: 3em;
float: right;
margin: -3px 0px 3px 15px;
border: 3px solid #000000;
border-top-width: 0;
border-right-width: 0;
-moz-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
}
.text p:after { /* lower dark blue bkg */
content: '';
display: block;
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
margin-top: -3px;
background-color: #012E40;
border: 3px solid #000000;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
z-index: -1;
}
.text p q {
display: block;
margin: 0 10px 10px;
padding: 5px;
position: relative;
z-index: 2;
}
.text p q:before { /* 2nd inset border corner */
content: '';
display: block;
height: .5em;
width: 202px;
position: absolute;
top: 3em;
right: 3px;
border: 2px solid #000000;
border-top-width: 0;
border-right-width: 0;
-moz-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
z-index: 3;
}
.text p q:after { /* lower light blue bkg */
content: '';
display: block;
position: absolute;
top: 3.5em;
right: 0;
bottom: 0;
left: 0;
background-color: #1B4E59;
border: 2px solid #000000;
border-top-width: 0;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
z-index: -1;
}
What i have made so far is here http://jsfiddle.net/cmRHp/1/
<div class="tv">13.3"</div>
and i want to make exactly like this
Those aren't actual rounded borders, so you probably have to use 2 elements.
.tv {
position: relative;
width: 200px;
height: 150px;
margin: 50px auto 0;
background: black;
color: white;
font: bold 300%/3.6 sans-serif;
text-align: center;
border-bottom-right-radius: 15px 70px;
border-top-right-radius: 15px 70px;
border-top-left-radius: 15px 70px;
border-bottom-left-radius: 15px 70px;
}
.tv-inner {
background: black;
height: 180px;
margin: 0 15px;
position: relative;
top: -15px;
border-bottom-right-radius: 70px 15px;
border-top-right-radius: 70px 15px;
border-top-left-radius: 70px 15px;
border-bottom-left-radius: 70px 15px;
}
<div class="tv">
<div class="tv-inner">13.3"</div>
</div>
http://jsfiddle.net/cmRHp/6/