Subbu in Design
ul.box { position: relative; z-index: 1; /* prevent shadows falling behind containers with backgrounds */ overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.box li { position: relative; float: left; width: 250px; height:...
The issue is 1) custom fonts are awesome and we want to use them 2) custom fonts slow down our pages by being large additional resources. Dealing with this has been in the air...
Despite the super fun sounding name, magic numbers are a bad thing. It is an old school programming term for “unnamed numerical constant”. As in, just some number plunked into the code that is probably vital...
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; }
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”>
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)...
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; } }
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...
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...
The popular responsive websites has been going on for several months now, and a lot of websites are already responsive, or underway. You know what that means? Today I will teach you how to create...
Cross-browser way (extra markup) Just wrap the first character of the paragraph in a span, then target the span with CSS and style away. <p> <span class=”firstcharacter”>L</span> orem ipsum dolor sit amet, consectetur adipiscing...
HTML You can make them with a single div. It’s nice to have classes for each direction possibility. <div class=”arrow-up”></div> <div class=”arrow-down”></div> <div class=”arrow-left”></div> <div class=”arrow-right”></div> CSS The idea is a box with zero...
* { margin: 0; padding: 0; } #page{display:table;overflow:hidden;margin:0px auto;} *:first-child+html #page {position:relative;}/*ie7*/ * html #page{position:relative;}/*ie6*/ #content_container{display:table-cell;vertical-align: middle;} *:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/ * html #content_container{position:absolute;top:50%;}/*ie6*/ *:first-child+html #content{position:relative;top:-50%;}/*ie7*/ * html #content{position:relative;top:-50%;}/*ie6*/ html,body{height:100%;} #page{height:100%;width:465px;} HTML: <div id=”page”> <div id=”content_container”>...
hr { border : 0; height : 15px; background : url(hr.gif) 50% 0 no-repeat; margin : 1em 0; } For IE < 8 (use conditional stylesheets) hr { display : list-item; list-style : url(hr.gif)...
.transparent_class { /* IE 8 */ -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; }
li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; }
<div class=”wrapper”> <div class=”ribbon-wrapper-green”><div class=”ribbon-green”>NEWS</div></div> </div> .wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3);...
There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin,padding, border. But plenty of others as well: the offset and sizing of...
<body> <div id=”page-wrap”> <!– all websites HTML here –> </div> </body> #page-wrap { width: 800px; margin: 0 auto; }
Link to CSS files You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts. <head> <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans”> </head>...
a { display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; } a:hover { background-position: 0 -30px; } The set height and width ensure only a portion of the sprite.png graphic is shown. The...
Sticky footer on Google: Have a <div> with class=”wrapper” contain everything. After the wrapper </div>, place thepush div, then the footer div. * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height:...