HOME | DD

imnotsana — PE: CSS3 101 - Pseudo Elements/Classes
Published: 2013-05-31 00:00:28 +0000 UTC; Views: 11727; Favourites: 75; Downloads: 0
Redirect to original
Description body div#devskin10051986 .stamp { width:100%; text-align:center; } body div#devskin10051986 .stamp .tr .shadow-holder, body div#devskin10051986 .stamp .tr .shadow, body div#devskin10051986 .stamp .tr .wrap, body div#devskin10051986 .stamp .tr .lit, body div#devskin10051986 .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#devskin10051986 .stamp .tr .lit > i, body div#devskin10051986 .stamp .tr .lit > img, body div#devskin10051986 .stamp .tr .lit q * { display:none; } body div#devskin10051986 .stamp .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10051986 .stamp .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:40px; } body div#devskin10051986 .stamp .tr, body div#devskin10051986 .stamp .tr .lit q::before { width:178px; height:250px; } body div#devskin10051986 .stamp .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10051986 .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#devskin10051986 .stamp .tr q[style*='-1px']::before { background-size:50%; } body div#devskin10051986 .stamp .tr q[style*='-2px']::before { background-size:52%; } body div#devskin10051986 .stamp .tr q[style*='-3px']::before { background-size:54%; } body div#devskin10051986 .stamp .tr q[style*='-4px']::before { background-size:56%; } body div#devskin10051986 .stamp .tr q[style*='-5px']::before { background-size:58%; } body div#devskin10051986 .stamp .tr q[style*='-6px']::before { background-size:60%; } body div#devskin10051986 .stamp .tr q[style*='-7px']::before { background-size:62%; } body div#devskin10051986 .stamp .tr q[style*='-8px']::before { background-size:64%; } body div#devskin10051986 .stamp .tr q[style*='-9px']::before { background-size:66%; } body div#devskin10051986 .stamp .tr q[style*='-10px']::before { background-size:68%; } body div#devskin10051986 .stamp .tr q[style*='-11px']::before { background-size:70%; } body div#devskin10051986 .stamp .tr q[style*='-12px']::before { background-size:72%; } body div#devskin10051986 .stamp .tr q[style*='-13px']::before { background-size:74%; } body div#devskin10051986 .stamp .tr q[style*='-14px']::before { background-size:76%; } body div#devskin10051986 .stamp .tr q[style*='-15px']::before { background-size:78%; } body div#devskin10051986 .stamp .tr q[style*='-16px']::before { background-size:80%; } body div#devskin10051986 .stamp .tr q[style*='-17px']::before { background-size:82%; } body div#devskin10051986 .stamp .tr q[style*='-18px']::before { background-size:84%; } body div#devskin10051986 .stamp .tr q[style*='-19px']::before { background-size:86%; } body div#devskin10051986 .stamp .tr q[style*='-20px']::before { background-size:88%; } body div#devskin10051986 .stamp .tr q[style*='-21px']::before { background-size:90%; } body div#devskin10051986 .stamp .tr q[style*='-22px']::before { background-size:92%; } body div#devskin10051986 .stamp .tr q[style*='-23px']::before { background-size:94%; } body div#devskin10051986 .stamp .tr q[style*='-24px']::before { background-size:96%; } body div#devskin10051986 .stamp .tr q[style*='-25px']::before { background-size:98%; } body div#devskin10051986 .stamp .tr q[style*='-26px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-27px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-28px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-29px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-30px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-31px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-32px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-33px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-34px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-35px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-36px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-37px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-38px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-39px']::before { background-size:100%; } body div#devskin10051986 .stamp .tr q[style*='-40px']::before { background-size:100%; } body div#devskin10051986 .title { width:100%; text-align:center; } body div#devskin10051986 .title .tr .shadow-holder, body div#devskin10051986 .title .tr .shadow, body div#devskin10051986 .title .tr .wrap, body div#devskin10051986 .title .tr .lit, body div#devskin10051986 .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#devskin10051986 .title .tr .lit > i, body div#devskin10051986 .title .tr .lit > img, body div#devskin10051986 .title .tr .lit q * { display:none; } body div#devskin10051986 .title .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10051986 .title .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:80px; } body div#devskin10051986 .title .tr, body div#devskin10051986 .title .tr .lit q::before { width:400px; } body div#devskin10051986 .title .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10051986 .title .tr .lit q::before { content:'CSS3 101 - Gradients'; 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#devskin10051986 .title .tr q[style*='-1px']::before { color:#EC1300; } body div#devskin10051986 .title .tr q[style*='-2px']::before { color:#DA2500; } body div#devskin10051986 .title .tr q[style*='-3px']::before { color:#C83700; } body div#devskin10051986 .title .tr q[style*='-4px']::before { color:#B74800; } body div#devskin10051986 .title .tr q[style*='-5px']::before { color:#A75800; } body div#devskin10051986 .title .tr q[style*='-6px']::before { color:#986700; } body div#devskin10051986 .title .tr q[style*='-7px']::before { color:#897600; } body div#devskin10051986 .title .tr q[style*='-8px']::before { color:#798600; } body div#devskin10051986 .title .tr q[style*='-9px']::before { color:#6B9400; } body div#devskin10051986 .title .tr q[style*='-10px']::before { color:#5EA100; } body div#devskin10051986 .title .tr q[style*='-11px']::before { color:#51AE00; } body div#devskin10051986 .title .tr q[style*='-12px']::before { color:#45BA00; } body div#devskin10051986 .title .tr q[style*='-13px']::before { color:#3BC400; } body div#devskin10051986 .title .tr q[style*='-14px']::before { color:#31CE00; } body div#devskin10051986 .title .tr q[style*='-15px']::before { color:#27D800; } body div#devskin10051986 .title .tr q[style*='-16px']::before { color:#1FE000; } body div#devskin10051986 .title .tr q[style*='-17px']::before { color:#18E700; } body div#devskin10051986 .title .tr q[style*='-18px']::before { color:#11EE00; } body div#devskin10051986 .title .tr q[style*='-19px']::before { color:#0CF300; } body div#devskin10051986 .title .tr q[style*='-20px']::before { color:#07F800; } body div#devskin10051986 .title .tr q[style*='-21px']::before { color:#04FB00; } body div#devskin10051986 .title .tr q[style*='-22px']::before { color:#02FD00; } body div#devskin10051986 .title .tr q[style*='-23px']::before { color:#00FF00; } body div#devskin10051986 .title .tr q[style*='-24px']::before { color:#00FF00; } body div#devskin10051986 .title .tr q[style*='-25px']::before { color:#01FE00; } body div#devskin10051986 .title .tr q[style*='-26px']::before { color:#03FC00; } body div#devskin10051986 .title .tr q[style*='-27px']::before { color:#06F900; } body div#devskin10051986 .title .tr q[style*='-28px']::before { color:#0AF500; } body div#devskin10051986 .title .tr q[style*='-29px']::before { color:#0FF000; } body div#devskin10051986 .title .tr q[style*='-30px']::before { color:#16E900; } body div#devskin10051986 .title .tr q[style*='-31px']::before { color:#1DE200; } body div#devskin10051986 .title .tr q[style*='-32px']::before { color:#24DB00; } body div#devskin10051986 .title .tr q[style*='-33px']::before { color:#2DD200; } body div#devskin10051986 .title .tr q[style*='-34px']::before { color:#38C700; } body div#devskin10051986 .title .tr q[style*='-35px']::before { color:#42BD00; } body div#devskin10051986 .title .tr q[style*='-36px']::before { color:#4DB200; } body div#devskin10051986 .title .tr q[style*='-37px']::before { color:#5BA400; } body div#devskin10051986 .title .tr q[style*='-38px']::before { color:#679800; } body div#devskin10051986 .title .tr q[style*='-39px']::before { color:#738C00; } body div#devskin10051986 .title .tr q[style*='-40px']::before { color:#808000; } body div#devskin10051986 .title .tr q[style*='-41px']::before { color:#8C7300; } body div#devskin10051986 .title .tr q[style*='-42px']::before { color:#986700; } body div#devskin10051986 .title .tr q[style*='-43px']::before { color:#A45B00; } body div#devskin10051986 .title .tr q[style*='-44px']::before { color:#B24D00; } body div#devskin10051986 .title .tr q[style*='-45px']::before { color:#BD4200; } body div#devskin10051986 .title .tr q[style*='-46px']::before { color:#C73800; } body div#devskin10051986 .title .tr q[style*='-47px']::before { color:#D02F00; } body div#devskin10051986 .title .tr q[style*='-48px']::before { color:#DB2400; } body div#devskin10051986 .title .tr q[style*='-49px']::before { color:#E21D00; } body div#devskin10051986 .title .tr q[style*='-50px']::before { color:#E91600; } body div#devskin10051986 .title .tr q[style*='-51px']::before { color:#F00F00; } body div#devskin10051986 .title .tr q[style*='-52px']::before { color:#F50A00; } body div#devskin10051986 .title .tr q[style*='-53px']::before { color:#F90600; } body div#devskin10051986 .title .tr q[style*='-54px']::before { color:#FC0300; } body div#devskin10051986 .title .tr q[style*='-55px']::before { color:#FE0100; } body div#devskin10051986 .title .tr q[style*='-56px']::before { color:#FF0000; } body div#devskin10051986 .title .tr q[style*='-57px']::before { color:#FF0000; } body div#devskin10051986 .title .tr q[style*='-58px']::before { color:#FD0200; } body div#devskin10051986 .title .tr q[style*='-59px']::before { color:#FB0400; } body div#devskin10051986 .title .tr q[style*='-60px']::before { color:#F80700; } body div#devskin10051986 .title .tr q[style*='-61px']::before { color:#F30C00; } body div#devskin10051986 .title .tr q[style*='-62px']::before { color:#ED1200; } body div#devskin10051986 .title .tr q[style*='-63px']::before { color:#E71800; } body div#devskin10051986 .title .tr q[style*='-64px']::before { color:#E01F00; } body div#devskin10051986 .title .tr q[style*='-65px']::before { color:#D72800; } body div#devskin10051986 .title .tr q[style*='-66px']::before { color:#CE3100; } body div#devskin10051986 .title .tr q[style*='-67px']::before { color:#C43B00; } body div#devskin10051986 .title .tr q[style*='-68px']::before { color:#BB4400; } body div#devskin10051986 .title .tr q[style*='-69px']::before { color:#AE5100; } body div#devskin10051986 .title .tr q[style*='-70px']::before { color:#A25D00; } body div#devskin10051986 .title .tr q[style*='-71px']::before { color:#946B00; } body div#devskin10051986 .title .tr q[style*='-72px']::before { color:#877800; } body div#devskin10051986 .title .tr q[style*='-73px']::before { color:#798600; } body div#devskin10051986 .title .tr q[style*='-74px']::before { color:#699600; } body div#devskin10051986 .title .tr q[style*='-75px']::before { color:#58A700; } body div#devskin10051986 .title .tr q[style*='-76px']::before { color:#48B700; } body div#devskin10051986 .title .tr q[style*='-77px']::before { color:#37C800; } body div#devskin10051986 .title .tr q[style*='-78px']::before { color:#26D900; } body div#devskin10051986 .title .tr q[style*='-79px']::before { color:#12ED00; } body div#devskin10051986 .title .tr q[style*='-80px']::before { color:#00FF00; } body div#devskin10051986 .tr .shadow-holder, body div#devskin10051986 .tr .shadow, body div#devskin10051986 .tr .wrap, body div#devskin10051986 .tr .lit, body div#devskin10051986 .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#devskin10051986 .tr .lit > i, body div#devskin10051986 .tr .lit > img, body div#devskin10051986 .tr .lit q * { display:none; } body div#devskin10051986 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10051986 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:100px; } body div#devskin10051986 .tr, body div#devskin10051986 .tr .lit q::before { width:400px; } body div#devskin10051986 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10051986 .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#devskin10051986 .tr q[style*='-1px']::before { color:#EC1300; } body div#devskin10051986 .tr q[style*='-2px']::before { color:#DA2500; } body div#devskin10051986 .tr q[style*='-3px']::before { color:#C83700; } body div#devskin10051986 .tr q[style*='-4px']::before { color:#B74800; } body div#devskin10051986 .tr q[style*='-5px']::before { color:#A75800; } body div#devskin10051986 .tr q[style*='-6px']::before { color:#986700; } body div#devskin10051986 .tr q[style*='-7px']::before { color:#897600; } body div#devskin10051986 .tr q[style*='-8px']::before { color:#798600; } body div#devskin10051986 .tr q[style*='-9px']::before { color:#6B9400; } body div#devskin10051986 .tr q[style*='-10px']::before { color:#5EA100; } body div#devskin10051986 .tr q[style*='-11px']::before { color:#51AE00; } body div#devskin10051986 .tr q[style*='-12px']::before { color:#45BA00; } body div#devskin10051986 .tr q[style*='-13px']::before { color:#3BC400; } body div#devskin10051986 .tr q[style*='-14px']::before { color:#31CE00; } body div#devskin10051986 .tr q[style*='-15px']::before { color:#27D800; } body div#devskin10051986 .tr q[style*='-16px']::before { color:#1FE000; } body div#devskin10051986 .tr q[style*='-17px']::before { color:#18E700; } body div#devskin10051986 .tr q[style*='-18px']::before { color:#11EE00; } body div#devskin10051986 .tr q[style*='-19px']::before { color:#0CF300; } body div#devskin10051986 .tr q[style*='-20px']::before { color:#07F800; } body div#devskin10051986 .tr q[style*='-21px']::before { color:#04FB00; } body div#devskin10051986 .tr q[style*='-22px']::before { color:#02FD00; } body div#devskin10051986 .tr q[style*='-23px']::before { color:#00FF00; } body div#devskin10051986 .tr q[style*='-24px']::before { color:#00FF00; } body div#devskin10051986 .tr q[style*='-25px']::before { color:#01FE00; } body div#devskin10051986 .tr q[style*='-26px']::before { color:#03FC00; } body div#devskin10051986 .tr q[style*='-27px']::before { color:#06F900; } body div#devskin10051986 .tr q[style*='-28px']::before { color:#0AF500; } body div#devskin10051986 .tr q[style*='-29px']::before { color:#0FF000; } body div#devskin10051986 .tr q[style*='-30px']::before { color:#16E900; } body div#devskin10051986 .tr q[style*='-31px']::before { color:#1DE200; } body div#devskin10051986 .tr q[style*='-32px']::before { color:#24DB00; } body div#devskin10051986 .tr q[style*='-33px']::before { color:#2DD200; } body div#devskin10051986 .tr q[style*='-34px']::before { color:#38C700; } body div#devskin10051986 .tr q[style*='-35px']::before { color:#42BD00; } body div#devskin10051986 .tr q[style*='-36px']::before { color:#4DB200; } body div#devskin10051986 .tr q[style*='-37px']::before { color:#5BA400; } body div#devskin10051986 .tr q[style*='-38px']::before { color:#679800; } body div#devskin10051986 .tr q[style*='-39px']::before { color:#738C00; } body div#devskin10051986 .tr q[style*='-40px']::before { color:#808000; } body div#devskin10051986 .tr q[style*='-41px']::before { color:#8C7300; } body div#devskin10051986 .tr q[style*='-42px']::before { color:#986700; } body div#devskin10051986 .tr q[style*='-43px']::before { color:#A45B00; } body div#devskin10051986 .tr q[style*='-44px']::before { color:#B24D00; } body div#devskin10051986 .tr q[style*='-45px']::before { color:#BD4200; } body div#devskin10051986 .tr q[style*='-46px']::before { color:#C73800; } body div#devskin10051986 .tr q[style*='-47px']::before { color:#D02F00; } body div#devskin10051986 .tr q[style*='-48px']::before { color:#DB2400; } body div#devskin10051986 .tr q[style*='-49px']::before { color:#E21D00; } body div#devskin10051986 .tr q[style*='-50px']::before { color:#E91600; } body div#devskin10051986 .tr q[style*='-51px']::before { color:#F00F00; } body div#devskin10051986 .tr q[style*='-52px']::before { color:#F50A00; } body div#devskin10051986 .tr q[style*='-53px']::before { color:#F90600; } body div#devskin10051986 .tr q[style*='-54px']::before { color:#FC0300; } body div#devskin10051986 .tr q[style*='-55px']::before { color:#FE0100; } body div#devskin10051986 .tr q[style*='-56px']::before { color:#FF0000; } body div#devskin10051986 .tr q[style*='-57px']::before { color:#FF0000; } body div#devskin10051986 .tr q[style*='-58px']::before { color:#FD0200; } body div#devskin10051986 .tr q[style*='-59px']::before { color:#FB0400; } body div#devskin10051986 .tr q[style*='-60px']::before { color:#F80700; } body div#devskin10051986 .tr q[style*='-61px']::before { color:#F30C00; } body div#devskin10051986 .tr q[style*='-62px']::before { color:#ED1200; } body div#devskin10051986 .tr q[style*='-63px']::before { color:#E71800; } body div#devskin10051986 .tr q[style*='-64px']::before { color:#E01F00; } body div#devskin10051986 .tr q[style*='-65px']::before { color:#D72800; } body div#devskin10051986 .tr q[style*='-66px']::before { color:#CE3100; } body div#devskin10051986 .tr q[style*='-67px']::before { color:#C43B00; } body div#devskin10051986 .tr q[style*='-68px']::before { color:#BB4400; } body div#devskin10051986 .tr q[style*='-69px']::before { color:#AE5100; } body div#devskin10051986 .tr q[style*='-70px']::before { color:#A25D00; } body div#devskin10051986 .tr q[style*='-71px']::before { color:#946B00; } body div#devskin10051986 .tr q[style*='-72px']::before { color:#877800; } body div#devskin10051986 .tr q[style*='-73px']::before { color:#798600; } body div#devskin10051986 .tr q[style*='-74px']::before { color:#699600; } body div#devskin10051986 .tr q[style*='-75px']::before { color:#58A700; } body div#devskin10051986 .tr q[style*='-76px']::before { color:#48B700; } body div#devskin10051986 .tr q[style*='-77px']::before { color:#37C800; } body div#devskin10051986 .tr q[style*='-78px']::before { color:#26D900; } body div#devskin10051986 .tr q[style*='-79px']::before { color:#12ED00; } body div#devskin10051986 .tr q[style*='-80px']::before { color:#00FF00; } body div#devskin10051986 .h1 .tr .lit q::before { content:'CSS3 101 - Pseudo-Elements and Pseudo-Classes'; } body div#devskin10051986 .h1 { width:100%; text-align:center; } body div#devskin10051986 .h2 .tr .lit q::before { content:'and Pseudo-Classes'; } body div#devskin10051986 .h2 { width:100%; text-align:center; } body div#devskin10051986 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin10051986 .gr-top { display:none; } body div#devskin10051986 .gr-top .gr { display:none; } body div#devskin10051986 .gr-top h2 img { display:none; } body div#devskin10051986 .gr-top h2 { display:none; } body div#devskin10051986 .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#devskin10051986 .gr { background:transparent; border:none; } body div#devskin10051986 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin10051986 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin10051986 i.tri { display:none; } body div#devskin10051986 i.gr1 { display:none; } body div#devskin10051986 i.gr2 { display:none; } body div#devskin10051986 i.gr3 { display:none; } body div#devskin10051986 i.gb { display:none; } body div#devskin10051986 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin10051986 .top img { margin:0px auto; min-width:529px; } body div#devskin10051986 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#devskin10051986 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin10051986 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin10051986 span.board { display:none; } body div#devskin10051986 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin10051986 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#devskin10051986 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#devskin10051986 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin10051986 a { color:#B73E62; text-decoration:none; } body div#devskin10051986 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin10051986 ul { margin:0px 0px 0px 0px; } body div#devskin10051986 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#devskin10051986 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin10051986 li b sup { font-size:10px; font-weight:normal; } body div#devskin10051986 .list { display:none!important; } body div#devskin10051986 .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#devskin10051986 .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#devskin10051986 .clear_ { clear:both!important; } body div#devskin10051986 .clear { clear:both!important; } body div#devskin10051986 .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#devskin10051986 .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#devskin10051986 .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#devskin10051986 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10051986 .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#devskin10051986 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10051986 .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#devskin10051986 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin10051986 .links img { padding-left:8px; } body div#devskin10051986 .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#devskin10051986 .buttons img { padding-right:8px; } body div#devskin10051986 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#devskin10051986 hr { height:0; border:0; border-top:2px solid #B73E62; border-bottom:1px solid white; } body div#devskin10051986 .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#devskin10051986 h3 { font-size:16px; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10051986 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#devskin10051986 p { text-align:justify; } body div#devskin10051986 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#devskin10051986 blockquote b { text-align:center; font-size:18px; font-family:Verdana, sans serif; } body div#devskin10051986 .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#devskin10051986 .toc h3, body div#devskin10051986 h3 a, body div#devskin10051986 h3 a:hover { text-align:left; color:white; text-shadow:#B73E62 0px 1px 0px; } body div#devskin10051986 .toc a, body div#devskin10051986 a:hover { color:white; text-decoration:none; } body div#devskin10051986 .toc a:hover { text-shadow:0 0 5px white; } body div#devskin10051986 .toc h2 { text-align:center; color:white; text-shadow:#B73E62 0px 1px 0px; } body div#devskin10051986 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#devskin10051986 .box { float:left; width:20%; display:inline-block; text-align:center; vertical-align:middle; padding-right:10px; border:0; background:transparent; } body div#devskin10051986 abbr:hover { cursor:pointer; border-bottom:1px dashed gray; } body div#devskin10051986 em { color:#B73E62; } body div#devskin10051986 ins { font-family:Monospace; padding:2px; color:black; text-decoration:none; } body div#devskin10051986 code { padding:2px; background:rgb(255, 255, 255); background:rgba(255,255,255,0.5); color:black; font-style:normal!important; } body div#devskin10051986 img { vertical-align:middle; } body div#devskin10051986 .fig1 { display:table-cell; width:150px; height:150px; padding:10px; background:white; vertical-align:middle; color:black; } body div#devskin10051986 .fig1::first-letter { font-size:28px; font-family:'Lobster', cursive; } body div#devskin10051986 .fig2 { display:table-cell; width:150px; height:150px; padding:10px; background:white; vertical-align:middle; color:black; } body div#devskin10051986 .fig2::first-line { font-variant:small-caps; font-size:26px; } body div#devskin10051986 i::selection { color:red; background:yellow; } body div#devskin10051986 i::-moz-selection { color:red; background:yellow; } body div#devskin10051986 .fig { display:table-cell; width:150px; height:150px; padding:10px; background:white; vertical-align:middle; color:black; } body div#devskin10051986 .fig4 { display:table-cell; width:150px; height:150px; padding:10px; background:white; vertical-align:middle; color:black; text-align:center; } body div#devskin10051986 .fig4 p { text-align:center; } body div#devskin10051986 .fig4 p::before { content:open-quote; font-size:32px; font-family:'Lobster', cursive; } body div#devskin10051986 .fig4 p::after { content:close-quote; font-size:32px; font-family:'Lobster', cursive; } body div#devskin10051986 .fig5 { width:200px; padding:10px 20px; background:rgb(238, 238, 238); background: -webkit-linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1) 100%); background: -moz-linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1) 100%); background:linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1) 100%); color:rgb(0, 0, 0); color:rgba(0,0,0,0.5); text-align:center!important; border:1px solid rgba(255,255,255,0.5); border-bottom:0; box-shadow:1px 1px 2px #000; -moz-box-shadow:1px 1px 2px #000; -webkit-box-shadow:1px 1px 2px #000; } body div#devskin10051986 .fig5 p::first-letter { font-size:28px; font-family:'Lobster', cursive; } body div#devskin10051986 .fig5 p::first-line { font-variant:small-caps; font-size:28px; } body div#devskin10051986 .fig5::before { content:open-quote; float:left; margin-top:15px; font-size:30px; font-family:'Lobster', cursive; } body div#devskin10051986 .fig5::after { content:close-quote; float:right; margin-top:-25px; font-size:30px; font-family:'Lobster', cursive; } body div#devskin10051986 .fig5 p::selection { color:white; background:black; } body div#devskin10051986 .fig5 p::-moz-selection { color:white; background:black; } body div#devskin10051986 .fig6 { color:black; width:150px; padding:10px 20px; background:white; text-align:center!important; border:1px solid white; } body div#devskin10051986 .fig6 p { margin-left:-90px; margin-top:-10px; position:absolute; } body div#devskin10051986 .fig6 p::before { content:''; position:absolute; margin-left:60px; margin-top:15px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid white; } body div#devskin10051986 .fig7 { background:#B73E62; background: -webkit-linear-gradient(rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1)); background: -moz-linear-gradient(rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1)); background:linear-gradient(rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1)); border:1px solid #B73E62; padding:5px 10px; margin:auto; text-decoration:none; color:white; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -moz-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } body div#devskin10051986 .fig7:hover { background:rgb(183, 62, 98); background: -webkit-linear-gradient(rgba(183, 62, 98, 0.1), rgba(183, 62, 98, 0.5)); background: -moz-linear-gradient(rgba(183, 62, 98, 0.1), rgba(183, 62, 98, 0.5)); background:linear-gradient(rgba(183, 62, 98, 0.1), rgba(183, 62, 98, 0.5)); text-shadow:1px 1px 0 rgba(0,0,0,.8); color:white; border:1px solid rgba(183, 62, 98, 0.5); } body div#devskin10051986 .fig7:active { background:rgb(183, 62, 98); background: -webkit-linear-gradient(bottom, rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1)); background: -moz-linear-gradient(bottom, rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1)); background:linear-gradient(bottom, rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1)); box-shadow:0 0 5px rgba(0,0,0,.3) inset; -moz-box-shadow:0 0 5px rgba(0,0,0,.3) inset; -webkit-box-shadow:0 0 5px rgba(0,0,0,.3) inset; color:white; border:1px solid rgba(183, 62, 98, 0.5); text-shadow:-1px -1px 0 rgba(0,0,0,.8); position:relative; top:1px; } body div#devskin10051986 .fig7:visited { } body div#devskin10051986 .fig7:focus { } body div#devskin10051986 .fig11 { width:200px; padding:10px; background:white; } body div#devskin10051986 .fig11 ul { padding:0!important; } body div#devskin10051986 .fig11 li { display:inline-block; list-style-type:none; margin:5px; color:black; } body div#devskin10051986 .fig11 li:hover { color:yellow; } body div#devskin10051986 .fig11 li:active { color:green; } body div#devskin10051986 .fig11 li:nth-child(even) { color:blue; } body div#devskin10051986 .fig11 li:last-child { color:red; }




