Skip to content

Instantly share code, notes, and snippets.

@ramzesimus
ramzesimus / gist:3806165
Created September 30, 2012 07:31
HTML: Fluid columns
/* Fluid Columns */
.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:79.2%; }
@ramzesimus
ramzesimus / gist:3808207
Created September 30, 2012 19:21
CSS: Hide Text
.hide-text {
font: 0/0 a;
text-shadow: none;
color: transparent;
border: 0;
background:transparent;
}
@ramzesimus
ramzesimus / gist:3808280
Created September 30, 2012 19:50
CSS: CSS3 gradient
background: #eee; /* Old browsers */
background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
@ramzesimus
ramzesimus / gist:3808704
Created September 30, 2012 23:16
CSS: Micro Clearfix
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
@ramzesimus
ramzesimus / gist:3810391
Created October 1, 2012 08:48
JavaScript: Smart Divider
/* Footer Info Block */
function divider () {
jQuery('.info-block li').each(function(){
left_item_width = jQuery(this).find('.left-item').width();
item_width = jQuery(this).width() - left_item_width - jQuery(this).find('.right-item').width();
jQuery(this).find('.divider').css({'width': (item_width-4), 'left': (left_item_width+2)+'px'});
});
}
@ramzesimus
ramzesimus / gist:3812302
Created October 1, 2012 15:01
PHP: Plugin Implementing
// Run this code on 'after_theme_setup', when plugins have already been loaded.
add_action('after_setup_theme', 'my_load_plugin');
// This function loads the plugin.
function my_load_plugin() {
// Check to see if your plugin has already been loaded. This can be done in several
// ways - here are a few examples:
//
// Check for a class:
@ramzesimus
ramzesimus / gist:3859006
Created October 9, 2012 14:02
CSS: Font families
Arial, Helvetica, sans-serif
Verdana, Geneva, sans-serif
"Trebuchet MS", Arial, Helvetica, sans-serif
Georgia, "Times New Roman", Times, serif
"Courier New", Courier, monospace
Tahoma, Geneva, sans-serif
"Arial Black", Gadget, sans-serif
"Times New Roman", Times, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
@ramzesimus
ramzesimus / gist:3924168
Created October 20, 2012 17:40
CSS: Opacity Cross Browser
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
@ramzesimus
ramzesimus / gist:3931302
Created October 22, 2012 12:30
CSS: Greyscale Effect
filter: grayscale(100%);
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
@ramzesimus
ramzesimus / gist:3956244
Created October 26, 2012 00:04
CSS: Text Gradient + Text Shadow
.title {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9bc7e2), color-stop(100%, #9bc7e2));
background-image: -webkit-linear-gradient(#ffffff,#9bc7e2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
position: relative;
text-shadow: none;
}
.title:before {