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.
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;
}
I have a few divs one on top of the other that present a progress bar.
I got the css from sketch (graphic artist program).
In sketch the divs blend into each other, but when I take the css and put it in a html page it doesn't look as good.
Any idea what it can be?
I am attaching the css and screenshots:
.bar-bg {
width: 256px;
height: 10px;
opacity: 0.2;
border-radius: 5px;
box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.9);
border: solid 1px $white;
background-color: $dark-blue;
}
.oval {
width: 24px;
height: 24px;
opacity: 0.9;
mix-blend-mode: color-dodge;
background-image: radial-gradient(circle at 52% 50%, #cf2d8e, #000000);
margin-top: -16px;
}
.progress {
height: 8px;
opacity: 0.9;
border-radius: 4px;
box-shadow: 0 0 6px 5px rgba(44, 146, 255, 0.7), inset 0 0 0 1px $icons;
border: solid 1px $blue;
background-color: $primary-1;
margin-top: -9px;
margin-left: 1px;
}
<div id="progressContainer">
<div id="bar" class="bar-bg"></div>
<div id="progress" class="progress" [style.width.px]="getProgress()"></div>
<div id="currentValue" class="oval" [style.margin-left.px]="getOvalLocation()"></div>
</div>
when I run it it looks like this:
trying to get it to look like this:
As you can see in image2 the divs blend into each other better than in image1.
I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background-image: linear-gradient(90deg, #1559EC, #1559EC);
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
The issue is not the gradient but the pseudo element. The gradient is using the same color so the angle is useless. What you need is to invert height/width values on the pseudo element and adjust the direction of its gradient. You can also replace the gradient of the main element by simple color:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 50%;
height: calc(100% - 4px);
background: linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
And you can simplify it like below using multiple background on the main element:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:
linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 2px 2px/50% calc(100% - 4px)no-repeat,
#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
<div class="sidebar">
The quick brown fox
</div>
The gradient you're trying to change has both colors the same so you won't see the difference. The easiest way to make what you want IS using a generator since the code for each render engine is a bit different.
The easiest keyword solution is to use "to direction" instead of a degree. See below. The first box is top to bottom and the second is left to right.
Your example has a pseudo-class (:after) adding a second gradient to create the hard line. You could achieve a similar effect by adding more stops to the gradient.
.box{
width: 100px;
height: 100px;
margin-bottom: 20px
}
.gradient1 {
background: linear-gradient(to bottom, #8fc400, #29b8e5);
}
.gradient2 {
background: linear-gradient(to right, #8fc400, #29b8e5);
}
.gradient3 {
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
}
<div class="box gradient1">
</div>
<div class="box gradient2">
</div>
<div class="box gradient3">
</div>
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>
I have been attempting to make a glowing effect on a sphere in terms of internal 'shiny sphere' patterns, but have become stuck with the likes of positioning some aspects of the 'globe'.
As it currently stands, my css looks like:
.sphere {
height: 200px;
width: 200px;
background-color: red;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.sphere::after {
background-color: rgba(255, 255, 255, 1);
content: '';
height: 15%;
width: 2%;
position: absolute;
top: 0.25%;
left: 3%;
border-radius: 50%;
transform: rotate(45deg);
}
.sphere2 {
height: 200px;
width: 200px;
background-color: yellow;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.shine {
background-color: rgba(255, 255, 255, 0.5);
content: '';
height: 50%;
width: 15%;
left: 18%;
top: 0%;
position: relative;
border-radius: 50%;
transform: rotate(45deg);
}
<div class="sphere">High Importance</div>
<div class="sphere2">
<div class="shine"></div>
Important
</div>
CODEPEN
But the 'shine' effect on either sphere won't 'stay' in place. (Neither attempts full work).
Would anyone be able to point me in the right direction as to position these correctly (in the top left hand side, with a small margin)?
This will hopefully/eventually look similar to this (without the animated effect, that is)
Any advice would be much appreciated at this point (and i hope you can see where i'm going with this design, as i wish for it to be dynamically sized).
Just remember when you use absolute position you need to define the relative parent to position, this will be the closest with a non-static position defined. Try:
.sphere{
position:relative;
}
.sphere::after{
background-color: rgba(255,255,255,.5);
content:'';
height:50%;
width: 15%;
left:18%;
top:0%;
position:absolute;
border-radius:50%;
transform: rotate(45deg);
}
Codepen Updated
Position your .sphere and .sphere2 relatively and the ::after :pseudo-elements absolutely and give them same top and left values.
codepen
.sphere {
position: relative;
height: 200px;
width: 200px;
background-color: red;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.sphere::after,
.sphere2::after {
background-color: rgba(255, 255, 255, 1);
content: '';
height: 40%;
width: 10%;
position: absolute;
top: 8%;
left: 14%;
border-radius: 50%;
transform: rotate(45deg);
}
.sphere2 {
height: 200px;
width: 200px;
position: relative;
background-color: yellow;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.sphere2::after {
background-color: rgba(255, 255, 255, 0.5);
content: '';
position: absolute;
border-radius: 50%;
transform: rotate(45deg);
}
<div class="sphere">High Importance</div>
<div class="sphere2">
<div class="shine"></div>
Important
</div>