Community Week






Table of Contents
This article has two major topics:
1. Pseudo-Elements


2. Pseudo-Classes



What's the difference between Pseudo-Elements and Pseudo-Classes?
Pseudo-Elements are used to address sub-parts of elements. They should come after any class or ID names found in the selector ex: p::first-letter where p is the element and ::first-letter is the sub-element. Pseudo-elements are usually static and can be used for common typographic effects such as caps and fonts. They can also address generated content that is not in the source document ex: ::before

Pseudo-Classes are a way to select certain parts of HTML markup and its elements or on characteristics like name, attributes or contents. Some pseudo-classes are dynamic where they're applied as a result of user interaction with the document  ex: a:hover where a is the element and :hover is the state that occurs when the user hovers over it. It also includes virtual components of the document tree ex: :nth-child(N)



Don't worry, you'll understand more as I go along with examples. All you really need to know for now is that with the introduction of CSS3, the major difference between the two can be seen with the colon :
Pseudo-Classes have one colon :
ex: p:first-letter{}
Pseudo-Elements have two colons ::
ex p::before{}
And I have colon greater than :>

Anyway, browsers still support the CSS2.1 specifications of using one colon : for older pseudo-elements
ex: p:before{}
So it won't matter if you use one or two colons for the older ones but for the ones introduced in CSS3 they can only be used with two colons to emphasize the difference between elements and classes.

