Többszínű keretek készítése

A CSS 3 használatával egy dobozra több pixel vastag különböző színű keretet is tehetsz, a kód a cikk folytatásában Különböző színű keretek egyetlen dobozra

Az alap kód: border: 5px solid #000000/* CSS by srmark */; -moz-border-top-colors: #EEE #DDD #CCC #BBB #BBB; -moz-border-left-colors: #EEE #DDD #CCC #BBB #BBB; -moz-border-right-colors: #EEE #DDD #CCC #BBB #BBB/* CSS by srmark */; -moz-border-bottom-colors: #EEE #DDD #CCC #BBB #BBB; Narancssárga: Ilyen vastag lesz a keret a dobozon Piros: A keret színkódjai Két féle színkód típust ajánlott használni, a 6 és 3 karakteres verziót, a 6 karakteres verzió talán a legismertebb a magazinban szinte csak ilyet találhatsz, példa: #FF0000 A 3 karakteres változat csak annyiban különbözik hogy rövidebb, a 6 karakteres kódot át tudjuk írni 3-asba hogyha kettesével ugyanaz a karakter van bennük, példák: #FFFFFF   -->   #FFF #FF0000   -->   #F00 #0000FF   -->   #00F #FFFF00   -->   #FF0 #336699   -->   #369 #AA22EE   -->   #A2E Akármelyik verziót használjuk az adott elem ugyanolyan színű lesz. A fenti kódban 4 sornyi piros színkódot láthatsz, ezek a doboz 4 oldalára külön-külön határozzák meg a keretet, az első sorban a doboz tetején levő keretet, a 2. a bal oldal, a 3. a jobb oldal, a 4. pedig a doboz alján levő keret. Ami még NAGYON FONTOS hogy a keret vastagságához kell igazítani azt hogy hány darab színkód van soronként, tehát a narancssárga részben megadott pixelvastagságnak kell egyeznie a színkódok számával egy sorban, példa: Ha a pixelvastagság 5px akkor egy sorban 5 darab színkódnak kell lennie: #EEE #DDD #CCC #BBB #BBB/* CSS by srmark */; Ha a pixelvastagság 7px akkor egy sorban 7 darab színkódnak kell lennie: #EEE #DDD #CCC #BBB #AAA #999 #888/* CSS by srmark */; Zöld rész: Ez a kód egyelőre csak Firefox 3.6-ban v annál újabb Firefox-ban működik, ezért meg kell adni hogy a többi böngésző milyen keretet adjon a doboznak, ezt kell megadni itt a zöld résznél, ami csak egy darab szín. A kód magyarázata mindössze ennyi, de hogy segítsek bemutatok pár kész példa kódot hogy milyen kereteket lehet csinálni és milyet érdemes: border: 15px solid #000/* CSS by srmark */; -moz-border-top-colors: #EEE #DDD #CCC #AAA #888 #666 #333 #000 #333 #666 #888 #AAA #CCC #DDD #EEE; -moz-border-left-colors: #EEE #DDD #CCC #AAA #888 #666 #333 #000 #333 #666 #888 #AAA #CCC #DDD #EEE; -moz-border-right-colors: #EEE #DDD #CCC #AAA #888 #666 #333 #000 #333 #666 #888 #AAA #CCC #DDD #EEE/* CSS by srmark */; -moz-border-bottom-colors: #EEE #DDD #CCC #AAA #888 #666 #333 #000 #333 #666 #888 #AAA #CCC #DDD #EEE; border: 16px solid #000/* CSS by srmark */; -moz-border-top-colors: #FFF #EEE #DDD #CCC #BBB #AAA #999 #888 #777 #666 #555 #444 #333 #222 #111 #000; -moz-border-left-colors: #FFF #EEE #DDD #CCC #BBB #AAA #999 #888 #777 #666 #555 #444 #333 #222 #111 #000; -moz-border-right-colors: #FFF #EEE #DDD #CCC #BBB #AAA #999 #888 #777 #666 #555 #444 #333 #222 #111 #000/* CSS by srmark */; -moz-border-bottom-colors: #FFF #EEE #DDD #CCC #BBB #AAA #999 #888 #777 #666 #555 #444 #333 #222 #111 #000; border: 16px solid #000/* CSS by srmark */; -moz-border-top-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA #BBB #CCC #DDD #EEE #FFF; -moz-border-left-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA #BBB #CCC #DDD #EEE #FFF; -moz-border-right-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA #BBB #CCC #DDD #EEE #FFF/* CSS by srmark */; -moz-border-bottom-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA #BBB #CCC #DDD #EEE #FFF; border: 16px solid #000/* CSS by srmark */; -moz-border-top-colors: #FFF #DDD #BBB #999 #777 #555 #333 #111 #111 #333 #555 #777 #999 #BBB #DDD #FFF; -moz-border-left-colors: #FFF #DDD #BBB #999 #777 #555 #333 #111 #111 #333 #555 #777 #999 #BBB #DDD #FFF; -moz-border-right-colors: #FFF #DDD #BBB #999 #777 #555 #333 #111 #111 #333 #555 #777 #999 #BBB #DDD #FFF/* CSS by srmark */; -moz-border-bottom-colors: #FFF #DDD #BBB #999 #777 #555 #333 #111 #111 #333 #555 #777 #999 #BBB #DDD #FFF; border: 6px solid #000/* CSS by srmark */; -moz-border-top-colors: #FF0000 #FF8800 #FFFF00 #009900 #1111EE #8B00FF; -moz-border-left-colors: #FF0000 #FF8800 #FFFF00 #009900 #1111EE #8B00FF; -moz-border-right-colors: #FF0000 #FF8800 #FFFF00 #009900 #1111EE #8B00FF/* CSS by srmark */; -moz-border-bottom-colors: #FF0000 #FF8800 #FFFF00 #009900 #1111EE #8B00FF; border: 6px solid #000/* CSS by srmark */; -moz-border-top-colors: #4B0082 #0000FF #008000 #FFFF00 #FFA500 #FF0000; -moz-border-left-colors: #4B0082 #0000FF #008000 #FFFF00 #FFA500 #FF0000; -moz-border-right-colors: #4B0082 #0000FF #008000 #FFFF00 #FFA500 #FF0000/* CSS by srmark */; -moz-border-bottom-colors: #4B0082 #0000FF #008000 #FFFF00 #FFA500 #FF0000; border: 12px solid #000/* CSS by srmark */; -moz-border-top-colors: #FF0000 #FF0000 #FF8800 #FF8800 #FFFF00 #FFFF00 #009900 #009900 #1111EE #1111EE #8B00FF #8B00FF; -moz-border-left-colors: #FF0000 #FF0000 #FF8800 #FF8800 #FFFF00 #FFFF00 #009900 #009900 #1111EE #1111EE #8B00FF #8B00FF; -moz-border-right-colors: #FF0000 #FF0000 #FF8800 #FF8800 #FFFF00 #FFFF00 #009900 #009900 #1111EE #1111EE #8B00FF #8B00FF/* CSS by srmark */; -moz-border-bottom-colors: #FF0000 #FF0000 #FF8800 #FF8800 #FFFF00 #FFFF00 #009900 #009900 #1111EE #1111EE #8B00FF #8B00FF; border: 12px solid #000/* CSS by srmark */; -moz-border-top-colors: #4B0082 #4B0082 #0000FF #0000FF #008000 #008000 #FFFF00 #FFFF00 #FFA500 #FFA500 #FF0000 #FF0000; -moz-border-left-colors: #4B0082 #4B0082 #0000FF #0000FF #008000 #008000 #FFFF00 #FFFF00 #FFA500 #FFA500 #FF0000 #FF0000; -moz-border-right-colors: #4B0082 #4B0082 #0000FF #0000FF #008000 #008000 #FFFF00 #FFFF00 #FFA500 #FFA500 #FF0000 #FF0000/* CSS by srmark */; -moz-border-bottom-colors: #4B0082 #4B0082 #0000FF #0000FF #008000 #008000 #FFFF00 #FFFF00 #FFA500 #FFA500 #FF0000 #FF0000;