HOME | DD

imnotsana β€” PE: CSS3 101 - Conclusion + Trivia and Contest
Published: 2013-06-03 02:19:03 +0000 UTC; Views: 11096; Favourites: 29; Downloads: 0
Redirect to original
Description body div#devskin10068498 div.drag-and-collect, body div#devskin10068498 .drag-and-collect { display:none!important; background:none!important; } body div#devskin10068498 .fig7 .tr .shadow-holder, body div#devskin10068498 .fig7 .tr .shadow, body div#devskin10068498 .fig7 .tr .wrap, body div#devskin10068498 .fig7 .tr .lit, body div#devskin10068498 .fig7 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig7 .tr .lit > i, body div#devskin10068498 .fig7 .tr .lit > img, body div#devskin10068498 .fig7 .tr .lit q * { display:none; } body div#devskin10068498 .fig7 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig7 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:40px; } body div#devskin10068498 .fig7 .tr, body div#devskin10068498 .fig7 .tr .lit q::before { width:200px; height:200px; } body div#devskin10068498 .fig7 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .fig7 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:cyan url('https://th00.deviantart.net/fs71/200H/i/2013/146/9/2/propose_a_toast__by_im_not_sana-d66maae.png') no-repeat center center; background-size:50%; } body div#devskin10068498 .fig7 .tr q[style*='-1px']::before { background-size:50.39%; background-color:#00DAFF; } body div#devskin10068498 .fig7 .tr q[style*='-2px']::before { background-size:50.98%; background-color:#00B7FF; } body div#devskin10068498 .fig7 .tr q[style*='-3px']::before { background-size:51.80%; background-color:#0098FF; } body div#devskin10068498 .fig7 .tr q[style*='-4px']::before { background-size:52.85%; background-color:#007AFF; } body div#devskin10068498 .fig7 .tr q[style*='-5px']::before { background-size:54.17%; background-color:#0060FF; } body div#devskin10068498 .fig7 .tr q[style*='-6px']::before { background-size:55.50%; background-color:#0045FF; } body div#devskin10068498 .fig7 .tr q[style*='-7px']::before { background-size:57.31%; background-color:#0031FF; } body div#devskin10068498 .fig7 .tr q[style*='-8px']::before { background-size:58.78%; background-color:#001FFF; } body div#devskin10068498 .fig7 .tr q[style*='-9px']::before { background-size:60.62%; background-color:#0011FF; } body div#devskin10068498 .fig7 .tr q[style*='-10px']::before { background-size:62.20%; background-color:#0007FF; } body div#devskin10068498 .fig7 .tr q[style*='-11px']::before { background-size:63.77%; background-color:#0002FF; } body div#devskin10068498 .fig7 .tr q[style*='-12px']::before { background-size:65.52%; background-color:#0000FF; } body div#devskin10068498 .fig7 .tr q[style*='-13px']::before { background-size:66.76%; background-color:#0003FF; } body div#devskin10068498 .fig7 .tr q[style*='-14px']::before { background-size:68.16%; background-color:#000AFF; } body div#devskin10068498 .fig7 .tr q[style*='-15px']::before { background-size:69.29%; background-color:#0014FF; } body div#devskin10068498 .fig7 .tr q[style*='-16px']::before { background-size:70.56%; background-color:#0026FF; } body div#devskin10068498 .fig7 .tr q[style*='-17px']::before { background-size:71.56%; background-color:#0036FF; } body div#devskin10068498 .fig7 .tr q[style*='-18px']::before { background-size:72.50%; background-color:#0050FF; } body div#devskin10068498 .fig7 .tr q[style*='-19px']::before { background-size:73.38%; background-color:#0067FF; } body div#devskin10068498 .fig7 .tr q[style*='-20px']::before { background-size:74.06%; background-color:#0080FF; } body div#devskin10068498 .fig7 .tr q[style*='-21px']::before { background-size:74.83%; background-color:#0098FF; } body div#devskin10068498 .fig7 .tr q[style*='-22px']::before { background-size:75.42%; background-color:#00AFFF; } body div#devskin10068498 .fig7 .tr q[style*='-23px']::before { background-size:76.07%; background-color:#00C9FF; } body div#devskin10068498 .fig7 .tr q[style*='-24px']::before { background-size:76.57%; background-color:#00DBFF; } body div#devskin10068498 .fig7 .tr q[style*='-25px']::before { background-size:77.03%; background-color:#00E9FF; } body div#devskin10068498 .fig7 .tr q[style*='-26px']::before { background-size:77.46%; background-color:#00F6FF; } body div#devskin10068498 .fig7 .tr q[style*='-27px']::before { background-size:77.85%; background-color:#00FCFF; } body div#devskin10068498 .fig7 .tr q[style*='-28px']::before { background-size:78.25%; background-color:#00FFFF; } body div#devskin10068498 .fig7 .tr q[style*='-29px']::before { background-size:78.52%; background-color:#00FDFF; } body div#devskin10068498 .fig7 .tr q[style*='-30px']::before { background-size:78.83%; background-color:#00F8FF; } body div#devskin10068498 .fig7 .tr q[style*='-31px']::before { background-size:79.05%; background-color:#00ECFF; } body div#devskin10068498 .fig7 .tr q[style*='-32px']::before { background-size:79.29%; background-color:#00E1FF; } body div#devskin10068498 .fig7 .tr q[style*='-33px']::before { background-size:79.45%; background-color:#00CDFF; } body div#devskin10068498 .fig7 .tr q[style*='-34px']::before { background-size:79.62%; background-color:#00BBFF; } body div#devskin10068498 .fig7 .tr q[style*='-35px']::before { background-size:79.73%; background-color:#00A0FF; } body div#devskin10068498 .fig7 .tr q[style*='-36px']::before { background-size:79.83%; background-color:#0087FF; } body div#devskin10068498 .fig7 .tr q[style*='-37px']::before { background-size:79.90%; background-color:#0067FF; } body div#devskin10068498 .fig7 .tr q[style*='-38px']::before { background-size:79.96%; background-color:#0048FF; } body div#devskin10068498 .fig7 .tr q[style*='-39px']::before { background-size:79.99%; background-color:#0029FF; } body div#devskin10068498 .fig7 .tr q[style*='-40px']::before { background-size:80.00%; background-color:#0000FF; } body div#devskin10068498 .fig5, body div#devskin10068498 .fig1, body div#devskin10068498 .fig2 { width:200px; background:rgb(0, 0, 0); background:rgba(0,0,0,0.6); vertical-align:middle; } body div#devskin10068498 .fig6 .tr .shadow-holder, body div#devskin10068498 .fig6 .tr .shadow, body div#devskin10068498 .fig6 .tr .wrap, body div#devskin10068498 .fig6 .tr .lit, body div#devskin10068498 .fig6 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig6 .tr .lit > i, body div#devskin10068498 .fig6 .tr .lit > img, body div#devskin10068498 .fig6 .tr .lit q * { display:none; } body div#devskin10068498 .fig6 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig6 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:40px; } body div#devskin10068498 .fig6 .tr, body div#devskin10068498 .fig6 .tr .lit q::before { width:300px; height:300px; } body div#devskin10068498 .fig6 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .fig6 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:url('https://th08.deviantart.net/fs70/200H/i/2011/328/2/d/ich_liebe_dich__by_im_not_sana-d378ws3.jpg') no-repeat center center; background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-1px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-2px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-3px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-4px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-5px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-6px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-7px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-8px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-9px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-10px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-11px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-12px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-13px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-14px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-15px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-16px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-17px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-18px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-19px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-20px']::before { background-size:72.10%; } body div#devskin10068498 .fig6 .tr q[style*='-21px']::before { background-size:74.38%; } body div#devskin10068498 .fig6 .tr q[style*='-22px']::before { background-size:76.36%; } body div#devskin10068498 .fig6 .tr q[style*='-23px']::before { background-size:78.45%; } body div#devskin10068498 .fig6 .tr q[style*='-24px']::before { background-size:80.28%; } body div#devskin10068498 .fig6 .tr q[style*='-25px']::before { background-size:82.06%; } body div#devskin10068498 .fig6 .tr q[style*='-26px']::before { background-size:84.77%; } body div#devskin10068498 .fig6 .tr q[style*='-27px']::before { background-size:86.41%; } body div#devskin10068498 .fig6 .tr q[style*='-28px']::before { background-size:88.08%; } body div#devskin10068498 .fig6 .tr q[style*='-29px']::before { background-size:90.53%; } body div#devskin10068498 .fig6 .tr q[style*='-30px']::before { background-size:92.06%; } body div#devskin10068498 .fig6 .tr q[style*='-31px']::before { background-size:94.41%; } body div#devskin10068498 .fig6 .tr q[style*='-32px']::before { background-size:96.81%; } body div#devskin10068498 .fig6 .tr q[style*='-33px']::before { background-size:97.08%; } body div#devskin10068498 .fig6 .tr q[style*='-34px']::before { background-size:98.36%; } body div#devskin10068498 .fig6 .tr q[style*='-35px']::before { background-size:99.55%; } body div#devskin10068498 .fig6 .tr q[style*='-36px']::before { background-size:99.71%; } body div#devskin10068498 .fig6 .tr q[style*='-37px']::before { background-size:99.84%; } body div#devskin10068498 .fig6 .tr q[style*='-38px']::before { background-size:99.94%; } body div#devskin10068498 .fig6 .tr q[style*='-39px']::before { background-size:99.98%; } body div#devskin10068498 .fig6 .tr q[style*='-40px']::before { background-size:100.00%; } body div#devskin10068498 .fig5 .tr .shadow-holder, body div#devskin10068498 .fig5 .tr .shadow, body div#devskin10068498 .fig5 .tr .wrap, body div#devskin10068498 .fig5 .tr .lit, body div#devskin10068498 .fig5 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig5 .tr .lit > i, body div#devskin10068498 .fig5 .tr .lit > img, body div#devskin10068498 .fig5 .tr .lit q * { display:none; } body div#devskin10068498 .fig5 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig5 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:27px; } body div#devskin10068498 .fig5 .tr, body div#devskin10068498 .fig5 .tr .lit q::before { width:110px; height:100px; } body div#devskin10068498 .fig5 .tr { display:inline-block; position:relative; visibility:hidden; overflow:hidden; } body div#devskin10068498 .fig5 .tr .lit q::before { content:'Menu' ' ' ' ' 'Facebook Twitter deviantART'; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; font-size:20px; font-family:'Voltaire'; line-height:20px; overflow:hidden; border-top-right-radius:3px; -moz-border-top-right-radius:3px; -webkit-border-top-right-radius:3px; border-top-left-radius:3px; -moz-border-top-left-radius:3px; -webkit-border-top-left-radius:3px; border-bottom:2px solid black; height:50px; text-align:center; background:gray; height:20px; } body div#devskin10068498 .fig5 .tr q[style*='-1px']::before { height:20px; } body div#devskin10068498 .fig5 .tr q[style*='-2px']::before { height:21px; } body div#devskin10068498 .fig5 .tr q[style*='-3px']::before { height:21px; } body div#devskin10068498 .fig5 .tr q[style*='-4px']::before { height:22px; } body div#devskin10068498 .fig5 .tr q[style*='-5px']::before { height:24px; } body div#devskin10068498 .fig5 .tr q[style*='-6px']::before { height:25px; } body div#devskin10068498 .fig5 .tr q[style*='-7px']::before { height:27px; } body div#devskin10068498 .fig5 .tr q[style*='-8px']::before { height:29px; } body div#devskin10068498 .fig5 .tr q[style*='-9px']::before { height:31px; } body div#devskin10068498 .fig5 .tr q[style*='-10px']::before { height:33px; } body div#devskin10068498 .fig5 .tr q[style*='-11px']::before { height:36px; } body div#devskin10068498 .fig5 .tr q[style*='-12px']::before { height:38px; } body div#devskin10068498 .fig5 .tr q[style*='-13px']::before { height:41px; } body div#devskin10068498 .fig5 .tr q[style*='-14px']::before { height:43px; } body div#devskin10068498 .fig5 .tr q[style*='-15px']::before { height:47px; } body div#devskin10068498 .fig5 .tr q[style*='-16px']::before { height:49px; } body div#devskin10068498 .fig5 .tr q[style*='-17px']::before { height:53px; } body div#devskin10068498 .fig5 .tr q[style*='-18px']::before { height:56px; } body div#devskin10068498 .fig5 .tr q[style*='-19px']::before { height:59px; } body div#devskin10068498 .fig5 .tr q[style*='-20px']::before { height:63px; } body div#devskin10068498 .fig5 .tr q[style*='-21px']::before { height:66px; } body div#devskin10068498 .fig5 .tr q[style*='-22px']::before { height:70px; } body div#devskin10068498 .fig5 .tr q[style*='-23px']::before { height:74px; } body div#devskin10068498 .fig5 .tr q[style*='-24px']::before { height:78px; } body div#devskin10068498 .fig5 .tr q[style*='-25px']::before { height:81px; } body div#devskin10068498 .fig5 .tr q[style*='-26px']::before { height:85px; } body div#devskin10068498 .fig5 .tr q[style*='-27px']::before { height:90px; } body div#devskin10068498 .fig1 .tr .shadow-holder, body div#devskin10068498 .fig1 .tr .shadow, body div#devskin10068498 .fig1 .tr .wrap, body div#devskin10068498 .fig1 .tr .lit, body div#devskin10068498 .fig1 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig1 .tr .lit > i, body div#devskin10068498 .fig1 .tr .lit > img, body div#devskin10068498 .fig1 .tr .lit q * { display:none; } body div#devskin10068498 .fig1 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig1 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:27px; } body div#devskin10068498 .fig1 .tr, body div#devskin10068498 .fig1 .tr .lit q::before { width:150px; height:50px; } body div#devskin10068498 .fig1 .tr { display:inline-block; position:relative; visibility:hidden; overflow:hidden; } body div#devskin10068498 .fig1 .tr .lit q::before { content:url(https://fc01.deviantart.net/fs70/f/2010/179/3/f/Sword_Tard_by_jahw.gif); display:block; position:absolute; left:0; top:0; text-indent:0; color:black; height:50px; padding-left:0px; } body div#devskin10068498 .fig1 .tr q[style*='-1px']::before { padding-left:1px; } body div#devskin10068498 .fig1 .tr q[style*='-2px']::before { padding-left:3px; } body div#devskin10068498 .fig1 .tr q[style*='-3px']::before { padding-left:6px; } body div#devskin10068498 .fig1 .tr q[style*='-4px']::before { padding-left:9px; } body div#devskin10068498 .fig1 .tr q[style*='-5px']::before { padding-left:13px; } body div#devskin10068498 .fig1 .tr q[style*='-6px']::before { padding-left:18px; } body div#devskin10068498 .fig1 .tr q[style*='-7px']::before { padding-left:21px; } body div#devskin10068498 .fig1 .tr q[style*='-8px']::before { padding-left:25px; } body div#devskin10068498 .fig1 .tr q[style*='-9px']::before { padding-left:29px; } body div#devskin10068498 .fig1 .tr q[style*='-10px']::before { padding-left:32px; } body div#devskin10068498 .fig1 .tr q[style*='-11px']::before { padding-left:35px; } body div#devskin10068498 .fig1 .tr q[style*='-12px']::before { padding-left:37px; } body div#devskin10068498 .fig1 .tr q[style*='-13px']::before { padding-left:39px; } body div#devskin10068498 .fig1 .tr q[style*='-14px']::before { padding-left:41px; } body div#devskin10068498 .fig1 .tr q[style*='-15px']::before { padding-left:43px; } body div#devskin10068498 .fig1 .tr q[style*='-16px']::before { padding-left:44px; } body div#devskin10068498 .fig1 .tr q[style*='-17px']::before { padding-left:45px; } body div#devskin10068498 .fig1 .tr q[style*='-18px']::before { padding-left:46px; } body div#devskin10068498 .fig1 .tr q[style*='-19px']::before { padding-left:47px; } body div#devskin10068498 .fig1 .tr q[style*='-20px']::before { padding-left:48px; } body div#devskin10068498 .fig1 .tr q[style*='-21px']::before { padding-left:48px; } body div#devskin10068498 .fig1 .tr q[style*='-22px']::before { padding-left:49px; } body div#devskin10068498 .fig1 .tr q[style*='-23px']::before { padding-left:49px; } body div#devskin10068498 .fig1 .tr q[style*='-24px']::before { padding-left:50px; } body div#devskin10068498 .fig1 .tr q[style*='-25px']::before { padding-left:50px; } body div#devskin10068498 .fig1 .tr q[style*='-26px']::before { padding-left:50px; } body div#devskin10068498 .fig1 .tr q[style*='-27px']::before { padding-left:50px; } body div#devskin10068498 .stamp { width:100%; text-align:center; } body div#devskin10068498 .stamp .tr .shadow-holder, body div#devskin10068498 .stamp .tr .shadow, body div#devskin10068498 .stamp .tr .wrap, body div#devskin10068498 .stamp .tr .lit, body div#devskin10068498 .stamp .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .stamp .tr .lit > i, body div#devskin10068498 .stamp .tr .lit > img, body div#devskin10068498 .stamp .tr .lit q * { display:none; } body div#devskin10068498 .stamp .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .stamp .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:40px; } body div#devskin10068498 .stamp .tr, body div#devskin10068498 .stamp .tr .lit q::before { width:178px; height:250px; } body div#devskin10068498 .stamp .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .stamp .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:url('https://2.bp.blogspot.com/-eZSxYTh0D_E/UQbnl2C41mI/AAAAAAAAieg/fTLhj6CN9EM/s1600/CSS3-video-tutorials.png') no-repeat center center; text-align:center; background-size:50%; } body div#devskin10068498 .stamp .tr q[style*='-1px']::before { background-size:50%; } body div#devskin10068498 .stamp .tr q[style*='-2px']::before { background-size:52%; } body div#devskin10068498 .stamp .tr q[style*='-3px']::before { background-size:54%; } body div#devskin10068498 .stamp .tr q[style*='-4px']::before { background-size:56%; } body div#devskin10068498 .stamp .tr q[style*='-5px']::before { background-size:58%; } body div#devskin10068498 .stamp .tr q[style*='-6px']::before { background-size:60%; } body div#devskin10068498 .stamp .tr q[style*='-7px']::before { background-size:62%; } body div#devskin10068498 .stamp .tr q[style*='-8px']::before { background-size:64%; } body div#devskin10068498 .stamp .tr q[style*='-9px']::before { background-size:66%; } body div#devskin10068498 .stamp .tr q[style*='-10px']::before { background-size:68%; } body div#devskin10068498 .stamp .tr q[style*='-11px']::before { background-size:70%; } body div#devskin10068498 .stamp .tr q[style*='-12px']::before { background-size:72%; } body div#devskin10068498 .stamp .tr q[style*='-13px']::before { background-size:74%; } body div#devskin10068498 .stamp .tr q[style*='-14px']::before { background-size:76%; } body div#devskin10068498 .stamp .tr q[style*='-15px']::before { background-size:78%; } body div#devskin10068498 .stamp .tr q[style*='-16px']::before { background-size:80%; } body div#devskin10068498 .stamp .tr q[style*='-17px']::before { background-size:82%; } body div#devskin10068498 .stamp .tr q[style*='-18px']::before { background-size:84%; } body div#devskin10068498 .stamp .tr q[style*='-19px']::before { background-size:86%; } body div#devskin10068498 .stamp .tr q[style*='-20px']::before { background-size:88%; } body div#devskin10068498 .stamp .tr q[style*='-21px']::before { background-size:90%; } body div#devskin10068498 .stamp .tr q[style*='-22px']::before { background-size:92%; } body div#devskin10068498 .stamp .tr q[style*='-23px']::before { background-size:94%; } body div#devskin10068498 .stamp .tr q[style*='-24px']::before { background-size:96%; } body div#devskin10068498 .stamp .tr q[style*='-25px']::before { background-size:98%; } body div#devskin10068498 .stamp .tr q[style*='-26px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-27px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-28px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-29px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-30px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-31px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-32px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-33px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-34px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-35px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-36px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-37px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-38px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-39px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-40px']::before { background-size:100%; } body div#devskin10068498 .title { width:100%; text-align:center; } body div#devskin10068498 .title .tr .shadow-holder, body div#devskin10068498 .title .tr .shadow, body div#devskin10068498 .title .tr .wrap, body div#devskin10068498 .title .tr .lit, body div#devskin10068498 .title .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .title .tr .lit > i, body div#devskin10068498 .title .tr .lit > img, body div#devskin10068498 .title .tr .lit q * { display:none; } body div#devskin10068498 .title .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .title .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:80px; } body div#devskin10068498 .title .tr, body div#devskin10068498 .title .tr .lit q::before { width:400px; } body div#devskin10068498 .title .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .title .tr .lit q::before { content:'CSS3 101 - Conclusion'; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; font-family:Trebuchet; text-shadow:#fff 0px 1px 0px; font-weight:bold; font-size:30px; background:none; color:#B73E62; text-align:center; } body div#devskin10068498 .title .tr q[style*='-1px']::before { color:#EC1300; } body div#devskin10068498 .title .tr q[style*='-2px']::before { color:#DA2500; } body div#devskin10068498 .title .tr q[style*='-3px']::before { color:#C83700; } body div#devskin10068498 .title .tr q[style*='-4px']::before { color:#B74800; } body div#devskin10068498 .title .tr q[style*='-5px']::before { color:#A75800; } body div#devskin10068498 .title .tr q[style*='-6px']::before { color:#986700; } body div#devskin10068498 .title .tr q[style*='-7px']::before { color:#897600; } body div#devskin10068498 .title .tr q[style*='-8px']::before { color:#798600; } body div#devskin10068498 .title .tr q[style*='-9px']::before { color:#6B9400; } body div#devskin10068498 .title .tr q[style*='-10px']::before { color:#5EA100; } body div#devskin10068498 .title .tr q[style*='-11px']::before { color:#51AE00; } body div#devskin10068498 .title .tr q[style*='-12px']::before { color:#45BA00; } body div#devskin10068498 .title .tr q[style*='-13px']::before { color:#3BC400; } body div#devskin10068498 .title .tr q[style*='-14px']::before { color:#31CE00; } body div#devskin10068498 .title .tr q[style*='-15px']::before { color:#27D800; } body div#devskin10068498 .title .tr q[style*='-16px']::before { color:#1FE000; } body div#devskin10068498 .title .tr q[style*='-17px']::before { color:#18E700; } body div#devskin10068498 .title .tr q[style*='-18px']::before { color:#11EE00; } body div#devskin10068498 .title .tr q[style*='-19px']::before { color:#0CF300; } body div#devskin10068498 .title .tr q[style*='-20px']::before { color:#07F800; } body div#devskin10068498 .title .tr q[style*='-21px']::before { color:#04FB00; } body div#devskin10068498 .title .tr q[style*='-22px']::before { color:#02FD00; } body div#devskin10068498 .title .tr q[style*='-23px']::before { color:#00FF00; } body div#devskin10068498 .title .tr q[style*='-24px']::before { color:#00FF00; } body div#devskin10068498 .title .tr q[style*='-25px']::before { color:#01FE00; } body div#devskin10068498 .title .tr q[style*='-26px']::before { color:#03FC00; } body div#devskin10068498 .title .tr q[style*='-27px']::before { color:#06F900; } body div#devskin10068498 .title .tr q[style*='-28px']::before { color:#0AF500; } body div#devskin10068498 .title .tr q[style*='-29px']::before { color:#0FF000; } body div#devskin10068498 .title .tr q[style*='-30px']::before { color:#16E900; } body div#devskin10068498 .title .tr q[style*='-31px']::before { color:#1DE200; } body div#devskin10068498 .title .tr q[style*='-32px']::before { color:#24DB00; } body div#devskin10068498 .title .tr q[style*='-33px']::before { color:#2DD200; } body div#devskin10068498 .title .tr q[style*='-34px']::before { color:#38C700; } body div#devskin10068498 .title .tr q[style*='-35px']::before { color:#42BD00; } body div#devskin10068498 .title .tr q[style*='-36px']::before { color:#4DB200; } body div#devskin10068498 .title .tr q[style*='-37px']::before { color:#5BA400; } body div#devskin10068498 .title .tr q[style*='-38px']::before { color:#679800; } body div#devskin10068498 .title .tr q[style*='-39px']::before { color:#738C00; } body div#devskin10068498 .title .tr q[style*='-40px']::before { color:#808000; } body div#devskin10068498 .title .tr q[style*='-41px']::before { color:#8C7300; } body div#devskin10068498 .title .tr q[style*='-42px']::before { color:#986700; } body div#devskin10068498 .title .tr q[style*='-43px']::before { color:#A45B00; } body div#devskin10068498 .title .tr q[style*='-44px']::before { color:#B24D00; } body div#devskin10068498 .title .tr q[style*='-45px']::before { color:#BD4200; } body div#devskin10068498 .title .tr q[style*='-46px']::before { color:#C73800; } body div#devskin10068498 .title .tr q[style*='-47px']::before { color:#D02F00; } body div#devskin10068498 .title .tr q[style*='-48px']::before { color:#DB2400; } body div#devskin10068498 .title .tr q[style*='-49px']::before { color:#E21D00; } body div#devskin10068498 .title .tr q[style*='-50px']::before { color:#E91600; } body div#devskin10068498 .title .tr q[style*='-51px']::before { color:#F00F00; } body div#devskin10068498 .title .tr q[style*='-52px']::before { color:#F50A00; } body div#devskin10068498 .title .tr q[style*='-53px']::before { color:#F90600; } body div#devskin10068498 .title .tr q[style*='-54px']::before { color:#FC0300; } body div#devskin10068498 .title .tr q[style*='-55px']::before { color:#FE0100; } body div#devskin10068498 .title .tr q[style*='-56px']::before { color:#FF0000; } body div#devskin10068498 .title .tr q[style*='-57px']::before { color:#FF0000; } body div#devskin10068498 .title .tr q[style*='-58px']::before { color:#FD0200; } body div#devskin10068498 .title .tr q[style*='-59px']::before { color:#FB0400; } body div#devskin10068498 .title .tr q[style*='-60px']::before { color:#F80700; } body div#devskin10068498 .title .tr q[style*='-61px']::before { color:#F30C00; } body div#devskin10068498 .title .tr q[style*='-62px']::before { color:#ED1200; } body div#devskin10068498 .title .tr q[style*='-63px']::before { color:#E71800; } body div#devskin10068498 .title .tr q[style*='-64px']::before { color:#E01F00; } body div#devskin10068498 .title .tr q[style*='-65px']::before { color:#D72800; } body div#devskin10068498 .title .tr q[style*='-66px']::before { color:#CE3100; } body div#devskin10068498 .title .tr q[style*='-67px']::before { color:#C43B00; } body div#devskin10068498 .title .tr q[style*='-68px']::before { color:#BB4400; } body div#devskin10068498 .title .tr q[style*='-69px']::before { color:#AE5100; } body div#devskin10068498 .title .tr q[style*='-70px']::before { color:#A25D00; } body div#devskin10068498 .title .tr q[style*='-71px']::before { color:#946B00; } body div#devskin10068498 .title .tr q[style*='-72px']::before { color:#877800; } body div#devskin10068498 .title .tr q[style*='-73px']::before { color:#798600; } body div#devskin10068498 .title .tr q[style*='-74px']::before { color:#699600; } body div#devskin10068498 .title .tr q[style*='-75px']::before { color:#58A700; } body div#devskin10068498 .title .tr q[style*='-76px']::before { color:#48B700; } body div#devskin10068498 .title .tr q[style*='-77px']::before { color:#37C800; } body div#devskin10068498 .title .tr q[style*='-78px']::before { color:#26D900; } body div#devskin10068498 .title .tr q[style*='-79px']::before { color:#12ED00; } body div#devskin10068498 .title .tr q[style*='-80px']::before { color:#00FF00; } body div#devskin10068498 .tr .shadow-holder, body div#devskin10068498 .tr .shadow, body div#devskin10068498 .tr .wrap, body div#devskin10068498 .tr .lit, body div#devskin10068498 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .tr .lit > i, body div#devskin10068498 .tr .lit > img, body div#devskin10068498 .tr .lit q * { display:none; } body div#devskin10068498 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:100px; } body div#devskin10068498 .tr, body div#devskin10068498 .tr .lit q::before { width:400px; } body div#devskin10068498 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; font-family:Trebuchet; text-shadow:#fff 0px 1px 0px; font-weight:bold; font-size:28px; background:none; color:#B73E62; text-align:center; line-height:28px; } body div#devskin10068498 .tr q[style*='-1px']::before { color:#EC1300; } body div#devskin10068498 .tr q[style*='-2px']::before { color:#DA2500; } body div#devskin10068498 .tr q[style*='-3px']::before { color:#C83700; } body div#devskin10068498 .tr q[style*='-4px']::before { color:#B74800; } body div#devskin10068498 .tr q[style*='-5px']::before { color:#A75800; } body div#devskin10068498 .tr q[style*='-6px']::before { color:#986700; } body div#devskin10068498 .tr q[style*='-7px']::before { color:#897600; } body div#devskin10068498 .tr q[style*='-8px']::before { color:#798600; } body div#devskin10068498 .tr q[style*='-9px']::before { color:#6B9400; } body div#devskin10068498 .tr q[style*='-10px']::before { color:#5EA100; } body div#devskin10068498 .tr q[style*='-11px']::before { color:#51AE00; } body div#devskin10068498 .tr q[style*='-12px']::before { color:#45BA00; } body div#devskin10068498 .tr q[style*='-13px']::before { color:#3BC400; } body div#devskin10068498 .tr q[style*='-14px']::before { color:#31CE00; } body div#devskin10068498 .tr q[style*='-15px']::before { color:#27D800; } body div#devskin10068498 .tr q[style*='-16px']::before { color:#1FE000; } body div#devskin10068498 .tr q[style*='-17px']::before { color:#18E700; } body div#devskin10068498 .tr q[style*='-18px']::before { color:#11EE00; } body div#devskin10068498 .tr q[style*='-19px']::before { color:#0CF300; } body div#devskin10068498 .tr q[style*='-20px']::before { color:#07F800; } body div#devskin10068498 .tr q[style*='-21px']::before { color:#04FB00; } body div#devskin10068498 .tr q[style*='-22px']::before { color:#02FD00; } body div#devskin10068498 .tr q[style*='-23px']::before { color:#00FF00; } body div#devskin10068498 .tr q[style*='-24px']::before { color:#00FF00; } body div#devskin10068498 .tr q[style*='-25px']::before { color:#01FE00; } body div#devskin10068498 .tr q[style*='-26px']::before { color:#03FC00; } body div#devskin10068498 .tr q[style*='-27px']::before { color:#06F900; } body div#devskin10068498 .tr q[style*='-28px']::before { color:#0AF500; } body div#devskin10068498 .tr q[style*='-29px']::before { color:#0FF000; } body div#devskin10068498 .tr q[style*='-30px']::before { color:#16E900; } body div#devskin10068498 .tr q[style*='-31px']::before { color:#1DE200; } body div#devskin10068498 .tr q[style*='-32px']::before { color:#24DB00; } body div#devskin10068498 .tr q[style*='-33px']::before { color:#2DD200; } body div#devskin10068498 .tr q[style*='-34px']::before { color:#38C700; } body div#devskin10068498 .tr q[style*='-35px']::before { color:#42BD00; } body div#devskin10068498 .tr q[style*='-36px']::before { color:#4DB200; } body div#devskin10068498 .tr q[style*='-37px']::before { color:#5BA400; } body div#devskin10068498 .tr q[style*='-38px']::before { color:#679800; } body div#devskin10068498 .tr q[style*='-39px']::before { color:#738C00; } body div#devskin10068498 .tr q[style*='-40px']::before { color:#808000; } body div#devskin10068498 .tr q[style*='-41px']::before { color:#8C7300; } body div#devskin10068498 .tr q[style*='-42px']::before { color:#986700; } body div#devskin10068498 .tr q[style*='-43px']::before { color:#A45B00; } body div#devskin10068498 .tr q[style*='-44px']::before { color:#B24D00; } body div#devskin10068498 .tr q[style*='-45px']::before { color:#BD4200; } body div#devskin10068498 .tr q[style*='-46px']::before { color:#C73800; } body div#devskin10068498 .tr q[style*='-47px']::before { color:#D02F00; } body div#devskin10068498 .tr q[style*='-48px']::before { color:#DB2400; } body div#devskin10068498 .tr q[style*='-49px']::before { color:#E21D00; } body div#devskin10068498 .tr q[style*='-50px']::before { color:#E91600; } body div#devskin10068498 .tr q[style*='-51px']::before { color:#F00F00; } body div#devskin10068498 .tr q[style*='-52px']::before { color:#F50A00; } body div#devskin10068498 .tr q[style*='-53px']::before { color:#F90600; } body div#devskin10068498 .tr q[style*='-54px']::before { color:#FC0300; } body div#devskin10068498 .tr q[style*='-55px']::before { color:#FE0100; } body div#devskin10068498 .tr q[style*='-56px']::before { color:#FF0000; } body div#devskin10068498 .tr q[style*='-57px']::before { color:#FF0000; } body div#devskin10068498 .tr q[style*='-58px']::before { color:#FD0200; } body div#devskin10068498 .tr q[style*='-59px']::before { color:#FB0400; } body div#devskin10068498 .tr q[style*='-60px']::before { color:#F80700; } body div#devskin10068498 .tr q[style*='-61px']::before { color:#F30C00; } body div#devskin10068498 .tr q[style*='-62px']::before { color:#ED1200; } body div#devskin10068498 .tr q[style*='-63px']::before { color:#E71800; } body div#devskin10068498 .tr q[style*='-64px']::before { color:#E01F00; } body div#devskin10068498 .tr q[style*='-65px']::before { color:#D72800; } body div#devskin10068498 .tr q[style*='-66px']::before { color:#CE3100; } body div#devskin10068498 .tr q[style*='-67px']::before { color:#C43B00; } body div#devskin10068498 .tr q[style*='-68px']::before { color:#BB4400; } body div#devskin10068498 .tr q[style*='-69px']::before { color:#AE5100; } body div#devskin10068498 .tr q[style*='-70px']::before { color:#A25D00; } body div#devskin10068498 .tr q[style*='-71px']::before { color:#946B00; } body div#devskin10068498 .tr q[style*='-72px']::before { color:#877800; } body div#devskin10068498 .tr q[style*='-73px']::before { color:#798600; } body div#devskin10068498 .tr q[style*='-74px']::before { color:#699600; } body div#devskin10068498 .tr q[style*='-75px']::before { color:#58A700; } body div#devskin10068498 .tr q[style*='-76px']::before { color:#48B700; } body div#devskin10068498 .tr q[style*='-77px']::before { color:#37C800; } body div#devskin10068498 .tr q[style*='-78px']::before { color:#26D900; } body div#devskin10068498 .tr q[style*='-79px']::before { color:#12ED00; } body div#devskin10068498 .tr q[style*='-80px']::before { color:#00FF00; } body div#devskin10068498 .h1 .tr .lit q::before { content:'CSS3 101 - Transition'; } body div#devskin10068498 .h1 { width:100%; text-align:center; } body div#devskin10068498 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin10068498 .gr-top { display:none; } body div#devskin10068498 .gr-top .gr { display:none; } body div#devskin10068498 .gr-top h2 img { display:none; } body div#devskin10068498 .gr-top h2 { display:none; } body div#devskin10068498 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; } body div#devskin10068498 .gr { background:transparent; border:none; } body div#devskin10068498 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin10068498 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin10068498 i.tri { display:none; } body div#devskin10068498 i.gr1 { display:none; } body div#devskin10068498 i.gr2 { display:none; } body div#devskin10068498 i.gr3 { display:none; } body div#devskin10068498 i.gb { display:none; } body div#devskin10068498 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin10068498 .top img { margin:0px auto; min-width:529px; } body div#devskin10068498 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin10068498 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin10068498 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin10068498 span.board { display:none; } body div#devskin10068498 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin10068498 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin10068498 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin10068498 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin10068498 a { color:#B73E62; text-decoration:none; } body div#devskin10068498 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin10068498 ul { margin:0px 0px 0px 0px; } body div#devskin10068498 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif'); margin:0; padding:0; line-height:0px; } body div#devskin10068498 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin10068498 li b sup { font-size:10px; font-weight:normal; } body div#devskin10068498 .list { display:none!important; } body div#devskin10068498 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin10068498 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin10068498 .clear_ { clear:both!important; } body div#devskin10068498 .clear { clear:both!important; } body div#devskin10068498 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin10068498 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin10068498 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin10068498 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10068498 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin10068498 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10068498 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10068498 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin10068498 .links img { padding-left:8px; } body div#devskin10068498 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin10068498 .buttons img { padding-right:8px; } body div#devskin10068498 h1 { font-size:28px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 hr { height:0; border:0; border-top:2px solid #B73E62; border-bottom:1px solid white; } body div#devskin10068498 .text h2 { font-size:24px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 h3 { font-size:16px; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 h3 a { font-size:16px; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 h5 { font-size:20px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; line-height:0; } body div#devskin10068498 p { text-align:justify; } body div#devskin10068498 blockquote { font-family:Monospace; margin:0 auto; padding:10px; max-width:500px; background:rgb(183, 62, 98); background:rgba(183, 62, 98, 0.5); color:white; border:1px solid #B73E62; box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); text-align:left; } body div#devskin10068498 blockquote b { text-align:center; font-size:18px; font-family:Verdana, sans serif; } body div#devskin10068498 .toc { margin:0 auto; padding:10px; max-width:500px; background:rgb(183, 62, 98); background:rgba(183, 62, 98, 0.5); color:white; border:1px solid #B73E62; box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); text-align:left; } body div#devskin10068498 .toc h3, body div#devskin10068498 h3 a, body div#devskin10068498 h3 a:hover { text-align:left; color:white; text-shadow:#B73E62 0px 1px 0px; } body div#devskin10068498 .toc a, body div#devskin10068498 a:hover { color:white; text-decoration:none; } body div#devskin10068498 .toc a:hover { text-shadow:0 0 5px white; } body div#devskin10068498 .toc h2 { text-align:center; color:white; text-shadow:#B73E62 0px 1px 0px; } body div#devskin10068498 h4 { line-height:0; text-align:center; color:rgb(183, 62, 98); color:rgba(183, 62, 98, 0.5); font-size:18px; font-family:Verdana, sans serif; } body div#devskin10068498 .box { float:left; width:20%; display:inline-block; text-align:center; vertical-align:middle; padding-right:10px; border:0; background:transparent; } body div#devskin10068498 abbr:hover { cursor:pointer; border-bottom:1px dashed gray; } body div#devskin10068498 em { color:#B73E62; } body div#devskin10068498 ins { font-family:Monospace; padding:2px; color:black; text-decoration:none; } body div#devskin10068498 code { padding:2px; background:rgb(255, 255, 255); background:rgba(255,255,255,0.5); color:black; font-style:normal!important; } body div#devskin10068498 img { vertical-align:middle; } body div#devskin10068498 .fig2 { width:100px; } body div#devskin10068498 .fig2 img { left:0; } body div#devskin10068498 .fig2 img:hover { padding-left:50px; }




