HTML, CSS : Beautiful radio and checkboxes

Radio:

There are two ways you can put label on radios

  • Put for="id_of_your_radio" in the label tag
  • Put the radio inside of lable tag; no need of for attribute. It will be implicit
    • <label>
       <input id="sex-other" type="radio" name="sex" value="others" /> Other
      </label>
    • This technique is more cleaner, intuitive and maintainable from my perspective.

Our Target:

The basic idea is: we want to modify the label according to our design demands. But the later technique explained above has label as parent to input tag; CSS has limitation; we cannot select parent on the basis of child. In our case child (input) changes events and need to modify the label.

So going with the former technique

 

See here for More details

Advertisements

Ruby On Rails : Get auto-added browser prefixes for css, sass styles where required

Autoprefixer is a tool to parse CSS and add vendor prefixes to CSS rules using values from the Can I Use. This gem provides Ruby and Ruby on Rails integration with this JavaScript tool. Continue reading

Creating Revolving /Sliding images only CSS/HTML no jQuery/js

.wrapper{
 width: 100%;
 position: absolute;
 -webkit-animation: mymove 20s infinite;
 -moz-animation: mymove 20s infinite;
 animation: mymove 20s infinite;
 overflow: hidden;
 display: table;
 background-color: yellow;
}
@-webkit-keyframes mymove {
 0% {left: 0%;}
 25% {left: -100%;}
 75% {left: 100%;}
 100% {left: 0%;}
}
.rotating-image{
 width: 30%;
 height: 100px;
 border-radius: 5px;
 float: left;
 margin: 10px;
 background-position: cover;
}
#advert1{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/medium_DSCF1619.jpg)
}
#advert2{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/walnut-tree-worlington.jpg)
}
#advert3{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/bird1.jpg)
}
<body>
<div class="wrapper">
 <div class="rotating-image" id="advert1"></div>
 <div class="rotating-image" id="advert2"></div>
 <div class="rotating-image" id="advert3"></div>
</div>
</body>

The related pen code is in this link