HOME | DD

Description
body div#devskin8939667 .journal-edit-mode.journaltop { display:block!important; background:transparent; } body div#devskin8939667 .journal-edit-mode.journaltop img { display:none!important; } body div#devskin8939667 .shower { cursor:default; background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/noisy.png); margin:auto; padding:5px 0px 0px 36px; border:solid 1px #a0a0a0; position:relative; color:#333; text-shadow:0 1px 0 #fff; box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -moz-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -webkit-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; overflow:hidden; } body div#devskin8939667 .shower small { font-size:10px; font-weight:normal!important; display:inline; color:#b3b3b3; text-align:right; position:absolute; right:6px; top:5px; } body div#devskin8939667 .shower small b { font-size:10px; font-weight:bold!important; } body div#devskin8939667 .shower:hover small { color:#777; } body div#devskin8939667 .shower:hover ol { max-height:100%; } body div#devskin8939667 .shower b { padding:0 5px 5px 0; display:inline; font-size:16px; text-transform:uppercase; position:relative; } body div#devskin8939667 .shower a { cursor:url; } body div#devskin8939667 ol { max-height:392px; background:#ececec; position:relative; margin:4px 1px 1px 0; padding:10px 0px 10px 0px; border-top:solid 1px #b3b3b3; border-bottom:none; border-left:solid 1px #b3b3b3; border-right:none; border-radius:5px 0 0 0; -moz-border-radius:5px 0 0 0; -webkit-border-radius:5px 0 0 0; box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; text-transform:none!important; } body div#devskin8939667 li { color:#b3b3b3; list-style:decimal-leading-zero; padding:0 0 0 15px; text-transform:none!important; line-height:16px; } body div#devskin8939667 li:hover { background:#e0e0e0; } body div#devskin8939667 li.space { padding-left:35px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin8939667 li.space:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin8939667 li.space2 { padding-left:55px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin8939667 li.space2:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin8939667 li.space3 { padding-left:75px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin8939667 li.space3:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin8939667 li.space4 { padding-left:95px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin8939667 li.space4:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin8939667 li.space5 { padding-left:115px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin8939667 li.space5:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin8939667 li.space6 { padding-left:135px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin8939667 li.space6:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin8939667 li.space7 { padding-left:155px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin8939667 li.space7:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin8939667 li.space8 { padding-left:175px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin8939667 li.space8:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin8939667 li.space9 { padding-left:195px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin8939667 li.space9:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin8939667 li.stack { padding-left:35px; } body div#devskin8939667 ol .fade { background:url(https://st.deviantart.net/staff/ikue/random/csssidegrad.png) repeat-y right top; display:block; position:absolute; height:100%; width:40px; top:0px; right:-1px; box-shadow:inset 0 1px 0 #fff, inset -1px 0 0 #fff; -moz-box-shadow:inset 0 1px 0 #fff, inset -1px 0 0 #fff; -webkit-box-shadow:inset 0 1px 0 #fff, inset -1px 0 0 #fff; } body div#devskin8939667 .shower ol li b { font-weight:normal; color:#333; font-size:12px!important; padding:0px; display:inline; text-transform:none!important; } body div#devskin8939667 .shower ol li b b { font-weight:normal; color:#268bd2; font-size:12px!important; padding:0px; display:inline; } body div#devskin8939667 .shower ol li u { text-decoration:none; color:#859900; font-size:12px!important; padding:0px; display:inline; } body div#devskin8939667 .shower ol li i { font-style:normal; color:#2aa198; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin8939667 .shower ol li i i { font-style:normal; color:#d33682; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin8939667 ::selection { background:#999; color:white; text-shadow:none; } body div#devskin8939667 ::-moz-selection { background:#999; color:white; text-shadow:none; } body div#devskin8939667 a { color:#00ccff; text-decoration:none !important; display:inline; background-color:transparent; padding:5px 10px; margin-left:-10px; margin-right:-10px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; white-space:nowrap; } body div#devskin8939667 a:hover { color:#fff; text-decoration:none !important; background-color:#00ccff; box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -moz-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -webkit-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; text-shadow:0 1px 0 #0090B5; } body div#devskin8939667 .writer { cursor:default; background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/noisy.png); margin:auto; padding:5px 0px 0px 36px; border:solid 1px #a0a0a0; position:relative; color:#333; text-shadow:0 1px 0 #fff; box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -moz-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -webkit-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; overflow:hidden; } body div#devskin8939667 .writer i i { font-family:'Josefin Slab', serif; font-style:normal; font-size:16px; color:#777; } body div#devskin8939667 .writer p img { text-align:center; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; border:solid 1px #fff; box-shadow:inset 0 0 0 1px #ececec, 0 1px 3px #939393; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 1px 3px #939393; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 1px 3px #939393; max-width:100%; margin-left:0; margin-right:0; padding:0; background:none; cursor:help; } body div#devskin8939667 .writer p { background:#ececec; position:relative; margin:4px 1px 1px 0; padding:10px 10px 10px 15px; border-top:none; border-bottom:none; border-left:solid 1px #b3b3b3; border-right:none; border-radius:0 0 0 0; -moz-border-radius:0 0 0 0; -webkit-border-radius:0 0 0 0; box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; text-transform:none!important; } body div#devskin8939667 .writer .header { font-family:'Josefin Slab', serif; font-size:30px; background:#f5f5f5; padding:10px 120px 5px 15px; border-top:solid 1px #b3b3b3; border-bottom:dotted 1px #b3b3b3; border-left:solid 1px #b3b3b3; border-right:solid 1px #fff; border-radius:5px 0 0 0; -moz-border-radius:5px 0 0 0; -webkit-border-radius:5px 0 0 0; box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -moz-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -webkit-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; text-transform:none!important; margin-bottom:-4px; position:relative; line-height:30px; } body div#devskin8939667 .writer .header b { display:inline; font-size:30px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin8939667 .writer .header i { display:inline; font-size:30px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin8939667 .writer .header2 { font-family:'Josefin Slab', serif; font-size:20px; background:#f5f5f5; padding:10px 15px 5px 15px; border-top:dotted 1px #b3b3b3; border-bottom:dotted 1px #b3b3b3; border-left:solid 1px #b3b3b3; border-right:none; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -moz-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -webkit-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; text-transform:none!important; margin-bottom:-4px; margin-top:-21px; position:relative; } body div#devskin8939667 .writer .header2 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin8939667 .writer .header2 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin8939667 .writer .header3 { font-family:'Josefin Slab', serif; font-size:20px; background:#f5f5f5; padding:10px 15px 5px 15px; border-top:solid 1px #b3b3b3; border-bottom:dotted 1px #b3b3b3; border-left:solid 1px #b3b3b3; border-right:none; border-radius:5px 0 0 0; -moz-border-radius:5px 0 0 0; -webkit-border-radius:5px 0 0 0; box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -moz-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -webkit-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; text-transform:none!important; margin-bottom:-4px; position:relative; } body div#devskin8939667 .writer .header3 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin8939667 .writer .header3 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin8939667 .writer .header .av { position:absolute; top:0; left:-31px; height:23px width:31px; background:transparent url(https://st.deviantart.net/staff/ikue/random/arrow.png) right 5px no-repeat; padding:0 6px 0 0; } body div#devskin8939667 .writer .header .av a img.avatar { height:23px; width:23px; background:#cecece; text-align:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #a0a0a0; box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; padding:0; } body div#devskin8939667 .writer .header .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin8939667 .writer .header2 .av { position:absolute; top:0; left:-31px; height:23px width:31px; background:transparent url(https://st.deviantart.net/staff/ikue/random/arrow.png) right 5px no-repeat; padding:0 6px 0 0; } body div#devskin8939667 .writer .header2 .av a img.avatar { height:23px; width:23px; background:#cecece; text-align:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #a0a0a0; box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; padding:0; } body div#devskin8939667 .writer .header2 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin8939667 .writer .header3 .av { position:absolute; top:0; left:-31px; height:23px width:31px; background:transparent url(https://st.deviantart.net/staff/ikue/random/arrow.png) right 5px no-repeat; padding:0 6px 0 0; } body div#devskin8939667 .writer .header3 .av a img.avatar { height:23px; width:23px; background:#cecece; text-align:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #a0a0a0; box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; padding:0; } body div#devskin8939667 .writer .header3 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin8939667 .journalbox { border:0px solid; background:transparent; position:relative; max-width:650px; margin:auto; } body div#devskin8939667 .journaltop, body div#devskin8939667 .journalbottom span, body div#devskin8939667 .journalbottom .prevlink, body div#devskin8939667 .list { display:none; } body div#devskin8939667 .journaltext { color:#646464; font-size:12px; line-height:20px; padding:0px 12px; } body div#devskin8939667 .journalbottom { position:absolute; right:30px; top:21px; background:none; padding:0!important; width:100px; text-align:right; } body div#devskin8939667 .journalbottom a { color:#fff; text-decoration:none !important; background-color:#00ccff; box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -moz-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -webkit-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; text-decoration:none!important; } body div#devskin8939667 .journalbottom a:hover { text-shadow:0 1px 0 #0090B5; } body div#devskin8939667 .warning:hover { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin8939667 .warning { cursor:help; opacity:.3; filter:alpha(opacity=30); _zoom:1; font-size:10px; color:#818E7F; position:relative; margin:0 auto; max-width:600px; line-height:14px; padding:0 10px; top:-20px; transition:all 0.7s; -moz-transition:all 0.7s; -webkit-transition:all 0.7s; -ms-transition:all 0.7s; -o-transition:all 0.7s; } body div#devskin8939667 .warning b { color:#CC3D3D; text-shadow:0 1px 0 #fff; } body div#devskin8939667 .warning a { color:#616660; } body div#devskin8939667 .warning a.saf:hover { color:#0088CC; } body div#devskin8939667 .warning a.ff:hover { color:#EB611D; } body div#devskin8939667 .warning a:hover { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; background:none; text-shadow:none; margin-left:0; margin-right:0; padding:0; } body div#devskin8939667 .warning .sign { display:block; float:left; height:23px; width:33px; text-align:center; color:#FFF; font-size:25px; background:#FF0000; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; padding:11px 0 0 1px; overflow:hidden; font-family:'Limelight', cursive; text-shadow:0 -2px 0 #B70003; border:1px solid #870000; box-shadow:0 1px 5px #7B8975,inset 0 1px 1px #fff, inset 0 0 0 1px #FF0000, inset 0 -50px 20px -35px #B70003; -moz-box-shadow:0 1px 5px #7B8975,inset 0 1px 1px #fff, inset 0 0 0 1px #FF0000, inset 0 -50px 20px -35px #B70003; -webkit-box-shadow:0 1px 5px #7B8975,inset 0 1px 1px #fff, inset 0 0 0 1px #FF0000, inset 0 -50px 20px -35px #B70003; margin-right:10px; margin-top:3px; } body div#devskin8939667 .hover { padding:0; position:relative; display:block; height:300px; width:500px; margin:0 auto; } body div#devskin8939667 .hover:before { content:'Hover Me'; position:absolute; width:100%; top:0px; text-align:center; color:#818E7F; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); } body div#devskin8939667 .hover:hover .boxer.middle, body div#devskin8939667 .hover:hover .boxer.shoot, body div#devskin8939667 .hover:hover .boxer.shoot:after, body div#devskin8939667 .hover:hover .boxer.bottom, body div#devskin8939667 .hover:hover .boxer.bottom.after { box-shadow:0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow:0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow:0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0); } body div#devskin8939667 .hover:hover .boxer.shoot, body div#devskin8939667 .hover:hover .boxer.shoot:after { border:1px solid rgba(255, 255, 255, 0); } body div#devskin8939667 .hover:hover .boxer { transform:rotate(0) scale(1) skew(0); -moz-transform:rotate(0) scale(1) skew(0); -webkit-transform:rotate(0) scale(1) skew(0); -ms-transform:rotate(0) scale(1) skew(0); -o-transform:rotate(0) scale(1) skew(0); box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -moz-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); top:45px!important; } body div#devskin8939667 .hover:hover .boxer.shoot { transform:rotate(-10deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -ms-transform:rotate(-10deg); -o-transform:rotate(-10deg); } body div#devskin8939667 .hover:hover .boxer.shoot.after { top:5px!important; left:370px; transform:rotate(-20deg); -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -ms-transform:rotate(-20deg); -o-transform:rotate(-20deg); } body div#devskin8939667 .boxer { position:absolute; z-index:10; top:0px; left:50%; margin-left:-200px; overflow:visible!important display:block; height:200px; width:400px; border:5px solid #fff; transform:rotate(15deg) scale(0.61) skew(-62deg); -moz-transform:rotate(15deg) scale(0.61) skew(-62deg); -webkit-transform:rotate(15deg) scale(0.61) skew(-62deg); -ms-transform:rotate(15deg) scale(0.61) skew(-62deg); -o-transform:rotate(15deg) scale(0.61) skew(-62deg); box-shadow:28px 12px 12px rgba(0, 0, 0, 0.25), inset 28px 12px 12px rgba(0, 0, 0, 0.25); -moz-box-shadow:28px 12px 12px rgba(0, 0, 0, 0.25), inset 28px 12px 12px rgba(0, 0, 0, 0.25); -webkit-box-shadow:28px 12px 12px rgba(0, 0, 0, 0.25), inset 28px 12px 12px rgba(0, 0, 0, 0.25); transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; } body div#devskin8939667 .boxer.top { background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-range.png); background-size:100%; background-attachment:scroll; background-position:center bottom; background-repeat:no-repeat; } body div#devskin8939667 .boxer.middle { z-index:9; top:30px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/title.png?4) 125px 50px no-repeat!important; background-size:150px!important; } body div#devskin8939667 .boxer.shoot { z-index:8; top:60px; left:50%; margin:60px 0 0px -110px; width:102px; height:102px; background-size:102px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar.gif?1) no-repeat center; } body div#devskin8939667 .boxer.shoot.after { z-index:8; top:60px; left:400px; width:66px; height:66px; background-size:66px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar-2.gif) no-repeat center; } body div#devskin8939667 .boxer.bottom { z-index:6; top:120px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.gif) repeat 0 0; } body div#devskin8939667 .boxer.bottom.after { z-index:7; top:90px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.png) !important; } body div#devskin8939667 .hover.effect .boxer.bottom { transform:rotate(0) scale(1) skew(0); -moz-transform:rotate(0) scale(1) skew(0); -webkit-transform:rotate(0) scale(1) skew(0); -ms-transform:rotate(0) scale(1) skew(0); -o-transform:rotate(0) scale(1) skew(0); box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -moz-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); top:45px!important; transition:background-position 10500s ease-out; -moz-transition:background-position 10500s ease-out; -webkit-transition:background-position 10500s ease-out; -ms-transition:background-position 10500s ease-out; -o-transition:background-position 10500s ease-out; } body div#devskin8939667 .hover.effect:hover .boxer.bottom { background-position:2500% 10000%; }

