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

Erladino In reply to ??? [2013-06-03 09:48:51 +0000 UTC]

c;

👍: 0 ⏩: 1

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

You should try answering one of the Trivia questions! The answers are all in my previous articles if you know where to look

👍: 0 ⏩: 1

Erladino In reply to imnotsana [2013-06-03 11:23:12 +0000 UTC]

Ah, okay. I'll check that out in a while. :3

👍: 0 ⏩: 0

Kaz-D In reply to ??? [2013-06-03 05:31:44 +0000 UTC]

This was EPIC!

👍: 0 ⏩: 1

imnotsana In reply to Kaz-D [2013-06-03 06:08:33 +0000 UTC]

Thank you for letting me do this!

👍: 0 ⏩: 0

SavageFrog In reply to ??? [2013-06-03 03:29:10 +0000 UTC]

"What's the difference in syntax between Pseudo-classes and Pseduo-elements?"

Pseudo-Classes have one colon & Pseudo-Elements have two colons

👍: 0 ⏩: 1

imnotsana In reply to SavageFrog [2013-06-03 03:41:30 +0000 UTC]

Youuuu're right!

10 sent

👍: 0 ⏩: 1

SavageFrog In reply to imnotsana [2013-06-03 03:47:55 +0000 UTC]

yay~!

👍: 0 ⏩: 0

Icesis In reply to ??? [2013-06-03 03:17:46 +0000 UTC]

What does :nth-child(2n+2) mean?

It means every even element!

👍: 0 ⏩: 1

imnotsana In reply to Icesis [2013-06-03 03:29:24 +0000 UTC]

Correct!

10 sent!

👍: 0 ⏩: 1

Icesis In reply to imnotsana [2013-06-03 04:14:34 +0000 UTC]

👍: 0 ⏩: 0

James--Steele In reply to ??? [2013-06-03 02:28:13 +0000 UTC]

Not sure if we have to note you, or comment here, so I'll just comment small

1. The vendor prefixes are -webkit-, -moz-, and -o- (also -ms- for IE).

I'll try to figure out the mini-challenges in a little bit. (by the way, just copy paste the small text for my answer )

👍: 0 ⏩: 2

imnotsana In reply to James--Steele [2013-06-03 03:09:12 +0000 UTC]

Congrats! 10 sent!

I would appreciate it if you could fav the article if you're goin to participate, thanks

👍: 0 ⏩: 1

James--Steele In reply to imnotsana [2013-06-03 03:15:08 +0000 UTC]

Thank you!

Sorry, faved it a few minutes ago.

👍: 0 ⏩: 1

imnotsana In reply to James--Steele [2013-06-03 03:32:35 +0000 UTC]

You're welcome!

Oops my bad, I'm lagging x.x

👍: 0 ⏩: 0

imnotsana In reply to James--Steele [2013-06-03 02:35:01 +0000 UTC]

Awesome!

I mentioned that you have to write the answers here, but lemme write it in bold

👍: 0 ⏩: 2

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

Alright. I think I've got a working menu. I tried not to make the colors too displeasing. (I'm a terrible designer)

[link] (for some reason, when I try to open that link, it won't display. Well, you can always copy and paste the code into your own CSSDesk page)

👍: 0 ⏩: 1

imnotsana In reply to James--Steele [2013-06-03 03:10:35 +0000 UTC]

Works for me! Thanks for participating and good luck!

👍: 0 ⏩: 1

James--Steele In reply to imnotsana [2013-06-03 03:15:16 +0000 UTC]

Awesome!

👍: 0 ⏩: 0

James--Steele In reply to imnotsana [2013-06-03 02:39:18 +0000 UTC]

Oh, jeez. I eyes skipped over that by accident.

👍: 0 ⏩: 0


<= Prev |