Responsive website with Matchmedia

Media queries is a great tool, but we often got a problem on loading time and optimization. Often time our website load all the things – even when they don’t apply.

Scott Jehl, Paul Irish, Nicholas Zaka attempts to optimise the loading of CSS based on viewport size and other factors. By using matchMedia() polyfill, we can now test whether a CSS media type or media query applies. Check out Paul Rhayes how to’s, experiment and Christian Hielmann Demo.

Your CSS

.mq {
  -webkit-transition: width 0.001ms;
  -moz-transition: width 0.001ms;
  -o-transition: width 0.001ms;
  transition: width 0.001ms;
  width: 0;

Javascript Event Listener

mql = (function(doc, undefined){

  var bool,
      docElem  = doc.documentElement,
      refNode  = docElem.firstElementChild || docElem.firstChild,
      idCounter = 0;

  return function(q, cb) {

    var id = 'mql-' + idCounter++,
      callback = function() {
        cb({ matches: (div.offsetWidth == 42), media: q });
      div = doc.createElement('div');

    div.className = 'mq'; = "position:absolute;top:-100em"; = id;
    div.innerHTML = ' #'+id+' { width: 42px; }';

    div.addEventListener('webkitTransitionEnd', callback, false);
    div.addEventListener('transitionend', callback, false); //Firefox
    div.addEventListener('oTransitionEnd', callback, false); //Opera

    docElem.insertBefore(div, refNode);
    //don’t delete the div, we need to listen to events
    return {
      matches: div.offsetWidth == 42,
      media: q


Javascript on the page

$(function() {
  var $dynamic = $('.dynamic');
  mql('all and (max-width: 700px)', change);
  mql('all and (max-width: 500px)', change);
  mql('all and (min-width: 1200px)', change);

  function change(mql) {

' + + ' — ' + mql.matches + '

'); } });

How to create your own Jquery Modal

Basic modal need a simple and easy code, sometimes it’s more appropriate to create your own than a full featured modal or lightbox plugin. This are guide to have an Instant Modal or you can check out the result here »


<div id="question"><h1>Question???</h1></div>
<div class="contactdet">
<div class="contactformfooter">
<div id="close">Close</div>


#question {cursor:pointer;}
.contactdet{display:none; background:#aaa; width:100%; height:100%; 
position:fixed; top:0; z-index:99999;}
.contactformfooter {width:240px; height:240px; position:relative; margin:10% auto 0 auto; padding:20px; border:1px #000 solid; background:#fff;}
.contactformfooter p{padding-bottom:10px; line-height:20px; font-size:12px;}
#close {width:50px; height:50px; position:absolute; right:-25px; top:-25px; cursor:pointer; background:#333; color:#fff;}


jQuery( "#question" ).click(function() {

jQuery( "#close" ).click(function() {

CSS3 Filters

CSS3 Filters are a powerful tool that web authors can use to achieve interesting visual effects. Originated as part of the Scalable Vector Graphics (SVG) specification. Browser vendors such Mozilla, Chrome, Opera and IE added SVG capabilities. It now realized effectiveness and usefulness of filters when it became popular on Front End Developers and Designer. IE’s deprecated their own old CSS Filters to adopt the changes on CSS3 on their IE latest version.

CSS3 Filters, check the Compatibility and W3 Samples includes the following:

filter: blur(0px);
filter: brightness(1);
filter: contrast(1);
filter: url(0);
filter: drop-shadow(0);
filter: grayscale(0);
filter: hue-rotate(0deg);
filter: invert(0);
filter: opacity(1);
filter: sepia(0);
filter: saturate(1);
filter: custom(); – Check Here

Understanding the CSS Filters

Pure CSS Round Corner

Kihbord of CodeStuff.Com come up with HTML draw solution of nifty corner. This pure css round corner used a very simple technique, border and background properties of HTML tags to “draw” the round corners.


I have used this pure css round corner at the recent Free CSS Template – Free Church Website and it was easily applied without any effort. Check out his Round Corner Border without image tutorial.

Free Church Website

Build your church or ministry website with ease and at no cost. This free Church Web Site for Christian churches of any denomination who need a first class web site. Include an inner web-page template so you can create a web pages as many subjects you feel are necessary to help spread the good word and communicate with your congregation.
Highest Praise

Hills Ville

HillsVille are located in Carroll County in the beautiful and majestic Blue Ridge Mountains of Virginia.

Golden FLower

Southwestern Virginia is truly a four-season destination with the geography and climate to match every outdoor activity, adventure and sport, whether it’s of the high-adrenaline or laid-back variety. Many outdoor attractions offer hiking, cycling, fishing, hunting and camping. Explore state parks such as Claytor Lake, Fairy Stone, Grayson Highlands and New River Trail. In addition, visitors to Jefferson National Forest can enjoy birding, horseback riding, skiing and more.

Persona Digita Free CSS Template

The Digita Template of Persona Digita is gallery of free website template.

We are developing Digita Template to showcase easy to use and one stop download of CSS, WordPress and Joomla Templates (future project).

Aside on the converted html and functional template itself, we will includes the psd, fla’s, javascript, ajax script and other materials (fonts, slideshow and more) that you will need in creating your own website.