CSS { Snippets : Fantasy Header }

I've noticed a lot of users being simply amazed at the beautiful header for the recent Realm of Fantasy article posted by techgnotic . It really is a sight to behold, if you haven't already please go do so immediately and inform marioluevanos how amazing he is as a designer. Anyway, would you believe that the header is something anyone on dA could do with a few simple CSS tricks? It's true! There is only one element in the header you cannot accomplish with the current CSS rules provided by dA but that is hardly necessary and can easily be rectified with a tweak to the images themselves.

I thought since it was so popular I would take a moment to break it down for you all and show you just how it's done. Here goes…

Realm of Fantasy Article Header

This particular skin is fairly complex but not overly so. I would recommend this more for moderate to advanced skinners. We'll be using Pseudo-elements as well as class containers so if you're unfamiliar you may just wish to browse through the pretty pictures. For the purpose of legibility I will leave out the text areas at the top of the original article and focus only on the fancy star field scrolling effects and the header graphic.

These elements are pretty straight forward, you only need 5 of them, 4 nested inside the main area. We'll need one for the main container to hold everything, one for the stars, another one for shooting stars, one for the header graphic, and finally, one for the mountain range. Let's stick with some simple names for these shall we?

html

Styling the elements

The above HTML is fairly simple right? Well as mentioned we'll be using Pseudo-elements. Specifically on the two star related classes. But I'll get to that in a bit.

