Rogers: Tips and Tricks for Alma Analytics Tips and Tricks ...
Css tips & tricks
-
Upload
anubavam-techkt -
Category
Education
-
view
2.140 -
download
1
description
Transcript of Css tips & tricks
Ramachandran G
CSS Tips & Tricks
#page {width: 960px; margin: 0 auto;}
Horizontal Centering
The above will center the div with an id of page inside it’s parent container.
The HTML:
<div id="container">some text here</div>
The CSS:
div#container {height: 35px; line-height: 35px}
Vertical Centering Text with Line-Height
If you want to vertically center text within a containing block who’s height is fixed, simply set the line-height of the text to be the same as the height of the containing block
Method 1
The HTML:
<div id="content">your content here</div>
The CSS:
div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}
Vertical Centering Block Elements
The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div.This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.
Method 2
The HTML :<div id="wrapper"> <div id="cell"> <div class="content"> Content goes here
</div> </div>
</div>
The CSS:#wrapper {display:table;} #cell {display:table-cell; vertical-align:middle;}
Vertical Centering Block Elements
This method sets some <div>s to display like a table, so we can use the table’s vertical-align property
div#button{background: #888; border: 1px solid; border-color: #999 #777 #777 #999 ;}
3D Buttons with CSS
The CSS above will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.
body { font: font-style font-variant font-weight font-size line-height font-family; }
Would look like this body{font: normal bold 14px 18px arial;}
CSS Font Shorthand
You don’t need to include every property, but know that for any you don’t include that property will be reset to it’s default.
div#content {width: 580px}*html body div#content {width: 600px}
IE7 specifically with*+html body div#content {width: 620px}
HTML Hack for IE
.element {min-height: 500pxheight: auto !importantheight: 500px}
min-height fix for IE
For IE6
.element {min-height: 500px_height: 500px}
Element, Pseudo Element d = 1 – (0,0,0,1)Class, Pseudo class, Attribute c = 1 – (0,0,1,0)Id b = 1 – (0,1,0,0)Inline Style: a = 1 – (1,0,0,0)
p: 1 element – (0,0,0,1)div: 1 element – (0,0,0,1)#sidebar: 1 id – (0,1,0,0)div#sidebar: 1 element, 1 id – (0,1,0,1)div#sidebar p: 2 elements, 1 id – (0,1,0,2)div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)
CSS Specificity
triangle {border-color: transparent transparent green
transparent;border-style: solid;border-width: 0px 300px 300px 300px;height: 0px;width: 0px;}
CSS Triangles and Other Shapes
.cirlce { width: 300px;height: 300px;background-color: red;border-radius: 150px;-moz-border-radius: 150px;-webkit-border-radius: 150px;}
Creating Circles With Border-Radius
Preventing:h1 { white-space:nowrap; }
Preventing & adding a Line Break
Sometimes the text in a link or heading will break where you don’t want it to
Adding:HTML:<p><span>hello></span><span>How are you</span></p>
CSS:p span { display: block;}
h1 {text-indent:-9999px;background:url("h1-image.jpg") no-repeat;width:200px;height:50px;}
Replace Text with an Image
a {outline: none} or a {outline: 0}
Remove Dotted Outline on Links
@font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf);}
header { font-family: 'LeagueGothic';}
Webfonts
div { text-overflow: ellipsis;}
Text wrapping
A long cold winter delayed the blossoming …
color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
Opacity
.multibg { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 0 center repeat-x;}
Multiple backgrounds
textarea{overflow:auto;}
Remove vertical textarea scollbar in IE
The HTML :<a href="#" class="tooltip">Tooltip<span> Extra info </span></a>
The CSS :
a:hover {background:#ffffff; /*BG color is a must for IE6*text-decoration:none;} a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
CSS Tooltips
a[href$='.doc'] {padding:0 20px 0 0;background:transparent url(/graphics/icons/doc.gif)no-repeat center rightright;}
a[href$='.pdf'] {padding:0 20px 0 0;background:transparent url(/graphics/icons/pdf.gif)no-repeat center rightright;}
Attribute-Specific Icons
.input{left: -1000px;position: absolute;}
.radioOff {background: url("off.gif") no-repeat scroll 0 50% transparent;color: #666666;display: inline;font: 0.8em/16px Verdana,Arial,Helvetica;margin: 0;padding: 2px 2px 2px 20px;
Radio Box & Checkbox Customisation
The HTML :<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitNulla elementum accumsan.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> </div>
The CSS:.columns {
-moz-column-count: 2; -webkit-column-count: 2; }
CSS Columns