Preparatory work
to make an icon like this, we need a Facebook icon, and a background image, we use this font: modern pictogram. After these resources are found, the entire project's directory looks like this:
Code to build HTML
Create a new HTML file and CSS file. Then, link the CSS file as well as the CSS Specification section, as follows.
The code is as follows |
Copy Code |
<link rel= "stylesheet" href= "Http://necolas.github.com/normalize.css/2.0.1/normalize.css" > <link rel= "stylesheet" href= "Css/style.css" >
|
To create this icon, we only need a single div. Put this div in the <body> area
The code is as follows |
Copy Code |
<div class= "icon" >F</div>
|
Style style code
Now that we work in style, as usual, we started adding custom fonts using @font-face and adding pages to the background, like this.
The code is as follows |
Copy Code |
@font-face { font-family: ' Modernpictogramsnormal '; Src:url (' Fonts/modernpics-webfont.eot '); Src:url (' Fonts/modernpics-webfont.eot #iefix ') format (' Embedded-opentype '), URL (' fonts/modernpics-webfont.woff ') format (' Woff '), URL (' Fonts/modernpics-webfont.ttf ') format (' TrueType '), URL (' fonts/modernpics-webfont.svg#modernpictogramsnormal ') format (' SVG '); Font-weight:normal; Font-style:normal; } Body { Background:url ('.. /img/ios-linen.jpg '); }
|
Then we add a decorative style icon, including specifying height and width, adding rounded corners, box shadows, and background color gradients.
The code is as follows |
Copy Code |
. Icon { font-family: "Modernpictogramsnormal"; Font-size:4em; Color: #fff; Text-align:center; Line-height:0.406em; text-shadow:1px 1px 0px Rgba (0,0,0,.5); width:65px; height:65px; padding:7px; margin:50px Auto; position:relative; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:0px 0px 10px 1px rgba (0, 0, 0,. 3) inset 0px 1px 0px 0px rgba (255, 255, 255,. 15); -moz-box-shadow:0px 0px 10px 1px rgba (0, 0, 0,. 3) inset 0px 1px 0px 0px rgba (255, 255, 255,. 15); box-shadow:0px 0px 10px 1px rgba (0, 0, 0,. 3) inset 0px 1px 0px 0px rgba (255, 255, 255,. 15); Background: #375a9a; Background:-moz-linear-gradient (top, #375a9a 0, #1b458e 100%); Background:-webkit-gradient (linear, left top, left Bottombottom, Color-stop (0%, #375a9a), Color-stop (100%, #1b458e)); Background:-webkit-linear-gradient (top, #375a9a 0, #1b458e 100%); Background:-o-linear-gradient (top, #375a9a 0, #1b458e 100%); Background:-ms-linear-gradient (top, #375a9a 0, #1b458e 100%); Background:linear-gradient (to Bottombottom, #375a9a 0, #1b458e 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #375a9a ', endcolorstr= ' #1b458e ', gradienttype=0 ); } |
Stitch Effect Code
for stitching effect, we want to add pseudo-elements,: Before And:after. We will first specify their height and width as well as the rounded corners, which are less than their parent element. Icon.
The code is as follows |
Copy Code |
. Icon:before,. Icon:after { Content: ""; Display:block; width:63px; height:63px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; Position:absolute; }
|
We then use dashed borders on these artifacts, but everyone has a different color. : Before will be in the dark blue, like this.
The code is as follows |
Copy Code |
. icon:before { border:1px dashed #0d2b5e; }
|
Although: after pseudo element boundaries will have a low intensity white color, we define its RGBA color pattern. In addition, we also need position: after element 1px from top and 1px from left to right, so its boundary line is obvious.
The code is as follows |
Copy Code |
. icon:after { border:1px dashed Rgba (255,255,255,. 1); top:7px; left:7px; margin-top:1px; margin-left:1px; }
|
This is all the code we need.