Community Week






Lucky for you guys, this will be my last article for this week's CSS3 101 series! No more spam of unintelligible code from me...



... for now



For those that were keeping up with the series, thanks so much for reading and providing feedback! I know I might have left out some info here and there, but you have to understand CSS3 is quite an extensive topic to break down and explain at beginner level, so really thanks to those that also reminded me about the few things I might've missed out. It's even more difficult to explain since I don't have CSS3 privs available to show live examples of cooler animations, but hope you were all able to understand and follow along anyway

Unfortunately, had to cut the series short due to time constraint I initially had more topics in mind for this series, namely Transform, Animation, Attribute selectors and more Pseudo-classes, but had some personal issues to deal with so couldn't finish writing them up But hopefully, next Community Week, I'll have those ready! I will however, update the existing articles with more tips and tricks such as adding more Pseudo-classes and transition effects, and most importantly showing you how you can integrate them into your journal skins and e-portfolios! I mean there's no point in explaining what they do if you don't know what to do with it right? So keep checking back because I'll keep revising these articles, adding more ideas, tricks and tips!


I've compiled all the links to the articles and topics right here:


CSS3 101 Topics

May 27th - Introduction
May 28th - Color Gradients
1. Linear-Gradient


2. Radial-Gradient


May 30th - Pseudo-elements & Pseudo-classes
1. Pseudo-Elements


