CSS Tasarımdan Anlayan Web Masterlara Basit Bir Menü Efekti Sorusu

Tahribat.com Forumları
line

Webmaster ve Yazılım Geliştiriciler
line

CSS Tasarımdan Anlayan Web Masterlara Basit Bir Menü Efekti Sorusu

24/Oca/14 22:56 Kısayol Şikayet Özel Mesaj

SoloTurk

Kayıt Tarihi: 16/Kasım/2009

Merhaba arkadaşlar.

Kendime hiçbir scripti, paneli olmayan, indexlerden meydana gelen basit bir web sitesi tasarlıyorum. Tasarım tamamen bana ait. Takıldığım bir konu var.

aşağıdaki resimde kırmızı kutu içerisine altığım yere lütfen dikkat edin:

Bu gördüğünüz kısımda 5 tane resimli link var. Konulara yönlendirdiğim.

Şu an çok basit bir şekilde resme tıklıyorsun sayfaya geçiyor. Hiçbir efekt yok.

Mausu üzerine getirdiğinde resimlerin rengini renksizden renkliye alan ya da çevresini turuncu kutuya alarak bağlantı olduğunu ifade eden bir kod, bir şey var mı?

Şimdi aynı resmi iki farklı renkte kaydedip css menü yaparım ama photoshopla bin tane resim hazırlamak istemiyorum bunun için. varsa kod falan dediğim gibi onu kullanmak istiyorum.

yardımcı olabilir misiniz?

O kısmın html kodları aşağıdaki gibi:

<head>

<style fprolloverstyle>A:hover {color: #FF0000; font-family: Calibri; font-weight: bold}

</style>

</head>

<table border="0" width="900" cellpadding="0" style="border-collapse: collapse" height="100">

<tr>

<td width="172" height="100">

<a href="../../ahmetfaydali-turkiyede-ve-dunyada-issizlik.htm">

<img border="0" src="../../images/ustbilgimenu/ustissizlik.png" width="172" height="100"></a></td>

<td width="10" background="../../images/hatch.gif"> </td>

<td width="172" height="100">

<img border="0" src="../../images/ustbilgimenu/ustdeneme2.png" width="172" height="100"></td>

<td width="10" height="100" background="../../images/hatch.gif"> </td>

<td width="172" height="100">

<a href="../../ahmetfaydali-2002-ve-2008-ekonomik-krizlerinin-perde-arkasi.htm">

<img border="0" src="../../images/ustbilgimenu/ustkriz.png" width="172" height="100"></a></td>

<td width="10" background="../../images/hatch.gif"> </td>

<td width="172" height="100">

<img border="0" src="../../images/ustbilgimenu/ustdeneme1.png" width="172" height="100"></td>

<td width="10" background="../../images/hatch.gif"> </td>

<td width="172" height="100">

<a href="../../ahmetfaydali-yeni-TTKda-ticaret-sirketleri-ve-ticari-ortakliklar.htm">

<img border="0" src="../../images/ustbilgimenu/ustttk.png" width="172" height="100"></a></td>

</tr>

</table>

Oksijen, belki de yavaş yavaş öldüren bir zehirdir...

Alıntı yap
24/Oca/14 23:03 Kısayol Şikayet Özel Mesaj

Media

Kayıt Tarihi: 08/Mayıs/2007

CSS‘in internet için çok büyük bir nimet olduğunu daha önceden söylemiştik. Ancak her şeyin karşılığını bulamıyorduk. Örneğin bir resme “blur” yani “soldurma” efekti vermek istesek bunu yapamazdık. Ancak CSS 3 ile buda artık mümkün, css “-blur” kodu sayesinde bunuda basitçe yapabiliriz.

Örnek verecek olursak aşağıdaki resimde bir tarafda normal resim varken diğer tarafda blur uygulanmış resim yer almaktadır.

CSS

< class="crayon-plain print-no" style="line-height: 15px !imant; overflow: ; font-size: 12px !imant; : 0; opacity: 0; -moz-tab-size: 4; -o-tab-size: 4; -webkit-tab-size: 4; tab-size: 4;" readonly="readonly" -settings="dblclick">img { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }

1

2

3

4

5

6

7

img {

-webkit-filter:blur(5px);

-moz-filter:blur(5px);

-ms-filter:blur(5px);

-o-filter:blur(5px);

filter:blur(5px);

}

Burada ise resmi tamamen grileştirmeye yarayan blur kodu sayesinde işlem gerçekleştirdik.

CSS

< class="crayon-plain print-no" style="line-height: 15px !imant; overflow: ; font-size: 12px !imant; : 0; opacity: 0; -moz-tab-size: 4; -o-tab-size: 4; -webkit-tab-size: 4; tab-size: 4;" readonly="readonly" -settings="dblclick">img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }

1

2

3

4

5

6

7

img {

-webkit-filter:grayscale(100%);

-moz-filter:grayscale(100%);

-ms-filter:grayscale(100%);

-o-filter:grayscale(100%);

filter:grayscale(100%);

}

....

Alıntı yap

24/Oca/14 23:12

Kısayol

Şikayet

Özel Mesaj

camarade
ontedi

Kayıt Tarihi: 04/Eylül/2005

Tablona class="tablo" sınıfını ata.

Daha sonra head etiketlerinin arasına şu kodları yaz.

<script type="text/javascript" src="js/jquery.js?ver=1.6.1"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery(".tablo img").hover(
                function (e) {
                    e.preventDefault();
                    var objNesne = jQuery(this);
                    jQuery(objNesne).animate({ "opacity": "0.7" });
                },
                function (e) {
                    e.preventDefault();
                    var objNesne = jQuery(this);
                    jQuery(objNesne).animate({ "opacity": "1" });
                }
            );
        });
    </script>

Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

Alıntı yap

25/Oca/14 00:57 Kısayol Şikayet Özel Mesaj

kvasir

Kayıt Tarihi: 24/Ağustos/2005

aradığın kod "saturate" ya da "grayscale", 2 side işini kolayca görür.

edit: konu dışı, table kullanma, div kullan css'de display: table, display: table-row şeklinde satır, sütun görüntülemesini işlersin.
kvasir tarafından 25/Oca/14 01:01 tarihinde düzenlenmiştir

Alıntı yap
25/Oca/14 00:58 Kısayol Şikayet Özel Mesaj
kvasir

Kayıt Tarihi: 24/Ağustos/2005
ontedi bunu yazdı

Tablona class="tablo" sınıfını ata.

Daha sonra head etiketlerinin arasına şu kodları yaz.

< ="text/" ="js/jquery.js?ver=1.6.1"> //
preventDefault Firefoxta sıkıntı çıkarabiliyor return false kullanmanı tavsiye ederim.
Alıntı yap

Toplam Hit: 803 Toplam Mesaj: 5

Cevapla