Jump to content

Imagine Creata Doar Cu Css


gaby

Recommended Posts

Iata mai jos o imagine (un emoticon) creat doar cu ajutorul CSS-ului, fara folosirea imaginilor:

emoi.png

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 :pct2: !

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.