Monday, February 23rd, 2015
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>Tags: CSS, Google, HTML, Maps, Responsive
Posted in CSS, HTML | No Comments »
Tuesday, December 23rd, 2014
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
}
}Posted in CSS, HTML | No Comments »
Wednesday, December 17th, 2014
iframe {
width: 100%;
height: 56.25vw; /* 100 * (9/16) */
}Posted in CSS | No Comments »
Monday, December 15th, 2014
@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 */ {
}Posted in CSS | No Comments »
Monday, December 15th, 2014
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; }Posted in CSS | No Comments »
Saturday, December 13th, 2014
//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; } Posted in CSS, PHP, WordPress | No Comments »
Saturday, December 13th, 2014
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; } }Posted in CSS | No Comments »