Spaksu Blog » Css http://www.spaksu.com Kişisel Teknoloji , Kişisel Tasarım Tue, 26 Aug 2008 16:09:25 +0000 http://wordpress.org/?v=2.6.1 en Javascript Css stil değiştirici hazırlamak http://www.spaksu.com/javascript-css-stil-degistirici-hazirlamak/ http://www.spaksu.com/javascript-css-stil-degistirici-hazirlamak/#comments Sun, 08 Jun 2008 09:22:29 +0000 Spaksu http://www.spaksu.com/?p=357 Bir önceki yazımda size söz verdiğim gibi beraber javascript yardımı ile css stil değiştirici hazırlayacağız. Ancak eğer css konusunda bilgi sahibi değilseniz lütfen uzman biri yardımı ile hazırlamanızı yapınız. Yapacağınız hata sitenizde değişik bozulmalara neden olabilir. Yazının devamında anlattığım css stil değiştiri hazırlama yabancı bir siteden Türkçeye çevirilmiş halidir.

1. Javascript styleswitcher dosyasını indirin

Vereceğim bu dosya stil geçişlerini sağlamanız için gereken bir js dosyasıdır.
İndir (styleswitcher.js)

2. <head> tagı arasında js dosyasını çağırın

Stil değiştiriyi ekleyeceğiniz sayfada </head> tagının hemen üstüne alttaki kodu ekleyin eğer koddaki src çağırma kısmı farklı ise kendi sitenize göre uygun hale getirin:
<script type="text/javascript" src="styleswitcher.js"></script>

3. Yeni bir stil dosyası oluşturun

Bu kısım en önemli kısımdır. Sitenizde bulunan css stil dosyasının bir kopyasını oluşturarak içindeki değerleri , renkleri yeni stile göre ayarlayın. Eğer stilinizdeki tanımlamalar diğer stil ile bağdaşmazsa uyumsuzluklar ortaya çıkabilir. Gerekli değişiklikleri yapıktan sonra dosyanızı “style-mavi.css” şeklinde farlı bir isim ile adlandırın ve kaydedin. Bu işlemi istediğiniz kadar stil oluşturmak için kullanabilirsiniz.

4. Head bölümünde stillere link verin

Dikkat etmeniz gereken nokta iki çeşit stil dosyası olduğudur. Ana stil ve Alternatif stil. Ana stiliniz temanın ilk stilidir Title yani başlık değeri default’dur.
<link rel="stylesheet" type="text/css" href="style.css" title="default" />

Oluşturduğunuz diğer stil dosyaları alternatif stillerdiir. Alttaki kod gibi “Rel” ve “Title” değerleri ana stilden farklıdır. Birden fazla alternatif eklemek için alttaki kodları tekrarlayabilirsiniz..
<link rel="alternate stylesheet" type="text/css" href="style-mavi.css" title="mavi" />

5. CSS stil değiştiricileri sitenize link olarak ekleyin.

Üstteki stil dosyalarını oluşturup tanımladıktan sonra buları ziyaretcilernizin kullanacağı hale getirmek için sitenizde istediğiniz herhangi bir yerde link olarak ister text formatında isterseniz imaj formatın kullanıcınıza suınabiilirsiniz. Altta belirttiğim kodda dikkat çeken kısım setActiveStyleSheet(’mavi’); olarak belirtiğimiz stil aktifleştirme bölümüdür.
<a href="/" onclick="setActiveStyleSheet(’mavi’); return false;">Mavi Tema</a>

Aynı link kodu ile alttakini kullanarakda ziyaretçinin orjinal stile dönmesi sağlanabilir:
<a href="/" onclick="setActiveStyleSheet(’default’); return false;">Orjinal Tema</a>

İşte bukadar stil değiştiriciniz hazır.

Eğer Css hakkında bilgi sahibi değilseniz lütfen uzman birinin gözetimi ile yapın. Yanlış bir şey yaptığınızda sitenizin yapısını bozabilirsiniz ve ben kesinlikle bu nedenden ötürü sorumluluk kabul etmem.

