/*
html5doctor.com Reset Stylesheet
v1.2
2009-07-15
Author: Richard Clark - <a href="http://richclarkdesign.com" >http://richclarkdesign.com</a>
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video, source {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section, menu {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
ins {
background-color:#ff9;
text-decoration:none;
}
mark {
background-color:#ff9;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
Tag Archive for css
HTML5 CSS Reset
Fadeout DOM element
/**
* Set the opacity CSS for required element
*/
function setOpacity(elem,level) {
//if filters then IE
//use alpha opacity
if (elem.filters) {
elem.style.filter = 'alpha(opacity=' + level + ')';
} else {
//else use W3C opacity CSS
elem.style.opacity = level / 100;
}
}
/**
* Fade out the required element over time using CSS
*/
function fadeOut(elem) {
//20 frame animation
for ( var i = 0; i < 100; i += 5 ) {
//anonymous closure makes sure correct i is used
//for each iteration
(function(){
//opacity is i
var opacity = i;
//animation
setTimeout(function(){
// Set the new opacity of the element
setOpacity( elem, 100 - opacity );
//completely hide the element at 95%
if ( opacity == 95 )
elem.style.display = 'none';
//for smooth animation change the timeout delay
//proportionately with opacity
}, ( i + 1 ) * 10 );
})();
}
}
//get id of element that closes element
var myElm = document.getElementById('myElement');
//close the element on click
myElm.onclick = function() {
fadeOut(document.getElementById('fadeOutElement'));
};
Three-Dimensional Box
<style>
.threed{
display: block;
background-color: black;
background: url(images/top_right.gif) no-repeat top right;
content: url(images/top_left.gif);
}
css in-line font style
.my-style {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
color:#363636;
}
Float bug fix in div to expand
HTML:
<div class="container">
<div class="inner_div">
blablabla <br> blablabla <br> blablabla<br>
</div>
</div>
CSS:
.container{width:300px;background:red;}
.inner_div{float:left;width:200px;font:12px arial;}
Just add
.container{overflow:hidden;}
override inline styles
/* override inline styles */
span[style]{
color: inherit !important;
font-size: inherit !important;
}
Category: Uncategorized |
Tags: css
Fixed Background Image ‘Trick’
<style type="text/css">
body { padding:0; margin:0; background:#fff; }
.content {
padding:10px 20px 10px 200px;
border-bottom:1px solid #666;
background-color: trasnsparent;
background-repeat: no-repeat;
background-position: 20px 20px;
background-attachment: fixed;
}
.green {
background-image: url(images/circle_green.gif);
}
.yellow {
background-image: url(images/circle_yellow.gif);
}
.red {
background-image: url(images/circle_red.gif);
}
.purple {
background-image: url(images/circle_purple.gif);
}
.blue {
background-image: url(images/circle_blue.gif);
}
.content p {
font:normal 12px/18px verdana;
color:#000;
}
</style>
</head>
<body>
<div class="content green">
</div>
<div class="content blue">
</div>
<div class="content yellow">
</div>
<div class="content purple">
</div>
<div class="content red">
</div>
My additional CSS markup as standard for wordpress
/* Default spacing for items floating left or right */
img.alignleft {margin:10px 10px 10px 0;}
img.alignright {margin:10px 0px 10px 10;}
.clear {clear:both;}
img {border:solid 1px #ccc}
Required CSS for wordpress
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}
ie only style sheet
Here is the basic technique for an IE-Only stylesheet: <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-only.css" /> <![endif]--> The opposite technique, targeting only NON-IE browsers: <!--[if !IE]> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <![endif]--> If you need to get down and dirty with specific versions of IE, here are a few examples. IE 7 ONLY: <!--[if IE 7]> <link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css"> <![endif]--> IE 6 ONLY: <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" /> <![endif]--> IE 5 ONLY: <!--[if IE 5]> <link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" /> <![endif]--> IE 5.5 ONLY: <!--[if IE 5.5000]> <link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" /> <![endif]--> VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy) <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" /> <![endif]-->