Dreamweaver CS6'da CSS3 Geçişleri

• Mayıs Ayı 19, 2024

HTML5 ve CSS3 eklenmesiyle etkileşimli web siteleri beklenen hale geliyor. Şimdi, Dreamweaver ile^R, CS6 ve yeni CSS Geçişleri panelinde, herhangi bir kod yazmanıza gerek kalmadan kendi etkileşimli efektlerinizi oluşturabilirsiniz. Bu işlemden elde edilen çıktı yalnızca JavaScript olmadan CSS3'tür. Bu nedenle, görüntüleyenin JavaScript'i etkinleştirmiş olması durumunda endişelenmenize gerek yoktur. Dreamweaver tarafından oluşturulan geçişler herhangi bir modern web tarayıcısında oynatılabilir.

Kendi etkileşimli geçişlerimizi oluşturmanın ne kadar kolay olduğunu görelim. Geçiş, herhangi bir sınıfa, kimliğe veya CSS öğesine uygulanabilir. Tek yapmamız gereken CSS Geçişleri panelindeki değerleri ayarlamaktır.

1. İlk adımımız, geçişi uygulamak istediğimiz öğeyi seçmek. Örneğimizde bir menü bağlantısı olacak.
   
   
2. Paneli açmak için Pencere - CSS Geçişleri'ni tıklayın.
   
   
3. Bir geçiş eklemek için CSS Geçişleri panelinde Artı işaretini tıklayın.
   
   
4. Yeni Geçiş iletişim kutusunda, Hedef Kural menüsünü kullanarak önayarlardan seçim yapabilir veya geçiş için kendi adımızı yazabiliriz. .Morph adını yazalım.
   
   
5. Sonra geçişi tetikleyecek eylemi seçmeliyiz. Geçiş Açık menüsünden Farenizi bağlantının üzerine getirdiğimizde geçişin tetiklenmesi için Fareyle üzerine gelin'i seçin. Diğer seçenekler şunlardır: etkin, işaretli, devre dışı, etkin, odaklama, fareyle üzerine gelme, belirsiz ve hedef.
   
   
6. Menü Seçeneği için iki seçeneğimiz var. İlkini seçelim.
   
   Tüm özellikler için aynı geçişi kullan
   Her özellik için farklı bir geçiş kullanın
   
   
7. Geçişin Süresi ve Gecikmesi için Saniye veya Milisaniye kullanabiliriz. Süreyi 1 saniyeye ve Gecikmeyi 0,05 saniyeye ayarlayalım.
   
   
8. Zamanlama İşlevi için birkaç hareket hızı seçeneğimiz vardır. Haydi Kolaylığı Seçelim.
   
   
9. Bir CSS Özelliği eklemek için Artı işaretini tıklayın ve açılır listeden bir Özellik seçin. Arka Plan Rengi'ni seçelim.
   
   
10. Bir Özellik seçtikten sonra geçiş için Bitiş Değerini ayarlayabiliriz. Seçtiğimiz Mülke bağlı olarak, Bitiş Değeri menüsü bize o Mülke karşılık gelen menüyü verecektir. Arka Plan Rengi için Renk Seçici'yi alırız. Font-Weight özelliğini Font eklersek, önceden ayarlanmış ağırlıklar menüsünü alırız.
    
    
11. Son olarak Geçişin Nerede Oluşturulacağını seçmemiz gerekiyor. Seçeneklerimiz Yalnızca bu belge veya Yeni Stil Sayfası Dosyasıdır. İlkini kullanalım.
    
    

Geçiş Oluştur düğmesini tıkladıktan sonra, geçişin CSS Geçişleri panelinde listelendiğini görebiliriz.

Kod görünümünü kontrol edersek, bağlantıya morph sınıfının eklendiğini görürüz.

Faremizi Canlı görünümde bağlantının üzerine getirdiğimizde arka plan rengi değişecektir.

Peki ya geçişi düzenlememiz gerekirse? Bunu CSS Geçişleri panelinden yapabiliriz.

1. A.morph geçişini seçtiğinizde Düzenle simgesi etkinleşir (kurşun kalem simgesi).
   
   
2. Geçişi Düzenle iletişim kutusunu açmak için Düzenle simgesini tıklayın. Burada değerleri gerektiği gibi değiştirebilir veya yeni bir Özellik ve Son Değer ekleyebiliriz.
   
   

Artık morph geçişi oluşturduğumuza göre, bunu diğer öğelere kolayca uygulayabiliriz çünkü artık Hedef Kuralı menüsünden erişilebilir.

* Adobe, inceleme amacıyla bu yazılımın bir kopyasını bana verdi.

Telif Hakkı 2018 Adobe Systems Incorporated. Tüm hakları Saklıdır. Adobe ürün ekran görüntüleri, Adobe Systems Incorporated'ın izniyle kullanılmıştır. Adobe, Photoshop, Photoshop Albümü, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Köprü, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Havai Fişek, Contribute, Captivate, Flash Catalyst ve Flash Paper Amerika Birleşik Devletleri ve / veya diğer ülkelerde Adobe Systems Incorporated'in [a] tescilli ticari markaları veya ticari markalarıdır.

Video Talimatları: CSS Renk Geçişi - Gradient (Mayıs Ayı 2024).