2. Pseudo-Classes


May 31st - Transition Animations

June 2nd - Conclusion



Now onto more interesting stuff!

CSS3 Trivia
I'll be asking different trivia questions, and the first deviants to answer one correctly by commenting here in this article will win 10 You can only answer ONE question, so choose wisely which one you answer! Check to see if someone else has already said the answer, if they have then answer another question! Here are the questions:



1. What are the Vendor prefixes?Congrats James--Steele "The vendor prefixes are -webkit-, -moz-, and -o- (also -ms- for IE)."

2. What does :nth-child(2n+2) mean? Congrats Icesis "It means every even element!"

3. What's the difference in syntax between Pseudo-classes and Pseduo-elements?Congrats SavageFrog "Pseudo-Classes have one colon & Pseudo-Elements have two colons"

4. What is the equivalent of ease-in-out in cubic-bezier() format?Congrats neurosource "cubic-bezier(0.42, 0, 0.58, 1)"

5. What are the two different syntax to create a diagonal gradient going from bottom right to top left?Congrats PizzaPotatoNBacon "315deg" and "to top left"

6. What year was CSS first launced?Congrats Astrikos "December 1996"

7. What are the two ways to define timing functions?Congrats Kittylyn-Donut "a stepping function or a cubic BΓ©zier curve"

