gaby Posted August 1, 2010 Report Posted August 1, 2010 Iata mai jos o imagine (un emoticon) creat doar cu ajutorul CSS-ului, fara folosirea imaginilor: Pentru a-l putea construi, aveti nevoie de un fisier, sa zicem index.html care sa contina: <body> <div id="cap"></div> <div id="gura"> <div id="zambet"></div> <div id="dinte1"></div> <div id="dinte2"></div> </div> <div id="ochi_r"> <div class="iris"> <div class="pupila"></div> </div> </div> <div id="ochi_l"> <div class="iris"> <div class="pupila"></div> </div> </div> </body>[/code] Iar [b][color="#FF0000"]style.css[/color][/b] care sa contina: [code]#cap{ -moz-border-radius:200px 200px 200px 200px; background:#FFff00; height:137px; left:245px; position:absolute; top:141px; width:137px; border:1px solid #938E00; } #ochi_r{ -moz-border-radius:200px 200px 200px 200px; -moz-box-shadow:0 0 56px #ff0000, 0 0 42px #000; background:#fff; height:27px; left:275px; position:absolute; top:175px; width:27px; border:1px solid; } #ochi_l{ -moz-border-radius:200px 200px 200px 200px; -moz-box-shadow:0 0 26px #ff0000, 0 0 22px #ff0000; background:#fff; height:27px; left:330px; position:absolute; top:175px; width:27px; border:1px solid; } .iris{ -moz-border-radius:50px; background-color:#000000; height:15px; left:5px; position:relative; top:5px; width:15px; } #gura{ background:#ff0000; width:80px; position:absolute; height:40px; top:220px; left:275px; -moz-border-radius: 0 0 100px 100px; border:2px solid #000000; } #zambet{ -moz-border-radius:0 0 20px 20px; background:none repeat scroll 0 0 #FFFF00; border-bottom:2px solid; border-left:2px solid; border-right:2px solid; height:20px; left:-2px; position:relative; top:-2px; width:80px; } #dinte1{ -moz-border-radius:0 0 2px 3px; background:none repeat scroll 0 0 #FFFFFF; height:12px; left:25px; position:absolute; top:20px; width:10px; } #dinte2{ -moz-border-radius:0 0 3px 2px; background:none repeat scroll 0 0 #FFFFFF; height:10px; left:45px; position:absolute; top:20px; width:10px; } .pupila{ -moz-border-radius:15px 15px 15px 15px; -moz-box-shadow:1px 1px 1px 1px #FFFFFF; background-color:#FFFFFF; height:5px; left:4px; position:relative; top:4px; width:5px; } P.S: Imaginea este optimizata foarte bine pentru FireFox. Succes ! Te-ai inregistrat? Ne-ar placea sa te prezinti. Cum pot sustine forumul? Cumpara de la eMag folosind acest link. --------------------
DanielNita Posted November 27, 2011 Report Posted November 27, 2011 foarte bine. Ai putea utiliza gradient in gura inrest chiar e ok. -o- opera si se vede ok css-mfc-profiledesign-xpro
+alex008 Posted November 27, 2011 Report Posted November 27, 2011 E foarte ok, dar mi se pare foarte mult de lucru... inutil.
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now