We'll be stacking these elements one on top of each other so we'll have to use the position CSS property to absolute align these one over the other. In order to do that we'll have to set the first element with a position of relative. This will ensure any elements inside it with an absolute position will conform to that element alone, not the main element of the journal.

Other than that, for all these elements we'll be using the background properties to achieve the fancy scrolling effects.

With the HTML out of the way, let's get to altering the CSS and skinning these elements. We'll start with an easy one. The moving stars that travel diagonally across the background seemingly automatically. Now, unfortunately we cannot use the animation property like we normally would with a real website. deviantART doesn't offering this property for journal skins so we have to get a bit creative here. If you notice, the news article spans the entire width of the page, this is an admin only feature for CSS so I'm afraid you won't be able to do this in your own skins, but it's hardly necessary. I only mention it because being full width it stands to reason that the users mouse will be on the article itself. Because of this we can achieve a similar result by using the :hover selector for any of the parent elements then target the stars element so when the first element is hovered it will affect the stars element. In this case we'll be using a transition property with a large time between transitions and we will be altering the background-position property on hover to switch it's position. Because of the transition it will appear as if the background is animated.

css

.stars {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.gif) repeat 0 0;
transition: background-position 10500s ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.journalbox:hover .stars {
background-position: 2500% 10000%;
}
Hover for more ↴

