pillinetwork hesabınızla giriş yapın.

Etiket:

bu etikete sahip olanlar bunlara da sahip: +, +, +, +, +

css hakkındaki yazılar:

3 Adımda jQuery Sexy DropDown Menu

Çoğu çalışmalarımızda gerekli olan DropDown menü jQuery ile dahada basit hale gelmiştir. 3 adımda aşağıdaki örnekteki gibi yapabilirsiniz. İşinize yarayacağını düşünüyorum.

Adım 1 : HTML
HTML tagları ile menümüzün başlıklarını oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ul class="topnav">

    <li><a href="#">Home</a></li>

    <li>

        <a href="#">Tutorials</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li>

        <a href="#">Resources</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Advertise</a></li>

    <li><a href="#">Submit</a></li>

    <li><a href="#">Contact Us</a></li>

</ul>

devamını okuyun
/* Etiketler: , , , , , , */
/* rhymes yazdı. 11 Ocak 2010 19:57. 3 yorum var */

JQuery ile fluid grid oluşturmak

Bir web sayfasına magazin/gazete görünümünde gird oluşturmak JQuery ile çok basit bir şekilde olmaktadır. Aşağıda kullanılan yöntem ve fonksiyonlar çok basit olması nedeniyle bir çok kişi tarafından rahatlıkla uygulanabilir. Bunları adımlayarak yapacak olursak:

1- Basit bir html sayfası oluşturalım:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<head>

        <title>Fluid grid</title>

        <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

    </head>

    <body>

        <div class="box"><p><span>01</span>01 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>02</span>02 Numaralı kutu...</p></div>

        <div class="box"><p><span>03</span>03 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>04</span>04 Numaralı kutu...</p></div>

        <div class="box"><p><span>05</span>05 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>06</span>06 Numaralı kutu...</p></div>

        <div class="box"><p><span>07</span>07 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>08</span>08 Numaralı kutu...</p></div>

        <div class="box"><p><span>09</span>09 Numaralı kutu...</p></div>

    </body>

devamını okuyun
/* Etiketler: , , , , , */
/* rhymes yazdı. 04 Ocak 2010 11:31. 5 yorum var */

JQuery ile paket sitelere istemci taraflı çözümler

Merhabalar, uzun bir aradan sonra JQuery'nin kurtarıcı olduğu bir hikaye ile karşınızdayım. Aslında burada çok az kod paylaşacağım ama bu tip bir sorunla karşılaşanlar için iyi bir çözüm olacağına eminim. Hem de kodaman yapısına çok uygun olacak bir paylaşım olduğunu düşünüyorum.

Hikayemiz şöyle : bir paket e-ticaret sitesi kullanıyoruz ve tema yönetim sistemi var ancak sadece istemci taraflı kodlara yani css html vs javascript müdahele edebiliyoruz. hazır bir paket olduğu için sunucu tarafında kod değiştirme gibi gereksinimler tam bir çile oluyor ve paketi satan firmamız ya değişikliklere ek ve biraz da yüksek ücretler, yada bu bir paket sistem o tarz birşey eklemeyiz gibi cevaplar veriyorlar.

devamını okuyun
/* Etiketler: , , , , , */
/* vectro yazdı. 28 Aralık 2009 11:33. 2 yorum var */

Sprite Tekniği ile Basit Css Menü Yapımı

Merhaba!

css 2.0 ile hayatımıza giren Sprite tekniği çok geniş kullanım alanına sahiptir. Hem sayfa hızını olumlu yönde etkilemesi hemde kişiye sunduğu hız ve kolaylıklada çok kişinin duasını almıştır da diyebiliriz.

Sprite tekniğinde menü vb. gibi imajları tek bir dosya altında toplayarak hız ve pratiklik kazanıyoruz.

css sprite tekniği
css sprite tekniği

Yukarıda gördüğünüz örnek menümüzde tek .gif dosyası içinde menünün hem up hemde over hağlini birlikte görüyoruz ve menüyü yaparken sadece tek bu imajı kullanıcaz.

