Default Responsive CSS for Template

/*Responsive CSS*/
@viewport {
width: device-width;
zoom: 1;
}

img, video, canvas {
max-width: 100%;
}

figure {
height: 0;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
width: 100%;
}
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

@media all and (min-width: 768px) and (max-width: 1024px) {

}

@media all and (min-width: 480px) and (max-width: 768px) {

}

@media all and (min-width: 320px) and (max-width: 480px) {

}

@media all and (min-width: 240px) and (max-width: 320px) {

}

Text Blink

* Text Blink

<style>
#Blinker {
display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left;
}

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-moz-animation-play-state: paused;
}

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-webkit-animation-play-state: paused;
}

</style>

<div id=”Blinker” >Text to blink here</div>

Sprite Image

Beautiful Buttonaad-ban

button

The best practice is to combine all button states into one image and divide them out using CSS. This is because it:

  • reduces http requests resulting in faster transfers
  • prevents flickering effect caused by change of state by loading all states as one file

The CSS Code

Now that we’ve brought the different states into a single image we need to tell the browser what part of the image we want when necessary through CSS.

The static, initial state of the button is defined in CSS as follows:

a.button {
	background: url(../images/button.png) no-repeat 0 0;
	width: 186px;
	height: 52px;
	display: block;
	text-indent: -9999px;
}

The background image is positioned to the top and left with the width and height of the button being defined as to only show the top third of the sprite. The rest of the code is a simple image replacement technique on the <a> tag that has a class of ‘button’.

Hover State CSS

The hover state retains all properties and values with the exception of the background position as it’ll need to be pushed up to show the second part of the sprite as shown:

a.button:hover { background-position: 0 -52px; }

Changing the first value would result in the background image moving left and right along the X axis. Obviously we don’t want that so the image is moved upwards along the Y axis as a negative value of the height of the button itself. This moves the hover state of the sprite into view when the mouse hovers over the link.

Click State CSS

As you can probably guess the click state will basically be the same but moving the button up again as follows:

a.button:active { background-position: 0 -104px; }

aad-ban1

Various Link Techniques

aad-ban

 

  • Showing Hyperlink Cues with CSS- The CSS Guy shows us how to get the little icons next to hyperlinks that signify if that link will take you offsite, open a popup, or link to a file (as opposed to another html page). Here’s how to do it in a way that’s supported in IE7, Firefox, and Safari.
  • The ways to style visited Links- CSS offers various possibilities to make links more usable and preserve text readability at the same time. We need to differentiate visited and unvisited links, but we must keep text scannable and readable.
  • Link Thumbnail- Shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page.
  • Iconize Textlinks with CSS- If you’re looking for more icons to implement, Alex provides a nice start.

aad-ban1

Equal Height Technique

aad-ban1

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. So how can we make all columns appear to be the same height? Several techniques was introduced to solve this issue.

  • Faux Columns- The simple secret is to use a vertically tiled background image to create the illusion of colored columns.
  • Equal Height Columns – revisited- A method to make all columns appear to be the same height but without the need for faux column style background images.

Equal height boxes with CSS- The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells. The basic XHTML structure looks like this:

 <div class="equal">    <div class="row">    <div class="one"></div>    
<div class="two"></div>     <div class="three"></div>    </div>    </div>

Here is the CSS used to make this structure behave like a table:

 
    .equal {
            display:table;
    }
    .row {
            display:table-row;
    }
    .row div {
            display:table-cell;
    }

aad-ban

Capital Letters with CSS

Drop Cap – Capital Letters with CSS

css-techniques0009

CSS First Letter

CSS allows you to add a property :first-letter which as you can guess allows you to style the first letter of the element.

Therefore you can add this to all paragraph to create drop capitals on all paragraphs.

p:first-letter {
	display:block;
	float:left;
	font-family:Georgia;
	font-size: 310%;
	font-weight: bold;
	line-height: 90%;
	margin-right: 6px;
	margin-bottom:-2px;
	margin-top: 7px;
}

The syntax for conditional comments

The syntax for conditional comments is as follows:

Positive
<!--[if condition]> HTML <![endif]-->
Negative
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

condition is one of the following:

IE
Any version of IE
lt IE version
Versions less than version
lte IE version
Versions less than or equal to version
IE version
Only version version
gte IE version
Versions greater than or equal to version
gt IE version
Versions greater than version

version is the version of Internet Explorer, typically 5, 5.5, 6, or 7


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Test</title>
		<link href="all_browsers.css" rel="stylesheet" type="text/css">
		<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
		<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
	</head>
	<body>
		<p>Test</p>
	</body>
</html>

Chrome, Firefox, IE8, IE9 CSS Hack

Chrome Hack only


@media screen and (-webkit-min-device-pixel-ratio:0) {    
	.ar #form-wrapper {
		width: 330px;
	}      
}

Firefox Hack only

			
@-moz-document url-prefix() {       
	.submit_btn {
		padding-bottom: 5px;
	}
}

IE8 Hack


@media screen {
  	.item { 
		background: #000; 
	}
}

IE9 Hack


:root #nav li.last-page-item a {
	padding-right:8px\9;
}

coloe:red\9; hack works on IE9