The results

So for this first element you've only set the background and the positioning using CSS shorthand on the background selector then in the hover you've manipulated that position. With this in place you should have something like this:

Styling Continued

With this basic hover technique out of the way we can focus on the other elements. This next step will be a bit more complicated but all the animations will be done using animated GIFs so no more transitions from here on out.

css

.container {
position: relative;
overflow: hidden;
}
.stars {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.gif) repeat 0 0;
transition: background-position 10500s ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.stars:after {
content: '';
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.png) repeat 0 0 fixed;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.journalbox:hover .stars {
background-position: 2500% 10000%;
}
.shooting {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar.gif?1) no-repeat center;
position: absolute;
bottom: 0;
left: 50%;
width: 408px;
height: 408px;
margin: 0 0 0 -443px;
}
.shooting:after {
content: '';
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar-2.gif) no-repeat center;
position: absolute;
top: -50%;
left: 130%;
width: 266px;
height: 264px;
margin: 0;
}
.header {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/title.png?4) center 180px fixed no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.range {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-range.png) center bottom no-repeat;
background-size: 100%;
background-attachment: scroll;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Hover for more ↴

Conclusion

We're using a lot of absolute positioning and making sure that they're stuck to the top/left of the parent element then expending the size of the element to 100% so that it takes up all the space. We're then using techniques such as the position of the background image being fixed to give the illusion that it's scrolling when you move the page.

Two of these elements are using the Psuedo-class :after to add extra elements without the need for more HTML. You can see this on the .stars and .shooting classes. With the .stars class the :after Psuedo-class is layering another static image of stars over the twinkling moving stars of the main element. These extra stars are set to "static" just like the header graphic so that they move along with the page. The .shooting class adds an extra element that has another GIF image of a shooting star. In the original article these two shooting star classes are slightly rotated. As mentioned earlier, this isn't possible for regular users but this really isn't necessary if you've got an image at the angle you already want.

Below you'll see how I have these elements stacked on top of each other. I've left out the main "container" element as it's really just empty and is only used to keep the other elements inside in place.

The purpose of this journal wasn't to belittle the original article or the amazing effect marioluevanos was able to create, it was just me trying to wrap my head around the concept and see if I could achieve the effect and understand how it was made. I hope you were able to learn something from this journal. If you have questions or need extra clarification please feel free to leave a comment.

!
Warning: These tutorials are only tested in Safari and Firefox .
Much like the boogieman that lives under your bed, I do not believe in Internet Explorer. If you're looking for assistance with coding for this browser you have come to the wrong place.

