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... Continue Reading →

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 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... Continue Reading →

Capital Letters with CSS

Drop Cap – Capital Letters with CSS 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%;... Continue Reading →

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: IEAny version of IElt IE versionVersions less than versionlte IE versionVersions less than or equal to versionIE versionOnly version versiongte IE versionVersions greater than or equal to versiongt IE versionVersions greater than versionversion is the... Continue Reading →

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

<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... Continue Reading →

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>

Create a website or blog at WordPress.com

Up ↑