Kolay gelsin.

]]> http://www.spaksu.com/javascript-css-stil-degistirici-hazirlamak/feed/ Css stil değiştiriciler (style switchers) http://www.spaksu.com/css-stil-degistiriciler-style-switchers/ http://www.spaksu.com/css-stil-degistiriciler-style-switchers/#comments Sat, 07 Jun 2008 07:41:57 +0000 Spaksu http://www.spaksu.com/?p=356 Genelde yabancı sitelerde kullanılan ve “style switcher” diye adlandırılan stil değiştiriciler ülkemizde pek kullanılan bir özellik değildir. Sitelerinizde birden fazla stil dosyası arasında geçişleri kolay hazırlanan bir buton sayesinde kullanıcıların sitede farklı stillerde gezmesini sağlayabilirsiniz. Örnek olarak ben 2 adet daha faklı stil hazırladım ve solda firefox reklamının altına 3 adet ufak değiştirici ekledim. Bu sayede siteyi 3 farklı renkte kullanabileceksiniz. Smashing Magazine sitesi bu konuyada el atmış ve bu tarz daha profesyonel olarak hazırlanan siteleri listelemiş.. Birkaç gün içinde sizinde kendi sitenize stil değiştirici eklemenizi sağlayacak bir yazı ile en basit yolunu anlatacağım. Şimdilik altta verdiğim sitede listeyi inceleyin ve bu sistemle neler yapabileceğinizi düşünün.

http://www.smashingmagazine.com/2008/06/05/…/

]]> http://www.spaksu.com/css-stil-degistiriciler-style-switchers/feed/ Css’de Code Tagını Biçimlendirme http://www.spaksu.com/cssde-code-tagini-bicimlendirme/ http://www.spaksu.com/cssde-code-tagini-bicimlendirme/#comments Sat, 10 May 2008 13:01:36 +0000 Spaksu http://www.spaksu.com/?p=344 Sitenize yada blogunuza kullanımı göstermek amacıyla kaynak kodu eklerken epey zorluk çekersiniz. CSS ile hazırladığım basit ve ufak bir kodlama sayesinde istediğiniz biçimde ve renklerde sitenizde kodları gösterebilirsiniz. Verdiğim yapıyı css dosyanıza eklediğiniz taktirde <code>…</code> arasında kullanmanız yeterlidir. Size yazının devamında bir kaç renkte kodlama yapısı sunacağım. Yapıları gördüğünüz çerceveyide demo olarak kabul edebilirsiniz ve verdiğim kodları kendinize göre düzenleyip kendi biçiminizi oluşturabilirsiniz.

Sitemde gördüğünüz renkte;