Description
body div#devskin8939667 .journal-edit-mode.journaltop { display:block!important; background:transparent; } body div#devskin8939667 .journal-edit-mode.journaltop img { display:none!important; } body div#devskin8939667 .shower { cursor:default; background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/noisy.png); margin:auto; padding:5px 0px 0px 36px; border:solid 1px #a0a0a0; position:relative; color:#333; text-shadow:0 1px 0 #fff; box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -moz-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -webkit-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; overflow:hidden; } body div#devskin8939667 .shower small { font-size:10px; font-weight:normal!important; display:inline; color:#b3b3b3; text-align:right; position:absolute; right:6px; top:5px; } body div#devskin8939667 .shower small b { font-size:10px; font-weight:bold!important; } body div#devskin8939667 .shower:hover small { color:#777; } body div#devskin8939667 .shower:hover ol { max-height:100%; } body div#devskin8939667 .shower b { padding:0 5px 5px 0; display:inline; font-size:16px; text-transform:uppercase; position:relative; } body div#devskin8939667 .shower a { cursor:url; } body div#devskin8939667 ol { max-height:392px; background:#ececec; position:relative; margin:4px 1px 1px 0; padding:10px 0px 10px 0px; border-top:solid 1px #b3b3b3; border-bottom:none; border-left:solid 1px #b3b3b3; border-right:none; border-radius:5px 0 0 0; -moz-border-radius:5px 0 0 0; -webkit-border-radius:5px 0 0 0; box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; text-transform:none!important; } body div#devskin8939667 li { color:#b3b3b3; list-style:decimal-leading-zero; padding:0 0 0 15px; text-transform:none!important; line-height:16px; } body div#devskin8939667 li:hover { background:#e0e0e0; } body div#devskin8939667 li.space { padding-left:35px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin8939667 li.space:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin8939667 li.space2 { padding-left:55px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin8939667 li.space2:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin8939667 li.space3 { padding-left:75px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin8939667 li.space3:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin8939667 li.space4 { padding-left:95px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin8939667 li.space4:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin8939667 li.space5 { padding-left:115px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin8939667 li.space5:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin8939667 li.space6 { padding-left:135px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin8939667 li.space6:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin8939667 li.space7 { padding-left:155px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin8939667 li.space7:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin8939667 li.space8 { padding-left:175px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin8939667 li.space8:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin8939667 li.space9 { padding-left:195px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin8939667 li.space9:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin8939667 li.stack { padding-left:35px; } body div#devskin8939667 ol .fade { background:url(https://st.deviantart.net/staff/ikue/random/csssidegrad.png) repeat-y right top; display:block; position:absolute; height:100%; width:40px; top:0px; right:-1px; box-shadow:inset 0 1px 0 #fff, inset -1px 0 0 #fff; -moz-box-shadow:inset 0 1px 0 #fff, inset -1px 0 0 #fff; -webkit-box-shadow:inset 0 1px 0 #fff, inset -1px 0 0 #fff; } body div#devskin8939667 .shower ol li b { font-weight:normal; color:#333; font-size:12px!important; padding:0px; display:inline; text-transform:none!important; } body div#devskin8939667 .shower ol li b b { font-weight:normal; color:#268bd2; font-size:12px!important; padding:0px; display:inline; } body div#devskin8939667 .shower ol li u { text-decoration:none; color:#859900; font-size:12px!important; padding:0px; display:inline; } body div#devskin8939667 .shower ol li i { font-style:normal; color:#2aa198; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin8939667 .shower ol li i i { font-style:normal; color:#d33682; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin8939667 ::selection { background:#999; color:white; text-shadow:none; } body div#devskin8939667 ::-moz-selection { background:#999; color:white; text-shadow:none; } body div#devskin8939667 a { color:#00ccff; text-decoration:none !important; display:inline; background-color:transparent; padding:5px 10px; margin-left:-10px; margin-right:-10px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; white-space:nowrap; } body div#devskin8939667 a:hover { color:#fff; text-decoration:none !important; background-color:#00ccff; box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -moz-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -webkit-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; text-shadow:0 1px 0 #0090B5; } body div#devskin8939667 .writer { cursor:default; background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/noisy.png); margin:auto; padding:5px 0px 0px 36px; border:solid 1px #a0a0a0; position:relative; color:#333; text-shadow:0 1px 0 #fff; box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -moz-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; -webkit-box-shadow:0 1px 3px #a7b0a4, inset 0 0 0 1px #fff, inset 0 50px 50px -50px #fff; overflow:hidden; } body div#devskin8939667 .writer i i { font-family:'Josefin Slab', serif; font-style:normal; font-size:16px; color:#777; } body div#devskin8939667 .writer p img { text-align:center; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; border:solid 1px #fff; box-shadow:inset 0 0 0 1px #ececec, 0 1px 3px #939393; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 1px 3px #939393; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 1px 3px #939393; max-width:100%; margin-left:0; margin-right:0; padding:0; background:none; cursor:help; } body div#devskin8939667 .writer p { background:#ececec; position:relative; margin:4px 1px 1px 0; padding:10px 10px 10px 15px; border-top:none; border-bottom:none; border-left:solid 1px #b3b3b3; border-right:none; border-radius:0 0 0 0; -moz-border-radius:0 0 0 0; -webkit-border-radius:0 0 0 0; box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff,1px 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; text-transform:none!important; } body div#devskin8939667 .writer .header { font-family:'Josefin Slab', serif; font-size:30px; background:#f5f5f5; padding:10px 120px 5px 15px; border-top:solid 1px #b3b3b3; border-bottom:dotted 1px #b3b3b3; border-left:solid 1px #b3b3b3; border-right:solid 1px #fff; border-radius:5px 0 0 0; -moz-border-radius:5px 0 0 0; -webkit-border-radius:5px 0 0 0; box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -moz-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -webkit-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; text-transform:none!important; margin-bottom:-4px; position:relative; line-height:30px; } body div#devskin8939667 .writer .header b { display:inline; font-size:30px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin8939667 .writer .header i { display:inline; font-size:30px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin8939667 .writer .header2 { font-family:'Josefin Slab', serif; font-size:20px; background:#f5f5f5; padding:10px 15px 5px 15px; border-top:dotted 1px #b3b3b3; border-bottom:dotted 1px #b3b3b3; border-left:solid 1px #b3b3b3; border-right:none; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -moz-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -webkit-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; text-transform:none!important; margin-bottom:-4px; margin-top:-21px; position:relative; } body div#devskin8939667 .writer .header2 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin8939667 .writer .header2 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin8939667 .writer .header3 { font-family:'Josefin Slab', serif; font-size:20px; background:#f5f5f5; padding:10px 15px 5px 15px; border-top:solid 1px #b3b3b3; border-bottom:dotted 1px #b3b3b3; border-left:solid 1px #b3b3b3; border-right:none; border-radius:5px 0 0 0; -moz-border-radius:5px 0 0 0; -webkit-border-radius:5px 0 0 0; box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -moz-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; -webkit-box-shadow:inset 0 1px 0 #fff, 0 0 2px #b3b3b3, inset 0 50px 50px -50px #fff; text-transform:none!important; margin-bottom:-4px; position:relative; } body div#devskin8939667 .writer .header3 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin8939667 .writer .header3 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin8939667 .writer .header .av { position:absolute; top:0; left:-31px; height:23px width:31px; background:transparent url(https://st.deviantart.net/staff/ikue/random/arrow.png) right 5px no-repeat; padding:0 6px 0 0; } body div#devskin8939667 .writer .header .av a img.avatar { height:23px; width:23px; background:#cecece; text-align:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #a0a0a0; box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; padding:0; } body div#devskin8939667 .writer .header .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin8939667 .writer .header2 .av { position:absolute; top:0; left:-31px; height:23px width:31px; background:transparent url(https://st.deviantart.net/staff/ikue/random/arrow.png) right 5px no-repeat; padding:0 6px 0 0; } body div#devskin8939667 .writer .header2 .av a img.avatar { height:23px; width:23px; background:#cecece; text-align:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #a0a0a0; box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; padding:0; } body div#devskin8939667 .writer .header2 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin8939667 .writer .header3 .av { position:absolute; top:0; left:-31px; height:23px width:31px; background:transparent url(https://st.deviantart.net/staff/ikue/random/arrow.png) right 5px no-repeat; padding:0 6px 0 0; } body div#devskin8939667 .writer .header3 .av a img.avatar { height:23px; width:23px; background:#cecece; text-align:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #a0a0a0; box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -moz-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; -webkit-box-shadow:inset 0 0 0 1px #ececec, 0 0 2px #b3b3b3, inset 0 -20px 20px -20px #cdcdcd; padding:0; } body div#devskin8939667 .writer .header3 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin8939667 .journalbox { border:0px solid; background:transparent; position:relative; max-width:650px; margin:auto; } body div#devskin8939667 .journaltop, body div#devskin8939667 .journalbottom span, body div#devskin8939667 .journalbottom .prevlink, body div#devskin8939667 .list { display:none; } body div#devskin8939667 .journaltext { color:#646464; font-size:12px; line-height:20px; padding:0px 12px; } body div#devskin8939667 .journalbottom { position:absolute; right:30px; top:21px; background:none; padding:0!important; width:100px; text-align:right; } body div#devskin8939667 .journalbottom a { color:#fff; text-decoration:none !important; background-color:#00ccff; box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -moz-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; -webkit-box-shadow:inset 0 1px 0 #0090B5, 0 1px 0 #fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; text-decoration:none!important; } body div#devskin8939667 .journalbottom a:hover { text-shadow:0 1px 0 #0090B5; } body div#devskin8939667 .warning:hover { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin8939667 .warning { cursor:help; opacity:.3; filter:alpha(opacity=30); _zoom:1; font-size:10px; color:#818E7F; position:relative; margin:0 auto; max-width:600px; line-height:14px; padding:0 10px; top:-20px; transition:all 0.7s; -moz-transition:all 0.7s; -webkit-transition:all 0.7s; -ms-transition:all 0.7s; -o-transition:all 0.7s; } body div#devskin8939667 .warning b { color:#CC3D3D; text-shadow:0 1px 0 #fff; } body div#devskin8939667 .warning a { color:#616660; } body div#devskin8939667 .warning a.saf:hover { color:#0088CC; } body div#devskin8939667 .warning a.ff:hover { color:#EB611D; } body div#devskin8939667 .warning a:hover { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; background:none; text-shadow:none; margin-left:0; margin-right:0; padding:0; } body div#devskin8939667 .warning .sign { display:block; float:left; height:23px; width:33px; text-align:center; color:#FFF; font-size:25px; background:#FF0000; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; padding:11px 0 0 1px; overflow:hidden; font-family:'Limelight', cursive; text-shadow:0 -2px 0 #B70003; border:1px solid #870000; box-shadow:0 1px 5px #7B8975,inset 0 1px 1px #fff, inset 0 0 0 1px #FF0000, inset 0 -50px 20px -35px #B70003; -moz-box-shadow:0 1px 5px #7B8975,inset 0 1px 1px #fff, inset 0 0 0 1px #FF0000, inset 0 -50px 20px -35px #B70003; -webkit-box-shadow:0 1px 5px #7B8975,inset 0 1px 1px #fff, inset 0 0 0 1px #FF0000, inset 0 -50px 20px -35px #B70003; margin-right:10px; margin-top:3px; } body div#devskin8939667 .hover { padding:0; position:relative; display:block; height:300px; width:500px; margin:0 auto; } body div#devskin8939667 .hover:before { content:'Hover Me'; position:absolute; width:100%; top:0px; text-align:center; color:#818E7F; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); } body div#devskin8939667 .hover:hover .boxer.middle, body div#devskin8939667 .hover:hover .boxer.shoot, body div#devskin8939667 .hover:hover .boxer.shoot:after, body div#devskin8939667 .hover:hover .boxer.bottom, body div#devskin8939667 .hover:hover .boxer.bottom.after { box-shadow:0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow:0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow:0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0); } body div#devskin8939667 .hover:hover .boxer.shoot, body div#devskin8939667 .hover:hover .boxer.shoot:after { border:1px solid rgba(255, 255, 255, 0); } body div#devskin8939667 .hover:hover .boxer { transform:rotate(0) scale(1) skew(0); -moz-transform:rotate(0) scale(1) skew(0); -webkit-transform:rotate(0) scale(1) skew(0); -ms-transform:rotate(0) scale(1) skew(0); -o-transform:rotate(0) scale(1) skew(0); box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -moz-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); top:45px!important; } body div#devskin8939667 .hover:hover .boxer.shoot { transform:rotate(-10deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -ms-transform:rotate(-10deg); -o-transform:rotate(-10deg); } body div#devskin8939667 .hover:hover .boxer.shoot.after { top:5px!important; left:370px; transform:rotate(-20deg); -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -ms-transform:rotate(-20deg); -o-transform:rotate(-20deg); } body div#devskin8939667 .boxer { position:absolute; z-index:10; top:0px; left:50%; margin-left:-200px; overflow:visible!important display:block; height:200px; width:400px; border:5px solid #fff; transform:rotate(15deg) scale(0.61) skew(-62deg); -moz-transform:rotate(15deg) scale(0.61) skew(-62deg); -webkit-transform:rotate(15deg) scale(0.61) skew(-62deg); -ms-transform:rotate(15deg) scale(0.61) skew(-62deg); -o-transform:rotate(15deg) scale(0.61) skew(-62deg); box-shadow:28px 12px 12px rgba(0, 0, 0, 0.25), inset 28px 12px 12px rgba(0, 0, 0, 0.25); -moz-box-shadow:28px 12px 12px rgba(0, 0, 0, 0.25), inset 28px 12px 12px rgba(0, 0, 0, 0.25); -webkit-box-shadow:28px 12px 12px rgba(0, 0, 0, 0.25), inset 28px 12px 12px rgba(0, 0, 0, 0.25); transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; } body div#devskin8939667 .boxer.top { background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-range.png); background-size:100%; background-attachment:scroll; background-position:center bottom; background-repeat:no-repeat; } body div#devskin8939667 .boxer.middle { z-index:9; top:30px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/title.png?4) 125px 50px no-repeat!important; background-size:150px!important; } body div#devskin8939667 .boxer.shoot { z-index:8; top:60px; left:50%; margin:60px 0 0px -110px; width:102px; height:102px; background-size:102px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar.gif?1) no-repeat center; } body div#devskin8939667 .boxer.shoot.after { z-index:8; top:60px; left:400px; width:66px; height:66px; background-size:66px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar-2.gif) no-repeat center; } body div#devskin8939667 .boxer.bottom { z-index:6; top:120px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.gif) repeat 0 0; } body div#devskin8939667 .boxer.bottom.after { z-index:7; top:90px; background:url(https://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.png) !important; } body div#devskin8939667 .hover.effect .boxer.bottom { transform:rotate(0) scale(1) skew(0); -moz-transform:rotate(0) scale(1) skew(0); -webkit-transform:rotate(0) scale(1) skew(0); -ms-transform:rotate(0) scale(1) skew(0); -o-transform:rotate(0) scale(1) skew(0); box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -moz-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.25); top:45px!important; transition:background-position 10500s ease-out; -moz-transition:background-position 10500s ease-out; -webkit-transition:background-position 10500s ease-out; -ms-transition:background-position 10500s ease-out; -o-transition:background-position 10500s ease-out; } body div#devskin8939667 .hover.effect:hover .boxer.bottom { background-position:2500% 10000%; }