Note: Since most of these pseudo-elements are from CSS2.1, I won't go too in-depth but perhaps show interesting tricks instead. And because there's far too many pseudo-classes to cover, for now I'll just explain the few important ones and will add the others in later when I have more time. So keep checking back for updates!

Pseudo-Elements
The sub-topics I'll be covering consist of ::first-letter, ::first-line and ::selection as well as ::before and ::after with generated content:" ";

::first-letter
Quite simply, this changes the style of the first letter of your text. You can specify exactly what you want to change about that text. In the following example I just changed the size and font of the first letter to imitate the beginning of a chapter in a novel.

CSS
p {color:black;}
p::first-letter {
font-size: 28px;
font-family: 'Lobster', cursive;
}
HTML

Add your text here.


OUTPUT

Once upon a time, it was the end.

Fig. 1

::first-line
This affects the first line in a sentence or paragraph. You can add different text styles. In the following example, I just used it to make the first line of the paragraph in small caps.

CSS
p {color:black;}
p::first-line {
font-variant:small-caps;
}
OUTPUT

Doesn't it sound like I'm shouting when you read the first line in your mind?

Fig. 2

::selection
This affects the text that you want to highlight. How do you highlight? You simply hold left click with the mouse and drag across the text. Usually used when copying part of some text. There's two different syntax that you must include for full browser compatibility.
::selection{} for all Browsers
::-moz-selection{} for Firefox

