Category Archives: Web Designing

CSS Hexagon Ratio of Height Width

A hexagon is a polygon with 6 edges and 6 vertex.  Following is a example of hexagon taken from Wikipedia and there you will get more details about hexagon geometrically .

Hexagon
Hexagon

But we are here find the ratio of height and width to create hexagon in web designing. Well, there are two easy way to create hexagon as following images. First is with 2 triangle and 1 rectangle and second one is with 3 rectangle.

2 way to create css3 Hexagon
Two way to create css3 Hexagon

In both case we need rectangle and the question is that what will be the ratio of width and height of the rectangle? Well, we are here to calculate this. We will take a triangle from the hexagon for our calculation. Continue reading CSS Hexagon Ratio of Height Width

XStream – Metro Style One page Responsive HTML5 Portfolio Template

The  amazing  HTML Template on Themeforest by CodexCoder is XStream - Metro Style One page Responsive HTML5 Portfolio Template. It has nice blog section and single page. As a Front End Web Developer of CodexCoder, I am here to share about this with you 🙂 .  Full CodexCoder team was behind of this work same like Biz  One Page Parallax HTML5 Template. The top part is designed like Metro Style. The hole template has awesome mouse hover effects and functionality. You will get five different style.

Checkout the Demos of XStream.

XStream Responsive HTML5 Portfolio Template
XStream Responsive HTML5 Portfolio Template

Let us see the features of this One Page Responsive HTML5 Portfolio Template as below

Metro Style Menu.
Created with HTML5 & CSS3.
Fully Responsive Layout.
Five  Different Colors and Four Different Navigation Menu.
Modern, Clean and Flat Design.
CSS3 Content Animations. Continue reading XStream – Metro Style One page Responsive HTML5 Portfolio Template

Remove Firefox dotted outline select on Bootstrap

As a front end web developer, I mostly use Bootstrap framework. And I have often get a problem with  Firefox dotted outline select on Bootstrap.

Firefox dotted outline select
Firefox dotted outline select

In the above image you have seen that a dotted outline. And yes, I am talking about that unwanted outline on Firefox. It appears when you click or focus on a  link in firefox web browser.

How to remove firefox dotted outline?

To remove this unwanted dotted outline selection from Bootstrap,  you just need to write the following css on your master style sheet.  This simple css code will overwrite the default Bootstrap CSS.

CSS to Remove Firefox Dotted Outline  

a:focus{
outline:none;
outline-offset:0;
}

This will remove or overwrite the default bootstrap css below.

a:focus {
    outline: thin dotted;
    outline-offset: -2px;
}

So, enjoy bootstrap...

Get the Biz One Page Parallax HTML5 Template

Biz is a One Page Parallax HTML5 Template having a highly creative design.  We have tried to implement all the new technique of the current trend. It's Awesome animation and shapes like hexagon are created with CSS3 and we hope, it will touch you. It's now on Themeforest, a market place of creative web based work, for sale. Let us see the features of Biz HTML5 CSS3 Template

a) Awesome Menu
b) Nice top Slider
c) Image Parallax Background
d) Video Parallax Background
e) Fully CSS3 Hexagons
f) Nice Pricing Tables
g) Blog Section and Blog Page
h) Single page
i) A fully Responsive HTML5 CSS3 Validate Template and Integrated with
1) Bootstrap
2) Font Awesome
3) Pretty Photos
4) Owl Slider
5) Google Map
... 

some screen shots of Biz HTML5 Template are given below...

Biz One Page Parallax HTML5 Template
Banner Photo of Biz HTML Template

Continue reading Get the Biz One Page Parallax HTML5 Template

How to Scroll top to bottom in HTML CSS jQuery

Hello there,  I am gonna show you how to scroll top to bottom in html web page. Well, to do this, we will use jQuery library, CSS and of-courses html.

If you are running a WordPress site or planing to add scroll button on WordPress site, you may use my WordPress plugin scroll top and bottom.  You will get there 12 different set of  buttons and also custom button  upload option.

So, set us see the steps.

We are planing to use two buttons, one is to scroll to bottom and another is to scroll to top of the web page.

HTML

<div class="scroll-btn-container">
   <div id="scroll-to-top">
      <img alt="&uarr;" width="32" height="32" src="images/up_btn.png" >
   </div><!-- /#scroll-to-top -->

   <div id="scroll-to-bottom">
     <img alt="&darr;" width="32" height="32" src="images/down_btn.png" >
   </div><!-- #scroll-to-bottom -->
</div><!-- .scroll-btn-container -->

Well, the above is the html markup for the buttons where we have added two buttons with IDs.  And we will style those later. We have used two image button with height 32px and width 32px. Let's move on to the css. Continue reading How to Scroll top to bottom in HTML CSS jQuery