CSS { Snippets : Fantasy Header }

I've noticed a lot of users being simply amazed at the beautiful header for the recent Realm of Fantasy article posted by techgnotic . It really is a sight to behold, if you haven't already please go do so immediately and inform marioluevanos how amazing he is as a designer. Anyway, would you believe that the header is something anyone on dA could do with a few simple CSS tricks? It's true! There is only one element in the header you cannot accomplish with the current CSS rules provided by dA but that is hardly necessary and can easily be rectified with a tweak to the images themselves.

I thought since it was so popular I would take a moment to break it down for you all and show you just how it's done. Here goes…

Realm of Fantasy Article Header

This particular skin is fairly complex but not overly so. I would recommend this more for moderate to advanced skinners. We'll be using Pseudo-elements as well as class containers so if you're unfamiliar you may just wish to browse through the pretty pictures. For the purpose of legibility I will leave out the text areas at the top of the original article and focus only on the fancy star field scrolling effects and the header graphic.

These elements are pretty straight forward, you only need 5 of them, 4 nested inside the main area. We'll need one for the main container to hold everything, one for the stars, another one for shooting stars, one for the header graphic, and finally, one for the mountain range. Let's stick with some simple names for these shall we?

html

Styling the elements

The above HTML is fairly simple right? Well as mentioned we'll be using Pseudo-elements. Specifically on the two star related classes. But I'll get to that in a bit.