Note: This is the only pseudo-element that won't work with one colon ex: :selection{} since it was just introduced in CSS3

In the following example, I'm only going to change the highlighted color of text in italic so you can see the difference.

CSS
i::selection {
color: red;
background: yellow;
}

i::-moz-selection{
color: red;
background: yellow;
}
HTML
The highlighted text goes in here!
OUTPUT

This is some text that you should highlight!

Fig. 3

::before and ::after
Pseudo-elements also provide coders a way to refer to content that does not exist in the source document which give access to generated content. As the name says, it either generates some content before the element or after the element. You can either use it to insert textual content (string), an image, a counter, attributes, or quotation marks. In the following example, I'll be adding auto-generated quotes around the text.

CSS
blockquote::before {
content: open-quote;
font-size: 28px;
font-family: 'Lobster', cursive;
}

blockquote::after{
content: close-quote;
font-size: 28px;
font-family: 'Lobster', cursive;
}
HTML

Add Text Here

OUTPUT

To Quote
or
Not To Quote!

Fig. 4

Use ALL the Pseudo-elements!
Now we can style a blockquote using all the elements we've learned so far!

What a fancy looking blockquote if I do say so myself, ye ol' Chap!

Fig. 5

I'm sure you'll be able to get more creative than that ^ But you can see that I've included a linear-gradient from the previous article as the background color, changed the first letter's font and size, the first line is capitalized, the color changes when selected, and added quote marks around the paragraph text.