8. Which is the only Pseudo-element that does not work with one colon?Congrats iAmoret "::selection"

9. How can you create a fractal type effect with gradients?Congrats Yixeirt "Adding and specyfing some sizes to repeating-radial-gradient"

10. What does this line of CSS blockquote::before{content: open-quote;} do?Congrats Chivi-chivik "To add quotation marks (") before the text within the blockquote tag automatically"

CSS3 Mini Contest
For 100 , create a fancy Transition menu that I mentioned in the previous article Β on CSSDesk and link it here. I'll choose the winner based on creativity and bonus points for using elements of other articles such as Gradients



Deadline: June 7th

Winner by Default: James--Steele with cssdesk.com/SQK79 !

CSS3 Mini Challenges
I've mentioned three challenges in the previous articles with templates. Complete only one of them in the CSS Sandbox and link it here! First ones to complete a challenge properly wins!Β 

3D Button - Winner 50
Congrats iAmoret with cssdesk.com/UyxUt !


Create a face - Winner 20
Congrats PizzaPotatoNBacon with cssdesk.com/YUVT8


Blockquote with Triangle & Icon - Winner 20


Test out your CSS3 snippets with an instant Live Preview in this CSS Sandbox:


Please FAV this Article if you're going to participate!

GOOD LUCK!