We'll be stacking these elements one on top of each other so we'll have to use the position CSS property to absolute align these one over the other. In order to do that we'll have to set the first element with a position of relative. This will ensure any elements inside it with an absolute position will conform to that element alone, not the main element of the journal.

Other than that, for all these elements we'll be using the background properties to achieve the fancy scrolling effects.

With the HTML out of the way, let's get to altering the CSS and skinning these elements. We'll start with an easy one. The moving stars that travel diagonally across the background seemingly automatically. Now, unfortunately we cannot use the animation property like we normally would with a real website. deviantART doesn't offering this property for journal skins so we have to get a bit creative here. If you notice, the news article spans the entire width of the page, this is an admin only feature for CSS so I'm afraid you won't be able to do this in your own skins, but it's hardly necessary. I only mention it because being full width it stands to reason that the users mouse will be on the article itself. Because of this we can achieve a similar result by using the :hover selector for any of the parent elements then target the stars element so when the first element is hovered it will affect the stars element. In this case we'll be using a transition property with a large time between transitions and we will be altering the background-position property on hover to switch it's position. Because of the transition it will appear as if the background is animated.

css

.stars {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.gif) repeat 0 0;
transition: background-position 10500s ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.journalbox:hover .stars {
background-position: 2500% 10000%;
}
Hover for more ↴