Note: Using ::first-letter and ::before with generated content on the same element will affect the first letter of the content in ::before ex:
blockquote::before {content: open-quote}
blockquote::first-letter {font-size: 28px}
This will render the opening quote mark " with the large font size instead of the first letter of the sentence.

To solve this, it's better to separate the two with different tags but one class as you can see the structure of the HTML below where I created one blockquote class called .fancy{}, in which the ::before and ::after affect, that embodies a .fancy p{} class, in which the ::first-line and ::first-letter affect

HTML

Add Text Here


CSS
.fancy{
width: 200px;
padding: 20px;
background: linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1) 100%);
}

.fancy p::first-letter {
font-size: 28px;
font-family: 'Lobster', cursive;
}

.fancy p::first-line {
font-variant:small-caps;
}

.fancy::before {
content: open-quote;
float: left;
font-size: 30px;
}

.fancy::after{
content: close-quote;
float: right;
font-size: 30px;
}

.fancy p::selection {
color: white;
background:black;
}

.fancy p::-moz-selection{
color: white;
background: black;
}

Challenge!
Try to create a fancy blockquote with a triangle and icon using Pseudo-Elements!

What a fancier looking blockquote if I do say so myself!Fig. 6 - Click here for template

Hint: You can use ::before for this but leave content:""; empty and use it to make the triangle borders. Make use of negative margin to position the elements.

