HOME | DD
Ikue — CSS Snippets: Wrapped Header
Published: 2011-10-15 20:44:20 +0000 UTC; Views: 5249; Favourites: 48; Downloads: 0
Redirect to original
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
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
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
css
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.
Related content
Comments: 58
Google. I am trying to learn to code, kind of.
👍: 0 ⏩: 1
Featured here Feature-O-Matic - Edition #02
Consider faving
👍: 0 ⏩: 0
Dammit, this was one of the things that got deleted when I cleaned my message center in November 
This would have saved me fiddlind with images to create triangle corners
👍: 0 ⏩: 1
Okay, tried your triangles (have been wanting to do them for a while, you updated this, so now is good). I made them into corners for and image, or rather, anything in a containing div.
[link]
p.s. Also featured you in it! Ha!
p.s.s. Do you know if watchers are updated if you uncheck portal and my journal?
👍: 0 ⏩: 1
They shouldn't be updated so long as you have the checkbox selected that says it's only a minor update (under the 'more options' tab at the bottom).
👍: 0 ⏩: 1
Ah, but it wasn't an update, it was an original post. Can you uncheck it for original posts?
👍: 0 ⏩: 1
Ah, no... You can't post a new journal without it notifying your watchers.
👍: 0 ⏩: 0
Thank god we could already fav journals. :'D
So simple and clean yet with so much character. ♥
👍: 0 ⏩: 0
That was a good and helpful read! That said, I really want the journal design you've got here. 
👍: 0 ⏩: 0
i didnt understand anything but it looks awesome! you are a CSS god
👍: 0 ⏩: 1
Very nicely done! That's actually something I hadn't figured out for myself so I think I'll have to have a play around with that now =] Like the way you've laid out the journal and structured the info - doing well!
👍: 0 ⏩: 1
Excellent tutorial! This is one of the most useful tutorials I've come across in a while. Thank you so much for it! Would you or do you have a tutorial for the css you did for this journal?
👍: 0 ⏩: 1
For a while now I've been trying to work out how to do seperate content boxes with the type of style you have. The white inner shadow, the darker border around the content box. Example; HTML content box, CSS content box, Conclusion box etc. I love the headers as well 
I just really want to make the content boxes pop out like you have them with the light shadows, inner/outer shadows
👍: 0 ⏩: 2
Also, the headers are using a custom font, no images needed for those. In fact, there are only two images used in the entire skin. Had originally made it to be with no images but I wanted it to pop a lil more.
👍: 0 ⏩: 1
It looks AMAZING. So slick and beautiful <3
👍: 0 ⏩: 0
These boxes are just div classes. I've hidden all the default dA code and margins and instead used my own. It takes a bit more html but you get the fancy separate boxes. I've got a few tips on box shadows coming up. If you have something specific you wanna know about them perhaps I can add it to the next installment.
👍: 0 ⏩: 1
I can't wait until you come out with another installment with tips on how to do box shadows <3 I really would love to learn how to do similiar boxes as you have done in this journal. I would imagine that once you get the basic CSS for it down, all you have to do is say
👍: 0 ⏩: 1
woooahhhh, so borders are like 4 triangular pieces of a box in these circumstances and if you leave 2 of them out they create a triangle? Amazing
👍: 0 ⏩: 1
Pretty neat right? You should see some of the other shapes you can make with similar techniques.
👍: 0 ⏩: 0
This looks really sexy
But i didn't expect anything else from you, i always love your lighter skins and the way you use white
Other than that, CSS fairy has two questions
"since your journal comes prebuilt with a .Journalbox or .text"
This is confusing me a bit. Journalbox does cover the whole journal area, while .text only covers the text area. Does it still work then or doesn't it matter what you take as long as it is a wrapping element?
"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."
This is pretty new for me. Did you read about this somewhere? I always thought that if an element has no height/width, that no border would appear as well... and that it does such tricky things when you have no actual size and only half of the element wrapped by borders is rather interesting. D:
Oh and i think that the length is pretty fine, especially as there is no decorative babbling, but a very good explaining of the topic. Looking forward to see more... and to be able to fav this anytime later lol
Was already wondering when you will get started with this
👍: 0 ⏩: 1
.Journalbox by itself links to the old markup, where as .text by itself is the new one. I was really just giving them as example of the two different markup codes. I should have been more clear about that, my apologies. I don't think though that it would matter since it's just the wrapping element. You would have to of course be aware of the padding/margin properties of this element so that you could adjust your header accordingly.
The border fun is pretty much just trail and error. If you set no height or width, even if it's just 0 pixels then the element would display as a block regardless. Specifying that you want it to be no height or width gives that nice right angle triangle. If you wanted a more equilateral triangle you could add another right border of the same size. I've not had any troubles displaying borders so long as the element size is specified. Zero just applies to the actual box itself so anything in side that box one show.
👍: 0 ⏩: 1
Yes i know, i was just confused that you mentioned both at the same time. Wasn't aware that they were just random examples. Don't apology, could have been another tricky thing i didn't know before, that's why i was asking.
Good to know, should keep that in mind.
👍: 0 ⏩: 0
Pretty awesome what you can achieve with CSS and HTML alone these days.
Thanks a bunch for sharing this, Chris! I'm going to start adding these journals to my favourites for future references.
👍: 0 ⏩: 1
Nicely done, this is why they added "Add to Favourites" to journals
👍: 0 ⏩: 1
Wow, I had no clue that was how to make a triangle! So simple. Very kewl. And love the CSS knowledge journal idea. Definitely more effective than in a journal thread so you can display the example right there. Making me think I should start posting some of my "classes" from #eCSSercise up in my journal as a more interactive lesson plan.
And yes, this journal is smexy. My favorite part is the disclaimer ;D
👍: 0 ⏩: 1
#eCSSited was the group that inspired me. I had planned to post it through the group blog system but with faving coming out I can hopefully reblog them through there also.
👍: 0 ⏩: 1
Can you join #eCSSercise as well? Hadn't you said something about being an admin of too many groups?? Which we're mostly admin for everything. But we're changing our format a bit so we can have less Mentor/Student based and more general learning with group help, but still one on one lessons. I just suggested we fill our blog with these resources. I have a lot of this sort of thing already written out in the forum there, but in the blog I could make the examples live so people can see it in action rather than try to read my excessive explanations. My poor Students, I have no short and concise explanations. they are all very much like this comment....
👍: 0 ⏩: 1
I would have to place myself in manually. Is this taking over from #eCSSited ?
👍: 0 ⏩: 1
Nope, it's independant but sister groups. More teaching and guiding others through CSS rather than learning from a tutorial. As many people have difficulty following tutorials, so having someone who talks to them and can walk them through understanding it is more focused on learning than just resources.
I actually have lessons and exercises/assignments for my Students to do to learn a particular technique.
You would be most welcomed there! There is a ton of interest in learning, but we only have a few Mentors. We have some people listed under Adviser capacity. But really, we need to change it so the main area is more general teaching and then have closed classes and some one on one help for a few people. Ongoing Mentoring isn't very feasible with so many life situations. And others who maybe didn't realize how much work it could entail.
`ginkgografix is in charge, it's her baby. ;D And we just added a third co-founder (I'm the second) ~autospy . Lately, it has been slow in the bg, sure a lot of people are busy with school.
👍: 0 ⏩: 0
| Next =>