Eglence , Css , Egitim , Html , Bilgi , Ders , Mizah Kısacası WebMasterSokağı

css3

Tasarımları Daha Geniş Görmek isterseniz Resimi tıklayın

Tasarım 1



Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun">

Tasarim Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: url(http://img37.imageshack.us/img37/5100/ase.png) top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: none; width: 1007px; height: 143px; float: left; text-align: center; padding: 0px 0 0 0; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas1_01.gif); width: 1007px; height: 248px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas1_02.gif); width: 1007px; height: 327%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 20px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 50px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas1_03.gif); width: 1007px; height: 193px; float: left; } #kommentartext { background-image: none; }


------------------------------------------------------------------------------------------------------------

Tasarım 2



Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun">

Tasarim Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: url(http://img37.imageshack.us/img37/5100/ase.png) top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: none; width: 1007px; height: 143px; float: left; text-align: center; padding: 0px 0 0 0; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas2_01.gif); width: 1007px; height: 248px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas2_02.gif); width: 1007px; height: 327%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 20px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 50px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas2_03.gif); width: 1007px; height: 193px; float: left; } #kommentartext { background-image: none; }


---------------------------------------------------------------------------------------------------------------

Tasarım 3



Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun">

Tasarim Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: url(http://img37.imageshack.us/img37/5100/ase.png) top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: none; width: 1007px; height: 143px; float: left; text-align: center; padding: 0px 0 0 0; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas3_01.gif); width: 1007px; height: 248px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas3_02.gif); width: 1007px; height: 327%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 20px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 50px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas3_03.gif); width: 1007px; height: 193px; float: left; } #kommentartext { background-image: none; }


--------------------------------------------------------------------------------------------------------

Tasarım 4



Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun">

Tasarim Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: none top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: none; width: 1007px; height: 143px; float: left; text-align: center; padding: 0px 0 0 0; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas4_01.gif); width: 1007px; height: 256px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas4_02.gif); width: 1007px; height: 331%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 18px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 50px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas4_03.gif); width: 1007px; height: 181px; float: left; } #kommentartext { background-image: none; }



------------------------------------------------------------------------------------------------------------------------

Tasarım 5




Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun">

Tasarım Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: none top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: none; width: 1007px; height: 143px; float: left; text-align: center; padding: 0px 0 0 0; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas5_01.gif); width: 1007px; height: 230px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas5_02.gif); width: 1007px; height: 342%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 800px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 19px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas5_03.gif); width: 1007px; height: 196px; float: left; } #kommentartext { background-image: none; }




-----------------------------------------------------------------------------------------------------------------------

Tasarım 6




Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun"><br />

Tasarım Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: none top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: none; width: 1007px; height: 143px; float: left; text-align: center; padding: 0px 0 0 0; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas6_01.gif); width: 1007px; height: 215px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas6_02.gif); width: 1007px; height: 393%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 15px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 50px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas6_03.gif); width: 1007px; height: 160px; float: left; } #kommentartext { background-image: none; }


------------------------------------------------------------------------------------------------------------------

Tasarım 7



Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun">

Tasarım Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: none top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas7ust.gif); width: 1007px; height: 350px; float: left; text-align: center; padding: 0px 0 0 0; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas7_01.gif); width: 1007px; height: 51px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas7_02.gif); width: 1007px; height: 663%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 41px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 50px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tasarimnetr/tas7_03.gif); width: 1007px; height: 54px; float: left; } #kommentartext { background-image: none; }

-------------------------------------------------------------------------------------------------------------------

Tasarım 8



Tasarım Üstü
<div id="tasarim"> <div id="baslik"></div> <div id="ust"></div> <div id="orta"> <div class="solsutun">Buraya Menü</div> <div class="sagsutun">

Tasarim Altı
</div> </div> <div id="alt"></div> </div>

CSS Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * {padding: 0; margin:0 } body { margin-left: auto; margin-right: auto; background: none top center fixed; } #tasarim{ width: 1000px; margin-left: auto; margin-right: auto; } #baslik{ margin-left: auto; margin-right: auto; background: none; width: 1007px; height: 0px; float: left; text-align: center; padding: 0px 0 0 237px; font-size: 15px; color: #000000; font-family: Verdana; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tolgahantr/rap_01.gif); width: 1007px; height: 343px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tolgahantr/rap_02.gif); width: 1007px; height: 213%; float: left; } .solsutun{ width:175px; float: left; padding: 0 0 0 20px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 237px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/t/tolgahantr/rap_03.gif); width: 1007px; height: 212px; float: left; } #kommentartext { background-image: none; }


--------------------------------------------------------------------------------------------------------------------------

arkadaşlar şok program ice blue red butterfly tasarım yapabiliorsunuz hemde çok basit işte programın anlatımı





ice blue tasarım yapmak için



butterfly yapmak için burda url leri yapıştırıoruz yabancı kelimelerin anlamlarını yanlarına yazdım butterflydekilerin aynısı red için de geçerlidir o ndnle sadece butterflyda türkçe çeviri var. işte butterfly ve red için




arkadaşlar css uyarlıyıcısıda çok basit kullanımı onun resimli anlatımını yapmadım normal anlatıcam yapamazsanız resimlide anlatabilirim anlatıma başlıorum

programı açıp css yi seçtikten sonra açılan pencereden empezar tuşuna basıoruz sonra yine açılan pencerenden abrir archivo dioruz sonra tasarımın style dosyasını bulup ona tıklıyoruz sonra paso 2 ye tıklıoruz karşımıza gelenden yine abrir archivoyu tıklıyoruz bu sefer tasarımın index dosyasını seçioruz ardından çıkan pencerenden pasa3 tıklıyoruz çıkan pencerenden genrar codigo yu tıklıoruz karşımıza çıkan penceredeki en üstteki tasarım üstü onun altındaki tasaırm altı yan taraftaki css koduna gelicek koddur.

anlatım bukadar şimdi bu muhteşem program

LİNK:
http://www.dosya.tc/Pwg_Maker_v4.rar.html
 

--------------------------------------------------------------------------------------------------------------------------

 Css Tasarım Yapma Videolu Anlatım


dosya şifresi: www.endlessgenclik.com


http://rapidshare.com/files/266079140/anlatim.rar

video ile ilgili sorun yaşayan arkadaşlar olmuş

videoyu sorunsuz izlemek için : http://www.videolan.org/mirror-geo.php?file=vlc/1.0.1/win32/vlc-1.0.1-win32.exe

programını kurun

____________________________________________________________

not : ALıntıdır