devamını okuyun
/* Etiketler: , , */
/* goldharpoon yazdı. 05 Kasım 2009 09:57. 13 yorum var */

CSS'de Arkaplan : Bilmeniz Gereken Her Şey

\
Arkaplan, CSS'nin çekirdek parçalarından birisidir. Az da olsa bilmeniz gereken en temellerindendir. Bu makalede, CSS'de arkaplanların temel özelliklerini öğreneceğiz. Arkaplanlar kullanılarak yapılabilecek bazı hileleri de makalede bulabilirsiniz. Ayrıca CSS3'ün yeni arkaplan özellikleri de makalede mevcut. Aslında bu adreste yazılmış olan makeleyi Türkçe'ye çevirip kendi sitemde yayınlamıştım. Kodaman'da da yayınlamak istedim.

CSS2'de Arkaplanlarla Çalışmak
Gözden Geçirme
CSS2'de 5 ana arkaplan özelliğimiz var. Bunlar;
  • background-color : arkaplanın doldurulacağı düzgün rengi belirler.
  • background-image : arkaplan için bir imaj belirler.
  • background-position : belirlenen imajın arkaplanda nereye konumlandırılacağını belirler.
  • background-repeat : belirlenen imajın arkaplanda tekrar etme durumunu belirler.
  • background-attachment : belirlenen imajın arkaplanda kayma durumunu belirler.

Bu özellikler background denilen daha kısa bir özellik altında toplanabiliyor.Not edilmesi gereken önemli nokta, background özelliği, uygulandığı elemanın içeriğini (content) , iç boşluklarını (padding) ve kenarlıklarını (border) kapsar. Elemanın dış boşluklarını (margin) kapsamaz. Bu özellikleri Firefox, Safari, Opera ve şimdi Internet Explorer 8 desteklemektedir. Fakat aşağıda da görebileceğiniz gibi Internet Explorer 6 ve Internet Explorer 7'de background özelliği kenarlıkları (border) kapsamaz.

\

devamını okuyun
/* Etiketler: , , , , , , , , , , , */
/* firederick yazdı. 11 Eylül 2009 11:05. 8 yorum var */

Css Yazı Döndürme

Bu yazımda sizlere CSS ile nasıl yazı döndürüldüğünü göstermeye çalışacağım. Safari, Firefox ve Internet Exlorer'da (5.5 ve üstü) yapılan testlere göre sorunsuz bir biçimde çalışmaktadır.

HTML kodlarımız şu şekilde olmalı:

1
2
3
4
5
 
<div class="example-date">

  <span class="day">31</span> 

  <span class="month">July</span> 

  <span class="year">2009</span>

</div>

devamını okuyun
/* Etiketler: , , , , , , , */
/* fikirbozan yazdı. 01 Ağustos 2009 08:20. 35 yorum var */

Web Optimizasyon (Part 1 - CSS )

Her Internet kullanıcının, web sayfasından ilk beklentisi, içeriğin hızlı olarak sunulmasıdır,
Bu konuda sizlere Web sayfalarının optimizasyonu konusunda çeşitli bilgi taktik ve püf noktalardan bahsedeceğim, ilk dersimiz CSS


CSS'in varlığı, başlı başına optimizasyon ihtiyacımızı karşılamaktır..
Küçük ayrıntılara dikkat ederek, web sayfasının hızlı yüklenmesi ve bandwidth kullanımından kar elde edebiliriz.
Böylece daha mutlu kullanıcılar ve daha az band kullanımı sağlamış oluruz.

Fakat her ne kadar, css/still dosyaları sitede kullanılan resimler kadar bandwidth kullanımına etki etmese de,
onbinlerde kullanıcının request gönderdiği sayfalarda (facebook, yahoo vb) en ufak optimizasyon çalışması büyük getirileri olacaktır.

devamını okuyun
/* Etiketler: , , , , */
/* LefilsdeDieu yazdı. 28 Temmuz 2009 15:49. 22 yorum var */