code
{font:1em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
background:#f8f8f8;
color:#111;
border:1px solid #ccc;
border-left:6px solid #ccc;padding:4px;}

Sitemde gördüğünüz biçimin mavisi;

code
{font:1em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
background:#EAF3FA;
color:#222;
border:1px solid #83B4D5;
border-left:6px solid #83B4D5;padding:4px;}

Sitemde gördüğünüz biçimin kırmızısı;

code
{font:1em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
background:#FFE3DD;
color:#111;
border:1px solid #FF3300;
border-left:6px solid #FF3300;padding:4px;}

]]> http://www.spaksu.com/cssde-code-tagini-bicimlendirme/feed/ CSS Hakkında Siteler Serisi - Seri 3 http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-3/ http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-3/#comments Wed, 30 Apr 2008 10:52:51 +0000 Spaksu http://www.spaksu.com/?p=335 Css hakkında siteler serisine kaldığımız yerden devam ediyoruz. Bir önceki iki seride “Css diyagramları , bar (çubuk) grafikleri , yıldız biçimli oylama sistemlerini , css formlarını ve bir çok css sitesinin yayınlandığı galeri (showcase) sitelerini , CSS Resim haritaları , Fotograf galerileri ve bazı scriptler , CSS Yerleşim Temaları (Template’ler) , Lightbox’lar , CSS Listeleme , Navigasyon , Menuler“ hakkında bir çok site vermiştik. Bunların dışında bu son seride bazı kullanışlı script tarzında kodlamalar , css tabloların oluşumu ve bir çok css tüyoların bulunduğu siteleri yazının devamında vereceğim.

Css Tüyo ve Kısayollar

Sunumlar (Slideshows)

CSS Tablolama

CSS (ve JS) İpucu Araçları

  • Bubble Tooltips
    Baloncuk şeklinde linklerinize ipucu araçları ekleyebilir açıklamaları baloncuk biçiminde gösterebilirsiniz. Örnek
  • qTip
    Herhangi bir linke alt açıklama ekliyorsunuz ama bu açıklamanın kendi istekleriniz ve şekillendirmeniz doğrultusunda görünmesini istiyorsunuz. qTip tam olarak bu işe yarıyor. Css , Js kodlarını ve Örneğini sitede bulabilirsiniz.
  • Sweet Titles Finalized
    qTip benzeri bir açıklama kutusu oluşturur.

Css ile ilgili yabancı yazarların yazdığı ingilizce makaleler

Örnekler , Dersler ve Teknikler

Karışık bazı siteler;

]]> http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-3/feed/ CSS Hakkında Siteler Serisi - Seri 2 http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-2/ http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-2/#comments Fri, 25 Apr 2008 09:20:48 +0000 Spaksu http://www.spaksu.com/?p=334 Css’nin internet sitesi tasarımında önemli bir yeri olduğunu ve gün geçtikçe geliştiğini , Css diyagramları , bar (çubuk) grafikleri , yıldız biçimli oylama sistemlerini , css formlarını ve bir çok css sitesinin yayınlandığı galeri (showcase) sitelerini bir önceki yazıda belirtmiştim. Css hakkında siteler serisinin ikinci serisinde daha çok imaj , tema ve teknikleri hakkında siteleri kısaca Türkçe bir şekilde tanıtacağım . Bu gidişle üç seri olacağını söylediğim bu seri dörde kadar uzar. Yazının devamında siteleri bulabilirsiniz. İddia ediyorum bunlar çok işinize yarayacaklar : )

CSS Resim haritaları , Fotograf galerileri ve bazı scriptler

CSS Yerleşim Temaları (Template’ler)

Lightbox’lar

CSS Listeleme , Navigasyon , Menuler

]]> http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-2/feed/ CSS Hakkında Siteler Serisi - Seri 1 http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-1/ http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-1/#comments Thu, 24 Apr 2008 16:47:40 +0000 Spaksu http://www.spaksu.com/?p=333 İnternet sitesi tasarlamada günümüzde değerli bir yeri olan CSS gün geçtikçe yeniliklerle dolup taşıyor. CSS ile yapabileceklerinizin nerdeyse sınırı yok. Neyin ne olduğunu ve nerde kullanılması gerektiğini bilmeniz yeterli. Buınu öğrenmeniz için bir çok internet sitesi mevcut. Yabancı bir sitede gördüğüm css ile ilgili navigasyon , tekniklerinin , derslerinin ve taslakların paylaşıldığı bir çok siteyi listelemiş. Ben size eklemeler yaparak Toplamda 3 seri yazıda Türkçe bir şekilde kısa açıklamalarla siteleri burada da listeleyeceğim. Tabiki yazının devamında;

CSS Diagramları, Bar Grafikleri , Yıldız Oylamaları

CSS Formlar

CSS Galerileri

Bu alanda css ile hazırlanan web sitelerinin yayınlandığı galeriler ve css tabanlı hazır temaların dağıtıldığı siteleri bulabilirsiniz.

]]> http://www.spaksu.com/css-hakkinda-siteler-serisi-seri-1/feed/ Değişik Navigasyon Çeşitleri http://www.spaksu.com/degisik-navigasyon-cesitleri/ http://www.spaksu.com/degisik-navigasyon-cesitleri/#comments Fri, 29 Feb 2008 10:08:23 +0000 Spaksu http://www.spaksu.com/degisik-navigasyon-cesitleri/

