I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..
I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.
.contentbox {
border-style: solid;
border-width: 2px;
border-color: rgb(54, 81, 143);
border-radius: 10px;
background-color: rgb(255, 255, 255);
opacity: 0.2;
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
left: 190px;
top: 324px;
width: 100%;
height: 524px;
z-index: 118;
}
This Codepen uses different border widths to create a similar effect to what is pictured in the example.Good luck, and I hope this helps.
html, body {
perspective: 100px;
height: 100%;
width: 100%;
margin: 0;
}
div {
margin: 20px;
border-style: solid;
border-width: 4px 1px 1px 1px;
border-color: rgb(54, 81, 143);
border-top-color: blue;
border-radius: 10px;
background-color: rgb(255, 255, 255);
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
width: 100px;
height: 100px;
}
<div></div>
Related
I wanted to make smilly for my clock but I stucked with the arcs .
This question used box shadow . Can it possible with lines to make crescent shape
I searched for many question all are using almost semi-circles not stretched like arcs.
How to make arcs like this in below image with pure CSS . Any suggestion except SVG or Canvas. Thanks for the help .
Know arcs are main in image but only one example will work I will use it at other places my self and position them
#clockStyleCircle{
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockStyleEyeCircle1{
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 10%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86); /* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
background-color: black;
}
#clockStyleEyeCircle2{
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 65%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
background-color: black;
}
#clockStyleSimileCircle{
position: absolute;
width: 8vw;
height: 3vw;
top: 68%;
left: 25%;
border: 3px solid rgb(36, 36, 36);
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
border-bottom-left-radius: 100% 200%;
border-bottom-right-radius: 100% 200%;
background-color: black;
box-shadow: inset 16px 0px #777, inset 16px 0px 1px 2px #777;;
}
<div id="clockStyleCircle">
<div id="clockStyleEyeCircle1">
<div id="clockStyleEyeSmallCircle1"></div>
</div>
<div id="clockStyleEyeCircle2">
<div id="clockStyleEyeSmallCircle2"></div>
</div>
<div id="clockStyleSimileCircle"></div>
</div>
After referring to above link eyes get alright but as you can see in above snippet shape of mouth renders in shadow . So , tried some changes in below snippet you can see its not stretched and borders are hidden to make it possible . Can it possible to make arc with pure CSS .
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockStyleEyeCircle1 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 10%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
/* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
background-color: black;
}
#clockStyleEyeCircle2 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 65%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
background-color: black;
}
#clockStyleSimileCircle {
position: absolute;
width: 6vw;
height: 6vw;
top: 45%;
left: 30%;
border: 3px solid transparent;
border-radius: 150px;
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
/* border-bottom-left-radius: 100% 200%; */
/* border-bottom-right-radius: 100% 200%; */
background-color: transparent;
box-shadow: inset 0px -9px 1px -2px #777;
}
#clockStyleSmileSmallCircle2 {
position: absolute;
width: 1vw;
height: 2vw;
top: 76%;
left: 30%;
border: 3px solid transparent;
border-radius: 150px;
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
/* border-bottom-left-radius: 100% 200%; */
/* border-bottom-right-radius: 100% 200%; */
background-color: transparent;
box-shadow: inset 0px 9px 1px -3px red;
}
<div id="clockStyleCircle">
<div id="clockStyleEyeCircle1">
<div id="clockStyleEyeSmallCircle1"></div>
</div>
<div id="clockStyleEyeCircle2">
<div id="clockStyleEyeSmallCircle2"></div>
</div>
<div id="clockStyleSimileCircle"><div id="clockStyleSmileSmallCircle2"></div></div>
</div>
The width and height of your smile circle is the same, so when you do border-radius it gives you a semi-circle instead of an arc, try increasing the width greater than the height and you should be able to achieve the desired result.
#clockStyleSimileCircle {
width: 7vw;
height: 6vw;
}
What is the right way to place the content inside the box div with rounded corners so it wouldn't overlap?
Blue box is the content div which is inside the white box parent div. I want the header to be within that parent box so that it has rounded corners at the top as well.
When I tried "overflow: hidden;" on parent box, content (blue box) just went down:
.WhiteBox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.BlueBox {
background-color: rgb(50, 116, 186);
height: 35px;
}
Specific CSS Properties
If you want border-radius for less than 4 corners, then you need to use specific properties:
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
Demo
body {
background: #000;
}
.wbox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.bbox {
background-color: rgb(50, 116, 186);
height: 35px;
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
}
<section class='wbox'>
<div class='bbox'></div>
</section>
I'm trying to make elements that look like this: http://i.imgur.com/oQr7vBI.png
but so far I've only been able to make something like this: http://i.imgur.com/o2KXgxI.png
Is there a way to move the border inside a little bit ?
span.smallCircle {
position: relative;
top: 20px;
background-color: rgba(145, 142, 142, 0.5);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 11px;
padding-right: 11px;
border: 2px dashed #fff;
border-radius: 20px;
}
Add a box shadow with the same color
box-shadow: 0px 0px 0px 5px rgba(145, 142, 142, 0.5);
I would like to create a Vodafone logo with css like this one:
I know some people are able to draw anything with css. I can't figure out how to make the tear drop shape. This is what I have as far as now:
#logoMain {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 50%;
box-shadow: 0px 0px 50px 0px #999 inset;
position: relative;
}
#logoMainafter {
width: 100px;
height: 100px;
margin-top: -35px;
margin-left: 55px;
display: block;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
-webkit-filter: blur(10px);
}
#logoInside {
width: 50px;
height: 50px;
margin: 24px;
background-color: #fe0000;
border: 1px solid red;
border-radius: 50%;
box-shadow: 0px 0px 15px 3px #a80000 inset;
}
<body>
<div id="logoMain">
<div id="logoInside"></div>
<div id="logoMainafter"></div>
</div>
</body>
Can anyone give me any ideas how to create this unusual shape?
For more complex shapes I'd look at using d3js or raphael and the svg element with css backing it. Take a look at this example. There is alot of other examples on the same site of complex shapes you can draw with CSS with a little help from JS.
Well, since anybody is answering, here you have a draft to begin with
CSS
#logoMain {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 50%;
box-shadow: 0px 0px 50px 0px #999 inset ;
position: relative;
}
#logoMainafter {
width: 100px;
height: 100px;
margin-top: -35px;
margin-left: 55px;
display: block;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
-webkit-filter: blur(10px);
}
#logoInside {
width: 50px;
height: 50px;
margin: 24px;
background-color: #fe0000;
border: 1px solid red;
border-radius: 50%;
box-shadow: 0px 0px 15px 3px #a80000 inset;
z-index: 23;
position: absolute;
}
#logoMain:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
top: 2px;
left: 57px;
/* background-color: green; */
border-radius: 50%;
box-shadow: -19px 17px 0px 14px #e80000;
clip: rect(0px, 12px, 63px, -110px);
z-index: 0;
}
fiddle
This is probably not the best use of your time, drawing this in CSS. Use a graphics editor that is made for it and export it to SVG or any other picture format. The pain you need to go to code this is not worth it.
I have the text "+ Add" in a button. When I squish the button's width, I would like 'Add' to disappear but the '+' to remain. Normally I would say overflow: hidden; but from what I can tell because I have position: absolute; that won't work. Ultimately I will probably have to change it to position: relative; and mess with the layout, but can anyone tell my why this is?
.add_button{
display: inline-block;
font-family: 'EntypoRegular';
color:white;
font-size: 34px;
line-height: 1px;
overflow:hidden;
padding: 0px;
position: absolute;
box-shadow: rgb(1, 97, 253) 0px 0px 0px 1px inset, rgb(153, 191, 254) 0px 1px 1px 1px inset;
cursor: pointer;
overflow: hidden;
text-decoration: none solid rgb(255, 255, 255);
background: rgb(77, 144, 254) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 2px 2px 2px 2px;
outline: rgb(255, 255, 255) none 0px;
margin: 7px 0px;
width: 15%;
left: 39%;
}