lostyazilim
tr.link

CSS3 Transition - Win8 Stili Menü

10 Mesajlar 2.455 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)

Her geçen gün JavaScript pastasından bir ısırık daha alan CSS gelişimini sürdürüyor. Bu makalemde ise CSS’in öne çıkan elementlerinden olan geçişleri (transitions) konuşacağız.

Bu yeni kod sistemi sayesinde iki renk, boyut, ölçeklendirme gibi birimler arasında geçiş sağlayabiliyoruz.

Özellikle son günlerde herkesin beğenisini kazanan Windows 8 benzeri menü örnekleri de konumuzun bir parçası.

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

Makalemize önemli örneklerle ve incelenmesi gereken kaynaklarla devam edelim :

Örnek 1 : Fiziksel Büyüme Örneği Test Et

CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun üzerine gelince büyümesini sağlıyoruz.

#aw_table1{
width:100px;
height:100px;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
background:#666;
}

#aw_table1:hover{width:300px;}


Yukarıdaki kodları CSS dosyamızda veya tagları arasına yazıyoruz.




Yukarıdaki kodları ise BURAYA tagları arasına yazıyoruz.

Geçişler için sorun yaratan browserların başında Internet Explorer geliyor. Eğer profesyonel bilgisayar kullanıcısına hitap etmeyen web sayfalarınız varsa transition ve filter terimlerinden uzak durmanızı öneririm.

Kaynak : http://www.adobewordpress.com/css3-ile-gecis-efekti-transition-windows8-kutucuk-button/
ibrahimyzr Microsoftcu olesore

kişi bu mesajı beğendi.

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

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)
Eline sağlık hocam arşive ekliyorum
 

 

MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)
Güzel Olmuş Eline Sağlık Bence Biraz Daha Ayrıntılı anlatmalısın bileşen olarak ta menulere eklene bilir mesela yazı editörüne yazarak.. birde bunu resimde gösterdiğin şekilde nasıl yapabiliriz biraz geliştirmek lazım bunu gerçekten güzel bir menu tarzı...
Adobewordpress

kişi bu mesajı beğendi.

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

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)
İsteğiniz üzerine makaleyi geliştirdim.

Bu sefer balık tutmayı öğretmeye çalışmadım, direkt olarak kiloyla balık verdim :)
 

 

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

commention commention WM Aracı Kullanıcı
  • Üyelik 26.09.2012
  • Yaş/Cinsiyet 31 / E
  • Meslek Üniversite öğrencisi
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 21
  • Beğeniler 1 / 4
  • Ticaret 0, (%0)
Etkileyici, özellikle demo için teşekkürler, ayrıca adobewordpress.com web sayfanızda gayet anlaşılır ve kullanışlı.
Paylaşımınız aracılığıyla, güzel örneklerin bulunduğu bir sayfaya erişmiş oldum.
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 :)

@SkyGhostAir
CSS3 transition ile logoma hover efekti ekledim. Belki ilham verebilir sana da.
 

 

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

Ogulcan Ogulcan (K)af(S)in(K)af Kullanıcı
  • Üyelik 28.01.2011
  • Yaş/Cinsiyet 30 / E
  • Meslek -
  • Konum İzmir
  • Ad Soyad O** T**
  • Mesajlar 2185
  • Beğeniler 165 / 388
  • Ticaret 13, (%100)
Teşekkürler anlatım için :)
 

 

Ogzhn Ogzhn Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 25.03.2012
  • Yaş/Cinsiyet - / E
  • Meslek Öğrenci
  • Konum
  • Ad Soyad ** **
  • Mesajlar 375
  • Beğeniler 3 / 36
  • Ticaret 4, (%100)

Hocam direk olarak bu örnek paylaşımda mı acaba :) yemre temasında görmüştüm çok hoştu. Kendim yaptım ama bu kadar şık olmadı
 

 

MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

Adobewordpress adlı üyeden alıntı

İsteğiniz üzerine makaleyi geliştirdim.

Bu sefer balık tutmayı öğretmeye çalışmadım, direkt olarak kiloyla balık verdim :)


böylesi daha iyi oldu bence :) balık tutmayı öğrenebilmem için önce biraz balık yemem lazım yoksa öğrenecek kadar vaktim olmaz o durumdayım yani :) şimdi çalışmaya başlıyorum bakalım neler yapmamı sağlayacak bu bilgiler :)
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

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)

SkyGhostAir adlı üyeden alıntı

böylesi daha iyi oldu bence :) balık tutmayı öğrenebilmem için önce biraz balık yemem lazım yoksa öğrenecek kadar vaktim olmaz o durumdayım yani :) şimdi çalışmaya başlıyorum bakalım neler yapmamı sağlayacak bu bilgiler :)


Sabır ve azim diliyorum.
 

 

adobewordpress.com ~ “güncel tasarım okulu”
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al