CSS 3 ile Volkswagen Camper

UYARI: CSS3 Camper deneyimi en iyi Chrome tarayıcıda yaşanmaktadır!!!
Bu yazı güncellenmiş halini Club Crema’dan okuyabilirsiniz.

Yaptığınız işin günlük yaşamınıza etkisi ne?

Benim aklıma ilk gelen cevap gördüğüm her şeyin satır-sütun , float:left; float:right, list (li) lerden oluştuğunu farketmemdi. Sonra, bunu bir uygulasam diye düşündüm. Önce sadece list elemanlarını kullanarak bina ypmak geldi aklıma. Sonra dedim neden css3 özelliklerini kullanarak bir şeyler yapmıyorum?

Yuvarlak köşeli şeyleri düşünürken de aklıma en sevdiğim arabalardan olan  Volkswagen Camper geldi. CSS3 border-radius özelliğini kullanarak bu arabayı yaptım.

Arabayı yapmaya dışından başladım. Dış gövdeyi yaptıktan sonra pencereler, ardından da kapı çizgilerini yerleştirdim.

En sona da tekerlekler ve far kaldı. Tekerleklerin yuvarlaklığının püf noktası  verdiğim yüksekliğin yarısı kadar border vermek oldu. (height:86px iken border-radius-topleft:43px vermek gibi)

Çalıştırabilseydim CSS3 gradient özelliğini kullanarak harikalar yaratacaktım ama başka sefere artık:)

Umarım bir an önce CSS3’ü tüm tarayıcılar destekler de bir çok şeyi yapma kabiliyetimiz artar ve zamandan kazanırız.

CSS

<style type=“text/css”>
*{margin:0; padding:0; border:0}
body{ font-size:62.5%;background:#E3EF77 }
#Kapsayici{ width:754px; height:530px;margin:0 auto; margin-top:100px;position: relative; }
/*Tüm elemanları kapsar / Contains all the elements*/
#Araba-Govdesi{ width:730px; height:368px; background:#899f23; border:1px solid #777;
-moz-border-radius-topright:40px; -moz-border-radius-topleft: 40px; }
/*Arabanın dış gövdesi / Body of the van */
#Pencereler{ background:#fff; height:100px; padding:50px 0 0 40px;
-moz-border-radius-topright:40px;-moz-border-radius-topleft: 40px;
border-bottom:2px solid #777} /*Pencereler / Windows div*/
.Kutu{height:86px; float:left; margin-right:20px; border:1px solid #777;}
/*Pencereleri ve tekerlekleri belirleyen kutular /
Kutu means Box, defines windows and Tekerlekler*/
.Beyaz{ background:#fff}
/*Kutuların içinde kullanılan arkaplan renkleri / Background colors used in boxes */
.Acik-Gri{background:#e0e4e7}
.Koyu-Gri{ background:#777}
.W35{ width:35px } /*Ön tanımlı uzunluklar/ predefined widths*/
.W86{ width:86px }
.W130{ width:130px }
.W180{ width:180px }
.W250{ width:250px }
/*Önceden tanımladığım köşe yuvarlaklıkları/ Predefined rounded corner*/
.topright{ -moz-border-radius-topright:20px;}
.topleft{ -moz-border-radius-topleft:20px;}
.bottomright{ -moz-border-radius-bottomright:20px;}
.bottomleft{ -moz-border-radius-bottomleft:20px;}
.Izgara {background:#e0e4e7 } /*Pencerelerin solundaki havalandırma / Grilled box */
.Izgara ul li{border-bottom:3px solid #777; list-style-type:none; height:10px}
#Cizgi1{width:2px; height:370px; background:#e0e4e7;margin-left:358px;position:absolute;}
#Cizgi2{width:2px; height:370px; background:#e0e4e7;margin-left:560px;position:absolute;}
#Tekerlekler{width:580px; height:90px; top:320px;left:100px; position:absolute; }
.Teker1{border:2px solid #777;-moz-border-radius:43px}
.Teker2{border:2px solid #777;-moz-border-radius:43px; float:right}
.Far{position:absolute; top:270px; right:0; width:20px; height:40px; border:1px solid #777}
@font-face {font-family: Mama;src: url(’Mama.ttf’)}
h1,a { font-family: Mama, verdana; position:absolute ;left:20px; color:#641F7F}
a{ font-size:1.4em; padding-top:70px;}
h1{font-size:36px; padding-top:20px;}
</style>

HTML

<div id="Kapsayici">

  <div id="Araba-Govdesi">

    <!--Kapı Çizgileri / Door lines-->

    <div id="Cizgi1"></div>

    <div id="Cizgi2"></div>

    <!--Pencereler / Windows-->

    <div id="Pencereler">

        <!-- Havalandırma/Grilled box-->

        <div class="Kutu W35 topleft Izgara ">

          <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

          </ul>

        </div>

        <!-- Havalandırma bitiş/Grilled box ends-->

    <div class="Kutu W250 topleft Acik-Gri "></div>

    <div class="Kutu W180 topleft topright Acik-Gri"></div>

    <div class="Kutu W130 topright Acik-Gri"></div>

    <!--Pencereler bitiş /windows finito!-->

  </div>  <h1>CSS3 - Camper </h1>

  <a href="camper.jpg" target="_blank">Orjinal camper</a></p>

  </div>

  <!--Tekerlekler/Tires-->

  <div id="Tekerlekler">

    <div class="Teker1 Kutu W86 Acik-Gri"></div>

    <div class="Teker2 Kutu W86 Acik-Gri"></div>

  </div>

  <!--Far / Light-->

  <div class="Far topright bottomright Acik-Gri"></div>

</div>