HOME | DD

Description
body div#devskin6392489 .journal-edit-mode.journaltop { display:block!important; background:transparent; } body div#devskin6392489 .journal-edit-mode.journaltop img { display:none!important; } body div#devskin6392489 .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#devskin6392489 .shower small { font-size:10px; font-weight:normal!important; display:inline; color:#b3b3b3; text-align:right; position:absolute; right:6px; top:5px; } body div#devskin6392489 .shower small b { font-size:10px; font-weight:bold!important; } body div#devskin6392489 .shower:hover small { color:#777; } body div#devskin6392489 .shower:hover ol { max-height:100%; } body div#devskin6392489 .shower b { padding:0 5px 5px 0; display:inline; font-size:16px; text-transform:uppercase; position:relative; } body div#devskin6392489 .shower a { cursor:url; } body div#devskin6392489 ol { max-height:393px; 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#devskin6392489 li { color:#b3b3b3; list-style:decimal-leading-zero; padding:0 0 0 15px; text-transform:none!important; line-height:16px; } body div#devskin6392489 li:hover { background:#e0e0e0; } body div#devskin6392489 li.space { padding-left:35px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin6392489 li.space:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin6392489 li.space2 { padding-left:55px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin6392489 li.space2:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin6392489 li.space3 { padding-left:75px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin6392489 li.space3:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin6392489 li.space4 { padding-left:95px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin6392489 li.space4:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin6392489 li.space5 { padding-left:115px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin6392489 li.space5:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin6392489 li.space6 { padding-left:135px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin6392489 li.space6:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin6392489 li.space7 { padding-left:155px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin6392489 li.space7:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin6392489 li.space8 { padding-left:175px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin6392489 li.space8:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin6392489 li.space9 { padding-left:195px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin6392489 li.space9:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin6392489 li.stack { padding-left:35px; } body div#devskin6392489 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#devskin6392489 .shower ol li b { font-weight:normal; color:#333; font-size:12px!important; padding:0px; display:inline; text-transform:none!important; } body div#devskin6392489 .shower ol li b b { font-weight:normal; color:#268bd2; font-size:12px!important; padding:0px; display:inline; } body div#devskin6392489 .shower ol li u { text-decoration:none; color:#859900; font-size:12px!important; padding:0px; display:inline; } body div#devskin6392489 .shower ol li i { font-style:normal; color:#2aa198; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin6392489 .shower ol li i i { font-style:normal; color:#d33682; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin6392489 ::selection { background:#999; color:white; text-shadow:none; } body div#devskin6392489 ::-moz-selection { background:#999; color:white; text-shadow:none; } body div#devskin6392489 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#devskin6392489 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#devskin6392489 .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#devskin6392489 .writer i i { font-family:'Josefin Slab', serif; font-style:normal; font-size:16px; color:#777; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header b { display:inline; font-size:30px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin6392489 .writer .header i { display:inline; font-size:30px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin6392489 .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#devskin6392489 .writer .header2 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin6392489 .writer .header2 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin6392489 .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#devskin6392489 .writer .header3 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin6392489 .writer .header3 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header2 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header3 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin6392489 .journalbox { border:0px solid; background:transparent; position:relative; max-width:650px; margin:auto; } body div#devskin6392489 .journaltop, body div#devskin6392489 .journalbottom span, body div#devskin6392489 .journalbottom .prevlink, body div#devskin6392489 .list { display:none; } body div#devskin6392489 .journaltext { color:#646464; font-size:12px; line-height:20px; padding:0px 12px; } body div#devskin6392489 .journalbottom { position:absolute; right:30px; top:21px; background:none; padding:0!important; width:100px; text-align:right; } body div#devskin6392489 .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#devskin6392489 .journalbottom a:hover { text-shadow:0 1px 0 #0090B5; } body div#devskin6392489 .warning:hover { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin6392489 .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#devskin6392489 .warning b { color:#CC3D3D; text-shadow:0 1px 0 #fff; } body div#devskin6392489 .warning a { color:#616660; } body div#devskin6392489 .warning a.saf:hover { color:#0088CC; } body div#devskin6392489 .warning a.ff:hover { color:#EB611D; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .testcontainer { background:#A8A8A8; padding:20px 20px 20px 20px; width:200px; color:#fff; font-size:12px; margin:auto; position:relative; } body div#devskin6392489 .testcontainer h1 { background:#828282; padding:5px 25px 5px 30px; margin-left:-30px; position:relative; color:#fff; font-size:18px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; border:none; text-shadow:none; font-family:Arial, sans-serif; font-variant:normal; letter-spacing:normal; margin-top:0; margin-bottom:0; width:175px; } body div#devskin6392489 .testcontainer .arrow { width:0; height:0; border-left:10px solid transparent; border-top:10px solid #4C4C4C; bottom:-10px; left:0px; position:absolute; } body div#devskin6392489 .container { background:#fff; margin:auto; width:200px; font-size:14px; padding:20px 20px 0px 30px; font-family:helvetica, arial, sans-serif; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #888; box-shadow:0px 1px 5px #999, inset 0px 0px 0px 1px #fff, inset 0px -130px 60px -60px #EDEDED; -moz-box-shadow:0px 1px 5px #999, inset 0px 0px 0px 1px #fff, inset 0px -130px 60px -60px #EDEDED; -webkit-box-shadow:0px 1px 5px #999, inset 0px 0px 0px 1px #fff, inset 0px -130px 60px -60px #EDEDED; color:#8A8A8A; line-height:20px; position:relative; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; text-shadow:0 1px 0 #fff; } body div#devskin6392489 .container p { position:absolute; top:-15px; left:10px; font-size:30px; text-shadow:1px 1px 2px #fff, 0px 0px 0px #999, 1px 1px 5px #fff; color:transparent; } body div#devskin6392489 h1 { background:#779C6C; padding:5px 25px 5px 40px; margin-left:-40px; margin-top:-10px; margin-bottom:-20px; position:relative; width:180px; box-shadow:0px 1px 2px #292929,inset 0px 1px 0px 0px #A9BBA0, inset 0px -10px 20px -15px #4B6645; -moz-box-shadow:0px 1px 2px #292929,inset 0px 1px 0px 0px #A9BBA0, inset 0px -10px 20px -15px #4B6645; -webkit-box-shadow:0px 1px 2px #292929,inset 0px 1px 0px 0px #A9BBA0, inset 0px -10px 20px -15px #4B6645; color:#fff; text-shadow:0 1px 0 #4B6645; z-index:2; font-size:12px; border:1px solid #597752; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-variant:small-caps; letter-spacing:0.5px; } body div#devskin6392489 .arrow { width:0; height:0; line-height:0; border-left:10px solid transparent; border-top:10px solid #486041; bottom:-10px; left:-1px; position:absolute; z-index:-1; } body div#devskin6392489 .container .arrows { width:0; height:0; line-height:0; border-left:31px solid transparent; border-top:21px solid #888; bottom:-43px; right:34px; position:absolute; } body div#devskin6392489 .container .arrower { width:0; height:0; line-height:0; border-left:30px solid transparent; border-top:20px solid #EDEDED; bottom:-40px; right:35px; position:absolute; }

