Design and UI element using html, CSS and supplied glyphs

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.

To be more precise, I am given a picture of an element and asked to code it using just html, css. The link to the picture is given in the question above — user0428, Jun 05 '15 at 16:52

score 2 · Answer 1 · answered Jun 05 '15 at 23:44

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>

svg looks more neat. Thanks :) – user0428 Jun 06 '15 at 00:04 — user0428, Jun 06 '15 at 00:04

score 1 · Answer 2 · edited May 23 '17 at 12:23

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

no but i am not allowed to use bootstrap. they have given their own icons and i have to code the UI elements using icons font information. I can just use html.css and no frameworks — user0428, Jun 05 '15 at 16:51

jbutler483 · Answer 3 · 2015-06-08T08:51:07.963

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.

thank you so much! this is really going to help a lot. can't thank enough — user0428, Jun 05 '15 at 18:53

score 1 · Answer 4 · answered Jun 05 '15 at 23:36

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

enter image description here

Design and UI element using html, CSS and supplied glyphs

4 Answers4

SVG