Related content

[ TEXT ]


imnotsana - PE: Cellphone Art + Contests

[ TEXT ]


imnotsana - SquibbleBox Feature I

[ TEXT ]


imnotsana - PE: CSS3 101 - Transition Animations

[ TEXT ]


imnotsana - PE: CSS3 101 - Pseudo Elements/Classes
Comments: 71

gillianivyart [2013-06-04 21:32:05 +0000 UTC]

Looks like I'm a little late for the trivia/mini-contests. Great article!

πŸ‘: 0 ⏩: 1

imnotsana In reply to gillianivyart [2013-06-05 02:09:14 +0000 UTC]

Just for the trivia The mini-contests are still open! (try the face one!)

πŸ‘: 0 ⏩: 1

gillianivyart In reply to imnotsana [2013-06-05 13:07:47 +0000 UTC]

I've actually done the face one before as an assignment to my ~eCSSercise students. I made them all draw faces! hahaha. I thought the mini contest was first to enter won...

πŸ‘: 0 ⏩: 1

imnotsana In reply to gillianivyart [2013-06-06 09:06:26 +0000 UTC]

Nope, that's the Mini-Challenge There's a blockquote with a triangle challenge left for the Mini-Challenge for 20 But the Mini Contest ends June 7th which is to make a fancy Transition menu for 100! I've provided a template here