Sitenizin kullanılabilirliği açısından navigasyon çok önemşli bir yer teşkil ediyor. Bir çok değişik şekil ve düzende navigasyon çeşitleri vardır. Altta verdiğim bu sitede internette bulunan değişik navigasyonlar bir araya getirmişler. Hakikaten çok çeşitlilik ve kullaılabilirlik göz önünde. Buyrun;

http://www.smashingmagazine.com/2008/02/26/

]]> http://www.spaksu.com/degisik-navigasyon-cesitleri/feed/ Sitenizde sağ tuş menüsü http://www.spaksu.com/sitenizde-sag-tus-menusu/ http://www.spaksu.com/sitenizde-sag-tus-menusu/#comments Sat, 23 Feb 2008 08:43:18 +0000 Spaksu http://www.spaksu.com/sitenizde-sag-tius-menusu/ Eskiden internet sitelerinde sağ tuş tıklayıp kaynak kodlarını yada resimlerini (ç)almak isteyenler olurdu ki şimdi de var. Bunun için bir sürü yöntem geliştirildi sağtuş yasakları gibi. İşe yaranabilirliği tartışılır. Vereceğim yöntem çok az sitede kullanılıyor ancak sitenin navigasyonuna değer katan bir yöntem olduğu için tercih edilebilecek bir yöntem. Yöntem sağtuşu bir nevi site menüsü haline getiriyor. Menü içeriğini istediğiniz şekilde değiştirmenizi sağlıyor.Bu da navigasyonda avantaj sağlıyor. Uzatmadan siteyi vereyim ingilizce açıklamalar ve download için bu siteye girin ;

http://yura.thinkweb2.com/scripting/contextMenu/

]]> http://www.spaksu.com/sitenizde-sag-tus-menusu/feed/ CSS ile Type Önizleme ve Oluşturma http://www.spaksu.com/css-ile-type-onizleme-ve-olusturma/ http://www.spaksu.com/css-ile-type-onizleme-ve-olusturma/#comments Sat, 16 Feb 2008 19:02:54 +0000 Spaksu http://www.spaksu.com/css-ile-type-onizleme-ve-olusturma/ Css ile yazı tiplerini, boyutlarını, renklerini ve bir çok diğer özelliklerini kontrol etmeniz, değiştirmeniz mümkündür. Önereceğim site bu tip değişiklikleri birebir önizlemesini ve otomatik olarak css kodlarını oluşturmanızı sağlayan bir sistem içeriyor. Fazla söze gerek yok girin ve inceleyin;

http://csstypeset.com/

]]> http://www.spaksu.com/css-ile-type-onizleme-ve-olusturma/feed/ Css ile sade Wordpress giriş tasarımı http://www.spaksu.com/css-ile-sade-wordpress-giris-tasarimi/ http://www.spaksu.com/css-ile-sade-wordpress-giris-tasarimi/#comments Thu, 31 Jan 2008 08:28:25 +0000 Spaksu http://www.spaksu.com/css-ile-sade-wordpress-giris-tasarimi/ Şuanda en popüler blog ve içerik yönetim sistemlerinden biri olan wordpress sisteminin admin ve kullanıcı giriş paneli üzerinde bir arkadaş oynama yaparak sade ve güzel bir giriş paneli oluşturmuş. Bende bunu kendi siteme uyarladım. Eğer kayıt bölümüne girerseniz tasarımı test edebilirsiniz. Kurulum çok basit sadece indirdiğiniz rar dosyasından 3 adet dosya çıkıyor. wp-login.php , logo ve css dosyası. Css dosyasını oynayarak renk ve diğer görsel ayarları değiştirmeniz mümkündür. Logonun boş halinide rar dosyasına ekledim kendi logonuzu eklemeniz kolay olur. Yapmanız gereken css klasörünü wordpress ana dizinine aktarmanız ve wp-login.php dosyasını ekteki dosya ile değiştirmeniz hepsi bukadar yeni panelinizin keyfini çıkartın. Dosyalar;

