User talk:Rogerhc/common.css
Below CSS is for reference. This is just a talk page; so none of this does anything here.
Gradients
editbody.page-Main_Page_New #bodyContent {
margin-left:-20px;
width:104%;
background:gray;
background-color: gray; /*fallback*/
background-image: -webkit-linear-gradient(left, black, #1B4157 80%, #6B9BB6);
background-image: -moz-linear-gradient(left, black, #1B4157 80%, #6B9BB6); /*Fx3.6-15*/
background-image: -ms-linear-gradient(left, black, #1B4157 80%, #6B9BB6); /*IE10*/
background-image: -o-linear-gradient(left, black, #1B4157 80%, #6B9BB6); /*Op11.1-12.0*/
background-image: linear-gradient(to right, black, #1B4157 80%, #6B9BB6); /*Standard;last*/
}
TOC
edit/* TOC indicate line wraps (outdent and enlarge first letter of each item) */
table.toc li {
margin-left:1em;
}
table.toc li:first-letter {
margin-left:-0.5em;
font-size:1.2em;
}
text-shadow
edit.banner-box {
text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em;
}
box-shadow
edit.someclass {
box-shadow: 2px 2px 5px #9EBDC7;
}
opacity
editValue is a number from 0.0 (transparent) to 1 (opaque).
Effects the whole element it is assigned to and all descendants.
.someclass {
opacity: 0.5;
}
To make a transparent background, maybe (a) use a PNG with desired transparency as a background image, or (b) position a non-descendant element over a transparent element.
snip
edit/* See http://www.w3.org/TR/css3-mediaqueries/#syntax */
@media (min-width: 400px) and (max-width: 499px) {
img[alt="Walt Disney World"] {
color:red; width:200px;
}
}
@media (min-width: 500px) and (max-width: 599px) {
img[alt="Walt Disney World"] {
color:green; width:300px;
}
}
@media (min-width: 600px) and (max-width: 699px) {
img[alt="Walt Disney World"] {
color:orange; width:400px;
}
}
@media (min-width: 700px) and (max-width: 799px) {
img[alt="Walt Disney World"] {
color:blue; width:500px;
}
}
/* Sort of fix wandering bullets alongside TOC */
/* ul,ol{list-style-position:inside;} */
/* <table id="toc" class="toc" */
#toctitle h2:before {
content: "Roger's Groovy TOC ";
}
#toc,
#toctitle,
#toctitle h2 {
display:inline;
float:none;
width:100%;
color:red;
}
.toc {
display:inline;
float:none;
width:100%;
}
.toclevel-1,
table.toc,
table.toc tr,
table.toc tr td,
table.toc tr td ul,
table.toc tr td ul li,
toclevel-1 {
display:inline;
float:none;
width:100%;
color:orange;
}