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
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />Posted in HTML | 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
The jQuery
$(document).ready(function() {
//Initially hide all the expandable content with class name "content"
$(".content").hide();
//Toggle the component when parent class "heading" is clicked on
$(".heading").click(function() {
var header = $(this);
//Toggle the arrow image based on whether the content <p> is expanded or not
header.children('#arrow').toggleClass('plus_sign minus_sign');
//Expand or collapse the content <p> with slide mode animation
header.next(".content").slideToggle(500);
});
});The CSS
* {
margin: 0;
padding: 0;
background: transparent;
}
.layer {
width: 460px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
background-color: #fafafa;
}
.heading {
margin-top: 2px;
color: #fff;
padding: 5px 10px;
background: #B72A31;
}
.content {
padding: 10px;
}
h1 {
padding: 0 5px;
display: inline-block;
vertical-align: middle;
font-size: 1.2em;
}
.arrow {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
.plus_sign {
background-image: url('images/plus_icon.png');
}
.minus_sign{
background-image: url('images/minus_icon.png');
}The markup
<div class="heading">
<div id="arrow" class="arrow plus_sign"></div>
<h1>A Statement</h1>
</div>
<p class="content">The result of this aesthetic way of working is the original Artisan: Primarius'city bike. This bike combines classic shapes with modern design: A visual masterpiece con-taining DNA of authenticity, agility, finesse and crafts-manship. Primarius' Artisan proves that along with the perfection of the industrial revolution, we have also lost something substantial: authenticity.
</p>Posted in jQuery | No Comments »
Monday, December 15th, 2014
<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar 1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
register_sidebar(array(
'name' => 'footer sidebar 1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}?>Posted in WordPress | 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
$image = get_field('case_tile_image');
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />Posted in HTML, PHP, WordPress | No Comments »
Saturday, December 13th, 2014
$exclude = get_cat_ID('News');
$q = 'cat=-'.$exclude; query_posts($q);Posted in PHP, WordPress | 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 »