Category: CSS3

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”>

How to Internationalization Language 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)...

Simple CSS Hacks tips that Targeting Firefox

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; } }

How to create CSS Only Image Preloading

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...

How to create cool hovers in the boxes

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...

How to make a body border that was rounded inside

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...

How to get Drop Caps using CSS3?

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...

How to get triangle using CSS3?

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...

How to get Center DIV with Dynamic Height with CSS3?

* { 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”>...

Cross Browser Opacity set using CSS3

.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; }

Cross Browser Inline-Block using CSS3?

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; }

How to get stylish Corbon Ribbon using CSS3?

<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);...

Know more about the Lengths of CSS in simple steps

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...

Google Font API Basics using CSS3

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>...

How to make Basic Link Rollover as CSS Sprite?

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...

How do you get the footer to stay at the bottom of a Web page?

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:...

How to integrate WordPress template with CodeIgniter?

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...

How to show popup message using CSS and jQuery?

Here’s how  does it: This is the markup, initially hidden so we can fade it in: <div id=’message’ style=”display: none;”> <span>Hey, This is my Message.</span> <a href=”#” class=”close-notify”>X</a> </div> Here are the styles applied:...

Simple Auto-Playing Slideshow using CSS3

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...

How make Accessibility/SEO Friendly CSS Hiding code?

#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;  

How to Create a Flexible Folded Paper Effect With CSS3

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....

What is Responsive Design and Server Side Components?

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...

5 Useful CSS Tricks for Responsive Webpage Design

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...

iPhone Calling and Texting Links

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...