Subbu in Design
Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties. ::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox...
WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this: input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
HTMl <div class=”inner-border”> Transparent Inside Border </div> CSS .inner-border { background: #000; color: #fff; margin: 50px; padding: 15px; position: relative; } .inner-border:before { border: 5px solid #000; content: “”; position: absolute; top: -10px; bottom:...
a { position: relative; padding-bottom: 6px; } a:hover::after{ content: “”; position: absolute; bottom: 2px; left: 0; height: 1px; width: 100%; background: #444; background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent)); background: -webkit-linear-gradient(left, transparent...
This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text. h1 { font-size: 72px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
This is like a replacement for PHP’s SCRIPT_NAME with JavaScript. location.href.split(‘/’).pop(); For example with this URL: http://css-tricks.com/examples/ScriptName/index.php This code: document.write( location.href.split(‘/’).pop() ); Would write to the page: “index.php” Reference URL
JavaScript is supported by the Camino, Firefox, Google Chrome, iCab, Internet Explorer, Konqueror, Netscape, OmniWeb, Opera, Safari and SeaMonkey Web browsers, and so almost everyone can use it. However, some people worry that JavaScript...
<script type=”text/javascript”> document.write(“Welcome, you have Javascript on.”) </script> <noscript>JavaScript is off. Please enable to view full site.</noscript>
This will find what the ID is of the top-most parent Page, in a nested child page. For example, this page you are literally looking at is nested under <?php if ($post->post_parent) { $ancestors=get_post_ancestors($post->ID);...
The post mockup was this: I coded up one way to do it which works, but isn’t quite perfect. I figured I’d post it here and you all could chime in with better ways...
$html = file_get_contents(‘http://www.example.com’); $dom = new DOMDocument(); @$dom->loadHTML($html); // grab all the on the page $xpath = new DOMXPath($dom); $hrefs = $xpath->evaluate(“/html/body//a”); for ($i = 0; $i < $hrefs->length; $i++) { $href = $hrefs->item($i);...
PHP CODE: function getMSIE6() { $userAgent = strtolower($_SERVER[“HTTP_USER_AGENT”]); if (ereg(“msie 6”, $userAgent) || ereg(“msie 5”, $userAgent)) { return true; } return false; }
It doesn’t have all the fancy callbacks and options, but hey, it makes things draggable (and with a specified handle optionally). (function($) { $.fn.drags = function(opt) { opt = $.extend({handle:””,cursor:”move”}, opt); if(opt.handle === “”)...
The HTTP_X_REQUESTED_WITH header is sent by all recent browsers that support AJAX requests. if ( !empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’ ) { # Ex. check the query and serve requested data
var news = 2; hidenews = “- Hide news archive”; shownews = “+ Show news archive”; $(“.archive”).html( shownews ); $(“.news:not(:lt(“+news+”))”).hide(); $(“.archive”).click(function (e) { e.preventDefault(); if ($(“.news:eq(“+news+”)”).is(“:hidden”)) { $(“.news:hidden”).show(); $(“.archive”).html( hidenews ); } else {...
It’s a quick read that that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a...
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
See the two commented lines below, that is where you can insert code for things to do when the user goes idle, and when the user comes back. Set the idle period on the...
CSS /*Language-specific*/ :lang(af) { quotes:’\201E’ ‘\201D’ ‘\201A’ ‘\2019′; } :lang(ak) { font-family:Lucida, “DejaVu Sans”, inherit; } :lang(ar) { font-family:Tahoma 12, Nazli, KacstOne, “DejaVu Sans”, inherit; } :lang(bg) { quotes:’\201E’ ‘\201C’ ‘\201A’ ‘\2018′; } :lang(bn)...
The .load() function fires when the element it’s called upon is fully loaded. It is commonly used on images, which may not be fully loaded when the JavaScript originally runs, and thus would return incorrect...
Firefox 2 html>/**/body .selector, x:-moz-any-link { color:lime; } Firefox 3 html>/**/body .selector, x:-moz-any-link, x:default { color:lime; } Any Firefox @-moz-document url-prefix() { .selector { color:lime; } }
WordPress has a built in function, the_meta(), for outputting all custom fields. But this function is limited in that it doesn’t always output all of them. For example, it misses custom fields added by...
One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in...
Right before the closing of the The Loop, insert this code: <?php if (($wp_query->current_post + 1) < ($wp_query->post_count)) { echo ‘<div>Post Divider</div>’; } ?> This will create a <div> you can style as a post divider....
I was playing with my new Nexus 7 (I really wanted to own a real Android device) and I noticed a neat little effect in the Google+ app that comes with it. As you...
From over 16,000 people surveyed, more than half (54%) say they “do some” when it comes toalt text for images that are important to content. The example provided did provide insight into the content and...
HTML <!– Yo, edit me! –> <!– This SVG will be encoded as a base64 –> <!– image for cross-browser compatibility –> <svg xmlns=’http://www.w3.org/2000/svg’ width=’70’ height=’70’> <rect width=’70’ height=’70’ fill=’#bbd817’/> <g transform=’rotate(45)’> <rect width=’99’...
POP has these cool hovers in the boxes that make up their homepage. The boxes have a white background by default, and as you hover over them a dark background slides up behind, the text...
It does look rather confusing at first. You can’t do bizarro inside-y rounded-ness like with CSS, that’s crazy talk. But then, if you just look at it as a normal rounded corner element sitting...
Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design...