CSS { Snippets : Wrapped Header }

Welcome to the first installment of my CSS Snippets journals. I've had a lot of questions over the years about how I create/achieve some of the elements in my journal skins so I thought I'd try my hand at a tutorial of sorts for the different elements I find fascinating and some of the work arounds needed to make them function properly when limited by deviantART's  journaling system. Although, "limited" doesn't feel like the correct word. To me it's more of a challenge and to persevere through it really gives me a thrill I just can't explain. It's not really a limitation as it forces one to think outside the box and hopefully when you get it just right, you'll get that same thrill.

I had originally planned to start these journal tuts after the new Journal/News system and Sta.sh Writer had been launched. I think showing you live what happens when CSS meets HTML would negate the need for a separate downloadable file, like is common in most other CSS tutorials found in the resources gallery. That along with the new Journal/News systems faving feature, you could add one of these Snippet journals to your favs and reread them at your own leisure. And with the Sta.sh Writer feature I could reBlog these journals across the CSS groups I'm a part of and reach a larger community. Plus... How sexy is this journal skin? Very, if I do say so myself! ;) Anyway, I've decided not to wait that long since I'm pretty impatient and I've had this journal skin coded up for a while just waiting to pounce. For those of you that are Beta testers you can feel free to add these journals to your favs the rest of you will just have to visit my journal tab on my userpage until the new system launches site wide.

Wrapped Header

So now to the reason we're all here. I'd like to show you how to make a wrapped effect using just HTML and CSS. In list tutorial you'll learn how to hijack the
header tag and turn it in to a way to break up you journal entries. You'll also learn how to to create a triangle shape using the border property in your CSS.