And the face one is by using radial gradients actually, not the border radius

πŸ‘: 0 ⏩: 2

YunSpirit In reply to imnotsana [2013-10-12 01:10:49 +0000 UTC]

Can you tell me how to get the little icon in your link (pencil icon)^^

πŸ‘: 0 ⏩: 0

gillianivyart In reply to imnotsana [2013-06-06 15:36:55 +0000 UTC]

Oh, okies! ;D

πŸ‘: 0 ⏩: 0

PizzaPotatoNBacon [2013-06-04 13:33:32 +0000 UTC]

[link]
I tried making a face!

πŸ‘: 0 ⏩: 1

imnotsana In reply to PizzaPotatoNBacon [2013-06-04 13:37:52 +0000 UTC]

You mean blockquote with triangle?

You've almost got the blockquote right, just need to add it under ::before and position it right!

πŸ‘: 0 ⏩: 1

PizzaPotatoNBacon In reply to imnotsana [2013-06-05 01:11:30 +0000 UTC]

Huh? I tried completing the create a face challenge Is it not working?

πŸ‘: 0 ⏩: 1

imnotsana In reply to PizzaPotatoNBacon [2013-06-05 02:10:04 +0000 UTC]

The link you provided me has a blockquote not the face perhaps didn't save right?

πŸ‘: 0 ⏩: 1

