|
CSSSyntax
Personal notes for CSS
CSS TIPSEx. http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/
body {
font-size : 62.5%;
marging : 1em; /* = 10px */
}
img.center {
margin: 0 auto;
display: block; /*--Since IMG is an inline element--*/
}
h1.verticalCenter {
font-size: 3em;
height: 100px;
line-height: 100px;
}
.verticalHorizontalCenteredBox {
width: 600px; /*--Specify Width--*/
height: 300px; /*--Specify Height--*/
position: absolute; /*--Set positioning to absolute--*/
top: 50%; /*--Set top coordinate to 50%--*/
left: 50%; /*--Set left coordinate to 50%--*/
margin: -150px 0 0 -300px; /*--Set negative top/left margin--*/
}
ul.product_checklist {
list-style: none; /*--Takes out the default bullets--*/
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /*--Adds padding around each item--*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*--Adds a bullet icon as a background image--*/
}
h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}
________________________________________________________________________
-moz-box-shadow: inset 1px 1px 10px #888;
-moz-box-shadow: 0px 20px 10px -10px #888;
-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);
-moz-box-shadow: 1px 1px 10px #00f;
-webkit-box-shadow: 1px 1px 10px #00f;
box-shadow: 1px 1px 10px #00f;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
text-shadow:#1395B8 1px 1px 3px;
________________________________________________________________________
/***** Selector Hacks ******/
/* IE 6 and below */
* html #uno { color: red }
/* IE 7 and below */
*:first-child+html #dos { color: red }
/* IE 7 and modern browsers */
html>body #tres { color: red }
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** Attribute Hacks ******/
/* ie6 and below */
#once { _color:blue }
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
________________________________________________________________________
IE BG PNG TRANSPARENCY
/* HACK png transparent sur IE en background */
background-image:url(../images/common/h_contenu2.png) !important;
background-image:url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='images/common/h_contenu2.png');
background-repeat:no-repeat;
________________________________________________________________________
a.warning {
cursor:url(.././themes/original/img/error.ico), default;
}
#q, .tc input[type=text] { width:540px; }
<q><a href="http://www.wikipedia.org/wiki/Wiki"><span class="tool">Wikipedia!
<span class="tip">Wikipedia! on Wiki<br/>http://www.wikipedia.org/wiki/Wiki</span></span></a></q>
/* css/tooltip.css -- fancy tooltips */
span.tool {
position: relative; /* this is key */
cursor: help;
}
span.tool span.tip {
display: none; /* so is this */
}
/* tooltip will display on :hover event */
span.tool:hover span.tip {
display: block;
z-index: 100;
position: absolute;
top: 2.5em;
left: 0;
width: auto;
line-height: 1.2em;
padding: 3px 7px 4px 6px;
border: 1px solid #336;
background-color: #f7f7ee;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
text-align: left;
}
#content span.tool::after {
padding-left: 2px; /* eye candy */
content: url(/img/bubble.gif);
}
________________________________________________________________________
.noprint {
display : none;
}
* {
background-color: white !important;
background-image: none !important;
}
p a:link, p a:active, p a:visited, p a:hover {
color : #36EA00;
text-decoration:underline;
}
p a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 80%;
}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
}
/* Neutralize styling: Elements we want to clean out entirely: */
html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
/* Neutralize styling: Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
/* Apply left margin: Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}
/* Miscellaneous conveniences: */
form label {
cursor: pointer;
}
fieldset {
border: none;
}
/* Form field text-scaling */
input, select, textarea {
font-size: 100%;
}
________________________________________________________________________
.clipInHalf {
position: absolute;
clip: rect(15 350 195 50);
top: 0px;
left: 0px;
}
<fieldset>
<legend>TIPS</legend>
table { background-color:#FFF; border: 1px solid #3366FF; border-collapse: separate; }
th { background-color:#3366FF; color:#FFCC66; }
tr:hover>td { background-color:#B9CFFF; }
________________________________________________________________________
position:relative is very important. The children of this <div> are absolutely positioned.
Absolutely positioned elements are positioned relative to the nearest positioned ancestor.
Since we want them to be positioned relative to the diagram itself, we have to make it positioned.
By setting position:relative without specifying an offset, it will become positioned without being moved.
content: "Your browser supports content"
q { quotes: '"' '"' }
[quotes] specifies what form the quotes of the open-quote and close-quote values of the content property should take. Not supported by IE.
orphans: <integer>
widows: <integer>
These two properties are used primarily in paged media to control line breaks by specifying the number of lines in a paragraph that should be left at the top (widows) or bottom (orphans) of a page.
About.com
table-layout: (auto | fixed)
According to Quackit.com The CSS table-layout property allows you to fix the table layout so that the table renders much faster
________________________________________________________________________
.pullquote {
width: 20%;
float:right;
font-size:125%;
line-height:140%;
margin:10px;
background: url(closequote.gif) no-repeat bottom right !important;
background /**/:url(); /* removing quote graphic in IE5+ */
padding:0px 25px 5px 0px;
}
.pullquote:first-letter {
background: url(openquote.gif) no-repeat left top !important;
padding:5px 2px 10px 35px!important;
padding /**/:0px; /* resetting padding in IE5+ */
background /**/: url(); /* removing quote graphic in IE5+ */
}
<blockquote class="pullquote">The most impressive thing about read em!</blockquote>
________________________________________________________________________
/* The CSS that's required to position the footer */
body {
margin:0px;
padding:0px;
width:100%;
height:100%;
text-align:center;
}
#header, #content {
margin-left: auto;
margin-right: auto;
width: 888px;
text-align:left;
}
html {
height: 100%;
}
body {
height: 100%;
}
#nonFooter {
position: relative;
min-height: 100%;
}
* html #nonFooter {
height: 100%;
}
#footer {
position: relative;
margin: -7.5em auto 0 auto;
}
/* A CSS hack that only applies to IE -- specifies a different height for the footer */
* html #footer {
margin-top: -7.4em;
}
<div id="page">
<div id="nonFooter"> Page </div>
</div>
<div id="footer"> TOTO </div>
________________________________________________________________________
Shadow Image
.img-shadow {
clear: both;
float:left;
background: url(/d/cssdropshadows/img/shadowAlpha.png) no-repeat bottom right !important;
background: url(/d/cssdropshadows/img/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
width: 154px;
height: 203px;
}
.p-shadow {
clear: both;
width: 90%;
float:left;
background: url(/d/cssdropshadows/img/shadowAlpha.png) no-repeat bottom right !important;
background: url(/d/cssdropshadows/img/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.p-shadow div {
background: none !important;
background: url(/d/cssdropshadows/img/shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
<div class="p-shadow"><div><p style="font-size: 1.3em;">The rain in Spain falls mainly on the plain.</p></div></div>
<br style="clear:both;" />
/////
.dropshadow2{
float:left;
clear:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
width: 500px;
padding: 0px;
}
.innerbox{
position:relative;
bottom:6px;
right: 6px;
border: 1px solid #999999;
padding:4px;
margin: 0px 0px 0px 0px;
}
.innerbox{
/* IE5 hack */
\margin: 0px 0px -3px 0px;
ma\rgin: 0px 0px 0px 0px;
}
.innerbox p{
font-size:14px;
margin: 3px;
}
<div class="dropshadow2">
<div class="innerbox">
<h4>Test 2</h4>
<p>This has two wrapping div's. one for the shadow, and one for the border.</p>
</div>
</div>
________________________________________________________________________
ROund BOX
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>
<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
STARTING ./STYLES.CSS
@charset "utf-8";
/* CSS Document */
body {
background:#FFFFFF;
color:#4C4C4C;
font-family: Arial, Verdana, Sans-Serif;
font-size:62.5%;
margin:0;
padding:0;
text-align:center;
}
/* ---------------------------- STRUCTURE ---------------------------- */
#page {
border:1px solid #000;
margin:20px auto;
padding:0;
width:978px;
position:relative;
}
#page_int {
margin:0;
padding:12px;
text-align:left;
background:#E6E6E6;
}
#page_interieur {
background:#FFFFFF;
min-height:978px;
}
#header {
margin:0;
padding:0;
}
#content {
font-size:1.2em;
margin:14px 14px 0 14px;
}
#maincontent {
float:left;
height:inherit;
width:614px;
}
#navigation {
float:right;
width:300px;
}
#footer {
background:url(../images/images/bb.png) no-repeat bottom;
border:none;
clear:both;
height:63px;
margin:0;
padding:0;
width:962px;
}
/* ---------------------------- POLICES ---------------------------- */
h1, h2, h3, h4 {
color:#CCC;
font-weight:bold;
margin:0;
padding:0;
}
h1 {
font-size:18px;
text-transform:uppercase;
}
h2 { font-size:16px; }
h3 { font-size:14px; }
h4 { font-size:1em; font-weight:normal; }
hr {
border:none;
border-top:1px solid #CCC;
height:0;
margin:0 0 5px 0;
padding:0;
}
cite, blockquote {
font-style: italic;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
margin:0;
padding:0;
}
blockquote {
margin:10px 0;
}
p {
margin:0;
padding:0;
font-size:1.1em;
text-align:justify;
}
a, a:visited, a:active {
color:#333333;
text-decoration:none;
}
a:hover {
color:#999999;
}
.auteur {
font-size:0.9em;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing:-1px;
}
/* ---------------------------- DEFAULT FOR SOME TAGS ---------------------------- */
a img {
border:none;
}
a img.bor, .bor {
border:1px solid #E4E4E4;
}
img.right {
display:inline;
margin:0 0 2px 7px;
padding:4px;
float:right;
}
img.left {
display:inline;
margin:0 7px 2px 0;
padding:4px;
float:left;
}
img.miniature_liste {
float:left;
}
/* ---------------------------- LISTES ---------------------------- */
ul, blockquote {
margin:Opx;
padding:0;
}
li {
list-style-position:inside;
margin:0 0 0 10px;
}
ul.site {
margin:0;
padding:0;
}
ul.site li {
display:block;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
ul.site li a {
border:1px solid #E4E4E4;
display:block;
height:65px;
margin:2px;
overflow:hidden;
text-indent:-9999px;
width:80px;
}
/* ---------------------------- UTILITIES 1 ---------------------------- */
.centered {
display:block;
margin-left:auto;
margin-right:auto;
}
.center {
text-align:center;
}
.right {
float:right;
}
.left {
float:left;
}
.middle {
vertical-align:middle;
}
.clear {
clear:both;
display:block;
width:100%;
height:0;
}
.breaker {
clear:both;
display:block;
height:0;
}
.spacer {
clear:both;
display:block;
height:14px;
}
.spacermini {
display:block;
height:6px;
}
.zoomIn {
cursor:url(../images/zoomin.cur), pointer;
}
.zoomOut {
cursor:url(../images/zoomout.cur), pointer;
}
.marg10 {
margin:10px;
}
.pad10 {
padding:10px;
}
/* ---------------------------- FORMULAIRE ---------------------------- */
form {
display:inline;
margin:0;
padding:0;
}
label {
cursor:pointer;
margin:0 10px 3px 0;
}
input, textarea, select, .inputStyle {
background-color:#FFF;
border:1px solid #999999;
color:#333333;
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
margin:0;
padding:2px;
}
fieldset {
border:1px dashed #FFCE00;
margin:0;
padding:6px;
}
input {
height:16px;
vertical-align:bottom;
}
select {
height:18px;
margin-bottom:-1px;
margin-top:1px;
vertical-align:bottom;
width:auto;
}
textarea, select {}
input.file {
height:20px;
}
input.recherche {
background:#FFF url(../images/nav/rech.png) no-repeat left;
padding-left:20px;
}
input.button, a.button {
background-color:#EBFDE5;
border:1px solid #999999;
color:#999999;
cursor:pointer;
font-size:1em;
font-weight:bold;
letter-spacing:1px;
line-height:5px;
margin:0;
padding:2px 6px;
vertical-align:middle;
}
a:hover.button {
background-color:#FFF;
}
.divMiniForm input.radio, .divMiniForm input.checkbox, input.radio, input.checkbox {
background:none;
border:none;
color:#00AAEA;
height:14px;
margin:0;
padding:0;
width:14px;
}
form input.input_error, form textarea.area_error, form select.select_error {
border:1px solid #996600;
}
.divError {
display:inline;
padding-left:10px;
vertical-align:bottom;
line-height:1em;
}
.form_error_ico {
vertical-align:bottom;
cursor:help;
}
http://code.google.com/p/molokoloco-coding-project/source/browse/trunk/SITE_01_SRC/css/styles.css |
Sign in to add a comment
