CSS3

Ebben a cikkben találod meg hogyan tudsz több CSS 3 tulajdonságot egy dobozra alkalmazni, példák:

Doboz árnyék, Szöveg árnyék, Lekerekített sarkok, Többszínű keret, mindez csak CSS kóddal!

Doboz árnyék, Szöveg árnyék, Lekerekített sarkok, Többszínű keret, mindez csak CSS kóddal!

Lekerekített sarkok, Többszínű keret, mindez csak CSS kóddal!

Doboz árnyék, Szöveg árnyék, Lekerekített sarkok, Többszínű keret, mindez csak CSS kóddal!

border:12px solid #000000; -moz-border-bottom-colors: #FF0000 #FF9933 #FF9933 #FFFF00 #FFFF00 #22BB22 #22BB22 #1122FF #1122FF #8B00FF/* CSS by srmark */;-moz-border-left-colors: #FF0000 #FF9933 #FF9933 #FFFF00 #FFFF00 #22BB22 #22BB22 #1122FF #1122FF #8B00FF;-moz-border-right-colors: #FF0000 #FF9933 #FF9933 #FFFF00 #FFFF00 #22BB22 #22BB22 #1122FF #1122FF #8B00FF;-moz-border-top-colors: #FF0000 #FF9933 #FF9933 #FFFF00 #FFFF00 #22BB22 #22BB22 #1122FF #1122FF #8B00FF;-moz-box-shadow: 0px 0px 5px #FF0000, 0px 0px 8px #FF0000, inset 0px 0px 5px #8B00FF, inset 0px 0px 8px #8B00FF;-moz-border-radius:30px 100px 30px 100px / 30px 60px 30px 60px;text-shadow:0 0 3px #333333, 2px 2px 5px #8B00FF, 4px 4px 5px #8B00FF/* CSS by srmark */;

border: 10px solid rgb(0, 0, 0); -moz-border-bottom-colors: #000000 #000000 #FFFFFF #FFFFFF #000000 #000000 #FFFFFF #FFFFFF #FF0000 #FF0000/* CSS by srmark */;-moz-border-left-colors: #000000 #000000 #FFFFFF #FFFFFF #000000 #000000 #FFFFFF #FFFFFF #FF0000 #FF0000;-moz-border-right-colors: #000000 #000000 #FFFFFF #FFFFFF #000000 #000000 #FFFFFF #FFFFFF #FF0000 #FF0000;-moz-border-top-colors: #000000 #000000 #FFFFFF #FFFFFF #000000 #000000 #FFFFFF #FFFFFF #FF0000 #FF0000;-moz-box-shadow: inset 0px 0px 20px #FF0000, inset 0px 0px 60px #FF7722, 0px 0px 5px #000000, 0px 0px 8px #000000, 12px 12px 25px #000000;-moz-border-radius: 15px;text-shadow: 1px 1px 1px #000000, 2px 2px 5px #552200, 5px 5px 10px #FF3300/* CSS by srmark */;

border: 3px solid rgb(0, 0, 0); -moz-border-bottom-colors: #000000 #FFFFFF #000000/* CSS by srmark */;-moz-border-left-colors: #000000 #FFFFFF #000000;-moz-border-right-colors: #000000 #FFFFFF #000000;-moz-border-top-colors: #000000 #FFFFFF #000000;-moz-box-shadow: inset 0px 0px 3px #000000, 0px 0px 3px #000000;-moz-border-radius: 0px;text-shadow: 2px 2px 2px #000000/* CSS by srmark */;

border: 4px solid rgb(0, 0, 0); -moz-border-bottom-colors: #0022EE #FFFFFF #FFFFFF #0022EE;-moz-border-left-colors: #0022EE #FFFFFF #FFFFFF #0022EE;-moz-border-right-colors: #0022EE #FFFFFF #FFFFFF #0022EE/* CSS by srmark */;-moz-border-top-colors: #0022EE #FFFFFF #FFFFFF #0022EE;-moz-box-shadow: inset 0px 0px 3px #0022EE, 0px 0px 3px #0022EE;-moz-border-radius: 0px 100px 0px 100px;text-shadow: 2px 2px 2px #000000/* CSS by srmark */;

border: 10px solid rgb(0, 0, 0); -moz-border-bottom-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22;-moz-border-left-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22/* CSS by srmark */;-moz-border-right-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22;-moz-border-top-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22;-moz-box-shadow:0 0 15px #FF0000, 0 0 15px #009900 inset !important;-moz-border-radius: 30px;text-shadow: 0px 0px 3px #22BB22, 0px 0px 5px #22BB22/* CSS by srmark */;

border-top: 10px solid #000000;border-left: 10px solid #000000;border-right: 10px solid #000000;border-bottom: 10px solid #000000;-moz-border-top-colors: #000000 #000000 #000000 #FF8833 #FF8833 #FF8833 #FF8833 #000000 #000000 #000000;-moz-border-left-colors: #FF8833 #FF8833 #FF8833 #000000 #000000 #000000 #000000 #FF8833 #FF8833 #FF8833/* CSS by srmark */;-moz-border-right-colors: #FF8833 #FF8833 #FF8833 #000000 #000000 #000000 #000000 #FF8833 #FF8833 #FF8833;-moz-border-bottom-colors: #000000 #000000 #000000 #FF8833 #FF8833 #FF8833 #FF8833 #000000 #000000 #000000;text-shadow:0 0 3px #333333, 2px 2px 5px #000000, 4px 4px 5px #000000/* CSS by srmark */;

