| Yazar |
Mesaj |
-
rockjog
Acemi Üye
|
 15.06.2009, 22:52 (UTC)
Mesaj konusu: Birkaç css tekniniği |
|
|
Css bilgisi biraz olan arkadaşlara yönelik ama css e yabancılarda kendilerine pay çıkarta bilirler
daha çok ufak tefek ayrıntılar ama önemli ayrıntılar bilmenizde yarar var:wink:
Alttaki kod sayesinde sitenizi ziyaret eden kişi sitenizdeki bir linke önceden tıklamışsa o link bu kodla gri renkle (isterseniz değiştirebilirsiniz) gözükecektir:
Kod:
a {color: 000;}
a:visited {color:#666;}
Css ile basit şekilde hover hazırlamak istiyorsanız bu yöntem en iyisi(resimi kendi sitemden aldım  )
Resimin önceki ve sonraki halini alt alta birleştiriyoruz bunu herhangi bir photoshop programı ile yapabilirsiniz
sonra sıra kodu yazmaya geldi
html kodu bu olacak
Kod:
<a class="oku" href="anasayfa.htm">OKU</a>
css de ise kod şu
Kod:
a.oku {
display: block;
width:80px;
height:28px;
background :url(http://img.webme.com/pic/r/rockjog/read.png) 0 0 no-repeat;
text-indent: -999px;
}
a:hover.oku {
background-position: 0 -28px; /**burda resimin ilk başta üstü gözüküyorken maus ile üstüne geldiğinde alttaki resmi gösteriyor yani 28px resmin yüksekliği**\
}
Şimdide css ile <hr /> yatay ayırac çizgisi koduna stil verme şeklini gösterecem
renk vermek için şu kodu kullanıyoruz
Kod:
hr {
color: #f00;
background-color: #f00; /**üsteki color kodu ie ve opera için background ise firefox da çalışıyor
height: 5px; /**Çizginin kalınlığı bilmeyen arkadaşlar için**/
}
Resim vermede firefoxda oldukça güzel çalışıyor fakat ie de sorunlar var
bunun için şu tekniği kullanacağız
html kodu böyle olacak
Kod:
<div class="hr"><hr /></div>
css kodundada birkaç ayarlama var tabi direk background demiyoruz
Kod:
div.hr {
background: #fff url(/images/ayrac_zr.gif) no-repeat scroll center;
height:28px;
width:180px;
}
div.hr hr {
display: none;
}
Çoğu sitelerden görmüşsünüzdür mesela bir resim tarayıcıyla beraber kayar
bu fixed sabit konumlandırmadır şöyle oluyr
Kod:
a.kayanresim {
position:fixed;
background-image: url(resimurlsi);
width:80px; /**genişlik**/
height:80px; /**yükseklik**/
margin-left: 10px;/**sol taraftaki boşluk **/
margin-top: 10px;/**üst taraftaki boşluk**/
text-indent: -999px;/**bu kodu merak etiyseniz bağlantı kulandığımız için yazının gözükmemesiniz sağlıyor
}
html kodu
Kod:
<a class="kayanresim" href="#">kayanresim</a>
css tasarımı yaparken sayfanıza ana bir kapsayıcı atarsınız
yani herşeyi içine alan kapsayıcı (katman) bazen ortalamakta sıkıntı çeker seniz en kolay yolu şudur
Kod:
body {
text-align: center;
}
#anakapsul {
width: 900px;/**katmanın genişliği**/
margin: 0 auto;/**ilk 0 olan üst ile alt kısım arasındaki boşuk ikinci ise sol ve sağ**/
text-align: left;/**body de koyduğumuz text-align: center; kodu ie de layer i ortalar fakat tüm yazılarda ortalar bunun için bu katmanda kodu left yaptık**/
}
En son olarak pek bilinmeyen ie6 da saydam resimlerin hata yaratması
Yani hepimizin kullandığı iconlar ie6 da saydam gözükmüyor çözüm çok basit
css ve java script ile çözülüyor
Kod:
img, div { behavior: url(http://www.fileden.com/files/2008/10/24/2157319/pngfix.txt) }
burdaki http://www.fileden.com/files/2008/10/24/2157319/pngfix.txt bir java script dosyası saydam resimlerin düzeltilmesini sağlıyor kendi uloadım 
Umarım yardımcı olmuşumdur...
Devamı gelecek... |
|
|
↑
|
|
 |
-
rockjog
Acemi Üye
|
15.06.2009, 22:53 (UTC)
Mesaj konusu: |
|
|
Yazmayı unutmuşum herhangi bir sorun olursa bir öm yeterli |
|
|
↑
|
|
|
-
hyperend
Uzman Üye
|
15.06.2009, 23:05 (UTC)
Mesaj konusu: |
|
|
bana göre basit hiç bilmeyenlere gör zor ama okurlarsa bişiler anlasalar iyi olur
______________
Özel mesajlara bakmıyorum bile... |
|
|
↑
|
|
|
-
rockjog
Acemi Üye
|
15.06.2009, 23:15 (UTC)
Mesaj konusu: |
|
|
Yakında basit anlatımların olduğu derslerde sunacağım bu konuyu sabitlemelerini umuyorum bide menu yapımını |
|
|
↑
|
|
|
-
hyperend
Uzman Üye
|
15.06.2009, 23:21 (UTC)
Mesaj konusu: |
|
|
malasef yapmıyolar ben css tasarımlarda kodları ayırmak ve bunları siteye uygulamakla iglili 2 video çektim ama gerilerde kaldı.
______________
Özel mesajlara bakmıyorum bile... |
|
|
↑
|
|
|
-
csstore
Bedava-Sitem Bağımlısı
|
16.06.2009, 01:48 (UTC)
Mesaj konusu: |
|
|
ben de baya önceleri böyle bişeyler hazırlamıştım | resimli anlatımlı falan, sonra 3-5 tane yorum geldi ve konu çürüyüp gitti.
(o yorumlar da : paylaşım için teşekkürler falan)
-
birinin kendi başına bişeyler yapması kadar harika bi olay yok.
tr.gg | bedava-sitem ortamında da gitgide azalan bişey bu.
adamla msn'de konuşuyorum, hackerfriend'inkine benzer tasarım nasıl yaparım diyo. 
-
aslında herşey kendinde başlıyo, herşey çok basit, biraz zaman harcıcak pc başında (mesela ben 2 yıldır) daha sonra hackerfriend'inkine benzer tasarım yapmayı istemez çünkü kendi tasarımını kendi yapmıştır ve gayet de beğenerek kullanıyodur. ______________ 
 |
|
|
↑
|
|
|
-
hyperend
Uzman Üye
|
16.06.2009, 08:17 (UTC)
Mesaj konusu: |
|
|
aynen csstore bence 2 bölüm olmalı Css ilgili paylaşımlar, Css ile ilgili sorunlar çünkü oratlık karman çorman oluyor millet açtıgın konuda 3 4 tane açıyor açılan konular geride kalıyor
______________
Özel mesajlara bakmıyorum bile... |
|
|
↑
|
|
|
-
rockjog
Acemi Üye
|
16.06.2009, 09:07 (UTC)
Mesaj konusu: |
|
|
csstore yazmış: ben de baya önceleri böyle bişeyler hazırlamıştım | resimli anlatımlı falan, sonra 3-5 tane yorum geldi ve konu çürüyüp gitti.
(o yorumlar da : paylaşım için teşekkürler falan)
-
birinin kendi başına bişeyler yapması kadar harika bi olay yok.
tr.gg | bedava-sitem ortamında da gitgide azalan bişey bu.
adamla msn'de konuşuyorum, hackerfriend'inkine benzer tasarım nasıl yaparım diyo.
-
aslında herşey kendinde başlıyo, herşey çok basit, biraz zaman harcıcak pc başında (mesela ben 2 yıldır) daha sonra hackerfriend'inkine benzer tasarım yapmayı istemez çünkü kendi tasarımını kendi yapmıştır ve gayet de beğenerek kullanıyodur.
Konuları sabitleyeceklerini bilsem 0 dan başlar çok kaliteli bir şekilde css i anlatırım ama malesef konular çürüyor ben açılır menu yapımınıda anlatmayı düşünüyordum fakat vaz geçtim çünkü konuya 2 3 kişi cevap verip sonra kaybolduktan sonra bir anlamıyok yerine gelen konulara yanıyorum aynen şöyle
 css tasarımı yapan?
css yardım
css şu site gibi nasıl tasarım yaparım?
halbiki bu konuları yazmamıza sabitlememize izin verseler veya sabitleseler bedavasitem de css bilgisi sen ben gibi iyi olan insanlar var biraz adminlerin ilgisizliğine bağlıyorum |
|
|
↑
|
|
|
-
bin907
Bedava-Sitem Bağımlısı
Konum: "fenercafe"
|
16.06.2009, 09:49 (UTC)
Mesaj konusu: |
|
|
arkadaşlar yazdıklarını okudumda evet haklısınız gerçekten...
fakat bu durum neden böyle hiç düşündünüzmü?
önceden ice blue tasarım devri varken ben (fenercafe) css design tasarımını kullanarak birşeyler yapmaya başladım..daha sonra insanlar kendi tasarımlarını yapmay çalıştılar sürekli..bu beni mutlu ediyordu fakat daha sonra bazılarına göre "devrim" bana göre ise "çöküş süreci" başladı... bunun adı bedava templateler...
gerçekten tr.gg ye en çok zarar veren insanların birşeyler öğrenmesinden ziyade hazır tasarımları kendileride yapmayıp başkalarına yaptırıp sitelerinde kullanan kullanıcı sayısı çok fazla arttı...
örneklerdeki sitere bakarsanız eğer gamezing sitesi bana ait id güncelleme yapmadığımdan dolayı naazimca adlı arkadaşıma siteyi devrettim..o siteyi yaptıktan sonra birçok mail aldım bu siteden yapmak istiyorum diye... o zaman anladımki insanlar gördükleri şeylerden farklı şeyler istemiyorlar..aynısı olucak kendiside yapmayacak başkası yapacak onun yerine!
bu mantıkla devam ettiğimiz sürece -ki devam ediyoruz...eskisi gibi webmaster çıkamaz bu forumdan. bu forumda yetişip şimdi bir çok projede yer alan insanlar var fakat şu anki forum nesilinde bu imkansız gibi duruyor..
saygılar. |
|
|
↑
|
|
|
-
webdeev
Bedava-Sitem Bağımlısı
Konum: GeCeLeRiN CoCuĞu NiGHT MeN Xd
|
16.06.2009, 10:01 (UTC)
Mesaj konusu: |
|
|
teşekkürler ______________  |
|
|
↑
|
|
|
-
rockjog
Acemi Üye
|
16.06.2009, 11:17 (UTC)
Mesaj konusu: |
|
|
webdeev yazmış: teşekkürler
Nedmek mesajlara cavap atarsanız derslere devam edeceğim ama dersler az mesajdan dolayı kaybolacaksa ve kimsenin işine yaramayacaksa hiç yazmayayım daha iyi |
|
|
↑
|
|
|
|
)
css tasarımı yapan?