Try to think of other creative ways to make use of ::before and ::after



Pseudo-Classes
CSS3 has many pseudo-classes but I'll only be discussing a few in which one is the most powerful pseudo-class that allows the CSS designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first as it involves a bit of math, but it's easy once you get the hang of it.

Dynamic Pseudo-Classes
This is pretty simple, with these available pseudo-classes you can style how an element like links look according to user input, such as when the user hovers or clicks. It's easy to create buttons this way.

a:link{} is an unvisited link. How users use just a{} to style un-visited link, using :link allows better flexibility.

a:visited{} are links that have already been visited.

a:hover{} is the state when a user hovers over the link with their mouse

a:active{} is the state when a user clicks on the link with their mouse. Good for giving the effect of a button being pressed down. I've added the button from the previous article.

This is a Button

Fig. 7 - Click to see template

a:focus{} The :focus selector, similar to :hover, is allowed on elements that accept keyboard events or other user inputs. You can combine them as well with a:focus:hover{}


Fig. 8 - Click here for template

:nth-child(N)
:nth-child(N), where N is the argument that you specify, will give you the opportunity to select specific parts of elements. For example, if you want to style only the border on odd number of images in your thumbs, N = odd

ex: img:nth-child(odd){border: 5px solid black;}

Fig. 9 - Click Here to see Live Preview

