April 16 2018

CSS and Jquery Android click Ripple effect look like

Tagged Under : , ,

Below are showing example Android click Ripple effect with CSS3 and Jquery.
Below was 2 example:
Example 1
Example 2

July 27 2016

Bootstrap glyphicons checkbox

Tagged Under : ,

Because the default HTML chekcbox look not nice, So i decided use Boostrap Glyphicons as the checkbox and also it got provide checked and uncheck glyphicons.

Glyphicons check and uncheck icon:

June 19 2016

Javascript convert MSAccess color code to Hex color code

Tagged Under : ,

Because CSS not support MSAccess color code. If want use the MSAccess color code as color display on web. We need change the code to Hexadecimal Code.

April 09 2016

CSS last float left full width

Tagged Under :

I think some of the people facing some problem with me. How to set last float left to 100 percent or full width in div.

At below, I provide some example how to solve the problem. It not prefect, but work for me.

The example i give is 3 div in 1 row.

October 22 2015

CSS set opacity background color only not text and image

Tagged Under :

To set the opacity level for a <div> element as the below example:
div {
    opacity: 0.5;
But the following example will let the content inside the <div> become transparent as well.

Instead of using “opacity” to set transparent background-color. You can try using “rgba” function as below.
background-color: rgba(255, 0, 0, 0.5);
Now, only the background is transparent.

October 17 2015

CSS removing dotted outline when click link

Tagged Under :

A links <a> by default have a dotted outline around them when user click it, and it will be a gray color around on it.This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active.
To remove the dotted outline, just include this as a part of your CSS
a:link, a:hover, a:active, a:focus {
  outline: 0;

June 08 2015

IOS css radius courners and glare on inputs

Tagged Under :

Inside the iOS devices have add some annoying styles on form input, particularly on input box and submit button. Below are the simple form on Desktop and iOS browser.



To fixed the border radius and gradient on IOS safari browser issue.
You can get rid of the webkits form, input, etc. styling with this:
input, textarea, select {
   -webkit-appearance: none;

May 19 2015

css div 100% height

Tagged Under :

A lot of people are trying to set div to 100% inside the CSS to fill up the full height of browser window. But normally it wouldn’t work.

In here, I will showing you how to set 100% full height div with CSS. Inside the CSS class remember set html and body element to height 100%.
html, body {
  height: 100%;
After that, set the div CSS class to height 100% which you want it full height.
div.content {
  height: 100%;
And the HTML code will look like this
    <div class="content">
      100% full height

Click here to see the DEMO.

January 11 2015

Custom HTML Upload Button with CSS

Tagged Under :

To change the HTML Upload Button css we need to create a new label for it. and then hide the current upload button.

The label is use for to let the user upload the file. But you still need to prepare the upload button inside your code. But it already hidden in interface.

<label for="uploadBtn">Choose File...</label>
<input type="file" id="uploadBtn">
<span id="filename"></span>
But before that, please make sure the label for name must same with the upload button id. So when the user click the label, it will pop up to select the file.

Below is the DEMO to show how it work:
Custom HTML Upload Button with CSS

October 16 2014

CSS notification class boxes

Tagged Under :

Web application normally need 4 type of notification. They are ERROR, SUCCESS, WARNING and NOTICE notification. Those type CSS notification class always can reuse in others application as well. You are allow keep the CSS notification class and images inside a folder for next time using it.
css notification
Below is the DEMO CSS Notification class, you can download the css class and images from the url.
DEMO CSS Notification Boxes