lostyazilim
tr.link

CSS ile Metin Kutucukları

6 Mesajlar 1.386 Okunma
acebozum
tr.link

Adobewordpress Adobewordpress WM Aracı Kullanıcı
  • Üyelik 08.07.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek Tasarımcı
  • Konum İstanbul Avrupa
  • Ad Soyad V** Ö**
  • Mesajlar 677
  • Beğeniler 58 / 418
  • Ticaret 1, (%100)



Bu yazımda tab tekniğinin temelinden bahsedeceğim. Beraberinde çok beğenerek hazırladığım bir çalışmayı sizinle paylaşacağım.

Hazırladığım örneği görüntülemek için burayı tıklayın.

Hazırlayacağımız CSS stilinin görüntüsü, normal haliyle yukarıda gördüğünüz gibi. Tablardan birinin üzerine gelince ise karşılacağınız görüntü soldaki gibi olacaktır. Stil dosyasını uzatmamaya çalıştım. Çalışma gayet basit bir arayüze sahip. İstediğiniz CSS teknikleriyle geliştirebilirsiniz. Örneğin gölgelendirme eklemenizi tavsiye ederim.

Aşağıdaki kodları CSS dosyamıza veya tagları arasına yazıyoruz.


#cevreleyici {
width: 800px;
margin: 100px auto;
}

#cevreleyici div {
transition: width 0.3s;
-moz-transition: width 0.3s;
-webkit-transition: width 0.3s;
-o-transition: width 0.3s;
float: left;
width:20%;
height: 180px;
overflow: hidden;
}

#cevreleyici:hover div {
width: 65px; }

#cevreleyici:hover div:hover {
width: 440px;
overflow: hidden; /*yazılar uzunsa bu alanı auto olarak değiştirin*/}

#adobewordpress {background-color:#bb5046; color:#fbdbd8; border-radius: 15px 0 0 15px;}
#adobe {background-color:#a6bb46; color:#e7f2b6; }
#wordpress {background-color: #FFCC00; color:white; }
#css {background-color:#46acbb; color:#caeff4; }
#seo {background-color:#b5b5b5; color:white; border-radius: 0 15px 15px 0;}

h1 {font-size: 115%;margin: 10px 10px .2em 25px; }
p {margin: 1em 25px; }



Aşağıdaki kodları ise BURAYA tagları arasına yazıyoruz.



AdobeWordPress


Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.




Adobe


Merkezi ABD'de Kaliforniya eyaletinde bulunan, Dünya'nın 10 büyük grafik ve medya yazılımlarını üreten şirkettir.




WordPress


WordPress, GPL lisanslı, PHP ve MySQL kullanılarak yazılmış bir kişisel yayın sistemidir.




CSS


HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.




SEO


Arama motorlarının web sayfalarını daha kolay bir şekilde taramasına olanak sağlayan teknik düzenlemeler.







Bu kadar. Umarım işinize yarar.

Kaynak : http://www.adobewordpress.com/sadece-css-ile-tab-mantigi-kullanarak-listeleme/
ismailBayram

kişi bu mesajı beğendi.

adobewordpress.com ~ “güncel tasarım okulu”
wmaraci
reklam

webhost webhost WM Aracı Kimlik Onayı
  • Üyelik 10.10.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek web Tasarım - CMS
  • Konum İstanbul Anadolu
  • Ad Soyad ** **
  • Mesajlar 349
  • Beğeniler 33 / 71
  • Ticaret 1, (%100)
CSS Muhteşem birşey .... Sizinde Elinize Sağlık.
Adobewordpress

kişi bu mesajı beğendi.

ilkayy ilkayy ucrmyslnmsmdstgmdeanldm Kullanıcı
  • Üyelik 21.09.2012
  • Yaş/Cinsiyet 29 / E
  • Meslek N/A
  • Konum Diğer
  • Ad Soyad İ** G**
  • Mesajlar 1439
  • Beğeniler 372 / 373
  • Ticaret 20, (%100)
Bloğunuzu sürekli takip etmeye başladım, gerçekten yararlı bilgiler paylaşıyorsunuz.
Adobewordpress

kişi bu mesajı beğendi.

Adobewordpress Adobewordpress WM Aracı Kullanıcı
  • Üyelik 08.07.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek Tasarımcı
  • Konum İstanbul Avrupa
  • Ad Soyad V** Ö**
  • Mesajlar 677
  • Beğeniler 58 / 418
  • Ticaret 1, (%100)
Teşekkürler arkadaşlar.
 

 

adobewordpress.com ~ “güncel tasarım okulu”
wmaraci
wmaraci

mrtkrt mrtkrt Başarı çalışmaktan geçer. Kullanıcı
  • Üyelik 23.10.2012
  • Yaş/Cinsiyet 33 / E
  • Meslek Web Tasarım / Yazılım
  • Konum Manisa
  • Ad Soyad ** **
  • Mesajlar 38
  • Beğeniler 0 / 7
  • Ticaret 0, (%0)
Bu konuyla blogunla tanıştım. Kaliteli işler çıkartıyorsun :) Takip Ediyorum artık seni de :)
Adobewordpress

kişi bu mesajı beğendi.

fatihcan fatihcan www.ktubotekulubu.com Kullanıcı
  • Üyelik 28.08.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Öğrenci
  • Konum Trabzon
  • Ad Soyad ** **
  • Mesajlar 478
  • Beğeniler 212 / 75
  • Ticaret 2, (%100)
Çok yararlı bilgiler var sitenizde takipteyim. Eline sağlık bende böyle bir şey düşünüyordum CSS te nasıl yapacağım diye ;)
Adobewordpress

kişi bu mesajı beğendi.

Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al