CSS Tooltips

You can create a lightweight CSS cross browser tooltip easily with a few lines of code. The HTML: 1 This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here. The CSS: 1 a.tooltip {position: relative} 2 a.tooltip span {display:none; padding:5px;... Continue Reading →

Advertisements

CSS Triangles and Other Shapes

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles... Continue Reading →

Image replacement technique

It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then... 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 ↑