First off, let's start with the HTML we'll need. The elements below will be used to to create the container that holds the text, the header that is the title of the new topic and finally the triangle.

So since deviantART's journaling system only allows you to use descendant and class selectors we'll need to make 3 new class selectors. One for the container, one for the header and one for the triangle.

html

Title
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Styling the elements

In the code above I have used 2 class selectors and a H1 tag. If you're planning on using this code in your own journals you can skip the first container class since your journal comes prebuilt with a .Journalbox or .text CSS property and you can just target one of those in your CSS to adjust its properties. We could have also used a Class selector instead of a
tag but I like that it keeps the markup fairly clean and you might as well reuse elements that are already built in.

With the HTML out of the way, let's get to altering the CSS and skinning these elements.

css

.container {
background: #A8A8A8 ;
color: #FFF ;
padding: 20px 20px 20px 20px;
width: 200px;
font-size: 12px;
margin: auto;
position: relative;
}
.container h1 {
background: #828282;
color: #FFF ;
padding: 5px 25px 5px 30px;
font-size: 18px;
margin-left: -30px;
position: relative;
}
.container .triangle {
width: 0;
height: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
border-top: 10px solid #4C4C4C ;
position: absolute;
Hover for more ↴

The results

In the CSS for the container selector I've set a width of 200 pixels. This won't be necessary for your actual journal since that will stretch with the page. If you do set a width for this area, setting the margin as "auto" will allow the box to remain centered on the page when it's stretched wider than the box.

For the h1 tag we need to set a negative margin so that the header breaks out of the container box and is off to the left side.  The exact pixel distance is of course your preference but keep in mind that the number may be higher than you think because of the padding on the header. Take notice that we have the position set to relative. This is very important for the next step when aligning the triangle.

Finally, the triangle. We need no width or height for this element because this will be made by the border pixel size. As you can see in the CSS the borders are set to 10 pixels and given a colour. In the case of the left border this colour is transparent. When combined with another border that has a colour, in this case the top border, it creates a triangle. Were you to use a transparent right border this triangle would be flipped the opposite direction. Likewise, if you were to use a transparent top border and an opaque left or right border the triangle would be flipped upside down. Because the size of these border is 10 pixels it stands to reason that the height of this element is now 10 pixels. With this in mind we will need to move this element down 10 pixels using the negative bottom CSS property. To finish it off we ensure the position of this object is set as absolute. Keep in mind, if you were to use the position property as absolute without first setting the parent element (in this case h1) as relative this element would have been at the very bottom of the journal, far away from where you wanted it to be.

If you've got all that done correctly here's what you should have:

Title


Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

html

Title
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

css

.container {
background: #A8A8A8 ;
color: #FFF ;
padding: 20px 20px 20px 20px;
width: 200px;
font-size: 12px;
margin: auto;
position: relative;
}
.container h1 {
background: #828282;
color: #FFF ;
padding: 5px 25px 5px 30px;
font-size: 18px;
margin-left: -30px;
position: relative;
}
.container .triangle {
width: 0;
height: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
border-top: 10px solid #4C4C4C ;
position: absolute;
Hover for more ↴

Conclusion

So, with all that neatly tucked away in your journal, please, feel free to alter and tinker with this CSS to customize it to your tastes.  Here's an example of what I was able to make using elements from this journal, all without using a single image file:

❝
The time has come, my little friends, to talk of other things / Of shoes and ships and sealing wax, of cabbages and kings / And why the sea is boiling hot, and whether pigs have wigs / Calloo, Callay, come run away / With the cabbages and kings.

        The Walrus - 1951





Finalé

My apologies for the length of this journal. With the intro taking us so much space it was longer than I anticipated. Hopefully the next installment shouldn't be as large.

Speaking of the next installment. I have several other elements lined up but please, feel free to suggest topics you would like me to cover. I'm also more than happy to answer any questions within my means should you ask in a comment below. :)

Please feel free to leave any comments or critisism on the layout/flow of this journal. Is it too hard to follow? What could I improve? Any extra feedback would be appreciated.

!
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#devskin6392489 .journal-edit-mode.journaltop { display:block!important; background:transparent; } body div#devskin6392489 .journal-edit-mode.journaltop img { display:none!important; } body div#devskin6392489 .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#devskin6392489 .shower small { font-size:10px; font-weight:normal!important; display:inline; color:#b3b3b3; text-align:right; position:absolute; right:6px; top:5px; } body div#devskin6392489 .shower small b { font-size:10px; font-weight:bold!important; } body div#devskin6392489 .shower:hover small { color:#777; } body div#devskin6392489 .shower:hover ol { max-height:100%; } body div#devskin6392489 .shower b { padding:0 5px 5px 0; display:inline; font-size:16px; text-transform:uppercase; position:relative; } body div#devskin6392489 .shower a { cursor:url; } body div#devskin6392489 ol { max-height:393px; 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#devskin6392489 li { color:#b3b3b3; list-style:decimal-leading-zero; padding:0 0 0 15px; text-transform:none!important; line-height:16px; } body div#devskin6392489 li:hover { background:#e0e0e0; } body div#devskin6392489 li.space { padding-left:35px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin6392489 li.space:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -264px 0px; } body div#devskin6392489 li.space2 { padding-left:55px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin6392489 li.space2:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -244px 0px; } body div#devskin6392489 li.space3 { padding-left:75px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin6392489 li.space3:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -224px 0px; } body div#devskin6392489 li.space4 { padding-left:95px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin6392489 li.space4:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -204px 0px; } body div#devskin6392489 li.space5 { padding-left:115px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin6392489 li.space5:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -184px 0px; } body div#devskin6392489 li.space6 { padding-left:135px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin6392489 li.space6:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -164px 0px; } body div#devskin6392489 li.space7 { padding-left:155px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin6392489 li.space7:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -144px 0px; } body div#devskin6392489 li.space8 { padding-left:175px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin6392489 li.space8:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -124px 0px; } body div#devskin6392489 li.space9 { padding-left:195px; background:url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin6392489 li.space9:hover { background:#e0e0e0 url(https://st.deviantart.net/staff/ikue/random/dotterer.gif) repeat-y -104px 0px; } body div#devskin6392489 li.stack { padding-left:35px; } body div#devskin6392489 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#devskin6392489 .shower ol li b { font-weight:normal; color:#333; font-size:12px!important; padding:0px; display:inline; text-transform:none!important; } body div#devskin6392489 .shower ol li b b { font-weight:normal; color:#268bd2; font-size:12px!important; padding:0px; display:inline; } body div#devskin6392489 .shower ol li u { text-decoration:none; color:#859900; font-size:12px!important; padding:0px; display:inline; } body div#devskin6392489 .shower ol li i { font-style:normal; color:#2aa198; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin6392489 .shower ol li i i { font-style:normal; color:#d33682; font-size:12px!important; text-decoration:none; padding:0px; display:inline; } body div#devskin6392489 ::selection { background:#999; color:white; text-shadow:none; } body div#devskin6392489 ::-moz-selection { background:#999; color:white; text-shadow:none; } body div#devskin6392489 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#devskin6392489 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#devskin6392489 .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#devskin6392489 .writer i i { font-family:'Josefin Slab', serif; font-style:normal; font-size:16px; color:#777; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header b { display:inline; font-size:30px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin6392489 .writer .header i { display:inline; font-size:30px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin6392489 .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#devskin6392489 .writer .header2 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin6392489 .writer .header2 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin6392489 .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#devskin6392489 .writer .header3 b { display:inline; font-size:20px; text-transform:none; font-weight:normal; color:#00ccff; } body div#devskin6392489 .writer .header3 i { display:inline; font-size:20px; font-style:normal; font-weight:normal; color:#b3b3b3; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header2 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .writer .header3 .av a:hover { background:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin6392489 .journalbox { border:0px solid; background:transparent; position:relative; max-width:650px; margin:auto; } body div#devskin6392489 .journaltop, body div#devskin6392489 .journalbottom span, body div#devskin6392489 .journalbottom .prevlink, body div#devskin6392489 .list { display:none; } body div#devskin6392489 .journaltext { color:#646464; font-size:12px; line-height:20px; padding:0px 12px; } body div#devskin6392489 .journalbottom { position:absolute; right:30px; top:21px; background:none; padding:0!important; width:100px; text-align:right; } body div#devskin6392489 .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#devskin6392489 .journalbottom a:hover { text-shadow:0 1px 0 #0090B5; } body div#devskin6392489 .warning:hover { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin6392489 .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#devskin6392489 .warning b { color:#CC3D3D; text-shadow:0 1px 0 #fff; } body div#devskin6392489 .warning a { color:#616660; } body div#devskin6392489 .warning a.saf:hover { color:#0088CC; } body div#devskin6392489 .warning a.ff:hover { color:#EB611D; } body div#devskin6392489 .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#devskin6392489 .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#devskin6392489 .testcontainer { background:#A8A8A8; padding:20px 20px 20px 20px; width:200px; color:#fff; font-size:12px; margin:auto; position:relative; } body div#devskin6392489 .testcontainer h1 { background:#828282; padding:5px 25px 5px 30px; margin-left:-30px; position:relative; color:#fff; font-size:18px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; border:none; text-shadow:none; font-family:Arial, sans-serif; font-variant:normal; letter-spacing:normal; margin-top:0; margin-bottom:0; width:175px; } body div#devskin6392489 .testcontainer .arrow { width:0; height:0; border-left:10px solid transparent; border-top:10px solid #4C4C4C; bottom:-10px; left:0px; position:absolute; } body div#devskin6392489 .container { background:#fff; margin:auto; width:200px; font-size:14px; padding:20px 20px 0px 30px; font-family:helvetica, arial, sans-serif; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #888; box-shadow:0px 1px 5px #999, inset 0px 0px 0px 1px #fff, inset 0px -130px 60px -60px #EDEDED; -moz-box-shadow:0px 1px 5px #999, inset 0px 0px 0px 1px #fff, inset 0px -130px 60px -60px #EDEDED; -webkit-box-shadow:0px 1px 5px #999, inset 0px 0px 0px 1px #fff, inset 0px -130px 60px -60px #EDEDED; color:#8A8A8A; line-height:20px; position:relative; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; text-shadow:0 1px 0 #fff; } body div#devskin6392489 .container p { position:absolute; top:-15px; left:10px; font-size:30px; text-shadow:1px 1px 2px #fff, 0px 0px 0px #999, 1px 1px 5px #fff; color:transparent; } body div#devskin6392489 h1 { background:#779C6C; padding:5px 25px 5px 40px; margin-left:-40px; margin-top:-10px; margin-bottom:-20px; position:relative; width:180px; box-shadow:0px 1px 2px #292929,inset 0px 1px 0px 0px #A9BBA0, inset 0px -10px 20px -15px #4B6645; -moz-box-shadow:0px 1px 2px #292929,inset 0px 1px 0px 0px #A9BBA0, inset 0px -10px 20px -15px #4B6645; -webkit-box-shadow:0px 1px 2px #292929,inset 0px 1px 0px 0px #A9BBA0, inset 0px -10px 20px -15px #4B6645; color:#fff; text-shadow:0 1px 0 #4B6645; z-index:2; font-size:12px; border:1px solid #597752; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-variant:small-caps; letter-spacing:0.5px; } body div#devskin6392489 .arrow { width:0; height:0; line-height:0; border-left:10px solid transparent; border-top:10px solid #486041; bottom:-10px; left:-1px; position:absolute; z-index:-1; } body div#devskin6392489 .container .arrows { width:0; height:0; line-height:0; border-left:31px solid transparent; border-top:21px solid #888; bottom:-43px; right:34px; position:absolute; } body div#devskin6392489 .container .arrower { width:0; height:0; line-height:0; border-left:30px solid transparent; border-top:20px solid #EDEDED; bottom:-40px; right:35px; position:absolute; }

CSS { Snippets : Wrapped Header }

Welcome to the first installment of my CSS Snippets journals. I've had a lot of questions over the years about how I create/achieve some of the elements in my journal skins so I thought I'd try my hand at a tutorial of sorts for the different elements I find fascinating and some of the work arounds needed to make them function properly when limited by deviantART's  journaling system. Although, "limited" doesn't feel like the correct word. To me it's more of a challenge and to persevere through it really gives me a thrill I just can't explain. It's not really a limitation as it forces one to think outside the box and hopefully when you get it just right, you'll get that same thrill.

I had originally planned to start these journal tuts after the new Journal/News system and Sta.sh Writer had been launched. I think showing you live what happens when CSS meets HTML would negate the need for a separate downloadable file, like is common in most other CSS tutorials found in the resources gallery. That along with the new Journal/News systems faving feature, you could add one of these Snippet journals to your favs and reread them at your own leisure. And with the Sta.sh Writer feature I could reBlog these journals across the CSS groups I'm a part of and reach a larger community. Plus... How sexy is this journal skin? Very, if I do say so myself! ;) Anyway, I've decided not to wait that long since I'm pretty impatient and I've had this journal skin coded up for a while just waiting to pounce. For those of you that are Beta testers you can feel free to add these journals to your favs the rest of you will just have to visit my journal tab on my userpage until the new system launches site wide.

Wrapped Header

So now to the reason we're all here. I'd like to show you how to make a wrapped effect using just HTML and CSS. In list tutorial you'll learn how to hijack the
header tag and turn it in to a way to break up you journal entries. You'll also learn how to to create a triangle shape using the border property in your CSS.

First off, let's start with the HTML we'll need. The elements below will be used to to create the container that holds the text, the header that is the title of the new topic and finally the triangle.

So since deviantART's journaling system only allows you to use descendant and class selectors we'll need to make 3 new class selectors. One for the container, one for the header and one for the triangle.

html

Title
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Styling the elements

In the code above I have used 2 class selectors and a H1 tag. If you're planning on using this code in your own journals you can skip the first container class since your journal comes prebuilt with a .Journalbox or .text CSS property and you can just target one of those in your CSS to adjust its properties. We could have also used a Class selector instead of a
tag but I like that it keeps the markup fairly clean and you might as well reuse elements that are already built in.

With the HTML out of the way, let's get to altering the CSS and skinning these elements.

css

.container {
background: #A8A8A8 ;
color: #FFF ;
padding: 20px 20px 20px 20px;
width: 200px;
font-size: 12px;
margin: auto;
position: relative;
}
.container h1 {
background: #828282;
color: #FFF ;
padding: 5px 25px 5px 30px;
font-size: 18px;
margin-left: -30px;
position: relative;
}
.container .triangle {
width: 0;
height: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
border-top: 10px solid #4C4C4C ;
position: absolute;
Hover for more ↴

The results

In the CSS for the container selector I've set a width of 200 pixels. This won't be necessary for your actual journal since that will stretch with the page. If you do set a width for this area, setting the margin as "auto" will allow the box to remain centered on the page when it's stretched wider than the box.

For the h1 tag we need to set a negative margin so that the header breaks out of the container box and is off to the left side.  The exact pixel distance is of course your preference but keep in mind that the number may be higher than you think because of the padding on the header. Take notice that we have the position set to relative. This is very important for the next step when aligning the triangle.

Finally, the triangle. We need no width or height for this element because this will be made by the border pixel size. As you can see in the CSS the borders are set to 10 pixels and given a colour. In the case of the left border this colour is transparent. When combined with another border that has a colour, in this case the top border, it creates a triangle. Were you to use a transparent right border this triangle would be flipped the opposite direction. Likewise, if you were to use a transparent top border and an opaque left or right border the triangle would be flipped upside down. Because the size of these border is 10 pixels it stands to reason that the height of this element is now 10 pixels. With this in mind we will need to move this element down 10 pixels using the negative bottom CSS property. To finish it off we ensure the position of this object is set as absolute. Keep in mind, if you were to use the position property as absolute without first setting the parent element (in this case h1) as relative this element would have been at the very bottom of the journal, far away from where you wanted it to be.

If you've got all that done correctly here's what you should have:

Title


Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

html

Title
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

css

.container {
background: #A8A8A8 ;
color: #FFF ;
padding: 20px 20px 20px 20px;
width: 200px;
font-size: 12px;
margin: auto;
position: relative;
}
.container h1 {
background: #828282;
color: #FFF ;
padding: 5px 25px 5px 30px;
font-size: 18px;
margin-left: -30px;
position: relative;
}
.container .triangle {
width: 0;
height: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
border-top: 10px solid #4C4C4C ;
position: absolute;
Hover for more ↴

Conclusion

So, with all that neatly tucked away in your journal, please, feel free to alter and tinker with this CSS to customize it to your tastes.  Here's an example of what I was able to make using elements from this journal, all without using a single image file:

❝
The time has come, my little friends, to talk of other things / Of shoes and ships and sealing wax, of cabbages and kings / And why the sea is boiling hot, and whether pigs have wigs / Calloo, Callay, come run away / With the cabbages and kings.

        The Walrus - 1951





Finalé

My apologies for the length of this journal. With the intro taking us so much space it was longer than I anticipated. Hopefully the next installment shouldn't be as large.

Speaking of the next installment. I have several other elements lined up but please, feel free to suggest topics you would like me to cover. I'm also more than happy to answer any questions within my means should you ask in a comment below. :)

Please feel free to leave any comments or critisism on the layout/flow of this journal. Is it too hard to follow? What could I improve? Any extra feedback would be appreciated.

!
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.