Link Underlines Grow to Backgrounds on Hover

A reader recently emailed in asking if I knew a way to have links be underlined, and then have the underline grow upwards on hover and turn into a background/highlight effect. I ended up trying three different things, with varying levels of success.
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Form Submission Opens New Tab/Window

You probably knew that you could force a link into opening a new tab or window with the target=”_blank” attribute (deprecated, but universally still supported).

<a href="#" target="_blank">link</a>

But you can use the same exact attribute on forms to get …

Avatar of Chris Coyier
Chris Coyier on

Error-Free Console Logging

var Fb = {}; //An empty object literal for holding the function
Fb.log = function(obj, consoleMethod) {
       if (window.console && window.console.firebug && window.console.firebug.replace(/^\s\s*/, '').replace(/\s\s*$/, '') !== '') {
               if (typeof consoleMethod === "string" && typeof console[consoleMethod] === "function") {
                       console[consoleMethod](obj);
               
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Remove Private/Protected from Post Titles

For the functions.php file in your theme:

function the_title_trim($title) {

	$title = attribute_escape($title);

	$findthese = array(
		'#Protected:#',
		'#Private:#'
	);

	$replacewith = array(
		'', // What to replace "Protected:" with
		'' // What to replace "Private:" with
	);

	$title = preg_replace($findthese, 
Avatar of Chris Coyier
Chris Coyier on

Free Template: DocTemplate

Totally free template for ya'll today. It is fully of AJAX navigation goodness, so subpages load dynamically with no page reload. If you don't like that part (for example, you are trying to put JavaScript demos on the subpages and they won't load that way) just remove the JavaScript files from the header and it will revert to regular nav. Enjoy!
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Remove Margins for First/Last Elements

It can sometimes be desirable to remove the top or left margin from the first element in a container. Likewise, the right or bottom margin from the last element in a container. You can do this by manually applying classes …

Avatar of Chris Coyier
Chris Coyier on

Temporary Maintenance using Mod_Rewrite

# Don't forget to turn on the rewrite engine
RewriteEngine on

# Maintenance Redirection
# Replace 555\.555\.555\.555 with your own IP address
# Uncomment first conditional to turn off the redirection
# RewriteCond %{REQUEST_URI} ^$a
RewriteCond %{REQUEST_URI} !maintenance.html
RewriteCond %{REQUEST_FILENAME} 
Avatar of Chris Coyier
Chris Coyier on

Designers These Days…

… have a good design sense and understand the fundamentals / design principals.
… know all the major design software including the entire Adobe Creative Suite.
… have some basic video editing skills.
… know HTML, CSS, and JavaScript.
… …

Avatar of Chris Coyier
Chris Coyier on