ESEMPI CSS3
ESEMPIO 1
body {font-family: Helvetica, Arial, sans-serif; color: #665544; border: 2px solid red; padding: 20px;}
h1, h2, p {border: 2px solid blue; padding: 10px; line-height: 2em;}
i, a, a:hover, a:visited {color: #665544; border: 2px solid green; padding: 5px;}
ESEMPIO 2
body {font-family: arial; background-color: rgb(185,179,175);}
h1 {color: rgb(255,255,255);}
ESEMPIO 3
body {font-family: arial; background-color: rgb(185,179,175);}
h1 {color: rgb(255,255,255);}
ESEMPIO 4
* {font-family: Arial, Verdana, sans-serif;}
h1 {font-family: "Courier New", Courier, monospace;}
i {color: green;}
i {color: red;}
b {color: pink;}
p b {color: blue !important;}
p b {color: violet;}
p#intro {font-size: 100%;}
p {font-size: 75%;}
ESEMPIO 5
body {font-family: Arial, Verdana, sans-serif; color: #665544; padding: 10px;}
.page {border: 1px solid #665544; background-color: #efefef; padding: inherit;}
ESEMPIO 6
body {padding: 20px; font-family: Arial, Verdana, sans-serif;}
h1 {color: DarkCyan;}
h2 {color: #ee3e80;}
p {color: rgb(100,100,90);}
ESEMPIO 7
body {background-color: rgb(200,200,200); color: white; padding: 20px; font-family: Arial, Verdana, sans-serif;}
h1 {background-color: DarkCyan; padding: inherit;}
h2 {background-color: #ee3e80; padding: inherit;}
p {background-color: white; color: rgb(100,100,90); padding: inherit;}
ESEMPIO 8
div {width: 100px; height: 100px; margin: 40px; display: inline-block; background-color: #ee3e80;}
p {width: 100px; height: 100px; position: relative; top: 20px; left: 20px; margin: 20px;}
p.one {background-color: rgb(0,0,0); opacity: 0.5;}
p.two {background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);}
ESEMPIO 9
body {background-color: silver; color: white; padding: 20px; font-family: Arial, Verdana, sans-serif;}
h1 {background-color: #ffffff; background-color: hsla(0,100%,100%,0.5); color: #64645A; padding: inherit;}
p {padding: 5px; margin: 0px;}
p.zero {background-color: rgb(238,62,128);}
p.one {background-color: rgb(244,90,139);}
p.two {background-color: rgb(243,106,152);}
p.three {background-color: rgb(244,123,166);}
p.four {background-color: rgb(245,140,178);}
p.five {background-color: rgb(246,159,192);}
p.six {background-color: rgb(245,176,204);}
p.seven {background-color: rgb(0,187,136);}
p.eight {background-color: rgb(140,202,242);}
p.nine {background-color: rgb(114,193,240);}
p.ten {background-color: rgb(84,182,237);}
p.eleven {background-color: rgb(48,170,233);}
p.twelve {background-color: rgb(0,160,230);}
p.thirteen {background-color: rgb(0,149,226);}
p.fourteen {background-color: rgb(0,136,221);}
ESEMPIO 10
body {font-family: Georgia, Times, serif;}
h1, h2 {font-family: Arial, Verdana, sans-serif;}
.credits {font-family: "Courier New", Courier, monospace;}
ESEMPIO 11
body {font-family: Arial, Verdana, sans-serif; font-size: 12px;}
h1 {font-size: 30px;}
h2 {font-size: 60px;}
ESEMPIO 12
.credits {font-weight: bold;}
ESEMPIO 13
.credits {font-style: italic;}
ESEMPIO 14
h1 {text-transform: uppercase;}
h2 {text-transform: lowercase;}
.credits {text-transform: capitalize;}
ESEMPIO 15
.credits {text-decoration: underline;}
a {text-decoration: none;}
ESEMPIO 16
p {line-height: 50px;}
ESEMPIO 17
h1, h2 {text-transform: uppercase; letter-spacing: 10px;}
.credits {font-weight: bold; word-spacing: 20px;}
ESEMPIO 18
h1 {text-align: left;}
p {text-align: justify;}
.credits {text-align: right;}
ESEMPIO 19
#six-months {vertical-align: text-top;}
#one-year {vertical-align: middle;}
#two-years {vertical-align: text-bottom;}
ESEMPIO 20
p {font-size: 200%; padding: 20px; text-align: center;}
p.one {background-color: #eeeeee; color: #666666; text-shadow: 1px 1px 0px #000000;}
p.two {background-color: #dddddd; color: #666666; text-shadow: 1px 1px 3px #666666;}
p.three {background-color: #cccccc; color: #ffffff; text-shadow: 2px 2px 7px #111111;}
p.four {background-color: #bbbbbb; color: #cccccc; text-shadow: -1px -2px #666666;}
p.five {background-color: #aaaaaa; color: #ffffff; text-shadow: -1px -1px #666666;}
ESEMPIO 21
p.intro:first-letter {font-size: 200%;}
p.intro:first-line {font-weight: bold;}
ESEMPIO 22
a:link {color: deeppink; text-decoration: none;}
a:visited {color: black;}
a:hover {color: deeppink; text-decoration: underline;}
a:active {color: darkcyan;}
ESEMPIO 23
input {padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;}
input.submit:hover {background-color: #665544;}
input.submit:active {background-color: chocolate;}
input.text {color: #cccccc;}
input.text:focus {color:#665544;}
ESEMPIO 24
body {padding: 20px;}
h1, h2, h3, a {font-weight: normal; color: #0088dd; margin: 0px;}
h1 {font-family: Georgia, Times, serif; font-size: 250%; text-shadow: 2px 2px 3px #666666; padding-bottom: 10px;}
h2 {font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em;}
h3 {font-size: 150%;}
p {font-family: Arial, Verdana, sans-serif; line-height: 1.4em; color: #665544;}
p.intro:first-line {font-weight: bold;}
.credits {font-style: italic; text-align: right;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
ESEMPIO 25
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
div {width: 400px; height: 300px; background-color: #ee3e80;}
p {height: 75%; width: 75%; background-color: #e1ddda;}
ESEMPIO 26
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
th {border-bottom: 1px solid #0088dd; text-align: left; color: #0088dd; font-weight: normal;}
td {min-width: 150px; min-height: 200px; vertical-align: top; line-height: 1.4em;}
td.description {min-width: 450px; max-width: 650px; text-align: left; padding: 5px; margin: 0px;}
ESEMPIO 27
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
h2, p {width: 400px; font-size: 90%; line-height: 1.2em;}
h2 {color: #0088dd; border-bottom: 1px solid #0088dd;}
p {min-height: 10px; max-height: 30px;}
ESEMPIO 28
body {font-family: Arial, Verdana, sans-serif; color: #111111; font-size: 90%; line-height: 1.2em; width: 200px;}
h2 {color: #0088dd; border-bottom: 1px solid #0088dd;}
p {min-height: 30px; max-height: 85px;}
p.one {overflow: hidden;}
p.two {overflow: scroll;}
ESEMPIO 29
body {font-family: Arial, Verdana, sans-serif; color: #111111}
div {border: 2px solid #e7642c; width: 200px; margin: 10px; padding: 10px;}
h2, p {width: 200px; font-size: 80%; line-height: 1.4em;}
ESEMPIO 30
body {font-family: Arial, Verdana, sans-serif; color: #111111}
div {border: 2px solid #e7642c; width: 200px;}
h2, p {width: 200px; font-size: 80%; line-height: 1.4em;}
ESEMPIO 31
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
p {width: 200px; border-style: solid;}
p.one {border-width: 2px;}
p.two {border-width: thick;}
p.three {border-width: 1px 4px 12px 4px;}
ESEMPIO 32
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
p {width: 250px; border-width: 3px;}
p.one {border-style: solid;}
p.two {border-style: dotted;}
p.three {border-style: dashed;}
p.four {border-style: double;}
p.five {border-style: groove;}
p.six {border-style: ridge;}
p.seven {border-style: inset;}
p.eight {border-style: outset;}
ESEMPIO 33
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
p {border-style: solid; border-width: 3px; width: 200px;}
p.one {border-color: #0088dd;}
p.two {border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
ESEMPIO 34
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
p {width: 275px; border: 2px solid #0088dd;}
p.example {padding: 10px;}
ESEMPIO 35
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
p {width: 200px; border: 2px solid #0088dd; padding: 10px;}
p.example {margin: 20px;}
ESEMPIO 36
body {text-align: center;}
p {width: 300px; padding: 50px; border: 20px solid #0088dd;}
p.example {margin: 10px auto 10px auto; text-align: left;}
ESEMPIO 37
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
li {display: inline; margin-right: 10px;}
li.coming-soon {display: none;}
ESEMPIO 38
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
li {display: inline; margin-right: 10px;}
li.coming-soon {visibility: hidden;}
ESEMPIO 39
p {width: 197px; height: 54px; border: 11px solid #ffffff;}
p.one {-moz-border-image: url("images/dots.gif") 11 11 11 11 stretch; -webkit-border-image: url("images/dots.gif") 11 11 11 11 stretch; border-image: url("images/dots.gif") 11 11 11 11 stretch;}
p.two {-moz-border-image: url("images/dots.gif") 11 11 11 11 round; -webkit-border-image: url("images/dots.gif") 11 11 11 11 round; border-image: url("images/dots.gif") 11 11 11 11 round;}
ESEMPIO 40
p {width: 100px; height: 100px; background-color: #e1ddda; margin: 20px; display: inline-block;}
p.one {-moz-box-shadow: -5px -5px #777777; -webkit-box-shadow: -5px -5px #777777; box-shadow: -5px -5px #777777;}
p.two {-moz-box-shadow: 5px 5px 5px #777777; -webkit-box-shadow: 5px 5px 5px #777777; box-shadow: 5px 5px 5px #777777;}
p.three {-moz-box-shadow: 5px 5px 5px 5px #777777; -webkit-box-shadow: 5px 5px 5px 5px #777777; box-shadow: 5px 5px 5px 5px #777777;}
p.four {-moz-box-shadow: 0 0 10px #777777; -webkit-box-shadow: 0 0 10px #777777; box-shadow: 0 0 10px #777777;}
p.five {-moz-box-shadow: inset 0 0 10px #777777; -webkit-box-shadow: inset 0 0 10px #777777; box-shadow: inset 0 0 10px #777777;}
ESEMPIO 41
p {border: 5px solid #ee3e80; padding: 20px; width: 275px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
ESEMPIO 42
p {border: 5px solid #ee3e80; padding: 10px; width: 100px; height: 100px; display: inline-block; margin: 20px;}
p.one {border-top-left-radius: 80px 50px; -moz-border-radius-top-left: 80px 50px; -webkit-border-radius-top-left: 80px 50px;}
p.two {border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em; -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em; -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;}
p.three {padding: 0px; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;}
ESEMPIO 43
body {font-size: 80%; font-family: "Courier New", Courier, monospace; letter-spacing: 0.15em; background-color: #efefef;}
#page {max-width: 940px; min-width: 720px; margin: 10px auto 10px auto; padding: 20px; border: 4px double #000; background-color: #ffffff;}
#logo {width: 150px; margin: 10px auto 25px auto;}
ul {width: 570px; padding: 15px; margin: 0px auto 0px auto; border-top: 2px solid #000; border-bottom: 1px solid #000; text-align: center;}
li {display: inline; margin: 0px 3px;}
p {text-align: center; width: 600px; margin: 20px auto 20px auto; font-weight: normal;}
a {color: #000000; text-transform: uppercase; text-decoration: none; padding: 6px 18px 5px 18px;}
a:hover, a.on {color: #cc3333; background-color: #ffffff;}
ESEMPIO 44
ol {list-style-type: lower-roman;}
ESEMPIO 45
ul {list-style-image: url("images/star.png");}
li {margin: 10px 0px 0px 0px;}
ESEMPIO 46
ul {width: 250px;}
li {margin: 10px;}
ul.illuminations {list-style-position: outside;}
ul.season {list-style-position: inside;}
ESEMPIO 47
body {font-family: Arial, Verdana, sans-serif; color: #111111;}
table {width: 600px;}
th, td {padding: 7px 10px 10px 10px;}
th {text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; border-bottom: 2px solid #111111; border-top: 1px solid #999; text-align: left;}
tr.even {background-color: #efefef;}
tr:hover {background-color: #c3e6e5;}
.money {text-align: right;}
ESEMPIO 48
td {border: 1px solid #0088dd; padding: 15px;}
table.one {empty-cells: show;}
table.two {empty-cells: hide;}
ESEMPIO 49
td {background-color: #0088dd; padding: 15px; border: 2px solid #000000;}
table.one {border-spacing: 5px 15px;}
table.two {border-collapse: collapse;}
ESEMPIO 50
input {font-size: 120%; color: #5a5854; background-color: #f2f2f2; border: 1px solid #bdbdbd; border-radius: 5px; padding: 5px 5px 5px 30px; background-repeat: no-repeat; background-position: 8px 9px; display: block; margin-bottom: 10px;}
input:focus, input:hover {background-color: #ffffff; border: 1px solid #b1e1e4;}
input#email {background-image: url("images/email.png");}
input#twitter {background-image: url("images/twitter.png");}
input#web {background-image: url("images/web.png");}
ESEMPIO 51
input {font-size: 120%; color: #5a5854; background-color: #f2f2f2; border: 1px solid #bdbdbd; border-radius: 5px; padding: 5px 10px 5px 10px; background-repeat: no-repeat; background-position: 8px 9px; display: block; margin-bottom: 10px;}
input#submit {color: #444444; text-shadow: 0px 1px 1px #ffffff; border-bottom: 2px solid #b2b2b2; background-color: #b9e4e3; background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce)); background: -moz-linear-gradient(top, #beeae9, #a8cfce); background: -o-linear-gradient(top, #beeae9, #a8cfce); background: -ms-linear-gradient(top, #beeae9, #a8cfce);}
input#submit:hover {color: #333333; border: 1px solid #a4a4a4; border-top: 2px solid #b2b2b2; background-color: #a0dbc4; background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9)); background: -moz-linear-gradient(top, #a8cfce, #beeae9); background: -o-linear-gradient(top, #a8cfce, #beeae9); background: -ms-linear-gradient(top, #a8cfce, #beeae9);}
ESEMPIO 52
* {font-family: Arial, Verdana, sans-serif; color: #665544;}
input {border-bottom: 1px dotted #dcdcdc; border-top: none; border-right: none; border-left: none; padding: 5px; width: 280px; margin-bottom: 20px;}
input:focus {border: 1px dotted #dcdcdc; outline: none;}
input#submit {color: #ffffff; background-color: #665544; border: none; border-radius: 5px; width: 80px;}
input#submit:hover {color: #665544; background-color: #efefef;}
fieldset {width: 350px; border: 1px solid #dcdcdc; border-radius: 10px; padding: 20px; text-align: right;}
legend {background-color: #efefef; border: 1px solid #dcdcdc; border-radius: 10px; padding: 10px 20px; text-align: left; text-transform: uppercase;}
ESEMPIO 53
body {font-family: Arial, Verdana, sans-serif;}
ESEMPIO 54
body {font-family: Arial, Verdana, sans-serif;}
div {border-bottom: 1px solid #efefef; margin: 10px; padding-bottom: 10px; width: 260px;}
.title {float: left; width: 100px; text-align: right; padding-right: 10px;}
.radio-buttons label {float: none;}
.submit {text-align: right;}
ESEMPIO 55
a {cursor: move;}
ESEMPIO 56
body {font-family: Arial, Verdana, sans-serif; font-size: 90%; color: #666; background-color: #f8f8f8;}
li {list-style-image: url("images/icon-plus.png"); line-height: 1.6em;}
table {border-spacing: 0px;}
th, td {padding: 5px 30px 5px 10px; border-spacing: 0px; font-size: 90%; margin: 0px;}
th, td {text-align: left; background-color: #e0e9f0; border-top: 1px solid #f1f8fe; border-bottom: 1px solid #cbd2d8; border-right: 1px solid #cbd2d8;}
tr.head th {color: #fff; background-color: #90b4d6; border-bottom: 2px solid #547ca0; border-right: 1px solid #749abe; border-top: 1px solid #90b4d6; text-align: center; text-shadow: -1px -1px 1px #666666; letter-spacing: 0.15em;}
td {text-shadow: 1px 1px 1px #ffffff;}
tr.even td, tr.even th {background-color: #e8eff5;}
tr.head th:first-child {-webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px;}
tr.head th:last-child {-webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px;}
fieldset {width: 310px; margin-top: 20px; border: 1px solid #d6d6d6; background-color: #ffffff; line-height: 1.6em;}
legend {font-style: italic; color: #666666;}
input[type="text"] {width: 120px; border: 1px solid #d6d6d6; padding: 2px; outline: none;}
input[type="text"]:focus, input[type="text"]:hover {background-color: #d0e2f0; border: 1px solid #999999;}
input[type="submit"] {border: 1px solid #006633; background-color: #009966; color: #ffffff; border-radius: 5px; padding: 5px; margin-top: 10px;}
input[type="submit"]:hover {border: 1px solid #006633; background-color: #00CC33; color: #ffffff; cursor: pointer;}
.title {float: left; width: 160px; clear: left;}
.submit {width: 310px; text-align: right;}
ESEMPIO 57
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
h1 {background-color: #efefef; padding: 10px;}
p {width: 450px;}
ESEMPIO 58
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
p {width: 450px;}
p.example {position: relative; top: 10px; left: 100px;}
ESEMPIO 59
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
h1 {position: absolute; top: 0px; left: 500px; width: 250px;}
p {width: 450px;}
ESEMPIO 60
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
h1 {position: fixed; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; background-color: #efefef;}
p.example {margin-top: 100px;}
ESEMPIO 61
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
h1 {position: fixed; top: 0px; left: 0px; margin: 0px; padding: 10px; width: 100%; background-color: #efefef; z-index: 10;}
p {position: relative; top: 70px; left: 70px;}
ESEMPIO 62
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
h1 {position: fixed; top: 0px; left: 0px; margin: 0px; padding: 10px; width: 100%; background-color: #efefef;}
p {position: relative; top: 70px; left: 70px;}
ESEMPIO 63
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
blockquote {float: right; width: 275px; font-size: 130%; font-style: italic; font-family: Georgia, Times, serif; margin: 0px 0px 10px 10px; padding: 10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544;}
ESEMPIO 64
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
p {width: 230px; float: left; margin: 5px; padding: 5px; background-color: #efefef;}
ESEMPIO 65
body {width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}
p {width: 230px; float: left; margin: 5px; padding: 5px; background-color: #efefef;}
.clear {clear: left;}
ESEMPIO 66
body {width: 752px; font-family: Arial, Verdana, sans-serif; color: #665544;}
div {border: 1px solid #665544;}
p {width: 230px; float: left; margin: 10px;}
.clear {clear: both;}
ESEMPIO 67
body {width: 752px; font-family: Arial, Verdana, sans-serif; color: #665544;}
div {border: 1px solid #665544; overflow: auto; width: 100%;}
p {width: 230px; float: left; margin: 10px;}
.clear {clear: both;}
ESEMPIO 68
body {width: 960px; font-family: Arial, Verdana, sans-serif; color: #665544;}
.column1of2 {float: left; width: 620px; margin: 10px;}
.column2of2 {float: left; width: 300px; margin: 10px;}
ESEMPIO 69
body {width: 960px; font-family: Arial, Verdana, sans-serif; color: #665544;}
.column1of3, .column2of3, .column3of3 {width: 300px; float: left; margin: 10px;}
ESEMPIO 70
* {font-family: Arial, Verdana, sans-serif; color: #665544; text-align: center;}
body {width: 960px; margin: 0 auto;}
#content {overflow: auto; height: 100%;}
#nav, #feature, #footer {background-color: #efefef; padding: 10px; margin: 10px;}
.column1, .column2, .column3 {background-color: #efefef; width: 300px; float: left; margin: 10px;}
li {display: inline; padding: 5px;}
ESEMPIO 71
* {font-family: Arial, Verdana, sans-serif; color: #665544; text-align: center;}
body {width: 90%; margin: 0 auto;}
#content {overflow: auto;}
#nav, #feature, #footer {margin: 1%;}
.column1, .column2, .column3 {width: 31.3%; float: left; margin: 1%;}
.column3 {margin-right: 0%;}
li {display: inline; padding: 0.5em;}
#nav, #footer {background-color: #efefef; padding: 0.5em 0;}
#feature, .article {height: 10em; margin-bottom: 1em; background-color: #efefef;}
ESEMPIO 72
* {font-family: Arial, Verdana, sans-serif; color: #665544; text-align: center;}
#nav, #feature, .article, #footer {background-color: #efefef; margin-top: 20px; padding: 10px 0px 5px 0px;}
#feature, .article {height: 100px;}
li {display: inline; padding: 5px;}
ESEMPIO 73
@font-face {font-family: 'QuicksandBook'; src: url('fonts/Quicksand_Book-webfont.eot'); src: url('fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Quicksand_Book-webfont.woff') format('woff'), url('fonts/Quicksand_Book-webfont.ttf') format('truetype'),url('fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg'); font-weight: normal; font-style: normal;}
body {color: #ffffff; background: #413f3b url("images/bg.jpg"); font-family: Georgia, "Times New Roman", Times, serif; font-size: 90%; margin: 0px; text-align: center;}
a {color: #b5c1ad; text-decoration: none;}
a:hover {color: #ffffff;}
.header {background-image: url("images/bg-header.jpg"); padding: 0px 0px 0px 0px; height: 100px; position: fixed; top: 0px; width: 100%; z-index: 50;}
.nav {float: right; font-family: QuicksandBook, Helvetica, Arial, sans-serif; padding: 45px 0px 0px 0px; text-align: right;}
.wrapper {width: 960px; margin: 0px auto; background-image: url("images/bg-triangle.png"); background-repeat: no-repeat; background-position: 0px 0px; text-align: left;}
.logo {margin-bottom: 20px;}
h1, h2 {font-family: QuicksandBook, Helvetica, Arial, sans-serif; font-weight: normal; text-transform: uppercase;}
h1 {font-size: 240%; margin-top: 140px;}
.date {font-family: Arial, Helvetica, sans-serif; font-size: 75%; color: #b5c1ad;}
.intro {clear: left; font-size: 90%; line-height: 1.4em;}
.main-story {background-image: url("images/triangles.png"); background-repeat: no-repeat; background-position: 122px 142px; height: 570px;}
.more-articles {border-top: 1px solid #ffffff; padding: 10px;}
.more-articles p {border-bottom: 1px solid #807c72; padding: 5px 0px 15px 0px; font-size: 80%;}
.more-articles p:last-child {border-bottom: none;}
.footer {clear: both; background: rgba(0, 0, 0, 0.2); padding: 5px 10px;}
.footer p {font-family: Helvetica, Arial, sans-serif; font-size: 75%; text-align: right;}
.footer a {color: #807c72;}
ESEMPIO 74
img.large {width: 500px; height: 500px;}
img.medium {width: 250px; height: 250px;}
img.small {width: 100px; height: 100px;}
ESEMPIO 75
body {font-family: Georgia, "Times New Roman", serif; color: #665544;}
img.align-left {float: left; margin-right: 10px;}
img.align-right {float: right; margin-left: 10px;}
img.medium {width: 250px; height: 250px;}
ESEMPIO 76
body {font-family: Georgia, "Times New Roman", serif; color: #665544;}
img.align-center {display: block; margin: 0px auto;}
img.medium {width: 250px; height: 250px;}
ESEMPIO 77
body {background-image: url("images/pattern.gif"); color: white; padding: 20px;}
ESEMPIO 78
body {color: #665544; padding: 20px;}
p {background-image: url("images/pattern.gif"); color: white; padding: 20px;}
ESEMPIO 79
body {background-image: url("images/header.gif"); background-repeat: repeat-x; color: #665544; padding: 20px;}
h1 {color: white;}
ESEMPIO 80
body {background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-attachment: fixed; color: #665544; padding: 20px;}
ESEMPIO 81
body {background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-position: center top; color: #665544; padding: 20px;}
ESEMPIO 82
body {background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-position: 50% 50%; color: #665544; padding: 20px;}
ESEMPIO 83
a.button {height: 36px; background-image: url("images/button-sprite.jpg"); text-indent: -9999px; display: inline-block;}
a#add-to-basket {width: 174px; background-position: 0px 0px;}
a#framing-options {width: 210px; background-position: -175px 0px;}
a#add-to-basket:hover {background-position: 0px -40px;}
a#framing-options:hover {background-position: -175px -40px;}
a#add-to-basket:active {background-position: 0px -80px;}
a#framing-options:active {background-position: -175px -80px;}
ESEMPIO 84
#gradient {background-color: #66cccc; background-image: url("images/fallback-image.png"); background-image: -moz-linear-gradient(#336666, #66cccc); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to(#336666)); background-image: -webkit-linear-gradient(#336666, #66cccc); background-image: -o-linear-gradient(#336666, #66cccc); height: 150px; width: 300px;}
ESEMPIO 85
body {color: #665544; background-color: #d4d0c6; background-image: url("images/backdrop.gif"); font-family: Georgia, "Times New Roman", serif; text-align: center;}
.wrapper {width: 720px; margin: 0px auto;}
.header {margin: 40px 0px 20px 0px;}
.entry {width: 220px; float: left; margin: 10px; height: 198px; background-image: url("images/shadow.png"); background-repeat: no-repeat; background-position: bottom;}
figure {display: block; width: 202px; height: 170px; background-color: #e7e3d8; margin: 0; padding: 9px; text-align: left;}
figure img {width: 200px; height: 150px; border: 1px solid #d6d6d6;}
figcaption {background-image: url("images/icon.png"); padding-left: 20px; background-repeat: no-repeat;}