Forked from Wifeo's Pen css christmas animation.
A Pen by Captain Anonymous on CodePen.
Forked from Wifeo's Pen css christmas animation.
A Pen by Captain Anonymous on CodePen.
MwxpLd | |
------ | |
Forked from [Andor Nagy](http://codepen.io/andornagy/)'s Pen [waOwZv](http://codepen.io/andornagy/pen/waOwZv/). | |
A [Pen](http://codepen.io/texxs/pen/MwxpLd) by [Texx Smith](http://codepen.io/texxs) on [CodePen](http://codepen.io/). | |
[License](http://codepen.io/texxs/pen/MwxpLd/license). |
/* | |
Theme Name: Child Theme Name | |
Description: Use this theme so the main theme can be updated without overwriting customizations. | |
Version: 1.1 | |
Author: Texx Smith | |
Author URI: http://texxsmith.com/ | |
Template: OriginalThemeFolderName | |
*/ | |
@import url("../OriginalThemeFolderName/style.css"); |
$(function() { | |
// Cache the Window object | |
var $window = $(window); | |
// Parallax Backgrounds | |
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 | |
$('section[data-type="background"]').each(function(){ | |
var $bgobj = $(this); // assigning the object |
if(function_exists("register_field_group")) | |
{ | |
register_field_group(array ( | |
'id' => 'acf_local-video-page-options', | |
'title' => 'Local Video Page Options', | |
'fields' => array ( | |
array ( | |
'key' => 'field_577830c13dfc0', | |
'label' => 'Video Choice', | |
'name' => 'video_choice', |
#border-image-style { | |
border-width:15px; | |
/* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */ | |
-moz-border-image:url(border.png) 30 30 stretch ; | |
-webkit-border-image:url(border.png) 30 30 stretch; | |
} |
h1 { | |
text-indent:-9999px; | |
margin:0 auto; | |
width:400px; | |
height:100px; | |
background:transparent url("images/logo.jpg") no-repeat scroll; | |
} | |
In the HTML doc you put the keyphrase you want to pimp inside the h1 html tag where you want the logo displayed (be sure the h1 tag is inside a container that positions it or it won't be visible) and only the logo will display, not the text (it will be off screen to the left about 9999 pixels. |
// First one . . . sooo fancy: | |
hr { | |
border: 0; | |
height: 1px; | |
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); | |
background-color: #7DD181; | |
width: 90%; | |
margin-left: auto; | |
margin-right: auto; |
// Meant for use on a body but you can use it on any element where a background color is appropriate | |
background-color: #960816; | |
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, #B7420B 35px, #B7420B 70px); | |
/* | |
note this background can be glitchy on pages where the content doesn't fill the screen. | |
On those page consider a gradient or a solid color background or even a tradional background image. | |
*/ | |