Yahoo User Interface ile Tab

Selam arkadaşlar,
Öyle gözüküyor ki uzun bir süredir yazmıyorum. YUI serisine devam edeyim dedim. Bu sefer başka frameworkle karşılaştırmayacağım tamam!
Çok uzatmadan konuya girelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">

<head>

<!-- Skini include ediyoruz. ;) -->

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css">



<!-- YUI a ait tablerin görünür olabilmesi için gerekli js dosyaları -->

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>

<!-- TAB için dosya-->

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/tabview/tabview-min.js"></script>

<!--   yui-skin-sam  -->

<script type="text/javascript">

var tabim = new YAHOO.widget.TabView("tabornegi", { activeIndex: 1 });

// şey activeIndex varya 0 koyarsan ilk tab gözükür  1 koyarsan 2.

   

</script>

</head>

<body class="yui-skin-sam">

<div class="yui-navset" id="tabornegi">

    <ul class="yui-nav">

        <li class="selected"><a href="#yerli"><em>Yerli Diziler</em></a></li>

        <li><a href="#yabanci"><em>Yabancı Diziler</em></a></li>

        <li><a href="#tumu"><em>Karışık</em></a></li>

    </ul>            

    <div class="yui-content">

        <div><p><li>Selena</li><li>Sihirli Annem</li><li>Kayıp Prenses</li></p></div>

        <div><p><li>Lost</li><li>Prison Break</li><li>Ugly Betty</li><li>Super Natural</li></p></div>

        <div><p><li>Selena</li><li>Lost</li><li>Prison Break</li><li>Ugly Betty</li><li>Super Natural</li></p></div>

    </div>

</div>



</body>

devamını okuyun
/* Etiketler: , , , , , , , , , , , , */
/* s4l1h yazdı. 28 Temmuz 2009 02:48. 2 yorum var */

Jquery, Tutmayın Beni! Slideshow'a Kadar Yolun Var...

Herkese tekrardan merhabalar, keyifleriniz yerindedir umarım. Keyifler yerindeyse bugün biraz daha bilgimizi genişleterek keyiflenme zamanımız geldi demektir :)

Burada yazdığım ilk Jquery dökümanı bu olacak. İlk başta Jquery'nin ne şekillerde kullanıldığını yazacağım. Daha sonra Jquery ile birkaç tane örnek uygulama yapacağım. Bu dökümanı daha net anlayabilmek için html ve css bilginizin de olması gerekiyor.

Elimizde bulunması gereken Jquery dosyasını Jquery Resmi Sitesi'nden temin edebilirsiniz. Her şey hazırsa başlıyoruz...

devamını okuyun
/* Etiketler: , , , , , , , , , , , , , , , , , , , , , */
/* centrual yazdı. 23 Temmuz 2009 10:13. 10 yorum var */

İşin İçine CSS Katınca Neler Olur?

Merhaba sevgili okurlar;

Sizlerle bugün?!? Yasemin'in penceresi gibi bir program sunmaya başlamadım değil mi. Baştan alalım:

Herkese selamlar,

Yazı dizilerimin devamına biraz da css katmak istedim. Css'in verdiği o rahatlığı öğrenince, insan hiç tasarımı kasmıyor. 1 saatte yaptığı iş 10 dakikaya iniyor bazen. Onun için css önemli bir konu.

Bugün sizlere anlatacağım konular :

  • float ve clear'ın kullanımı
  • overflow nedir?
  • CSS 3'le beraber gelenler ve nerelerde işe yarayacağı
  • CSS'i IE de kullanırken bize az da olsa kolaylık bir yöntem.

Bugünlük bu kadar konu yeter sanıyorum. Hemen girişimizi yapalım :

devamını okuyun
/* Etiketler: , , , , , , , , , , , , , , , */
/* centrual yazdı. 22 Temmuz 2009 13:47. 31 yorum var */
1 2 3 Sonraki

etiket menüsü

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork