What is the iPad Orientation CSS code?
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
<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...
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”>...
.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...
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:...
First step is to move CodeIgniter and the WordPress files in their own directory. After that, put the following line at the top of your CodeIgniter’s index.php file. Change the path to wp-blog-header.php as needed to...
HTML Wrapper with div’s as the “slides”, which can contain any content. <div id=”slideshow”> <div> <img src=”http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg”> </div> <div> <img src=”http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg”> </div> <div> Pretty cool eh? This slide is proof the content can be...
#content { position: absolute; top: -9999px; left: -9999px; } Removes an item from the page, without affecting page flow or causing scrollbars. Much better than display: none; or even visibility: hidden;
In this tutorial we’ll learn to create a flexible (responsive) folded paper effect using CSS3 features like background gradients and box-shadows, which can give a cool-looking background to the content area of your website....
There’s no shortage of debate about the best way to develop Web sites that work well across many networked devices. Some teams favor a client-side approach while others lean towards server-side solutions. But I’m increasingly...
You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies. Me...
Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m...
I was watching some commercial the other day and they had these letters fly in over a black screen and reveal an image beneath them. It was a pretty cool looking effect and it...
This is the calling one (probably more useful if the clickable text is words, as the iPhone auto-detects phone numbers and does this automatically): <a href=”tel:1-408-555-5555″>1-408-555-5555</a> This is the SMS one, which overrides the...
An ever growing amount of data is being made freely available by popular web services like flickr, twitter, the guardian, and many more. We’ve collected a list of great examples of how such data...