Final Icons Display
September 17, 2019 / 63 views / CSS | Themes | website speed

How To Create Sprites and Use Icons with CSS

Create a sprite with Instant Sprite: download the png sprite image and usage. CSS codes: #return_top a,#youtube a, #bird a{position:fixed;bottom:1px;display:block;width:2.5rem;z-index:100001} #fixed_icons{background:linear-gradient(270deg,#ddd,#777 80%) no-repeat;padding:0 2%;position:fixed;width:100%;height:2.5rem;bottom:0;margin:0 auto;z-index:10001} #home_icon a{position:fixed;right:44px;bottom:1px;display:block;height:43px;width:44px;background:url(images/mysprite.png) -100px 0; no-repeat;z-index:100001} #return_top a{right:0;height:40px;background:url(images/mysprite.png) 0 0; no-repeat}#youtube a{right:90px;height:40px;background:url(images/mysprite.png) -50px 0; no-repeat} #bird a{right:135px;height:40px;background:url(images/mysprite.png) -156px 0; no-repeat} footer codes: <div id=”fixed_icons”> <div id=”return_top”><a href=”#masthead” title=”Go To Top”></a></div><div id=”home_icon”><a […]

September 10, 2013 / 187 views / Tips And Tricks | WordPress

Optimize Websites For Speed And CPU Usages

After setting up blog(s) on server, create themes, write posts, get traffic, then we need to optimize the websites to be fast and efficient. There are 2 webtools to check the speed of our pages.       1. Move all JavaScripts to Footer instead on placing them on the <head> sections. We want to […]