How to create Custom select box using CSS?

Custom select box design using CSS

We can develop custom select box design using CSS and Script. Here we will see the CSS based implementation.

HTML


  <div class="select-style">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

CSS:


.select-style {
 padding: 0;
 margin: 0;
 border: 1px solid #ccc;
 width: 197px;
 overflow: hidden;
 height: 30px;
 background: url("../images/dropdown.png") no-repeat right center #fff; //Set the image path of dropdown icon design
}
.select-style select {
 padding: 0 3px;
 width: 108% !important;
 border: none;
 box-shadow: none;
 background-color: transparent;
 background-image: none;
}
.select-style select:focus {
 outline: 0;
}

Note: Wrap a Div section with a class name “select-style” on the select field.

Continue Reading

Custom radio button & custom checkbox styling using CSS

Custom radio and custom checkbox design using CSS

We are hiding default form element using CSS. The “for” attribute specifies which form element is bound to the label. So, label will act as an input element. “Id” name of the form element and “for” attribute name should be same.

I have used images for active & inactive mode. Instead of images we can use font-awesome.

HTML:


//Custom radio button
<input id="apple" name="fruits" type="radio" />
<label for="apple">
<img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" /> //Inactive image
<img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" />  //Active image
</label>
//Custom checkbox 
<input id="fruits" name="fruits" type="checkbox" />
<label for="fruits">
<img class="offradio" height="20" src="images/form_box-off.png" width="20" />
<img class="onradio" height="20" src="images/form_box-on.png" width="20" />
</label>

CSS:


input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio{
 display: block;
}
/* Hidding the "check" status of inputs */
input[type="radio"] + label .onradio,
input[type="checkbox"] + label .onradio {
display: none;
}
/* Styling the "check" status */
input[type="radio"]:checked + label .onradio,
input[type="checkbox"]:checked + label .onradio {
display: block;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio {
display: none;
}
Continue Reading

How can do a PSD to HTML conversion?

PSD to HTML conversion

First of all we should know about basic HTML and CSS (HTML5 and CSS3). Javascript & Jquery also used for creating interactions between the web page and user.

Now we are living in the smart world, so our website should be fit with all kind of devices. We can create Responsive websites by using media queries, bootstrap and foundation.

Following points we have to focus when doing HTML conversion:

  • Pixel perfect User Interface Development using HTML and CSS.
  • Cross browser compatibility check & cross platform support.
  • Responsiveness for all kind of devices by using Media Queries.
  • SEO friendly codes.
  • User Accessibility check.
  • Code Validation Check, Code Review and Code Minification.
Continue Reading

How can create a responsive web design?

Responsive Design

We can develop responsive webpage by using following ways.

  1. Media queries
  2. Responsive frameworks like Bootstrap and Foundation.

Media Queries Example:

To write CSS codes for accepting in mobile view only:


@media (max-width: 767px){
//CSS declarations
}

To write CSS codes for accepting in tablet view only:


@media (min-width: 768px) and (max-width: 1024px){
// CSS declarations
}

To write CSS codes for accepting in desktop view only:


@media (min-width: 1200px){
// CSS declarations
}

Some of Device Resolutions:

  • 768px – IPad portrait
  • 1024px – Ipad Landscape
  • 375px – Iphone6 Portrait or latest mobile devices
  • 360px – Some android phones
  • 320px – IPhone5 Portarit
  • 1280, 1366+ – desktop resolutions

Responsive design using CSS Frameworks (Bootstrap / Foundation):

This is like plug and play type. They have already predefined the required classes and components for responsiveness. We can use those class names and UI components for achieving responsiveness with minimal efforts.

Continue Reading

What are the steps to learn front end web development?

Learning Front End Development

  • First learn about web development basic concepts such as domain, web hosting, web server, FTP, HTTP, HTTPS, markup languages, script languages, SEO, version control, responsiveness, recent trends in web development… ect
  • Then focus on creating structures (image, title, table, logo, content section, slider, tab.. ect) using markup language like HTML/HTML5.
  • Then applying styles (color, fonts, background, line-height, border.. etc) for created structures using CSS/CSS3.
  • Create interaction between the webpage and user by using scripts like Javascript and Jquery.
  • Try to create responsive web page by using media queries.
  • Then use advanced responsive framework like Bootstrap and Foundation.
  • Learn Advance Javascipt based libraries such as Angular JS, React JS, Ember JS, Knockout JS, Node JS for advanced web development.
Continue Reading

Popover / Tooltip using Jquey plugin

Popover implementation using Webui-popover

Webui-popover is a jquery plugin which is used for creating popover UI component.

Step 1:
Include webui-popover CSS in head section.


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.css" />

Step 2:
Include Jquery library and webui-popover js files in head section.


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

Step 3:
Call the webuipopover method to trigger the popover on the selected element.


$(document).ready(function(){
        $('#tooltippanel').webuiPopover({
                constrains: 'horizontal', 
                trigger:'click',
                multi: true,
                placement:'right-top',
                width:100,
                content: 'tooltip contents placed here...'
        });
    });

Explanation:

  • When click the corresponding selector (id or class name), script will trigger the webui-Popover on that target element.
  • Placement attribute specifies the tool-tip direction display. Different direction are there such as left, right, top, bottom, right-top, right-bottom, top-left, top-right.. etc.
  • We can put the tool-tip content within “content” attribute.
Continue Reading

Custom scroll using Jquery

Custom scroll implementation using mcustomscrollbar

Mcustomscrollbar is a jquery plugin. We will see the implementation steps below.

Step 1:
Include mcustomscrollbar CSS file in head section as below.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" />

Step 2:

Inlcude Jquery library and mcustomscrollbar JS files in head section.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

Step 3:

Call the following function with proper selector name.


(function($){
        $(window).load(function(){
            $(".scroll-section").mCustomScrollbar();
        });
 })(jQuery);

Note: “.scroll-section” is the class name of content section which we have to trigger the custom scroll.

Continue Reading

Show one popover at a time and hide other popovers

Show one popover at a time

We have implemented popovers on a web page by using webuipopover jquery pluign. When use clicked the first popover after that he wanted to click another popover without closing the first popover at that time both the popovers will open.

To overcome this issue we have to use following script.

Script:


$('.triggerpopover').webuiPopover();
$('.triggerpopover').on('click', function (e) {
  $('.triggerpopover').not(this).webuiPopover('hide');
});
Continue Reading