http://spaksu.googlepages.com/wp-giris.rar

]]> http://www.spaksu.com/css-ile-sade-wordpress-giris-tasarimi/feed/ Profesyonel ve Ücretsiz CSS Temalar http://www.spaksu.com/profesyonel-ve-ucretsiz-css-temalar/ http://www.spaksu.com/profesyonel-ve-ucretsiz-css-temalar/#comments Thu, 17 Jan 2008 16:37:59 +0000 Spaksu http://www.spaksu.com/profesyonel-css-temalar/ Css temaları birçok kez sitemizde verdik fakat bu vereceğim adrestekiler hem ücretsiz hemde profesyonel olarak hazırlanmışlar. Site de aynı zamanda Diğer css ile hazırlamış siteleri tanıtma ve puanlama sistemide bulunuyor. Eğer css siteniz varsa buraya ekleyerek tanıtımını yapabilirsibniz. Fazla sözü uzatmaya gerek yok direk adresi vereyim;

http://www.csscreme.com/freecsstemplates/

]]> http://www.spaksu.com/profesyonel-ve-ucretsiz-css-temalar/feed/ 11 adet ajax tabanlı web sitesi http://www.spaksu.com/11-adet-ajax-tabanli-web-sitesi/ http://www.spaksu.com/11-adet-ajax-tabanli-web-sitesi/#comments Tue, 08 Jan 2008 11:17:38 +0000 Spaksu http://www.spaksu.com/11-adet-ajax-tabanli-web-sitesi/ Ajax kullanarak hazırlanan , navigasyon teknikleri güzel ayarlanmış 11 adet websitesi

Contreforme

Netvibes

Lost in Ashford

Ergin Tekinbas

Gucci

Zee 07

Brdcast

Vahagn Art Gallery

Reservoir34

Backbase

Haus Hoyer

]]> http://www.spaksu.com/11-adet-ajax-tabanli-web-sitesi/feed/ Css taslak temaları http://www.spaksu.com/css-taslak-temalari/ http://www.spaksu.com/css-taslak-temalari/#comments Sun, 02 Dec 2007 17:43:35 +0000 Spaksu http://www.spaksu.com/css-taslak-temalari/ Çoğu siteler genelde hazır şekillenen ve grafiklerle doldurulmuş temaları dağıtırlar. Ancak amatör web tasarımcılar bu taslakları yeteri kadar kendilerince değiştirip kullanamazlar. Aynen kalır sadece logo ve içeriklerini değiştirip sunarlar. Bu açıdan önemli bir site vericeğim size. Css sistemini , kod yapılarını ve iskelet yapısını daha iyi anlayabilmeniz için güzel bir site. Sitede css templatelerinin iskelet yapıları verilmiş hem daha iyi anlar hemde daha yaratıcı ve en önemlisi özgün işler çıkarabilirsiniz.

http://intensivstation.ch/templates/

]]> http://www.spaksu.com/css-taslak-temalari/feed/ CSS ile içeriğin ortalanması http://www.spaksu.com/css-ile-icerigin-ortalanmasi/ http://www.spaksu.com/css-ile-icerigin-ortalanmasi/#comments Mon, 19 Nov 2007 08:10:32 +0000 Spaksu http://www.spaksu.com/css-ile-icerigin-ortalanmasi/ Oxxi için hazırladığım giriş sayfasında bir tablo ortalaması hazırlamıştım. Çözünürlüğünüz ne olursa olsun sayfanızın içeriği üstten ve alttan tam olarak ortalanmış olarak gözükür. Yazının devamında css kod yapısını ve kullanımını bulabilirsiniz.

