Gyancode

A free library of HTML, CSS, JS

Search This Blog

Thursday 15 September 2016

Radio button css

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>awesome bootstrap checkbox demo</title>

<link rel="stylesheet" href="bootstrap.css"/>

<link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/>

<style>
.radio label {display: inline-block;position: relative; padding-left: 5px; }
.radio label::before {content: "";position: absolute; width: 17px;height: 17px;left: 0; margin-left: -20px;border: 1px solid #cccccc; border-radius: 50%; background-color: #fff;}
.radio label::after {display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #009C71; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); }
.radio input[type="radio"] { opacity: 0;   z-index: 1; }
.radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1);    transform: scale(1, 1); }
.radio.radio-inline { margin-top: 0; }
</style>

</head>

<body>





<div class="radio radio-info radio-inline">

<input type="radio" id="test" value="option1" name="radioInline" checked>

<label for="test"> Checked </label>

</div>

<div class="radio radio-inline">

<input type="radio" id="test2" value="option2" name="radioInline">

<label for="test2"> Test </label>

</div>

</body>

</html>

Clip Image

<style>
.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 300px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
.siteHeader{
    width:150px;
    height: 150px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -0px;
}
</style>
<div class="container">
  <img src="cooking3.jpg" width="400"/>
</div>
<div class="container">
  <img id="clip" src="cooking3.jpg" width="400"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<header class="siteHeader">
    <img src="taskbob/images/1.jpg" class="siteLogo" />
</header>

Friday 5 August 2016

Less & show button in jquery with toggle

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {       
         jQuery('#content').toggle('show');
         var text = jQuery("#hideshow").html();      
         if (String(text) == "Less") {
            jQuery("#hideshow").html("More");
         } else {
            jQuery("#hideshow").html("Less");
         }
    });
});
</script>
<a id='hideshow' class="more">More</a>
<div id='content' style='display:none;'>
Akshay check text
</div>

Saturday 23 July 2016

right side scroller color change

css here......
.mousescroll::-webkit-scrollbar {
    width: 7px;
}
.mousescroll::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 


    }
 
.mousescroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
div#chatlist {
    width: 50px;
    height: 140px;
}
div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}

html demo
<div id="chatlist" class="mousescroll">
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>