HOME | DD

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




Community Week





Table of Contents:
This article contains two major topics of Gradients:
1. Linear-Gradient


2. Radial-Gradient

Supported by:


Firefox 16+


Chrome 26+


Safari 5.1+


Internet Explorer 10+


Opera 12.1+



What are Gradients?
A color gradient, in terms of computer graphics, specifies a range of positioned colors to fill a certain region. By specifying a different color at different positions produces smooth color transitions in between the different ranges.

A linear color gradient is specified by different points with a color at each point. Colors along the path through those points are calculated and then extended across to fill the region.


Fig. 1 - Linear Gradient
A radial color gradient is specified as a circle that has one color in the center and another at the corners. Colors are calculated based on the distance from the center.


Fig. 2 - Radial Gradient
However with CSS3, instead of uploading gradient images to your webpage as you can see in Figures 1 & 2, you can just code the gradient right in. Since I'm more of a Visual Learner myself, I'm just going to go right ahead and start teaching as I go along with examples.

Linear-Gradients
The first topic of CSS3 I'd like to cover is one that's already available to *PremiumMembers in Journal Skins. By the way, there's a BlackBerry promotion going on, so Non Premium Members can use Journal skins from this page me.deviantart.com/journal/?edi… and test these features out as well

Vertical Gradients
This type refers to the gradient changing from top to bottom. This is the default gradient we'll see when entering the basic syntax:
linear-gradient(color, color);