body {
background-color: #FF3300;
padding:0px;
margin:0px;
}
#icerik {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #EEEEEE;
border: 1px dotted #000000;
overflow: auto;
}

Ve html sayfanızda cssyi import edip div tagı içinde id olarak aşağıdaki gibi kullanabilirsiniz. Örnek Sayfa için tıklayınız.
<div id="icerik"><center>Spaksu.com</center></div>

]]> http://www.spaksu.com/css-ile-icerigin-ortalanmasi/feed/ Yuvarlak köşe biçimli css tablo yapısı oluşturmak http://www.spaksu.com/yuvarlak-kose-bicimli-css-tablo-yapisi-olusturmak/ http://www.spaksu.com/yuvarlak-kose-bicimli-css-tablo-yapisi-olusturmak/#comments Wed, 14 Nov 2007 09:28:26 +0000 Spaksu http://www.spaksu.com/yuvarlak-kose-bicimli-css-tablo-yapisi-olusturmak/ Bir çok webmaster menu yada herhangi bir tablo oluştururken köşelerin rounded (yuvarlak) biçimli olmasını ister. Size önericeğim site, renkleri ve köşelerin özelliklerini belirttikten sonra hem köşe imajlarını hemde kullanacağınız css ve html kodlarını size veriyor sizede sadece kullanması kalıyor.

Yapmanız gereken şeyler ilk olarak Box Background (kutu arkaplan rengi) , Page Background (sayfa arkaplan reng) , Corner Radius (köşelerin yarıçap değeri) ve Köşelerin transparan yapısını belirtmek. Create Graphic (grafikleri oluştur) dediğinizde size 4 adet köşelerin gif resimlerini , css yapısını ve htmlde kullanıcağınız kod yapısını veriyor ve gerisi tamamen sizin kullanım şeklinize kalıyor. İşte sitemiz ;

http://wigflip.com/cornershop/

]]> http://www.spaksu.com/yuvarlak-kose-bicimli-css-tablo-yapisi-olusturmak/feed/ Css ile imajlarınıza yükleniyor resmi ekleyin http://www.spaksu.com/css-ile-imajlariniza-yukleniyor-resmi-ekleyin/ http://www.spaksu.com/css-ile-imajlariniza-yukleniyor-resmi-ekleyin/#comments Sat, 10 Nov 2007 07:55:56 +0000 Spaksu http://www.spaksu.com/css-ile-imajlariniza-yukleniyor-resmi-ekleyin/ Konu başlığındada belirttiğim gibi siteniz yüklenirken imajlarınızda güzel bir şekilde yüklensin diye css de basit bir kod yapısı hazırladım. Kod yapısnın mantığı aslında imajların arkaplanında basit bir yükleniyor resmi eklemek doğal olarak imajlarınız açılıncaya kadar yükleniyor resmini görüceksiniz imajlarınız açılıncada yükleniyor resmi arkaplanda gözükmeyecek. Sitemdede kullandığım kod yapısı oldukça basit ve kullanışlı .. bu arada loader yani yükleniyor imajlarınıda ajaxload.info sitesinden temin edebilir kendi sitenize uygun loaderlar oluşturabilirsiniz. ufak birde ipucu veriyim loader imajı ne kadar küçük olursa okadar hoş olur nedeni transparan resim eklediğinizde loaderin görünme ihtimali var.

Buyrun kod yapısı :