border-top: 10px solid #000000;border-left: 1px solid transparent;border-right: 1px solid transparent/* CSS by srmark */;border-bottom: 10px solid #000000;-moz-border-top-colors: #000000 #000000 #000000 #FF8833 #FF8833 #FF8833 #FF8833 #000000 #000000 #000000;-moz-border-left-colors: transparent;-moz-border-right-colors: transparent;-moz-border-bottom-colors: #FF8833 #FF8833 #FF8833 #000000 #000000 #000000 #000000 #FF8833 #FF8833 #FF8833;-moz-border-radius: 50px/* CSS by srmark */;

border-top: 1px solid #000000;border-left: 12px solid transparent;border-right: 12px solid transparent/* CSS by srmark */;border-bottom: 1px solid #000000;-moz-border-top-colors: transparent;-moz-border-left-colors: #FF0000 #FF0000 #FF9933 #FF9933 #FFFF00 #FFFF00 #22BB22 #22BB22 #1122FF #1122FF #8B00FF #8B00FF;-moz-border-right-colors: #FF0000 #FF0000 #FF9933 #FF9933 #FFFF00 #FFFF00 #22BB22 #22BB22 #1122FF #1122FF #8B00FF #8B00FF;-moz-border-bottom-colors: transparent;-moz-border-radius: 50px/* CSS by srmark */;

border: 0px; font-size: 16px; padding: 20px; text-align: center; margin: 20px/* CSS by srmark */;-moz-box-shadow: inset 0px 0px 80px #000000, inset 0px 0px 30px #000000, 0px 0px 5px #000000, 0px 0px 8px #000000;-moz-border-radius: 25px;text-shadow: 2px 2px 2px #000000/* CSS by srmark */;

border-top: 1px solid #000000;border-left: 32px solid transparent;border-right: 32px solid transparent;border-bottom: 1px solid #000000;-moz-border-top-colors: transparent/* CSS by srmark */;-moz-border-left-colors: #FFF #EEE #DDD #CCC #BBB #AAA #999 #888 #777 #666 #555 #444 #333 #222 #111 #000 #000 #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA #BBB #CCC #DDD #EEE #FFF;-moz-border-right-colors: #FFF #EEE #DDD #CCC #BBB #AAA #999 #888 #777 #666 #555 #444 #333 #222 #111 #000 #000 #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA #BBB #CCC #DDD #EEE #FFF;-moz-border-bottom-colors: transparent;-moz-border-radius: 50px/* CSS by srmark */;

<div id="boxocska"></div>
<style type="text/css" rel="stylesheet">
div#boxocska {
border: 10px solid rgb(0, 0, 0); color: #006600 !important; font-size: 16px; padding: 20px; text-align: center; margin: 20px;
-moz-border-bottom-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22;
-moz-border-left-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22/* CSS by srmark */;
-moz-border-right-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22;
-moz-border-top-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22;
-moz-box-shadow:0 0 15px #FF0000, 0 0 15px #009900 inset !important;
-moz-border-radius: 30px;
text-shadow: 0px 0px 3px #22BB22, 0px 0px 5px #22BB22;}
div#boxocska:hover {
border: 10px solid rgb(0, 0, 0); color: #665500 !important; font-size: 16px; padding: 20px; text-align: center; margin: 20px;
-moz-border-bottom-colors: #000000 #000000 #000000 #DC0000 #DC0000 #DC0000 #DC0000 #FDCF00 #FDCF00 #FDCF00;
-moz-border-left-colors: #000000 #000000 #000000 #DC0000 #DC0000 #DC0000 #DC0000 #FDCF00 #FDCF00 #FDCF00;
-moz-border-right-colors: #000000 #000000 #000000 #DC0000 #DC0000 #DC0000 #DC0000 #FDCF00 #FDCF00 #FDCF00;
-moz-border-top-colors: #000000 #000000 #000000 #DC0000 #DC0000 #DC0000 #DC0000 #FDCF00 #FDCF00 #FDCF00;
-moz-box-shadow: 0 0 6px #000000, 0 0 10px #000000, 0 0 15px #DDCC00 inset !important/* CSS by srmark */;
-moz-border-radius: 30px;
text-shadow: 0px 0px 3px #DDCC00, 0px 0px 5px #DDCC00;}
</style>

border: 10px solid rgb(0, 0, 0); -moz-border-top-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22;-moz-border-left-colors: #FF0000 #FF0000 #FF0000 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #22BB22 #22BB22 #22BB22/* CSS by srmark */;-moz-border-right-colors: #000000 #000000 #000000 #DC0000 #DC0000 #DC0000 #DC0000 #FDCF00 #FDCF00 #FDCF00;-moz-border-bottom-colors:#000000 #000000 #000000 #DC0000 #DC0000 #DC0000 #DC0000 #FDCF00 #FDCF00 #FDCF00;-moz-border-radius: 30px/* CSS by srmark */;