Skip to content

Instantly share code, notes, and snippets.

View texxs's full-sized avatar

Texx Smith texxs

View GitHub Profile
@texxs
texxs / css-christmas-animation.markdown
Created December 20, 2014 14:32
css christmas animation
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).
@texxs
texxs / style.css
Created December 10, 2015 19:00
Create New Child Theme in WordPress
/*
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");
@texxs
texxs / parallax-txs.js
Created April 14, 2016 15:12
JS for parallax effect. add data-type="background" and data-speed-"x" to any <section> that has a backgound image to make this work.
$(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;
}
@texxs
texxs / gist:10898cca8949fc5eb3a6479c86848568
Last active February 17, 2023 03:13
CSS - Logo And Text H1 Tag
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.
@texxs
texxs / ghostButton.css
Last active July 5, 2019 02:33
CSS Ghost Button by Texx
.ghost-button {
display: inline-block;
width: 200px; /* replace with left and right padding for bigger buttons */
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
@texxs
texxs / gist:729933c6c3671e4386ed787a9bb6051c
Created February 18, 2023 15:24
Fancy Lines and Horizontal Rule Examples
// 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;
@texxs
texxs / Striped-Background
Created February 19, 2023 01:03
Diagonal Striped Background
// 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.
*/