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) {

}

Advertisements

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

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

All Browser CSS Hack

aad-ban

<style type=”text/css”>
.ie .example {background-color: yellow}
.ie7 .example {background-color: orange}
.gecko .example {background-color: gray}
.win.gecko .example {background-color: red}
.linux.gecko .example {background-color: pink}
.opera .example {background-color: green}
.konqueror .example {background-color: blue}
.webkit .example {background-color: black}
.example {width: 100px;height: 100px;}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

<script type=”text/javascript” charset=”utf-8″>

function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g=’gecko’,w=’webkit’,s=’safari’,o=’opera’,m=’mobile’,h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?(‘ie ie’+RegExp.$1):is(‘firefox/2′)?g+’ ff2′:is(‘firefox/3.5′)?g+’ ff3 ff3_5′:is(‘firefox/3.6′)?g+’ ff3 ff3_6′:is(‘firefox/3′)?g+’ ff3′:is(‘gecko/’)?g:is(‘opera’)?o+(/version\/(\d+)/.test(ua)?’ ‘+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?’ ‘+o+RegExp.$2:”)):is(‘konqueror’)?’konqueror’:is(‘blackberry’)?m+’ blackberry’:is(‘android’)?m+’ android’:is(‘chrome’)?w+’ chrome’:is(‘iron’)?w+’ iron’:is(‘applewebkit/’)?w+’ ‘+s+(/version\/(\d+)/.test(ua)?’ ‘+s+RegExp.$1:”):is(‘mozilla/’)?g:”,is(‘j2me’)?m+’ j2me’:is(‘iphone’)?m+’ iphone’:is(‘ipod’)?m+’ ipod’:is(‘ipad’)?m+’ ipad’:is(‘mac’)?’mac’:is(‘darwin’)?’mac’:is(‘webtv’)?’webtv’:is(‘win’)?’win’+(is(‘windows nt 6.0′)?’ vista’:”):is(‘freebsd’)?’freebsd’:(is(‘x11’)||is(‘linux’))?’linux’:”,’js’]; c = b.join(‘ ‘); h.className += ‘ ‘+c; return c;}; css_browser_selector(navigator.userAgent);
</script>

</head>

<body>

<div></div>
</body>

aad-ban1

iE Gives Particular – CSS

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<link href=”css/master.css” rel=”stylesheet” type=”text/css” />

<style type=”text/css”>
.ie .example {
background-color: yellow
}
.example {
width:100px;
height:100px;
background-color:#000000;
}
</style>

<!–[if IE ]>
<body>
<![endif]–>
<!–[if !IE]>–>
<body>
<!–<![endif]–>
</head>

<body>
<div>1</div>
</body>
</html>