Design and UI element using html, CSS and supplied glyphs - html

Question

So I am given one element that has glyph icons and am asked to code it using html, css and supplied font. Now each glyph icon has codes and ligatures. Can anyone help me with it? what should be my approach to start coding that element.

Answer 1

SVG
The given shape can be created with SVG.
You will have to learn a lot of SVG to create complex shapes.
I would start at the basics
.widget {
width: 300px;
height: 300px;
}
.pill {
stroke: #999;
stroke-width: 1;
}
.pill .top {
fill: Orange;
}
.pill .bottom {
fill: LightSeaGreen;
}
.pill .circ-outer {
fill: rgb(120, 50, 120);
}
.pill .circ-inner {
stroke: none;
fill: white;
}
.pill .cross {
stroke: rgb(120, 50, 120);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.handle {
stroke: #999;
fill: #555;
}
.ribble {
stroke: #777;
stroke-linecap: round;
stroke-linejoin: round;
}
<svg class="widget" viewBox="0 0 100 100">
<defs>
<filter id="drop">
<feOffset in="SourceAlpha" dx="0" dy="0.2" result="off" />
<feGaussianBlur result="blurOut" in="off" stdDeviation="0.5" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<path class="handle" d="m35,16
a 5 10 0 0 1 0,70"/>
<line class="ribble" x1="43" y1="43" x2="43" y2="57" filter="url(#drop)"/>
<line class="ribble" x1="45" y1="45" x2="45" y2="55" filter="url(#drop)"/>
<line class="ribble" x1="47" y1="47" x2="47" y2="53" filter="url(#drop)"/>
<g class="pill">
<path class="top" d="m10,50 0,-30
a 5 5 0 0 1 30 0 v 30" />
<path class="bottom" d="m10,50 0,30
a 5 5 0 0 0 30 0 v -30" />
<circle class="circ-outer" cx="25" cy="50%" r="15" />
<circle class="circ-inner" cx="25" cy="50%" r="10" filter="url(#drop)" />
<polyline class="cross" points="30,50 20,50 25,50 25,55 25,45" />
</g>
</svg>

Answer 2

For glyphicons you can refer this link
For example: we can write is like:
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
Please see the below link for more details
http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
http://getbootstrap.com/components/
Without bootstrap:
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
In CSS
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
Got this from this:
Add Bootstrap Glyphicon to Input Box

Answer 3

I have tried to make replica based on your image. Try to add Search, Home and Plus icons to head-glyph , middle-glyph , tail -glyph div's to look little bit similar to your image.
CSS
.glyph {
display:block;
border:3px solid #bbb;
height:120px;
width:50px;
position:absolute;
background:grey;
border-radius:24px;
z-index:100;
}
.head-glyph {
border-radius:20px;
background:orange;
height:70px;
width:50px;
position:absolute;
z-index:200;
display:block;
}
.middle-glyph{
border-radius:25px;
background:#660066;
height:50px;
width:50px;
border:2px solid #bbb;
position:absolute;
z-index:300;
top:35;
left:-3;
display:block;
}
.middle-glyph-tiny{
border-radius:25px;
background:white;
height:35px;
width:35px;
position:absolute;
z-index:300;
top:8;
left:8;
display:block;
box-shadow: 0 0 5px #888;
}
.tail-glyph {
border-radius:20px;
background:skyblue;
height:70px;
width:50px;
position:absolute;
z-index:200;
bottom:0;
}
.half-circle {
position:absolute;
z-index:10;
height:118px;
width:55px;
border-radius: 0px 60px 60px 0px;
background:grey;
left:15;
top:-2;
border:3px solid #bbb;
}
HTML
<div class="glyph">
<div class="head-glyph"></div>
<div class="middle-glyph">
<div class="middle-glyph-tiny"></div>
</div>
<div class="tail-glyph"> </div>
<div class="half-circle"> </div>
</div>
http://jsbin.com/vumurafuwa/2/edit

Answer 4

since you're going to probably to need to register click events, I've used a couple of elements to allow for this:
Please note this is only for semantic purposes only
.wrap {
position: relative;
width: 75px;
height: 200px;
border-radius: 100px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid darkgray;
margin: 50px;
background: lightgray;
z-index: 8;
box-shadow: 0 0 20px 10px black;
cursor: pointer;
}
.wrap:before {
content: "";
position: absolute;
left: 0;
width: 140%;
top: 8%;
height: 84%;
border-radius: 50%;
background: gray;
border: 3px solid darkgray;
}
.wrap:after {
content: "";
position: absolute;
width: 0;
border: 3px ridge darkgray;
border-radius: 3px;
height: 10%;
top: 45%;
left: 110%;
}
.middle:hover:before {
background: lightgray;
}
.top {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
border-radius: 75px 75px 0 0;
background: orange;
transition: all 0.4s;
}
.top:before,
.bottom:before {
content: "";
position: absolute;
background: url(http://bahriadirectory.com/wp-content/uploads/2014/07/Very-Basic-Search-icon.png) no-repeat;
background-size: 40px 40px;
height: 50px;
width: 50px;
left: 10px;
}
.top:before {
top: 10px;
}
.bottom:before {
bottom: 5px;
}
.bottom:before {
background: url(http://www.wheatonbible.org/Content/10713/Icons/home-icon.png) no-repeat;
left: 8px;
background-size: 50px 50px;
}
.bottom {
content: "";
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 100%;
border-radius: 0 0 75px 75px;
background: cornflowerblue;
transition: all 0.4s;
}
.top:hover,
.bottom:hover {
background: lightgray;
}
.middle {
position: absolute;
height: 67px;
width: 100%;
border-radius: 50%;
border: 3px solid lightgray;
top: 50%;
left: -3px;
transform: translateY(-50%);
background: purple;
}
.middle:before {
content: "";
position: absolute;
top: 10%;
left: 10%;
background: white;
border-radius: 50%;
height: 80%;
width: 80%;
box-shadow: 5px 5px 5px 0 #222;
transition: all 0.4s;
}
.middle:after {
content: "+";
position: absolute;
top: 50%;
lefT: 50%;
transform: translate(-50%, -50%);
color: purple;
font-family: arial;
font-size: 80px;
}
html,
body {
margin: 0;
padding: 0;
background: #222;
}
<div class="wrap">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>
Please note
I have used images for the search and home icons. These can be altered by using font icons/etc.