filter: sepia(1); – 78% browser support CSS filter effects can be used to apply effects like blur, grayscale, brightness, contrast and hue. I remember a few years ago I was asked to create a blur effect as an element that overlays the page content. CSS was no help as none of the browsers supported blur. […]
Articles Tagged: Look & Feel
CSS Protips
A collection of tips to help take your CSS skills pro. Use :not() to Apply/Unapply Borders on Navigation Add Line-Height to body Vertically-Center Anything Comma-Separated Lists Select Items Using Negative nth-child Use SVG for Icons Use the “Lobotomized Owl” Selector Use max-height for Pure CSS Sliders Inherit box-sizing Equal Width Table Cells Get Rid of […]
CSS Refresher Notes
Table of Contents Positioning Display Floats CSS Selectors Selector efficiency Repaints and Reflows CSS3 Properties CSS3 Media queries Responsive Web Design CSS3 Transitions CSS Animations Scalable Vector Graphics (SVG) CSS Sprites Vertical Alignment Known Issues Positioning CSS Position allows up to 5 different values. But essentially only 4 values are commonly used. div { position: […]
Multiple Backgrounds
Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this: #box { background: url(icon.png) top left no-repeat, url(texture.jpg), url(top-edge.png) top left repeat-y; } They are comma separated values and there can be as many as you want with different URL’s, positioning, and repeat values. You can even […]
Flip an Image
img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: “FlipH”; }
“Stitched” Look
.stitched { padding: 20px; margin: 10px; background: #ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px dashed #fff; border-radius: 10px; box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); text-shadow: -1px -1px #aa3030; font-weight: normal; }
Another Way to Change the “Howdy” message to “Welcome”
/*************************************************************** * Change Howdy to Welcome ***************************************************************/ function change_howdy($translated, $text, $domain) { if (!is_admin() || ‘default’ != $domain) return $translated; if (false !== strpos($translated, ‘Howdy’)) return str_replace(‘Howdy’, ‘Welcome’, $translated); return $translated; add_filter(‘gettext’, ‘change_howdy’, 10, 3);
Changing “Posts” menu name in admin (e.g. “Articles”)
// hook the translation filters add_filter(‘gettext’,’change_post_to_article’); add_filter(‘ngettext’,’change_post_to_article’); function change_post_to_article( $translated ) { $translated = str_ireplace(‘Post’,’Article’,$translated );// ireplace is PHP5 only return $translated; } Credits to smashingmagazine.com
Remove WordPress Admin Bar Menu Items
function dashboard_tweaks() { global $wp_admin_bar; $wp_admin_bar->remove_menu(‘wp-logo’); $wp_admin_bar->remove_menu(‘about’); $wp_admin_bar->remove_menu(‘wporg’); $wp_admin_bar->remove_menu(‘documentation’); $wp_admin_bar->remove_menu(‘support-forums’); $wp_admin_bar->remove_menu(‘feedback’); $wp_admin_bar->remove_menu(‘view-site’); } add_action( ‘wp_before_admin_bar_render’, ‘dashboard_tweaks’ ); Reference: http://pastebin.com/Wrk0JPxw
Easy to use & embed iFrame Shortcode
function GenerateIframe( $atts ) { extract( shortcode_atts( array( ‘href’ => ‘http://the-url’, ‘height’ => ‘550px’, ‘width’ => ‘600px’, ), $atts ) ); return ‘<iframe src=”‘.$href.'” width=”‘.$width.'” height=”‘.$height.'”> <p>Your Browser does not support Iframes.</p></iframe>’; } add_shortcode(‘iframe’, ‘GenerateIframe’); // how to use: [iframe href=”http://www.exmaple.com” height=”480″ width=”640″]