Images with srcset

How srcset works

First implementation of srcset only lets us define a set of images for different pixel densities using resolution modifiers.

simply add the srcset attribute to an img element and at least one resolution modifier. The browser then display the most appropriate image from the available options. For example, the 2x modifier  targets the image to use if the display has a pixel density of 2 or higher.

<img src="hello.jpg" srcset="hello-2x.jpg 2x" />

Consclusion

Undoubtedly, srscet has a long way to go, but it's pressing forward in the right direction and helping us solve a problem. Overall, this will be a more intelligent way to serve our content images.

A future implementation of srcset will alloy us to load images based on the viewport size: 

<img src="hello.jpg" srcset="hello-2x.jpg 720w, hello-3x 1280w" />

Accordian using checkbox

HTML

<div class="schools_accordian">
<ul>
<li class="block">
<input type="checkbox" name="item" id="item1" />   
<label for="item1">Friends</label>
<ul class="options">
<li><a href="#">Find New Friends</a></li>
<li><a href="#">Poke A Friend</a></li>
<li><a href="#">Incinerate Existing Friends</a></li>
</ul>
</li>

<li class="block">
<input type="checkbox" name="item" id="item3" />   
<label for="item3">Galleries</label>
<ul class="options">
<li><a href="#">My Deviant Art</a></li>
            <li><a href="#">My Deviant Art</a></li>
            <li><a href="#">My Deviant Art</a></li>
</ul>
</li>
</ul>

</div>


CSS


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.schools_accordian{
    width: 100%;
}
ul {
list-style:none;
margin:0; 
padding:0;
width:100%;
margin:0 auto;

}

ul li label {
background: #575e63; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #33373d;
color: #fff;
text-shadow: 0 1px 1px #000;
letter-spacing: 0.09em;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575e63), to(#3f4347));
background: -webkit-linear-gradient(top, #575e63, #3f4347);
background: -moz-linear-gradient(top, #575e63, #3f4347);
background: -ms-linear-gradient(top, #575e63, #3f4347);
background: -o-linear-gradient(top, #575e63, #3f4347);
}

ul li input[type='checkbox'] {
display: none;
}

ul li label {
display:block;
padding:12px;
width:100%;
}

ul li label:hover {
background: #566f82; /* fallback colour */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566f82), to(#3e505e));
background: -webkit-linear-gradient(top, #566f82, #3e505e);
background: -moz-linear-gradient(top, #566f82, #3e505e);
background: -ms-linear-gradient(top, #566f82, #3e505e);
background: -o-linear-gradient(top, #566f82, #3e505e);
}

ul li input[type='checkbox']:checked ~ label {
background: #44c6eb; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #2799db;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#44c6eb), to(#2799db));
background: -webkit-linear-gradient(top, #44c6eb, #2799db);
background: -moz-linear-gradient(top, #44c6eb, #2799db);
background: -ms-linear-gradient(top, #44c6eb, #2799db);
background: -o-linear-gradient(top, #44c6eb, #2799db);
}

ul li input[type='checkbox']:checked ~ label span {
background: #2173a1; /* fallback colour */
border-top:1px solid #1b5f85;
border-bottom:1px solid #4cb1e4;
-moz-box-shadow: inset 0 0 5px #111;
-webkit-box-shadow: inset 0 0 5px #111;
box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
height: auto;
display:block;
min-height:40px;
max-height:400px;
}

ul ul {
background:#fff; margin:0; padding:0;
-moz-box-shadow: inset 0 2px 2px #b3b3b3;
-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
display:block;
padding:6px 12px;
color:#999;
text-decoration:none;
}

ul ul li a:hover {
color:#44c6eb;
}
ul ul li {
border-bottom:1px solid #ccc;
}

ul ul li:first-child {
padding-top:6px;
}

ul ul li:last-child {
padding-bottom:6px; border:0;
}

.options {
height: 0;
display: block;
overflow: hidden;

}


Live demo jsfiddle