CSS
/* W3C Standard that works in dA */
.box {
width: 200px;
height: 200px;
background: linear-gradient(#000000, #ffffff );
}
HTML
/* The same HTML class I'll be using throughout Linear Gradients */
<div class="box"></div>
OUTPUT

Fig. 3

Note: To use Linear-Gradients on webpages other than dA, it's preferred to add the following syntax for full Browser Compatibility

.box {
background: #000000;
background: linear-gradient(#000000, #ffffff );
/* Firefox 3.6+ */  
background: -moz-linear-gradient(#000000, #ffffff );
/* Safari 5.1+, Chrome 10+ */  
background: -webkit-linear-gradient(#000000, #ffffff );
/* Opera 11.10 */
background: -o-linear-gradient(#000000, #ffffff );
}
Note: To be as backward compatible as possible on browsers, it's best to first specify a default background color
background: #000000;

What if we want to add more colors vertically?
Well then go ahead and add as many as you want and it will evenly distribute the positions of these colors!
linear-gradient(color, color, color, etc.);

.box {
background: linear-gradient(maroon, red, orange, yellow, green, blue, purple, pink, #FFFFFF );
width: 200px;
height: 200px;
}
OUTPUT

Fig. 4

Note: For some reason, dA won't allow you to use ALL color names (ex: red, blue) in linear-gradients so I had to insert a hex value of white (ex: #FFFFFF = white) at the end. I'm only using names here so that beginners can follow easily, but it's better to use hex values or rgba (ex: rgba(255, 255, 255, 1) = white) If you DO want to use the names make sure you enter at least one hex value wherever.

Well that was easy enough! Don't you think?
Good, 'cause now this is where things get a little complicated



What if I want to control the position of where the colors stop?
For that the syntax will change a bit.
linear-gradient(color position, color position, etc.);
Where the position is calculated in percentages. The position is usually considered as the color stop because that's where it will stop and the new gradient will start.

.box {
background: linear-gradient(#FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 5
In Fig. 5 you can see that white is opaque until 30% of the box and that's where it stops and starts to change its gradient from gray until it reaches black at 100% which is at the bottom of the box.

What if I want to control the direction of the vertical gradient?
Again, you'll need to add a bit more to the syntax:
linear-gradient(to direction, color stop, color stop, etc.);
The direction can either be starting from top or bottom depending on you!

Note: The syntax for linear-gradients has changed for the direction, where "to direction" used to just be to "direction" ex: to bottom used to be bottom. This only works in old browsers with prefixes and dA will change the syntax for you, but it's better to use the new syntax. Thanks to PixievoltNo1 for pointing it out!

.box {
background: linear-gradient(to bottom, #FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 6

Challenge!
Now we can take what we've learned and apply it to create a 3D looking button!



Hover here and hold Click!
Fig. 7

As you can see, the gradients change when hovered on, and clicked on. In the snippet below, you can see that the gradient becomes lighter in opacity when hovered on, and changes from top to bottom when clicked on. This, along with some other attributes such as box-shadow, creates a nice 3D effect.

HTML
<a href="" class="button">3D Button!</a>
CSS
.button {
background: #B73E62 ;
background: linear-gradient(rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}
.button:hover {
background: linear-gradient(rgba(183, 62, 98, 0.1), rgba(183, 62, 98, 0.5));
}
.button:active {
background: linear-gradient(to bottom, rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}
Try it out yourself here !

Horizontal Gradients
This type of gradient refers to the colors changing from left to right or vice versa.
linear-gradient(to direction, color, color, etc.);
Where direction is either left or right
Of course, you can always add the position in percentages to better suit your needs.

.box {
background: linear-gradient(to left, #FFFFFF 0%, black 20%, white 40%, black 60%, white 80%, black 100%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 8

Diagonal Gradients
You can achieve this in two ways, with angles or direction:
linear-gradient(to direction direction, color stop, color stop, etc);
linear-gradient(angle, color stop, color stop, etc.);
The angle starts at 0deg same as to bottom  ↑
Then goes clockwise to 45deg starting from bottom left to top right  ↗ same as to top right
At 135deg it starts from top left to bottom right  ↘ same as to bottom right
At 225deg it starts from top right to bottom left  ↙ same as to bottom left
At 315deg it starts from bottom right to top left  ↖ same as to top left

.box {
background: linear-gradient(45deg, yellow, orange, pink, #ffffff );
width: 200px;
height: 200px;
}
OUTPUT

Fig. 9

Angled Gradients
Of course, you can get creative with the different degrees of angles and positions and do your own style of gradient.

.box {
background: linear-gradient(20deg, magenta 20%, red 60%, #ffffff 80%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 10

Still awake?



Well sadly, this is where Color Gradients ends in regards to deviantART.
But read on, if you're still interested to use them on your own webpages!

Repeating-Linear-Gradient
This does exactly what the title says, repeats the gradients so you can create a sort of pattern. Imagine the endless possibilities! You can completely replace background images with this.

div {
background: repeating-linear-gradient(black, black 20px, white 20px, white 40px);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 11 - Click to see Live Preview

Note: You can test the rest of these gradient attributes in the Image Links provided. Copy the code, press Reset and start from there.

Radial-Gradient
This is a gradient created in circles, automatically starting from the center to the edges
radial-gradient(color, color);

div {
background: radial-gradient(black, white);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 12 - Click to see Live Preview

What if I want to add more colors at different positions?
As with linear gradients, you can add more colors and change position of the radial gradients as well with the following syntax
radial-gradient(color stop, color stop, etc.);

I just created a simple flag of Japan for the example below, but you can get creative with this!

div {
background: radial-gradient(red, red 40%, white 40%, white 80%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 13 - Click to see Live Preview

Note: The first color will automatically be positioned at 0% which is the center of the circle. But you can also change where you want it to start by specifying a percentage

What if I want a specific size?
If you want a circular size the syntax will be like this:
radial-gradient(sizepx, color stop, color stop);
If you want an oval shape the syntax will be like this:
radial-gradient(widthpx heightpx, color stop, color stop);

In the following example, I made an oval shape that looks like a face with a blue background. With this CSS3 feature, you can easily create shapes and images using radial and linear gradients!

div {
background: radial-gradient(100px 150px, pink, pink 50%, cyan 50%, cyan 100%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 14 - Click to see Live Preview

Challenge!
Try to create this face using extra div classes with use of positioning and sizes.

Fig. 15 - Click to work on Template

Repeating-Radial-Gradient
This creates a repeated pattern of radial gradients with the same syntax
repeating-radial-gradient(color stop, color stop);

div {
background: repeating-radial-gradient(black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 16 - Click to see Live Preview

Cool Effects by Specifying a Size!
You can also add sizes to this as well to create some cool fractal type effects with the syntax
repeating-radial-gradient(size, color stop, color stop);

div {
background: repeating-radial-gradient(10px, black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}
OUTPUT

Fig. 17 - Click to see Live Preview

And that's all there is to it! Link me to any interesting gradient styles you come up with through this tutorial on cssdesk.com and leave a comment if you have anymore inquiries! Thanks for reading and hope you found this useful and easy to follow!



TL;DR - Documentation


linear-gradient(to direction, color stop, color stop);
linear-gradient(angle, color stop, color stop);
direction: top bottom left right
angle: 45deg ↗ 135deg ↘ 225deg ↙ 315deg ↖
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

repeating-linear-gradient(size, color stop, color stop);
size: 10px or 10px 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

radial-gradient(width height, color stop, color stop);
width: 10px etc.
height: 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

repeating-radial-gradient(size, color stop, color stop);
size: 10px or 10px 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

Vendor Prefixes
You should take note to use the following prefixes in front of each CSS style property for full Browser Compatibility on non-dA webpages:
Android: -webkit-
Chrome: -webkit-
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-

Example:If you want to add a Linear Gradient:
linear-gradient(black, white);

You should add these:
background: black; /* Default color for really old devices */
background: linear-gradient(black, white); /* W3C Standard */
background: -webkit-linear-gradient(black, white); /* Chrome, Android, iOs, Safari */
background: -moz-linear-gradient(black, white); /* Firefox */
background: -ms-linear-gradient(black, white); /* Internet Explorer */
background: -o-linear-gradient(black, white); /* Opera */



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
Ultimate CSS Gradient Generator
Linear-Gradients by jonarific
Learn more about rgba() and Alternate Color Models by jonarific

Examples of Journal Skins using Linear Gradients
If you have one as well, let me know and I'll add it 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: 57

PixievoltNo1 [2013-05-31 21:06:52 +0000 UTC]

Oh, and in case it wasn't clear from my previous comment, don't use "to" with angles.

👍: 0 ⏩: 0

PixievoltNo1 [2013-05-31 20:57:01 +0000 UTC]

The direction parameter information is missing two key points:

1. The CSS standard changed, so you should now be using "to ", which indicates where the direction is going (just like with angles), instead of where it starts. dA will correct the to-less form for you, but it doesn't hurt to make a habit of doing it the correct way.

2. You can actually combine two direction keywords, e.g. "to bottom right". This produces the angle where the middle of the gradient connects the two neighboring corners, e.g. the bottom-left and top-right corners. Since that'll only produce a perfectly diagonal gradient for square boxes, you'll still want to know angles like 135deg for some cases.

👍: 0 ⏩: 1

imnotsana In reply to PixievoltNo1 [2013-05-31 21:32:05 +0000 UTC]

That's true Both well noted points and will revise my article with the correct syntax. I had actually started writing this article about a year ago and didn't double-check the syntax but thanks for pointing it out

👍: 0 ⏩: 0

Kittylyn-Donut [2013-05-30 14:22:58 +0000 UTC]

thank you very much! that was pretty clear :3

👍: 0 ⏩: 1

imnotsana In reply to Kittylyn-Donut [2013-05-31 00:04:42 +0000 UTC]

That's a relief!

👍: 0 ⏩: 0

SimplySilent [2013-05-29 22:32:46 +0000 UTC]

Wonderful article! Thanks for all the great info~

👍: 0 ⏩: 1

imnotsana In reply to SimplySilent [2013-05-31 00:04:52 +0000 UTC]

Thanks dear!

👍: 0 ⏩: 0

Noru-kinz [2013-05-29 21:18:20 +0000 UTC]

.....I clicked this since it was at the bottom, now I am just extremely confused......

ALL I KNOW IS THAT THOSE ARE SOME PRETTY COLORS UP THERE!!!!!

👍: 0 ⏩: 1

imnotsana In reply to Noru-kinz [2013-05-31 00:07:00 +0000 UTC]

Hah didn't expect it to show up in the footer

Well, if you like having fancy journal skins on your dA page, this is basically just a tutorial explaining some codes to help you design it

You could try reading the Intro blog to help you understand [link]

👍: 0 ⏩: 1

Noru-kinz In reply to imnotsana [2013-05-31 01:07:20 +0000 UTC]

Nah, I just liked the pictures, I have no use for this! Nice job though, it's sure to help many people XD

👍: 0 ⏩: 0

jonarific [2013-05-29 20:27:59 +0000 UTC]

Great article! As this doesn't primarily focus on dA, I'd emphasize the importance of vendor prefixes even more though, as it's (unfortunately still) impossible to get along without them.

Also, you could perhaps insert a link to my article about alternate color models for people who are unfamiliar with all the rgba shenanigans.

👍: 0 ⏩: 1

imnotsana In reply to jonarific [2013-05-29 20:55:20 +0000 UTC]

That's true I did mention it in the beginning and meant to add them as I went along but sort of had to rush it Will be revising the article now that I have some time

Ugh I KNEW someone wrote about it, but the #CSS-DYK Archive hasn't been updated so I couldn't find it in time -_- Thanks for the direct link, will add it now

👍: 0 ⏩: 0

iAmoret [2013-05-29 17:48:08 +0000 UTC]

Non-premium members can indeed use journal skins- so long as they don't submit from Sta.sh. Learned that the hard way.

I have tried using gradients before for buttons, but it didn't turn out so well.

WHERE DID YOU FIND THAT LAST GIF!? I spent a whole HOUR trying to find a .gif that said that for the end of one of my journals!

Well, anyway, I tried making a button, so here it is.... I don't really know anything about rgba, so I didn't use it.

Sorry for the novel.

👍: 0 ⏩: 1

imnotsana In reply to iAmoret [2013-05-29 19:08:11 +0000 UTC]

Ah yeah, I should've mentioned that crucial point

Haha it took me a while to find that one You can use it from now on

Don't worry hex works just fine But here's an online Color Converter you might find useful [link] I'll probably do an rgba() tutorial at some point..

Your button looks great! Just one syntax error to correct: Under .button:hover{ the last color needs to be 6 characters to work for hex.. guess it got deleted somehow

Also for buttons, it's better to add the HTML in BUTTON format so you can easily add links to it. For this, don't forget to add text-decoration: none;

Oh don't be silly, you're telling ME about novels..

👍: 0 ⏩: 1

iAmoret In reply to imnotsana [2013-05-29 19:20:37 +0000 UTC]

It's okay- all the non-premium Sta.sh users will forgive you.... eventually.

Yay!

You have given me the key to an unknown world!

....But it is six characters.... You need to expand the sidebar to see the last 2, though (or, at least, I do).

Aah, yes; buttons are sort of useless without links, aren't they?

Yup- Teachin' you all 'bout that book-readin'!

👍: 0 ⏩: 1

imnotsana In reply to iAmoret [2013-05-29 19:35:58 +0000 UTC]

Oh geez, I'll go add that point in my article now
Haha, use it wisely young grasshopper!

Oops my bad, I mean under .button:active{ the last hex color is #13310 because when I click the button, it doesn't show any difference

Haha that icon But no seriously, have you seen the length of this article The rest are just as long too

👍: 0 ⏩: 1

iAmoret In reply to imnotsana [2013-05-29 20:18:13 +0000 UTC]

Run!

I shall try.

Oooooh, I forgot a 3. Now that I know what I meant.... daaaang, I need to choose different colours!

Thank you. helpplz.info- saves lives, bro.
Well, those are articles- this is a comment.

👍: 0 ⏩: 0

phoenixleo [2013-05-29 16:23:18 +0000 UTC]

Oooh god someone just released all the plagues of Egypt and mummies...
o____________________________________O

👍: 0 ⏩: 1

imnotsana In reply to phoenixleo [2013-05-29 19:11:47 +0000 UTC]

whaaa?

👍: 0 ⏩: 1

phoenixleo In reply to imnotsana [2013-06-05 22:16:59 +0000 UTC]

Things I don't understand that is... :C

👍: 0 ⏩: 1

imnotsana In reply to phoenixleo [2013-06-06 10:18:11 +0000 UTC]

Aww well, if you're ever interested in the basics of CSS, there's groups like #eCSSited and #CSS-DYK that will help you there or you could ask me but until you have the basics, I don't think this Article will make any sense

👍: 0 ⏩: 1

phoenixleo In reply to imnotsana [2013-06-06 13:35:39 +0000 UTC]

'tis alright. I am sometimes checking back the group, yours, and others articles, and even outside links to see what CSS does in basic form. I am the newbie of the newbie
It just reminds me of math for some reason. D:

👍: 0 ⏩: 0

Gee-X [2013-05-29 15:55:05 +0000 UTC]

those gifs ....i love them

this journal is awesome (like Barney ). it's helpful + funny

👍: 0 ⏩: 1

imnotsana In reply to Gee-X [2013-05-29 19:19:29 +0000 UTC]

are you comparing me to that purple child-hugging monster?

"YOU LOVE ME" *sings in creepy voice*

Glad you enjoyed it

👍: 0 ⏩: 1

Gee-X In reply to imnotsana [2013-05-29 20:11:36 +0000 UTC]

lol no-no I meant Barney...Barney Stinson

👍: 0 ⏩: 1

imnotsana In reply to Gee-X [2013-05-31 13:10:14 +0000 UTC]

Oops my bad :'D

Nahh no one can compare to him, he's LEGEND.. wait for it.. DARY

👍: 0 ⏩: 1

Gee-X In reply to imnotsana [2013-05-31 15:14:22 +0000 UTC]

👍: 0 ⏩: 0

Astrikos [2013-05-29 14:04:15 +0000 UTC]

Amazing article is amazing!

👍: 0 ⏩: 1

imnotsana In reply to Astrikos [2013-05-29 14:17:25 +0000 UTC]

Awesome Ali is awesome

👍: 0 ⏩: 1

Astrikos In reply to imnotsana [2013-05-30 00:04:53 +0000 UTC]

Super Sana is Super!

👍: 0 ⏩: 0

PirateLotus-Stock [2013-05-29 13:30:23 +0000 UTC]

Thank youuuuu

👍: 0 ⏩: 1

imnotsana In reply to PirateLotus-Stock [2013-05-29 13:38:01 +0000 UTC]

My pleaaaaasure

👍: 0 ⏩: 1

PirateLotus-Stock In reply to imnotsana [2013-05-29 13:47:34 +0000 UTC]

👍: 0 ⏩: 1

imnotsana In reply to PirateLotus-Stock [2013-05-29 14:20:41 +0000 UTC]

DINNER TIMESES

👍: 0 ⏩: 1

PirateLotus-Stock In reply to imnotsana [2013-05-29 15:11:45 +0000 UTC]

D:

👍: 0 ⏩: 0

gillianivyart [2013-05-29 11:13:27 +0000 UTC]

I thought radial gradient didn't work on deviantART. I'll have to go and retry. It has been a while since I tested it.

👍: 0 ⏩: 1

imnotsana In reply to gillianivyart [2013-05-29 11:48:31 +0000 UTC]

Nope it doesn't. After Angled Gradients I said that this is where it stops for dA

👍: 0 ⏩: 1

gillianivyart In reply to imnotsana [2013-05-29 18:05:53 +0000 UTC]

Oops, sorry, I skimmed too fast. I am lazy some times

👍: 0 ⏩: 1

imnotsana In reply to gillianivyart [2013-05-29 18:40:50 +0000 UTC]

No worries a lot of people are and since you mentioned it, I changed the layout to add that information in the table of contents

👍: 0 ⏩: 1

gillianivyart In reply to imnotsana [2013-05-29 21:55:16 +0000 UTC]

I am lazier when I think it is stuff I already know... But the radials caught my eye ;D

👍: 0 ⏩: 1

imnotsana In reply to gillianivyart [2013-05-31 13:08:04 +0000 UTC]

You should totally try radial face example in your journal and see if its available for Alphas yet

👍: 0 ⏩: 1

gillianivyart In reply to imnotsana [2013-05-31 20:11:17 +0000 UTC]

Oh yea, it was a long time ago I tried it, whenever the linear gradient was first allowed.

👍: 0 ⏩: 0

MagicoffMusic [2013-05-29 06:14:17 +0000 UTC]

, that's so cool to read and very interesting to see how the effects turned out.

You made laugh with the rabbit falling of its chair poor guy.

👍: 0 ⏩: 1

imnotsana In reply to MagicoffMusic [2013-05-29 06:53:44 +0000 UTC]

It could happen to anyone!

and thanks a lot! If anyone's like me (needs visual examples to learn) then I'm glad it helps

👍: 0 ⏩: 1

MagicoffMusic In reply to imnotsana [2013-05-29 09:15:15 +0000 UTC]

True it could happen to anyone. It probably would happen sooner to someone without armrests .

You're very welcome .
I sure helps . Pleased to hear your glad it helps .

👍: 0 ⏩: 0

miontre [2013-05-29 05:17:27 +0000 UTC]

Excellent article! Can't wait for more

👍: 0 ⏩: 1

imnotsana In reply to miontre [2013-05-29 06:43:33 +0000 UTC]



I wrote these in a rush so do let me know if I miss anything or make a mistake

👍: 0 ⏩: 0

Nesmaty [2013-05-29 00:25:58 +0000 UTC]

Very useful, .. I have always been lazy to use gradients in my skins .. Now I'm quite interested ..

👍: 0 ⏩: 1

imnotsana In reply to Nesmaty [2013-05-29 06:42:10 +0000 UTC]

You should They can completely replace images so you don't have to sit there designing it

👍: 0 ⏩: 1

Nesmaty In reply to imnotsana [2013-05-29 08:31:31 +0000 UTC]

👍: 0 ⏩: 0


| Next =>