| Yazar |
Mesaj |
-
nett-oguzhann
Uzman Üye
Konum: OgzN
|
 03.08.2008, 09:21 (UTC)
Mesaj konusu: CSS Dersleri |
|
|
CSS ile Transparan Resimler
Çoğu zaman Photoshop' ta yaptığımız bir işlem vardır. "Opacity" Bu özellik sayesinde resimlerimize şeffaflık kazandırırız. Peki bu işlemi Web Tasarımda Photoshop' a gerek duymadan sadece CSS ile nasıl yapabiliriz. Bu derste yayınlanacak kodlar ile bu işlemin çok pratik şekilde yapıldığını ve ekstra olarak ise transparanı (Opacity=Şeffaflık) düşük bir resmin üstüne geldiğimizde nasıl eski haline döndüğünü göreceksiniz.
CSS Kodları: Sayfanızın <head></head> tagları arasına yapıştırın
Kod: <style type="text/css">
<!--
/* aşağıda 80 yazan bölüm yüzde bazında resmin alacağı şeffaflık değeridir */
.transparan img{
filter:Alpha(opacity=80);
-moz-opacity: 0.4;
}
.transparan:hover img{
filter:Alpha(opacity=100);
-moz-opacity: 1;
}
-->
</style>
Kullanım: Kod: <a href="#" class="transparan"><img src="resim.jpg" border="0" id="foto"></a>
not:alıntıdır. ______________ 
En son nett-oguzhann tarafından 03.08.2008 09:29:47 tarihinde değiştirildi, toplam 2 kere değiştirildi
|
|
|
↑
|
|
 |
-
nett-oguzhann
Uzman Üye
Konum: OgzN
|
03.08.2008, 09:36 (UTC)
Mesaj konusu: Css ile menü yapmak-yatay menüler |
|
|
Kod: ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.emu li { display: inline; }
Linklerin altındaki çizgileri kaldırıyoruz:
Kod: ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li { display: inline; }
ul.menu li a { text-decoration: none; }
Linkler arasına biraz boşluk veriyoruz:
Kod: ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li { display: inline; }
ul.menu li a {
text-decoration: none;
padding: .2em 1em;
}
Menüyü biraz renklendiriyoruz:
Kod: ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li { display: inline; }
ul.menu li a {
text-decoration: none;
padding: .2em 1em;
color: #1B1B1B;
background-color: #E2E2E2;
}
Son olarakta rollover efekti vermek için a:hover özelliğine renk atıyoruz:
Kod: ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li { display: inline; }
ul.menu li a {
text-decoration: none;
padding: .2em 1em;
color: #1B1B1B;
background-color: #E2E2E2;
}
ul.menu li a:hover
{
background-color: #999;
}
Sonuç işte:
Alıntıdır!!! ______________ |
|
|
↑
|
|
|
-
brauerei1907
Acemi Üye
|
03.08.2008, 10:44 (UTC)
Mesaj konusu: |
|
|
Head Head Neresi ya  ((( Ben yenıyımde |
|
|
↑
|
|
|
-
gazeteleri-oku
Bedava-Sitem Bağımlısı
|
03.08.2008, 16:09 (UTC)
Mesaj konusu: |
|
|
GÜZEL PAYLAŞIM  ______________ Gazeteleri-Oku.Tr.GG Artık Forumda Yoqq !! Banned!! |
|
|
↑
|
|
|
-
nett-oguzhann
Uzman Üye
Konum: OgzN
|
03.08.2008, 19:15 (UTC)
Mesaj konusu: |
|
|
gazeteleri-oku yazmış: GÜZEL PAYLAŞIM
saol ______________ |
|
|
↑
|
|
|
-
royalportal
Bedava-Sitem Bağımlısı
Konum: Bursa
|
03.08.2008, 19:25 (UTC)
Mesaj konusu: |
|
|
brauerei1907 yazmış: Head Head Neresi ya ((( Ben yenıyımde
sen tasarım üstüne ekle.
head tagları bedavasitemde kendiliğinden oluşuyor zaten.
bizlere kolaylık sunulmuş. |
|
|
↑
|
|
|
-
xgreyzer
Acemi Üye
|
07.03.2010, 12:07 (UTC)
Mesaj konusu: |
|
|
de kardeş biz bunları yazdıkda gifleri filan nerden bulcas |
|
|
↑
|
|
|
-
informess
Uzman Üye
Konum: Istanbul
|
07.03.2010, 12:18 (UTC)
Mesaj konusu: |
|
|
xgreyzer yazmış: de kardeş biz bunları yazdıkda gifleri filan nerden bulcas |
|
|
↑
|
|
|
-
learnfriend
Aktif Üye
|
07.03.2010, 12:28 (UTC)
Mesaj konusu: |
|
|
Teşekkürler... |
|
|
↑
|
|
|
-
kankateam14
Acemi Üye
|
22.08.2010, 14:30 (UTC)
Mesaj konusu: css |
|
|
ya css de nası sayfa olustrpda ıcıne html kodu koyabılıoruz_? |
|
|
↑
|
|
|
-
bs-destek-merkezim
Uzman Üye
|
23.08.2010, 00:33 (UTC)
Mesaj konusu: |
|
|
Güzel paylaşım. Ellerine sağlık. Yeni başlamış olanlar için muhakkak yararlı olacaktır. ______________ afilliyanlizlik, anadolulular ile Ayak6Animasyon 'a buradan selam olsun ve Kodbanks ile Limitsiz-Paylaşım'a sonsuz teşekkürler.
Bana ulaşmak istiyorsanız tıklayın. |
|
|
↑
|
|
|
-
zolucan
Acemi Üye
|
23.08.2010, 05:39 (UTC)
Mesaj konusu: |
|
|
brauerei1907 yazmış: Head Head Neresi ya ((( Ben yenıyımde
Bedava-Sitem bize bir kolaylık sağlamış. head agı da yok body tagı da yok htm tagı da yok sistem kendisi ekliyor;)
Ayrıca @nett-oguzhann arkadaşımız paylaştığı konuyu 1 kere okumuş olsaydı oradaki head tagları arasındaki yazıyı kaldırmış olması lazımdı. |
|
|
↑
|
|
|
-
rapsc
Acemi Üye
Konum: İstanbul
|
07.09.2010, 00:40 (UTC)
Mesaj konusu: |
|
|
Beyler ben freecsstemplates adlı siteden ücretsiz tasarım kodunu bedava sitemden tasarım alt tasarım üzerine falan bi sitede gördüğüm şekilde yapıştırdım menü gizleme kodunu falanda yaptm..
Şimdi O tasarımda menüsünde değişik şeyler vardı butonlarında falan
ben onların tasarımın üzerindeki yazı bölümünden o yazıları değiştirip kendime yeni bir menü yaptım
Menu
Rap Sözlerim
Rap şarkılar
Rap resimler
RAP nedir
iletişim
bu şekilde değiştirdim baştaki yazıları güzel de oldu fakat örneğin menüdeki rap sözlerim butonuna tıklayınca hicbir sayfaya gitmior hicbise olmuor kalıyor öyle diğerlerine tıklayıncada anasayfada kalıor ben nasıl yapıcam da bunlara basınca Rapsözlerim sayfasına yönelcek yada rapsözlerim die bir sayfa nasıl açacağım acilen yardım
YARDIM ETMEK İSTEYEN ANLAMAYAN ARKADASLAR EKLESİN
king_96_boy( at )hotmail.com acil yardım bekliorm derdimi cözene hediye verecem  |
|
|
↑
|
|
|
|
((( Ben yenıyımde