PizzaPotatoNBacon In reply to imnotsana [2013-06-05 09:28:16 +0000 UTC]

[link]
Oh darn Wrong link. Here is the face.

πŸ‘: 0 ⏩: 1

imnotsana In reply to PizzaPotatoNBacon [2013-06-06 09:03:44 +0000 UTC]

That's an awesome face :'D

However, I provided a template to use radial gradients for it Here it is [link] so try it with that!

πŸ‘: 0 ⏩: 0

pricechi [2013-06-04 07:09:45 +0000 UTC]

Sad to see this end its run... thanks for the great article!

πŸ‘: 0 ⏩: 1

imnotsana In reply to pricechi [2013-06-04 10:40:15 +0000 UTC]

Thanks for reading!

πŸ‘: 0 ⏩: 0

Kittylyn-Donut [2013-06-03 20:31:19 +0000 UTC]

More exactly,

7.What are the two ways to define timing functions?
a stepping function or a cubic BΓ©zier curve...

:3 *so proud*

I give up for the triangle, It's just....well, it is not a triangle when I try XD

πŸ‘: 0 ⏩: 1

imnotsana In reply to Kittylyn-Donut [2013-06-04 05:58:53 +0000 UTC]

Correct

10 sent

Aww no worries, thanks for trying

πŸ‘: 0 ⏩: 1

