Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj03.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
Mesaj03.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!!!
______________
Mesaj03.08.2008, 10:44 (UTC)    
Mesaj konusu:

Head Head Neresi ya Sad((( Ben yenıyımde
Mesaj03.08.2008, 16:09 (UTC)    
Mesaj konusu:

GÜZEL PAYLAŞIM Wink
______________
Gazeteleri-Oku.Tr.GG Artık Forumda Yoqq !! Banned!!
Mesaj03.08.2008, 19:15 (UTC)    
Mesaj konusu:

gazeteleri-oku yazmış:
GÜZEL PAYLAŞIM Wink


saol Wink
______________
Mesaj03.08.2008, 19:25 (UTC)    
Mesaj konusu:

brauerei1907 yazmış:
Head Head Neresi ya Sad((( Ben yenıyımde


sen tasarım üstüne ekle.
head tagları bedavasitemde kendiliğinden oluşuyor zaten.
bizlere kolaylık sunulmuş.
Mesaj07.03.2010, 12:07 (UTC)    
Mesaj konusu:

de kardeş biz bunları yazdıkda gifleri filan nerden bulcas
Mesaj07.03.2010, 12:18 (UTC)    
Mesaj konusu:

xgreyzer yazmış:
de kardeş biz bunları yazdıkda gifleri filan nerden bulcas

Resimler bölümünü inceleyiniz. > http://www.bedava-sitem.com/forum/viewforum.php?f=21
Mesaj07.03.2010, 12:28 (UTC)    
Mesaj konusu:

Teşekkürler...
Mesaj22.08.2010, 14:30 (UTC)    
Mesaj konusu: css

ya css de nası sayfa olustrpda ıcıne html kodu koyabılıoruz_?
Mesaj23.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.
Mesaj23.08.2010, 05:39 (UTC)    
Mesaj konusu:

brauerei1907 yazmış:
Head Head Neresi ya Sad((( 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ı. Wink
Mesaj07.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 Very Happy
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu