Halı Saha HTML CSS (Uygulama 6)

SAHAS

<body>

<div id=”kabuk”>

<div class=”yari-saha” style=”border-right:none;”>
<div class=”ceza-alani” style=”margin-top:60px;border-left:none;”>
<div class=”alti-pas” style=”margin-top:55px;border-left:none;”>

</div>
</div>
<div class=”yarim-daire-sag” style=”margin-top:110px”></div>
<div class=”yarim-daire-sol” style=”margin-top:110px”></div>
</div>

<div class=”yari-saha”>
<div class=”ceza-alani” style=”float:right;margin-top:60px;border-right:none;”>
<div class=”alti-pas” style=”float:right;margin-top:55px;border-right:none;”>

</div>
</div>
<div class=”yarim-daire-sol” style=”margin-top:110px”></div>
<div class=”yarim-daire-sag” style=”margin-top:110px”></div>
</div>

</div>

<img src=”futbolsahasi.jpg” />

</body>
</html>

CSS Bölümü

div#kabuk { float:left; width:520px; height:320px; background-color:#060; padding:50px; }
div.yari-saha { float:left; width:250px;height:300px;border:2px solid white;}
div.ceza-alani {float:left;height:180px;width:90px;border:2px solid white;}
div.alti-pas {float:left;height:70px;width:40px;border:2px solid white;}
div.yarim-daire-sag { float:left;
width:40px;
height:80px;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomright: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px; }
div.yarim-daire-sol { float:right;
width:40px;
height:80px;
border-left:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomleft: 40px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px; }

NE ANLADIK NE ÖĞRENDİK!

webkit-border-bottom-left-radius : Alt sola ovallik verir.

border-bottom-right-radius: Alt sağa ovallik verir.

border-top-left-radius: Üst sola ovallik verir.

border-right:2px solid white; Beyaz çizgi.

-webkit-border-top-right-radius: Üst sağ ovallik verir.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s