I am trying to create an element which is a half-circle with a complete circle border. Like this:
I have no problem doing it with using 2 elements, but don't fully understand how to do it within one DIV.
Right now all I have is a half circle:
.element {
height: 10px;
width: 10px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
background-color: #00a680;
}
You can simply use gradient:
.box {
width: 150px;
height: 150px;
border: 15px solid #00a680;
border-radius: 50%;
padding: 15px;
background: linear-gradient(to right, #00a680 50%, transparent 0) content-box;
box-sizing:border-box;
}
<div class="box">
</div>
Related
I have a div which looks something like this:
.box{
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 3px;
width:100px;
height:100px;
background:red;
}
<div class="box"/>
And I'm trying to achieve this effect. How can I make this box look with such shadows from the inside of the div?
linear gradient
blur filter
absolute positioning
pseudo-elements
flexbox
.box {
box-sizing: border-box;
border-radius: 10%;
width: 100px;
height: 100px;
background: linear-gradient(270deg, red, #c10606);
position: relative;
}
.box:before {
position: absolute;
content: '';
top: 10%;
right: 10%;
bottom: 10%;
left: 10%;
background: linear-gradient(90deg, red, #c10606);
border-radius: 12%;
filter: blur(1px); /* optional for a softer effect */
}
/* optional layout and styling for box contents */
.box {
display: flex;
align-items: center;
text-align: center;
font-family: arial;
color: #ddd;
font-weight: bold;
}
.box * {
position: relative; /* puts interior content over the pseudo-element */
}
<div class="box">
<span>Interior content</span>
</div>
CSS box-shadow
I think the answer posted by #isherwood works as the best one for your use-case. But, there is a way to make the shadow show on the inside of the element by setting the last parameter of box-shadow as inset.
There are a few catches for this solution though. A few things which I could not achieve:
I am unable to implement linear gradient to the shadow.
I am unable to give a border-radius to the inner boundary of the shadow.
div.box {
background: linear-gradient(90deg, hsl(26, 68%, 26%), hsl(26, 68%, 45%));
height: 100px;
width: 100px;
box-shadow: 0 0 0 12px hsl(26, 68%, 35%) inset;
border-radius: 10px;
}
<div class="box"></div>
Reference: How to create an inner shadow using CSS
Well, I edited your code. Here is the demo.
Basically, I added one more div and added some style. Hope it will give you an idea.
Also, I added a snippet down below:-
.box {
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 15px;
width: 100px;
height: 100px;
background: red;
padding: 10px 0px 10px 0px;
}
.inner-div {
box-sizing: border-box;
border-radius: 15px;
width: 78px;
height: 78px;
background: #ee1717;
margin: 0 auto;
}
<div class="box"/>
<div class="inner-div"></div>
<div>
I am trying to get a certain effect on a header for a mockup. It has white glow almost not noticeable. You will see it in this picture i provide behind the title and sub title. How can i get that glow effect with css? I do have a header with the entire thing but is that a good idea to use an image for an entire header? Also i want those two lines near the subtitle. Is it possible to code those lines? And last, the button "order now", will that be possible to make with css or should i just use an image of that and link it?
mockup
jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [what i currently have]
<header>
<h1>Taffies Cupcakes</h1>
<h2>Fresh and tasty</h2>
</header>
body{
background-color:#e7d2c9;
}
header h1{
font-family:georgia;
font-size:46px;
color:#784f3d;
text-align:center;
margin-top:50px;
}
header h2{
font-family:segoe script;
font-size:32px;
color:#846a5f;
text-align:center;
}
All of this is possible to do in CSS 3, I wouldn't recommend it though. Using an image for the button and the header is the best idea if you want it to look the same in all browsers. If you want to do it in CSS anyway try this:
HTML:
<header>
<div class="shadow"></div>
<h1>Taffies Cupcakes</h1>
<h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2>
</header>
CSS:
header > .shadow {
width: 0px;
height: 0px;
margin: 0px 50%;
box-shadow: 0px 0px 200px 100px white;
}
header h2 > .line {
height: 1px;
width: 100px;
margin: 5px 20px;
background-color: #846a5f;
display: inline-block;
vertical-align: middle;
}
As the other answers have mentioned, radial-gradient is probably the way to go here. Just apply it to the header element instead of using my version with box-shadow (which might be a little hacky to some).
Update for the button:
HTML:
<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button>
CSS:
button.special {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f) );
background:-moz-linear-gradient( center top, #784f3d 5%, #846a5f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f');
background-color:#784f3d;
color: #e7d2c9;
text-align: left;
border: 0;
outline: 0;
border-radius: 5px;
height: 42px;
}
button.special > .icon {
width: 27px;
height: 27px;
/*background-image: url('triangle-button.png')*/
position: absolute;
margin: 5px;
}
button.special > .headline {
margin-left: 42px;
font-size: 18px;
}
button.special > .description {
margin-left: 42px;
font-size: 12px;
}
http://jsfiddle.net/ezdr3xdg/17/
Use CSS radial-gradient()
DEMO 1:
body {
height: 100vh;
background-color: #e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 50%);
}
DEMO 2:
body{
height:100vh;
background-color:#e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 100%);
}
DEMO 3:
body {
height: 100vh;
background-color: #e7d2c9;
position:relative;
}
body:after {
content: '';
position: absolute;
left: 50%;
top: -150px;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
z-index:-1;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42);
}
I have update your jsfiddle with a starting template of sorts. Its CSS# gradients and border-radius. http://jsfiddle.net/ezdr3xdg/7/
the button:
<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>
CSS:
The Button:
#order_now{
background: linear-gradient(#846a5f, brown);
width: 200px;
border-radius: 5px;
padding: 5px;
color: white;
font-size: 12pt;
font-weight: bold;
}
#sub_order{
font-size: 10pt;
font-style: italic;
}
#triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid white;
border-bottom: 25px solid transparent;
display: inline-block;
}
#text{
display: inline-block;
}
The Background:
body{
background:linear-gradient(to right, red, blue, red);
}
this should be enough to get you started.
I am trying to create an vertical semi oval shape using css.
I am using the following code to create a full vertical oval
#oval {
width: 100px;
height: 200px;
background: red;
-moz-border-radius: 50px / 100px;
-webkit-border-radius: 50px / 100px;
border-radius: 50px / 100px;
position: relative;
}
but I want to create it as only left part of this oval(like a 'D')
I trie using the following code but it gives me blunt edges.
#oval2{
height:200px;
width:50px;
border-radius: 0% 100% 100% 0%;
-moz-border-radius: 0 100% 100% 0;
-webkit-border-radius: 0 100% 100% 0;
background:green;
}
I want sharp edges as in a full oval . How can I achieve the same
Like so:
#oval {
width: 50px;
height: 200px;
background: red;
border-bottom-right-radius: 50px 100px;
border-top-right-radius: 50px 100px;
position: relative;
}
Note: I have set the properties of the corners independently as explained in the article: Border-radius: create rounded corners with CSS!.
See Demo.
It seems you can't use percentages to achieve (at least not for now) this but as long as you know your dimensions you'll be fine. You can do it like this: jsFiddle
#oval2 {
height:200px;
width: 50px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
background:green;
}
The W3C spec. indicates that border-radius: 100% should work as you'd like but it doesn't in chrome W3C spec.
Use the following code ,it will be helps you:
#oval {
width: 70px;
height: 100px;
background: red;
position: relative;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
I'm trying to create a circle with CSS, which looks exactly like on the following picture:
...with only one div:
<div class="myCircle"></div>
and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed.
I've tried to draw a full circle and fading half of it with another div, and it does work, but I'm looking for a more elegant alternative.
You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).
Then add a border to top/right/left sides of the box to achieve the effect.
Here you go:
.half-circle {
width: 200px;
height: 100px; /* as the half of the width */
background-color: gold;
border-top-left-radius: 110px; /* 100px of height + 10px of border */
border-top-right-radius: 110px; /* 100px of height + 10px of border */
border: 10px solid gray;
border-bottom: 0;
}
WORKING DEMO.
Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.
.half-circle {
width: 200px;
height: 100px; /* as the half of the width */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
UPDATED DEMO. (Demo without background color)
I had a similar issue not long time ago and this was how I solved it
.rotated-half-circle {
/* Create the circle */
width: 40px;
height: 40px;
border: 10px solid black;
border-radius: 50%;
/* Halve the circle */
border-bottom-color: transparent;
border-left-color: transparent;
/* Rotate the circle */
transform: rotate(-45deg);
}
<div class="rotated-half-circle"></div>
Below is a minimal code to achieve the effect.
This also works responsively since the border-radius is in percentage.
.semi-circle{
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 10px solid #000;
border-bottom: 0;
}
<div class="semi-circle"></div>
I use a percentage method to achieve
border: 3px solid rgb(1, 1, 1);
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
Add a border to the semi-circle and remove the border-bottom
#semi-ring{
height: 100px;
/* width = 2* height */
width: 200px;
border: 30px solid black;
/* border-radius = height + border */
border-radius: 130px 130px 0 0;
border-bottom: transparent;
}
<div id="semi-ring"></div>
An idea using gradient:
.box {
width: 200px;
aspect-ratio: 2;
border-radius: 999px 999px 0 0;
background: radial-gradient(50% 100% at bottom,#0000 80%,red 80.5%);
}
<div class="box"></div>
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>