N can be a keyword like odd or even, a number like 1 or 5 or a number expression in an+b format where a and b are integers ex: 2n+1

p:nth-child(1){} is equivalent to p:first-child{} that was released in CSS2.1

:nth-child(an+b)
an+b is called a number expression where a and b are replaced with numbers. Number b represents the ordinal position of the first element that we want to match, and the number a represents the ordinal number of every element we want to match after that.

For example:
The expression 2n+1 = every odd element
The expression 2n+2 = every even element
The expression 3n+1 will match the first element, then every third element after that.
So: 1 2 3 4 5 6 7 8 9 10 11 etc.
The expression 3n+2 will match the second element, and every third element after that.
So: 1 2 3 4 5 6 7 8 9 10 11 etc.

All starting to make sense now?



:last-child
This is very simple really. It affects only the last sub-element in an array of elements. It's the opposite of :first-child

For example, if you want to style only the border on the last image in your gallery:
img:last-child{border: 5px solid white;}


Fig. 10 - Click Here to see Live Preview

Add ALL the Pseudo-Classes
The following example shows you how you can use all the Pseudo-Classes I've mentioned in this article in a list to style a link on hover, when clicked on, the even items in a list, and the last child in a list.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9

Fig. 11 - Hover over items and click

As you can see in the example above, I've made all normal items in a list black, but the even child is blue. All the items on hover should be yellow and green when clicked on but the :nth-child(even) and :last-child overrides that. Have a look at the code below and see if you can come up with something more interesting

HTML

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9

CSS
li{
display: inline-block;
list-style-type:none;
margin: 5px;
color: black;
}

li:hover{
color: yellow;
}

li:active{
color: green;
}

li:nth-child(even) {
color: blue;
}

li:last-child{
color: red;
}
Unfortunately, that's all I've got to explain for today. Like I mentioned before, I'll update this article when I get more time with more pseudo-classes that work in deviantART, step-by-step on how they work and how you can use them on your web pages. See ya next article!



TL;DR - Documentation
::first-letter{}

::first-line{}

::selection{}
::-moz-selection{}

::before{content:"";}
Empty: ""
Text: "String Text"
Opening Quotation Marks: open-quote
Closing Quotation Marks: close-quote
URI: url(image-link)
Attribute: attr(X)

::after{content:"";}
Empty: ""
Text: "String Text"
Opening Quotation Marks: open-quote
Closing Quotation Marks: close-quote
URI: url(image-link)
Attribute: attr(X)

a:link{} /* unvisited links */
a:visited{} /* visited links */
a:hover{} /* user hovers */
a:active{} /* active links */
a:focus:hover{}

:nth-child(N){}
N keyword: odd or even
N number: 1
N number expression: an+b

:last-child{}

Useful LinksIf you'd like to learn more about CSS basics, I suggest you have a look at these groups:

Create your own Journal Skin by miontre
CSS3 Attribute Selectors by electricjonny
Advanced Typography by LabLayers for CSS-DYK

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


Journal Skins Examples


::selection{}


blockquote w/ triangle and icon using :before{}


If you have created any Free Skins with Pseudo-Elements or Classes, leave a comment with a link to your deviation and specify which you have used so I can add here





Related content

[ TEXT ]


imnotsana - PE: Cellphone Art + Contests

[ TEXT ]


imnotsana - SquibbleBox Feature I

[ TEXT ]


imnotsana - PE: CSS3 101 - Conclusion + Trivia and Contest

[ TEXT ]


imnotsana - PE: CSS3 101 - Transition Animations
Comments: 36

sulaman [2013-09-16 09:05:24 +0000 UTC]

A small example of :before and :after




Can check similar stuff on the below URL.

www.uiplayground.in/css3-icons…


This is all browser incompatible.


Using CSS/3 icons reduces the HTTP request which in turn decreases your website file size.


Hope you like it!

👍: 0 ⏩: 0

iAmoret [2013-06-03 20:49:23 +0000 UTC]

Me and .blockquote are not friends. What is he here for, what does he do!?

(literally four hours later I complete typing this comment )

I have to say that, unfortunately, you have defeated me (this time )- no matter what I do, I cannot seem to make a freaking triangle! So this is as far as I got. Do I get bonus points for finally using rgba?

👍: 0 ⏩: 1

imnotsana In reply to iAmoret [2013-06-04 10:26:24 +0000 UTC]

Oooh looks lovely!