The results

So for this first element you've only set the background and the positioning using CSS shorthand on the background selector then in the hover you've manipulated that position. With this in place you should have something like this:

Styling Continued

With this basic hover technique out of the way we can focus on the other elements. This next step will be a bit more complicated but all the animations will be done using animated GIFs so no more transitions from here on out.

css

.container {
position: relative;
overflow: hidden;
}
.stars {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.gif) repeat 0 0;
transition: background-position 10500s ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.stars:after {
content: '';
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.png) repeat 0 0 fixed;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.journalbox:hover .stars {
background-position: 2500% 10000%;
}
.shooting {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar.gif?1) no-repeat center;
position: absolute;
bottom: 0;
left: 50%;
width: 408px;
height: 408px;
margin: 0 0 0 -443px;
}
.shooting:after {
content: '';
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-shootingstar-2.gif) no-repeat center;
position: absolute;
top: -50%;
left: 130%;
width: 266px;
height: 264px;
margin: 0;
}
.header {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/title.png?4) center 180px fixed no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.range {
background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-range.png) center bottom no-repeat;
background-size: 100%;
background-attachment: scroll;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Hover for more ↴

Conclusion

We're using a lot of absolute positioning and making sure that they're stuck to the top/left of the parent element then expending the size of the element to 100% so that it takes up all the space. We're then using techniques such as the position of the background image being fixed to give the illusion that it's scrolling when you move the page.

Two of these elements are using the Psuedo-class :after to add extra elements without the need for more HTML. You can see this on the .stars and .shooting classes. With the .stars class the :after Psuedo-class is layering another static image of stars over the twinkling moving stars of the main element. These extra stars are set to "static" just like the header graphic so that they move along with the page. The .shooting class adds an extra element that has another GIF image of a shooting star. In the original article these two shooting star classes are slightly rotated. As mentioned earlier, this isn't possible for regular users but this really isn't necessary if you've got an image at the angle you already want.

Below you'll see how I have these elements stacked on top of each other. I've left out the main "container" element as it's really just empty and is only used to keep the other elements inside in place.

The purpose of this journal wasn't to belittle the original article or the amazing effect marioluevanos was able to create, it was just me trying to wrap my head around the concept and see if I could achieve the effect and understand how it was made. I hope you were able to learn something from this journal. If you have questions or need extra clarification please feel free to leave a comment.

!
Warning: These tutorials are only tested in Safari and Firefox .
Much like the boogieman that lives under your bed, I do not believe in Internet Explorer. If you're looking for assistance with coding for this browser you have come to the wrong place.