Related
I am trying to achieve this shape of div to hold profile information.
So far I've curved one of the corners. However, I am having problems parallel lines.
My HTML:
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
My CSS:
.profile-card{
margin-top:150px;
float:right;
background-color: rgba(0,0,0,0.4);
height:500px;
text-align:center;
padding: 50px 40px;
border: 2px solid red;
border-top-left-radius: 39px;
}
The codepen is https://codepen.io/anon/pen/wjMQmw
Thank you in advance.
I would consider a solution with pseudo-element with some skew transformation:
.profile-card {
background: rgba(0, 0, 0, 0.4);
width: 200px;
text-align: center;
padding: 50px 0 0 40px;
border-top-left-radius: 39px;
border-left: 1px solid red;
border-top: 1px solid red;
position: relative;
}
.profile-card:before {
content: "";
position: absolute;
right: -40px;
width: 40px;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
transform: skewY(45deg);
transform-origin: top left;
border-top: 1px solid red;
border-right: 1px solid red;
box-sizing:border-box;
}
.profile-card:after {
content: "";
position: absolute;
bottom: -40px;
height: 40px;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
transform: skewX(45deg);
border-left: 1px solid red;
border-bottom: 1px solid red;
transform-origin: top left;
box-sizing:border-box;
}
body {
background:linear-gradient(to right,lightblue,pink)
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
Without the border I would consider multiple gradient to achieve the layout:
.profile-card {
background:
linear-gradient(to bottom left,rgba(0, 0, 0, 0.4) 50%,transparent 51%)0 100%/50px 50px no-repeat,
linear-gradient(to top right,rgba(0, 0, 0, 0.4) 50%,transparent 51%)100% 0/50px 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))100% 100%/calc(100% - 50px) 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 0/calc(100% - 50px) 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 50px/100% calc(100% - 100px) no-repeat;
width: 200px;
text-align: center;
padding: 50px 40px;
border-top-left-radius: 39px;
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
Or the clip-path solution:
.profile-card {
background:rgba(0, 0, 0, 0.4);
width: 200px;
text-align: center;
padding: 50px 40px;
border-top-left-radius: 39px;
-webkit-clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%);
clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%)
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
For super complex bordering, one option is to use SVG. Here is an example of basic usage of polygon. SVG embedded into HTML can be styled using CSS easily:
body{
margin:0;
height: 500px;
background: url('https://cdn3.tropicalsky.co.uk/images/1280x720/downtown-dubai-aerial-view.jpg');
}
.profile-card{
margin-top:5px;
background-color: transparent;
height:800px;
width: 200px;
text-align:center;
padding: 50px 40px;
position: relative;
}
.profile-card h1, .profile-card p {
position: relative;
}
.frame {
position: absolute;
top: 20px;
left: 20px;
opacity: 0.7;
}
<div class="profile-card">
<svg class="frame" height="300" width="300">
<polygon points="50 0,250 0,300 50,300 300, 50 300, 0 250, 0 50,7.5 25, 15 15, 25 7.5" style="fill:lightgrey;stroke:orange;stroke-width:1" />
</svg>
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
I am trying to create this image with css and html but m kept failing to get perfect curve and shadow as shown in image.
HTML
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
CSS
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#df1c40;
float:left;
transform: skew(180deg,210deg);
position: absolute;
top: 42px;
}
.square2{
width:100px;
height:100px;
background:#ff9c28;
float:left;
transform: skew(180deg,150deg);
position: absolute;
left:100px;
top: 42px;
}
.square3{
width:117px;
height:100px;
background:#97bbdd;
float:left;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: -1px;
top: -31px;
}
.square3:before {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid #28a55c;
border-left: 70px solid transparent;
-webkit-box-shadow: 5px 0px 0px -1px #879fd1;
-moz-box-shadow: 5px 0px 0px -1px #879fd1;
box-shadow: 5px 0px 0px -1px #879fd1;
transform: rotate(90deg);
}
.square3:after {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
border-top: 70px solid #F3F5F6;
border-right: 70px solid transparent;
transform: rotate(90deg);
}
My best try. I am just doing this for my knowledge and any help with little bit detail will be appreciate.. :)
The curved areas in the top can be achieved to some extent using radial-gradient for background instead of using the border method to create the triangles.
This works in Chrome (v51.0.2704.7 dev-m), Opera (v36.0), Firefox (v45.0.2), Edge and IE11. It also works in Safari (tested on iPhone).
.mainDiv {
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top: 100px;
}
.square {
width: 100px;
height: 100px;
background: #df1c40;
float: left;
transform: skew(180deg, 210deg);
position: absolute;
top: 42px;
}
.square2 {
width: 100px;
height: 100px;
background: #ff9c28;
float: left;
transform: skew(180deg, 150deg);
position: absolute;
left: 100px;
top: 42px;
}
.square3 {
width: 117px;
height: 100px;
background: #97bbdd;
float: left;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: -1px;
top: -31px;
overflow: hidden;
}
.square3:before {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 70px;
height: 70px;
padding: 0px 8px 0px 0px;
background: radial-gradient(ellipse 100px 35px at 45% 110%, #97bbdd 50%, rgb(40, 165, 92) 52%, rgb(40, 165, 92) 55%, transparent 56%);
background-size: 90% 100%;
background-repeat: no-repeat;
transform: rotate(90deg);
}
.square3:after {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 62px;
height: 70px;
padding: 0px 8px 0px 0px;
background: radial-gradient(ellipse 20px 90px at 110% 50%, transparent 50%, rgb(40, 165, 92) 50%, rgb(40, 165, 92) 62%, transparent 63%), radial-gradient(ellipse 20px 90px at 110% 50%, transparent 50%, rgb(138, 159, 212) 50%, rgb(138, 159, 212) 60%, transparent 70%), linear-gradient(to bottom right, white 45%, rgb(40, 165, 92) 46%), linear-gradient(to bottom right, white 48%, rgb(138, 159, 212) 49%);
background-clip: border-box, border-box, content-box, border-box;
background-size: 95% 100%, 100% 85%, 100% 100%, 95% 85%;
background-repeat: no-repeat;
transform: rotate(90deg);
z-index: -1;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
i played also with gradient from a single div and 2 pseudos:
The idea is to pile bits of gradients to shape the curved parts.
#cube{
display: inline-flex;
align-items: center;
justify-content: center;
background: #DF1C40;
color: white;
width: 75px;
height: 182px;
margin: 78px;
position: relative;
transform: skew(40deg, 10deg) rotate(40deg);
}
#cube:before,
#cube:after {
display: inherit;
align-items: center;
justify-content: center;
content: '';
position: absolute;
top: 0;
left: 0px;
right: 0px;
bottom: 0;
background: #FF9D28;
border-radius: inherit;
box-shadow: inherit;
transform: translate(100%, -50%) skew( 0deg, -67deg) rotate(0deg);
}
#cube:after {
content: '';
top: 0px;
left: 0;
height: 106%;
right: 0;
width: 85%;
bottom: 0;
transform: translate(68%, -96%) rotate(30deg)skew(7deg, -30deg);
background:
linear-gradient(to top left, white 42%, transparent 43%),
linear-gradient(141deg, transparent 80%, white 75%),
linear-gradient(-265deg, transparent 80%, white 75%),
linear-gradient(-5deg, #28A55c 45%, transparent 46%) 20px -6px no-repeat,
linear-gradient(25deg, #28A55c 45%, transparent 46%) 7px 38px no-repeat,
linear-gradient(-97deg, #28A55c 44%, transparent 46%) 2px 38px no-repeat,
linear-gradient(140deg, transparent 45%, #28A55c 46%) 22px 16px no-repeat,
linear-gradient(265deg, #28A55c 0%, transparent 0%) -17px 46px no-repeat,
linear-gradient(272deg, #28A55c 50%, transparent 51%) -7px 120px no-repeat,
linear-gradient(267deg, #28A55c 50%, transparent 51%) -13px 75px no-repeat,
linear-gradient(265deg, #28A55c 45% , transparent 46% ) -20px 46px no-repeat,
linear-gradient(-95deg, rgba(0, 0, 0, 0.1) 45%, transparent 46%) -23px 48px no-repeat,
linear-gradient(to bottom right, #97BBDD 58%, transparent 58%);
background-size: 100% 100%, auto, auto, 60% 50%,60% 5%,13% 10%, 60% 45%, 100% 70%, 60% 45%, 80% 45%, auto;
}
body {
background:#333;
font-family:tahoma;
font-weight:bold
}
p {position:absolute;color:white;}
<p>wich is which ?</p>
<div id="cube">
CSS <br/> box
</div>
<img src="http://i.stack.imgur.com/0Y3vw.png"/>
codepen to play with
I have played with linear-gradient & Position property to get similar design.
As you can see i had to take few extra element for curve. For more detail about corner read here
Hope it will help..
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#df1c40;
float:left;
transform: skew(180deg,210deg);
position: absolute;
top: 42px;
}
.square2{
width:100px;
height:100px;
background:#ff9c28;
float:left;
transform: skew(180deg,150deg);
position: absolute;
left:100px;
top: 42px;
}
.square3{
width:117px;
height:100px;
background:#97bbdd;
float:left;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: -1px;
top: -31px;
}
.square3:before {
content: "";
position: absolute;
top: 2%;
right: 0%;
left: 44%;
width: 0px;
height: 0px;
border-bottom: 60px solid transparent;
border-left: 60px solid transparent;
-webkit-box-shadow: 6px 0px 0px -1px #879fd1;
-moz-box-shadow: 6px 0px 0px -1px #879fd1;
box-shadow: 6px 0px 0px -1px #879fd1;
transform: rotate(84deg);
z-index:0;
}
.square3:after {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
border-top: 73px solid #FFF;
border-right: 73px solid transparent;
transform: rotate(90deg);
}
#fpc_page-tip:before, #fpc_page-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 60%;
width: 50%;
height: 50%;
content: "";
}
#fpc_page-tip:before {
right: 96%;
top: 0%;
background: -webkit-radial-gradient(-180% 200%, circle, rgba(151,187,221,1) 85%, rgba(135,159,209,.8) 93%);
border-right: solid 2px #28A55C;
box-shadow: 17px -3px 1px -18px #FFF;
z-index: -1;
}
#fpc_page-tip:after {
top: 96%;
right: 0%;
background: -webkit-radial-gradient(-250% 320%, circle, rgba(151,187,221,0) 85%, rgba(135,159,209,.8) 93%);
border-top: solid 2px #28A55C;
box-shadow: 17px -3px 1px -18px #FFF;
z-index: 0;
}
#fpc_corner-box { /* edit these sizes for the default revealing corner size */
height: 20px;
width: 20px;
right: 0;
top: 0;
position: absolute;
overflow: visible;
height: 65px;
width: 65px;
}
#fpc_corner-box:before {
position: absolute;
top: 0;
right: 0;
/*content: "";*/
display: block;
width: 100%;
height: 100%;
}
#fpc_page-tip {
position: absolute;
top: 0;
right: 0;
content: "";
background: -webkit-linear-gradient(45deg, #28a55c 17%, #28a55c 18%, #48A26E 30%, #41A76B 34%, #2FCA70 49%, rgba(200,200,200,0) 36%);
display: block;
width: 100%;
height: 100%;
}
#fpc_corner-box, #fpc_page-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3">
<div id="fpc_corner-box">
<a id="fpc_page-tip" href="#">
</a>
</div>
</div>
</div>
I'm trying to create Tabbed Contents with some border and shadows.
This is slightly different from on questions in that I'm trying to create shadows. Additionally, the whole area of the tab should be clickable. Basically a complex div inside an anchor tag in a li
Attempt 1
Used a square box and rotated it with two border widths visible.
What I have now:
What I am wishing to obtain when a tab is opened/active (using CSS only):
Attempt 2
Used a right pointing triangle after every li element.
Positioned it just before next li element
Failed at the white padding in between (that could be fixed with margin between two li) but could not find a possible solution for shadow.
Attempt 3
Positioned colored right pointed triangle after an element
Positioned white triangle behind it and :before the next li element.
Shadows scared me this time.
So basically the problems are the tail of next li element and the shadow of the chevron of current element.
Demo of Attempt in Stack Snippets
.my-tabs {
width: 100%;
margin: 10px 0 !important;
display: flex;
overflow: hidden;
position: relative;
z-index: 100;
padding-top: 10px;
}
.my-tabs li a {
padding: 15px 20px 15px 50px;
background: #ff5050;
display: block;
height: 56px;
}
.my-tabs li {
display: block;
width: 20%;
font-size: 1.1em;
margin: 0;
}
.my-tabs li:last-child:after {
border-top: 28px solid #fff;
border-left: 28px solid transparent;
margin-right: 0;
border-style: solid;
border-right: 0;
border-bottom: 28px solid #fff;
content: '';
height: 0;
float: right;
margin-top: -56px;
transform: none;
width: 0;
}
.my-tabs:after {
border-left: 40px solid #ff5050 !important;
margin-top: 1px;
margin-left: -2px;
}
.my-tabs li:after {
margin-right: -7px;
border-style: solid;
border-width: 4px 4px 0 0;
border-color: white;
content: '';
height: 43px;
float: right;
margin-top: -43px;
transform-origin: center top;
transform: rotate(45deg);
width: 43px;
}
.my-tabs li.active:after {
-webkit-box-shadow: 8px 0px 4px -3px #090A09;
-moz-box-shadow: 8px 0px 4px -3px #090A09;
-o-box-shadow: 8px 0px 4px -3px #090A09;
box-shadow: 8px 0px 4px -3px #090A09;
}
.my-tabs li.active {
border-bottom: 8px solid white;
}
.my-tabs li.active a {
-webkit-box-shadow: 0px 8px 4px -3px #090A09;
-moz-box-shadow: 0px 8px 4px -3px #090A09;
-o-box-shadow: 0px 8px 4px -3px #090A09;
box-shadow: 0px 8px 4px -3px #090A09;
}
<ul class="my-tabs">
<li id="gtab0" class="">tab1</li>
<li id="gtab1" class="">tab2</li>
<li id="gtab2" class="active">tab3'</li>
<li id="gtab3" class="">tab4</li>
<li id="gtab4" class="">tab5</li>
</ul>
Here is a live demo for your need.
Just before, some notes:
You need to wrap the text inside the arrows in div like this: <div>Tab 1</div> because the div is hide the :after element box-shadow. (To understand this, try to unwrap the div.
You need to set their z-index in descending order, so the first one hides the second and so on. (I believe that there are no many arrows so I took a guess to maximum 5)
I added a :hover transition to the box-shadow so you can see how to do this if you want.
After the talks, here is the real thing:
ul {
list-style:none;
padding:0;
margin:0;
}
li {
display:inline-block;
background:#2980b9;
color:#fff;
position:relative;
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.5);
transition:all .3s ease;
cursor:pointer;
}
li:after {
content: "";
position: absolute;
top: 0;
right: -14px;
height: 26px;
width: 26px;
background: inherit;
transform: translateY(6px) rotate(45deg);
box-shadow: 2px 1px 3px 0 rgba(0,0,0,0.5);
transition:all .3s ease;
}
li:nth-child(1) {
z-index:5;
}
li:nth-child(2) {
z-index:4;
}
li:nth-child(3) {
z-index:3;
}
li:nth-child(4) {
z-index:2;
}
li:nth-child(5) {
z-index:1;
}
li:hover {
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3);
}
li:before:hover {
box-shadow: 2px 1px 1px 0 rgba(0,0,0,0.3);
}
li.active {
background:#c0392b;
}
li div {
background:inherit;
padding:10px 20px;
position:relative;
z-index:1;
}
<ul>
<li><div>Tab 1</div></li>
<li class="active"><div>Tab 2</div></li>
</ul>
http://jsbin.com/fedepe
Update
The other option to create this shape is using SVG.
Just note that this is a quick and dirty solution. With svg you can't say "I can't do this". Just take this code, play with it, until you will get the exact result that you want.
I'm using the use (info) tag so you don't need to duplicate many (svg) code to each of the items.
I'm using filter:drop-shadow for the shadow (obviously, info).
You can edit this shape using apps like Adobe Illustrator or similar.
* {
color:#fff;
}
ul {
list-style:none;
padding:0;
margin:0;
}
li {
position: relative;
padding: 10px 50px 10px 25px;
float: left;
}
svg {
position:absolute;
left:0;
top:0;
height:100%;
z-index:-1;
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
use.reg {
fill:red;
}
use.active {
fill: blue;
}
.hidden {
display:none;
}
li:first-child {
z-index:1;
}
<svg class="hidden" xmlns="http://www.w3.org/2000/svg" width="148.978px" height="41.791px" viewBox="0.522 375.104 148.978 41.791">
<defs>
<g id="aa" transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)">
<path d="M5.225-1766.523c0-2.09,81.318-2.432,590.644-2.432h590.82c0,0,298.311,205.298,298.311,209.653
c0,4.351-292.207,204.253-292.207,205.645c0,2.266-74.014,2.612-593.789,2.612c-451.167,0-593.779-0.522-593.779-2.09"/>
</g>
</defs>
</svg>
<ul>
<li>
Item 1
<svg viewBox="0.522 375.104 148.978 41.791">
<use class="reg" xlink:href="#aa"></use>
</svg>
</li>
<li>
Item 2
<svg viewBox="0.522 375.104 148.978 41.791">
<use class="active" xlink:href="#aa"></use>
</svg>
</li>
</ul>
http://jsbin.com/texasu
If you have some time to spend, you could relay on background linear gradient and rgba colors hover a single texture: demo
sample of snippet below:
.active {
background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%
}
ul {
background: url(http://lorempixel.com/500/52/abstract/4);
overflow: hidden;
border-bottom:3px solid transparent;
padding:0 0 3px 0;
margin:1em;
background-clip:content-box;
}
ul:before {
content:'';
height:1.9em;
display:inline-block;
border-right:solid white;
position:relative;
vertical-align:top;
}
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
vertical-align: top;
text-align: center;
min-width: 70px;
padding: 0.25em 2em 0.25em 1.5em;
border: 2px solid white;
border-right: none;
border-left: none;
}
li:before {
content: '';
padding: 0.7em;
margin: -0.25em -2.75em -0.5em 2em;
border: solid white;
border-left: none;
border-bottom: none;
float: right;
transform: rotate(45deg);
border-radius: 2px;
/* ? */
}
li:first-of-type {
margin-left: -1em;
}
.active {
background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0 2px 2px black;
}
.active:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
li:last-of-type {
background: linear-gradient(-310deg,transparent 0.75em, rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%
}
li:last-of-type:before {
background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}
li:hover {
background: linear-gradient(-310deg,transparent 0.75em, rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0px 2px 2px black;
}
li:hover:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
a {
color:#12374B;
font-weight:bold;
text-shadow:0 0 1px white;
font-variant:small-caps;
}
body {
background:#777;
}
<ul>
<li class="active">Qualify</li><li>
Develop</li><li>
Propose</li><li class="active">
Qualify</li><li>
Close</li>
</ul>
with nav + a
nav {
background: url(http://lorempixel.com/500/52/abstract/4);
overflow: hidden;
border-bottom:3px solid transparent;
padding:0 0 3px 0;
margin:1em;
background-clip:content-box;
white-space:nowrap; /* keep it on a single line */
}
nav:before {
content:'';
height:1.9em;
display:inline-block;
border-right:solid white;
position:relative;
vertical-align:top;
}
a {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
display: inline-block;
vertical-align: top;
text-align: center;
min-width: 70px;
padding: 0.25em 2em 0.25em 1.5em;
border: 2px solid white;
border-right: none;
border-left: none;
}
a:before {
content: '';
padding: 0.7em;
margin: -0.25em -2.75em -0.5em 2em;
border: solid white;
border-left: none;
border-bottom: none;
float: right;
transform: rotate(45deg);
border-radius: 2px;
/* ? */
}
a:first-of-type {
margin-left: -1em;
}
.active {
background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0 2px 2px black;
}
.active:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
a:last-of-type {
background: linear-gradient(-310deg,transparent 0.75em, rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%
}
a:last-of-type:before {
background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}
a:hover {
background: linear-gradient(-310deg,transparent 0.75em, rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0px 2px 2px black;
}
a:hover:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
a {
color:#12374B;
font-weight:bold;
text-shadow:0 0 1px white;
font-variant:small-caps;
}
body {
background:#777;
}
<nav>
Qualify<!-- white space can be killed here or else where if this method is not apprpriate to your coding
-->Develop<!--
-->Propose<!--
-->Qualify<!--
-->Close
</nav>
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 would like to find a ribbon rosette made in pure CSS3 and HTML or get tips on how to make one. I should look something like this one
Demo
Here's what I've tried...
<div class="star"></div>
<div class="circle">Ribbon Rosette</div>
.star {
left: 100px;
top: 100px;
height: 80px;
width: 80px;
background: silver;
position: absolute;
text-align:left;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:before {
height: 80px;
width: 80px;
background: silver;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:after {
padding-top: 10px;
text-align: center;
vertical-align: middle;
height: 70px;
width: 80px;
background: silver;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.circle {
font: 400 18px/1.1 "freight-sans-pro",sans-serif;
color: #000000;
left: 95px;
top: 95px;
position: absolute;
text-align:center;
padding-top: 25px;
width: 90px;
height: 65px;
background: silver;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}
First off all what you made is amazing, I added ribbons for you at the bottomby adding 2 span elements under div with a class .circle and added ribbon triangles virtually...
Demo
Demo 2 (Longer triangles tweaking border: 40px solid rgba(255,255,255,1);)
.circle span:nth-of-type(1) {
width: 40px;
height: 120px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
z-index: -1;
left: 10px;
}
.circle span:nth-of-type(1):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}
.circle span:nth-of-type(2) {
width: 40px;
height: 80px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: -1;
left: 50px;
box-shadow: -10px -20px 10px 1px #D5A002;
}
.circle span:nth-of-type(2):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}