Well, the secret to the triangle is that you have to add that code I wrote in the template with the borders (don't remove the transparent color) in either ::before or ::after, in your case probably ::after is better since you put quote marks in ::before. And then position it properly with position:absolute; and margin. That's all there is to it

👍: 0 ⏩: 1

iAmoret In reply to imnotsana [2013-06-06 18:53:26 +0000 UTC]

I fixeded it! (I think.... It looks right from where I'm doing it, but when you click the link, it shows it just smacked into the center But if you backspace the 20 and type it in again, it shows up fine )

👍: 0 ⏩: 1

imnotsana In reply to iAmoret [2013-06-06 19:07:18 +0000 UTC]

Awesome you did it! Only thing is that there's two ::after and it should be only one:
.fancy::after {
content:"";
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid rgba(0, 280, 20, .5);
position:absolute;
margin-left: -79;
margin-top: -20;
}

👍: 0 ⏩: 1

iAmoret In reply to imnotsana [2013-06-06 19:20:06 +0000 UTC]

But.... but.... it wasn't working with just one....

👍: 0 ⏩: 0

electricjonny [2013-06-01 14:22:13 +0000 UTC]

I'm pretty fond of the attr you can do for before/after, for example:

/* stick the exact time on the timestamps */
.cc-time a:after, div.mcbox span.mcb-ts span:after, .details-section span[offset]:after {
        content:" - "attr(title);
}

👍: 0 ⏩: 1

imnotsana In reply to electricjonny [2013-06-01 15:29:12 +0000 UTC]

Ooh yeah that's a nifty trick

I do need to explain the :before/:after contents in details.. will add them in tomorrow

👍: 0 ⏩: 1

electricjonny In reply to imnotsana [2013-06-01 15:46:34 +0000 UTC]

Yeah, before/after can be a bit confusing to understand. Keep up the good work

👍: 0 ⏩: 1

imnotsana In reply to electricjonny [2013-06-01 18:24:34 +0000 UTC]

Yeah definitely, along with a lot of the other pseudo-classes. And thanks a lot! Writing up these articles for beginner-level in just a week was far too stressful

👍: 0 ⏩: 0

miontre [2013-06-01 10:23:13 +0000 UTC]

Great article!

👍: 0 ⏩: 1

imnotsana In reply to miontre [2013-06-01 12:45:50 +0000 UTC]

Thanks! Still need to add more classes x.x

👍: 0 ⏩: 0

CypherVisor [2013-06-01 07:05:12 +0000 UTC]

Nice article!

I am working on CSS3 Animations with CSS2 in ninja style (based on =Fli-c 's finding) at the moment. I shall show it once I have perfected it.

👍: 0 ⏩: 2

imnotsana In reply to CypherVisor [2013-06-01 10:24:48 +0000 UTC]

Me too

I used a few thanks to =Fli-c in my articles and gonna work on some more tonight for my Transition article

👍: 0 ⏩: 1

CypherVisor In reply to imnotsana [2013-06-02 09:45:30 +0000 UTC]

Nice work on the transition article btw! Read it!

👍: 0 ⏩: 1

imnotsana In reply to CypherVisor [2013-06-02 09:52:27 +0000 UTC]

Thanks

👍: 0 ⏩: 0

miontre In reply to CypherVisor [2013-06-01 10:23:27 +0000 UTC]

Well, this answers my question from your poll.

👍: 0 ⏩: 1

CypherVisor In reply to miontre [2013-06-02 09:45:38 +0000 UTC]

👍: 0 ⏩: 0

catluvr2 [2013-06-01 01:24:42 +0000 UTC]

I love pseudoclasses and pseudoelements!

They're pretty much what makes CSS 20% more fun!

👍: 0 ⏩: 1

imnotsana In reply to catluvr2 [2013-06-01 05:12:35 +0000 UTC]

and many people dont even know they exist hopefully I'll add some more classes to this once I finish the series

👍: 0 ⏩: 0

MissLunaRose [2013-05-31 22:36:47 +0000 UTC]

This article is amazing. I have so many new ideas now. Thank you!

👍: 0 ⏩: 1

imnotsana In reply to MissLunaRose [2013-06-01 05:10:44 +0000 UTC]

glad you found it useful do link me to a test journal when you come up with something cool so I can link it in this article!

👍: 0 ⏩: 1

miontre In reply to imnotsana [2013-06-01 10:23:44 +0000 UTC]

Gave me so many ideas too!

👍: 0 ⏩: 1

imnotsana In reply to miontre [2013-06-01 12:45:30 +0000 UTC]

Awesome, can't wait to see them

👍: 0 ⏩: 0

Astrikos [2013-05-31 20:06:09 +0000 UTC]

Wonderful article!

👍: 0 ⏩: 1

imnotsana In reply to Astrikos [2013-05-31 20:32:38 +0000 UTC]

Thanks hun

👍: 0 ⏩: 1

Astrikos In reply to imnotsana [2013-05-31 20:44:30 +0000 UTC]

👍: 0 ⏩: 0

MagicoffMusic [2013-05-31 18:36:25 +0000 UTC]

An other awesome article

👍: 0 ⏩: 1

imnotsana In reply to MagicoffMusic [2013-05-31 20:32:14 +0000 UTC]

Thanks for reading!

👍: 0 ⏩: 1

MagicoffMusic In reply to imnotsana [2013-06-01 05:07:56 +0000 UTC]

You're welcome for reading .

👍: 0 ⏩: 0

GinkgoWerkstatt [2013-05-31 06:15:46 +0000 UTC]

Great article again.

The nth-child thing was new for me. Nice to know that something like that exists.

👍: 0 ⏩: 1

imnotsana In reply to GinkgoWerkstatt [2013-05-31 08:43:06 +0000 UTC]

Thanks

It's great for styling thumbs

👍: 0 ⏩: 0

redfoxj [2013-05-31 03:10:56 +0000 UTC]

Just discovered the CSS Sandbox. Thank you for the link! This will make it easier to check my work.

👍: 0 ⏩: 1

imnotsana In reply to redfoxj [2013-05-31 08:16:31 +0000 UTC]

Oh it definitely is such a relief checking little snippets on those CSS Sandbox websites and seeing the instant preview

👍: 0 ⏩: 0

dhik-a [2013-05-31 00:07:04 +0000 UTC]

This is what I've been searching for. Thank you, my css goddess.

👍: 0 ⏩: 1

imnotsana In reply to dhik-a [2013-05-31 00:11:11 +0000 UTC]

Is it the selection thing you wanted in our collab?

👍: 0 ⏩: 0