img {
background-image: url(yukleniyor.gif);
background-repeat: no-repeat;
background-position: center center;
}

]]> http://www.spaksu.com/css-ile-imajlariniza-yukleniyor-resmi-ekleyin/feed/ OSWD - Açık Kaynaklı Web Tasarımı http://www.spaksu.com/oswd-acik-kaynakli-web-tasarimi/ http://www.spaksu.com/oswd-acik-kaynakli-web-tasarimi/#comments Thu, 08 Nov 2007 23:29:52 +0000 Spaksu http://www.spaksu.com/oswd-acik-kaynakli-web-tasarimi/ Bir çok web tasarımcısının bildiği open source web design (açık kaynaklı web tasarımı) sitesi hazır html ve css tasarımların bulunduğu ve ücretsiz indirim yapabiliceğiniz bir yer. Amaç daha çok örnekler ile kendinize uygun olan tasarımı çıkarmanız tabi genelde bu şekilde değilde tasarım indirilip olduğu gibi kullanılıyor. Kendi tasarımınızı oluşturabilmeniz için güzel bir kaynak.

OSWD.org

]]> http://www.spaksu.com/oswd-acik-kaynakli-web-tasarimi/feed/ Css navigasyon teknikleri http://www.spaksu.com/css-navigasyon-teknikleri/ http://www.spaksu.com/css-navigasyon-teknikleri/#comments Wed, 07 Nov 2007 18:43:42 +0000 Spaksu http://www.spaksu.com/37-farkli-css-navigasyon-teknikleri/

Menuler bir site tasarlarken nerdeyse en önemli kısmı oluşturur. Tasarım yaparken menuyu siteye değilde tam tersi siteyi menuye göre yaptığım zamanlarda olmuştur. Vericeğim sitede 37 farklı navigasyon teknikleri gösterimiş css yapısını inceleyip kendinize göre düzenlemeniz sizin ve sitenizin farklı görünümlere ulaşmasını ve kullanıcının göz zevkini yenilemenizi kolaylaştırıcaktır.

Siteyi incelemek için Burdan buyrun

]]> http://www.spaksu.com/css-navigasyon-teknikleri/feed/ Basit Yatay Css Menu Yapımı http://www.spaksu.com/basit-yatay-css-menu-yapimi/ http://www.spaksu.com/basit-yatay-css-menu-yapimi/#comments Wed, 07 Nov 2007 11:54:45 +0000 Spaksu http://www.spaksu.com/basit-yatay-css-menu-yapimi/

1-İşte başlıyoruz önce cssmenu.html adında bir html dosyası oluşturalım. tek dosyada hem html hemde css kısmını ele alıcaz.
2-Menumüzü listeleme komutu olan <ul> komutunu kullanarak oluşturucağız işte menumuzun html kod yapısı:

<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>

3- Sıra geldi css yapısını oluşturmaya :

<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>

4-Alttaki sayfada css olarak istediğiniz değişikliği yapabilirsiniz. işte cssmenu.html full yapısı;

<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
padding:5px;
border-right:1px solid #FFFFFF;
background-color: #FF3300;
}
a:hover{
background:#CCCC00;
}
</style>
<meta HTTP-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS yatay menu</title>
</head>
<body>
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

CSS Menuyu önizlemek için tıklayınız.

]]> http://www.spaksu.com/basit-yatay-css-menu-yapimi/feed/ 12 İyi Tasarlanmış Css Portfolio Web Siteleri http://www.spaksu.com/12-iyi-tasarlanmis-css-portfolio-web-siteleri/ http://www.spaksu.com/12-iyi-tasarlanmis-css-portfolio-web-siteleri/#comments Wed, 24 Oct 2007 15:47:31 +0000 Spaksu http://www.spaksu.com/12-iyi-tasarlanmis-css-portfolio-web-siteleri/ 12 adet css kodlama ve görsel açıdan iyi bir şekilde tasarlanmış web siteleri ;

Marius Roosendaal

Marius Roosendaal

Built by Buffalo

Built by Buffalo

Darkmotion

Darkmotion

Prartweb

Prartweb

Flame Digital

Flame Digital

Cabedge

Cabedge

Okb

Okb

Intrigue

Intrigue

Alyssa Tucker

Alyssa Tucker

Out Loud Creative

Out Loud Creative

Rikcat Industries

Rikcat Industries

Jaredigital

]]> http://www.spaksu.com/12-iyi-tasarlanmis-css-portfolio-web-siteleri/feed/