Kittylyn-Donut In reply to imnotsana [2013-06-04 08:17:58 +0000 UTC]

thank you!

0/

πŸ‘: 0 ⏩: 0

Kittylyn-Donut [2013-06-03 20:24:15 +0000 UTC]

7. cubic BΓ©zier function!
and the other one...hum...was it staircase function?

πŸ‘: 0 ⏩: 0

Kittylyn-Donut [2013-06-03 19:36:50 +0000 UTC]

*doubting of her answer*
well, anyway, even if I'm wrong, I wanted to say that these articles were great

πŸ‘: 0 ⏩: 1

imnotsana In reply to Kittylyn-Donut [2013-06-03 19:53:53 +0000 UTC]

Thanks!

πŸ‘: 0 ⏩: 0

Kittylyn-Donut [2013-06-03 19:32:45 +0000 UTC]

10. What does this line of CSS blockquote::before{content: open-quote;} do?

put an element before / after the content; they are kind of fake stuff, but sill useful.
(?)

πŸ‘: 0 ⏩: 1

imnotsana In reply to Kittylyn-Donut [2013-06-03 19:53:41 +0000 UTC]

Aww sorry hun, seems like someone else got the answer first [link]

But you can try coding the Blockquote Mini-Challenge which is for 20 that no one else has attempted yet!

πŸ‘: 0 ⏩: 1

Kittylyn-Donut In reply to imnotsana [2013-06-03 19:59:40 +0000 UTC]

no worries, I replied for fun...^^ I will try!
but dunno if I'll succeed XD

πŸ‘: 0 ⏩: 1

imnotsana In reply to Kittylyn-Donut [2013-06-03 20:16:55 +0000 UTC]

There's one last trivia question left as well!

πŸ‘: 0 ⏩: 0

iAmoret [2013-06-03 17:02:43 +0000 UTC]

Oh, I forgot,

8. Which is the only Pseudo-element that does not work with one colon?

::selection, of course! (just finished that article )

πŸ‘: 0 ⏩: 1

imnotsana In reply to iAmoret [2013-06-03 19:52:02 +0000 UTC]

Correct!

10 sent

πŸ‘: 0 ⏩: 1

iAmoret In reply to imnotsana [2013-06-03 20:52:58 +0000 UTC]

Yay!

πŸ‘: 0 ⏩: 0

iAmoret [2013-06-03 16:55:17 +0000 UTC]

That button thingy was a mini-challenge? Wow, I gotta stop skimming so much.

Well, anywho, thanks! Now, I must go and attempt all the others.

πŸ‘: 0 ⏩: 1

imnotsana In reply to iAmoret [2013-06-03 19:50:55 +0000 UTC]

It was and you won!

πŸ‘: 0 ⏩: 1

iAmoret In reply to imnotsana [2013-06-03 19:52:43 +0000 UTC]

Yay!

πŸ‘: 0 ⏩: 0

Chivi-chivik [2013-06-03 16:37:30 +0000 UTC]

10. What does this line of CSS blockquote::before{content: open-quote;} do?

To add quotation marks (") before the text within the blockquote tag automatically.

It is right?

πŸ‘: 0 ⏩: 1

imnotsana In reply to Chivi-chivik [2013-06-03 19:50:22 +0000 UTC]

Perfectly right!

10 sent

I'd appreciate it if you could fav the article if you're participating

πŸ‘: 0 ⏩: 1

Chivi-chivik In reply to imnotsana [2013-06-03 19:52:01 +0000 UTC]

YAY!

Okay then, I'll fave it

πŸ‘: 0 ⏩: 1

imnotsana In reply to Chivi-chivik [2013-06-03 20:00:03 +0000 UTC]

Thanks!

πŸ‘: 0 ⏩: 1

Chivi-chivik In reply to imnotsana [2013-06-03 20:00:31 +0000 UTC]

'Welcome

πŸ‘: 0 ⏩: 0

Yixeirt [2013-06-03 14:28:34 +0000 UTC]

9. How can you create a fractal type effect with gradients?
Adding and specyfing some sizes to repeating-radial-gradient

πŸ‘: 0 ⏩: 1

imnotsana In reply to Yixeirt [2013-06-03 14:56:16 +0000 UTC]

Absolutely right!

10 sent!

πŸ‘: 0 ⏩: 1

Yixeirt In reply to imnotsana [2013-06-03 15:19:51 +0000 UTC]

Thank you

πŸ‘: 0 ⏩: 0

Astrikos [2013-06-03 13:43:35 +0000 UTC]

6. What year was CSS first launched?
December 17, 1996.

πŸ‘: 0 ⏩: 1

imnotsana In reply to Astrikos [2013-06-03 14:56:03 +0000 UTC]

Correct!

10 sent!

πŸ‘: 0 ⏩: 1

Astrikos In reply to imnotsana [2013-06-05 15:22:30 +0000 UTC]

πŸ‘: 0 ⏩: 0

Astrikos [2013-06-03 13:41:30 +0000 UTC]

Wonderful!

πŸ‘: 0 ⏩: 1

imnotsana In reply to Astrikos [2013-06-03 14:56:27 +0000 UTC]

πŸ‘: 0 ⏩: 1

Astrikos In reply to imnotsana [2013-06-05 15:22:39 +0000 UTC]

πŸ‘: 0 ⏩: 0

PizzaPotatoNBacon [2013-06-03 12:28:11 +0000 UTC]

5. What are the two syntax to create a diagonal gradient going from bottom right to top left?

Answer: "315deg" and "to top left"

πŸ‘: 0 ⏩: 1

imnotsana In reply to PizzaPotatoNBacon [2013-06-03 12:46:01 +0000 UTC]

Correct!

10 sent!

Please consider faving the article if you participate >_>;

πŸ‘: 0 ⏩: 0

neurosource [2013-06-03 11:33:06 +0000 UTC]

4. What is the equivalent of ease-in-out in cubic-bezier() format?

cubic-bezier(0.42, 0, 0.58, 1) right?

πŸ‘: 0 ⏩: 1

imnotsana In reply to neurosource [2013-06-03 12:43:34 +0000 UTC]

Right!

10 sent

πŸ‘: 0 ⏩: 0

Erladino [2013-06-03 07:19:01 +0000 UTC]

Sheldon makes it all worth it Cx

πŸ‘: 0 ⏩: 1

imnotsana In reply to Erladino [2013-06-03 08:01:31 +0000 UTC]

Definitely!

πŸ‘: 0 ⏩: 1


| Next =>