CodeHQ

Responsive Google maps

The CSS

 .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

The HTML

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Clipping text using background-clip

Original article

The HTML

<h1 class="bgClip">Clip Text</h1>

The CSS

.bgClip {
    background:url('../images/clouds.jpg');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;

If you want to animate it

-webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
    @keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-ms-keyframes BackgroundAnimated {<     from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}

Instant fluid videos with viewport width units

Original article

iframe { 
    width: 100%; 
    height: 56.25vw; /* 100 * (9/16) */
}

Media query setup

@media (min-width: 1120px) /* Largest break-point */ {
	.pagewrap {
		width: 1120px;
	}
}
@media (max-width: 900px) /* Mid size break-point */ {
	
}
@media (max-width: 768px) /* Small break-point */ {
	.row [class*="col"] {
		float: none;
		margin-left: 0;
		width: 100%;
		margin-top: 10px;
	}
}
@media (max-width: 500px) /* Mobile break-point */ {

}

CSS dropdown menu

div#navigation{
    background: #444444; /* Old browsers */
    border-radius: 4px;
}
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
#navigation ul li{ float:left; position:relative; }
#navigation ul li a{
    display:block;
    padding:8px 12px;
    margin:1px;
    font-size:18px;
    white-space:nowrap;
    border-radius:3px;
}
#navigation ul li a:hover{ background:#222;}
#navigation ul ul{
    position:absolute;
    top:-99999px;
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497;
    background:#333;
    padding: 2px;
    border:1px solid #444;
    border-top:none;
    box-shadow:#111 0 3px 4px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
#navigation ul ul ul {
    position:absolute;
    top:-99999px;
    left:100%;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#333; }

WordPress pagination

//paste this where the pagination must appear

global $wp_query;
$total = $wp_query->max_num_pages;
// only bother with the rest if we have more than 1 page!
if ( $total > 1 )  {
     // get the current page
     if ( !$current_page = get_query_var('paged') )
          $current_page = 1;
     // structure of "format" depends on whether we're using pretty permalinks
     if( get_option('permalink_structure') ) {
	     $format = '&paged=%#%';
     } else {
	     $format = 'page/%#%/';
     }
     echo paginate_links(array(
          'base'     => get_pagenum_link(1) . '%_%',
          'format'   => $format,
          'current'  => $current_page,
          'total'    => $total,
          'mid_size' => 4,
          'type'     => 'list'
     ));
}

// CSS Code - add this to the style.css file
.navigation { list-style:none; font-size:12px; }
.navigation li{ display:inline; }
.navigation li a{ display:block; float:left; padding:4px 9px; margin-right:7px; border:1px solid #efefef; }
.navigation li span.current { display:block; float:left; padding:4px 9px; margin-right:7px; border:1px solid #efefef; background-color:#f5f5f5;  }	
.navigation li span.dots { display:block; float:left; padding:4px 9px; margin-right:7px;  }	

Border-box

Use this to make an element include padding in to it’s width/height.

@media screen {
  *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; } }