girişSayfanın arka planı için fareyle üzerine gelme efektleri. Nesnelerin üzerine gelindiğinde orijinal efektler
CSS3, UX tasarımcıları için sayısız fırsat sağladı ve bununla ilgili en iyi şey, en havalı öğelerin uygulanmasının gerçekten kolay olmasıdır.
Yalnızca birkaç satır kod, kullanıcılarınızı heyecanlandıracak, etkileşimi artıracak ve nihayetinde doğru kullanıldığında trafiğinizi artıracak harika geçiş efektleri oluşturacaktır. Dahası, bu efektler donanım hızlandırmayı kullanır, bu bir ilerlemedir - şu anda katılabilirsiniz.
İşte kullanıcı arayüzünüze hayat katacak ve kullanıcılarınızın yüzündeki gülümsemeyi artıracak gerçekten basit 8 efekt.
Bu efektlerin tümü (bir dikdörtgen) geçiş özelliği kullanılarak kontrol edilir. Bu efektlerin nasıl çalıştığını görmek için HTML sayfasında bir div oluşturduk:
Bunu yaptıktan sonra, genişliğini ve yüksekliğini (boyutlandırılacak şekilde), arka plan rengini (böylece görebiliriz) ve etkisinin özelliklerini ayarlayın.
Geçiş özelliğinin üç değeri vardır: geçişteki özellikler (bizim durumumuzda hepsi) geçişin hızı (bizim durumumuzda 0,3 saniye) ve hızlanma ve yavaşlamanın nasıl hesaplandığını değiştirmenize izin veren üçüncü bir değer, ancak biz alanı boş bırakarak varsayılan ayarlara bağlı kalacaktır.
Şimdi tek yapmamız gereken özellikleri değiştirmek ve onlar bizim için canlandıracaklar.
Kendi başınıza devam etmek istiyorsanız demo dosyaları tam size göre.
1. Karartma
Karartma efektleri oldukça yaygın bir müşteri isteğidir. Bu, işlevselliği vurgulamanın veya bir harekete geçirici mesaja dikkat çekmenin harika bir yoludur.
Efekt iki adımda kodlanmıştır: ilk önce başlangıç durumunu ayarlarsınız; ardından değişikliği, örneğin fareyle üzerine gelindiğinde ayarlayın:
Soldur (opaklık: 0,5;) .fade: üzerine gelin (opaklık: 1;)
(Bunun nasıl çalıştığını görmek için div'inize "fade" sınıfını verdiğinizden emin olun.)
2. Renk değişimi
Geçmişte, renk değişimi animasyonu inanılmaz derecede karmaşıktı ve bireysel RGB değerlerinin hesaplanması ve ardından bunların yeniden birleştirilmesiyle ilgili matematiği içeriyordu. Şimdi div'in sınıfını "renk" olarak belirledik ve CSS'de istediğimiz rengi belirledik:
Renk: üzerine gelin (arka plan: # 53a7ea;)
3. Yakınlaştırın ve uzaklaştırın
Bir zamanlar bir öğeyi büyütmek için genişliğini ve yüksekliğini veya bir doluluk parametresini kullanmak zorundaydınız. Ancak şimdilik, yakınlaştırmak için CSS3 dönüşümünü kullanabiliriz.
Div sınıfınızı "büyümek" olarak ayarlayın ve ardından bu kodu blok stilinize ekleyin:
Büyüme: üzerine gelin (-webkit-dönüşüm: ölçek (1.3); -ms-dönüşüm: ölçek (1.3); dönüşüm: ölçek (1.3);)
Bir öğeyi küçültmek, büyütmek kadar kolaydır. Bir elemanı büyütmek için 1'den büyük bir değer belirtiriz, daha küçük yapmak için 1'den küçük bir değer belirtiriz:
Küçült: üzerine gelin (-webkit-dönüşüm: ölçek (0.8); -ms-dönüşüm: ölçek (0.8); dönüşüm: ölçek (0.8);)
4. Elemanların bükülmesi
CSS bir dizi dönüşüm sağlar ve en iyilerinden biri eleman bükümdür. Div'inize "döndürme" sınıfını verin ve CSS'nize aşağıdaki satırları ekleyin:
Döndürme: üzerine gelin (-webkit-dönüşüm: döndürmeZ (-30 derece); -ms-dönüşüm: döndürmeZ (-30 derece); dönüştürme: döndürmeZ (-30 derece);)
5. Kareyi daireye çevirmek
Şimdi kare bir öğeyi yuvarlak bir öğeye dönüştürmenin etkisi ve tam tersi çok popüler. CSS ile bunu başarmak kolaydır, biz sadece border-radius özelliğini değiştiriyoruz. Sadece border-radius özelliğini kullanacağız.
Div'inize "daire" sınıfı verin ve bu satırları stil sayfalarınıza ekleyin:
Daire: üzerine gelin (sınır yarıçapı: %50;)
6. 3D gölge
3D gölgeler yaklaşık bir yıl boyunca hoş karşılanmadı çünkü onlar düz tasarıma uymadılar, ki bu elbette saçmalık, fevkalade iyi çalışıyorlar ve kullanıcıya hem düz tasarım hem de sahte 3D arayüz ile etkileşim duygusu veriyorlar. .
Bu efekt, bir gölge dikdörtgeni eklenerek ve daha sonra, öğe ekranın dışına çıkıyormuş gibi görünecek şekilde transform ve translate özelliğini değiştirerek öğeyi x ekseni üzerinde hareket ettirerek elde edilir.
Div'inize "üç boyutlu" sınıfını verin ve ardından aşağıdaki kodu CSS'nize ekleyin:
Üçlü: vurgulu (kutu gölgesi: 1px 1px # 53a7ea, 2px 2px # 53a7ea, 3px 3px # 53a7ea; -webkit-transform: translateX (-3px); transform: translateX (-3px);)
7. salıncak
Tüm öğeler geçiş özelliğini kullanmaz. @keyframes, animasyon ve animasyon yineleme kullanarak çok karmaşık animasyonlar da oluşturabiliriz.
Bu durumda, öncelikle CSS animasyonlarını stillerde tanımlayacağız. Uygulama sorunları nedeniyle @ -webkit-keyframes ve @keyframes kullanmamız gerektiğini fark edeceksiniz (evet, Internet Explorer bu konuda en azından Chrome'dan gerçekten daha iyidir).
@ -webkit-ana kareler salınımı (%15 (-webkit-transform: translateX (5px); transform: translateX (5px);) %30 (-webkit-transform: translateX (-5px); transform: translateX (-5px); ) %50 (-webkit-transform: translateX (3px); transform: translateX (3px);) %65 (-webkit-transform: translateX (-3px); transform: translateX (-3px);) %80 (-webkit -transform: translateX (2px); transform: translateX (2px);) %100 (-webkit-transform: translateX (0); transform: translateX (0);)) @keyframes swing (%15 (-webkit-transform: translateX (5px); transform: translateX (5px);) %30 (-webkit-transform: translateX (-5px); transform: translateX (-5px);) %50 (-webkit-transform: translateX (3px); dönüştürmek : translateX (3px);) %65 (-webkit-transform: translateX (-3px); transform: translateX (-3px);) %80 (-webkit-transform: translateX (2px); transform: translateX (2px); ) %100 (-webkit-transform: translateX (0); transform: translateX (0);))
8. Kenarlık ekle
Şu anda en popüler düğme stillerinden biri hayalet düğme; arka plan ve kalın kenarlık içermeyen düğme. Tabii ki, elemana sadece bir kenarlık ekleyebiliriz, ancak bu, elemanın konumunu değiştirecektir. Bunu kutu boyutlandırma ile çözebiliriz, ancak çok daha basit bir çözüm, bir alt gölge ekleyerek kenarlığa gitmektir.
Durumunuza bir "border" sınıfı verin ve stilleriniz için aşağıdaki CSS'yi ekleyin:
Kenarlık: üzerine gelin (kutu-gölge: iç metin 0 0 0 25px # 53a7ea;)
Bilmek istiyor musun, ? veya ? Hepsi ve daha fazlası sitede. E-posta bültenimize (sayfanın alt kısmında) abone olun veya yeni makalelerden ilk siz haberdar olun! Ayrıca bize katılın
Bu derste, CSS ile çalışmaya devam ediyoruz, bir görüntü üzerinde solma ile düzgün bir şekilde döndüğü ve arka planda bir kontur ve metin başlıkları göründüğü güzel bir vurgulu efekti uyguluyoruz.
Dönüşüm bloklarının tel çerçevesini açıklayan CSS efekti
Hazırlanan şablonu indirin, iki dosya içerir, CSS'nin bağlı olduğu Dizin. CSS'de dolguyu sıfırladık, yazı tipini ayarladık ve arka plana bir resim ekledik. / img klasörünün kendisi, örnekler için bir arka plan ve bir resim olmak üzere iki dosya içerir.
Sayfada görüntülenmesi gereken tüm blokları anlatıyoruz ve bunları metin içeriği ile dolduruyoruz.
Div.dws> div.blocImg> img + div.blocText> div.text> h2 + p geçiş 
CSS üzerine gelme efekti
dönüştürme ölçeği (x, y)
: üzerine gelin :: önce :: sonra
Ana görüntü stillerini / efektlerini css'de tanımlama
Resimli bloğu sabit bir genişliğe ve yüksekliğe ayarladık ve taşma yardımı ile: gizli, dışındaki tüm gereksizleri gizleyin, bir imleç ekleyin.
BlocImg (genişlik: 600 piksel; yükseklik: 338 piksel; taşma: gizli; imleç: işaretçi;)
Kolaylık sağlamak için bloğu ekranın ortasına yerleştiriyoruz.
Dws (konum: mutlak; üst: %50; sol: %50; dönüştürme: çevir (-50%, -%50);)
Daha sonra resmi %100 geniş hale getiriyoruz ve yarım saniyede düzgün bir animasyon asıyoruz.
BlocImg img (genişlik: %100; geçiş: .5s;)
Bulanıklaştırma filtresini 1 tepe değerine ayarlayın. filter: blur (1px) ve arka planı koyulaştırın ve bunun için .blocImg sınıfına siyah bir arka plan ekliyoruz ve üzerine gelindiğinde görüntüyü yarı saydam opaklık yapıyoruz: .5; ...
Dws: üzerine gelin .blocImg img (dönüştürme: döndürme (-10 derece) ölçek (1.3); filtre: bulanıklaştırma (1 piksel); opaklık: .5;)
Şimdi metni şekillendirmeye başlayalım.
Bloğun metin içeriğini dekore etme
.blocText bloğunu mutlak ebeveyn olarak konumlandırıyoruz ve tüm kenarlardaki kenar boşluklarını 30 punto olarak ayarladık. Gelecekte, animasyonlu görünümünü çerçeve boyunca yapacağız.
BlocText (anahat: 1 piksel kesintisiz turuncu; konum: mutlak; üst: 30 piksel; sol: 30 piksel; sağ: 30 piksel; alt: 30 piksel;)
Metin için rengi beyaza ayarlayın, büyük harflerle ayarlayın, kenarlara dolgu yapın.
Metin (renk: #fff; metin dönüşümü: büyük harf; dolgu: 0 20 piksel;)
İkinci seviyenin başlığını 25 sivri olarak ayarlayın.
Metin h2 (yazı tipi boyutu: 25 piksel;)
İkinci kısmını turuncu yapıyoruz, çizgi için alttan girintileri ayarlıyoruz ve alt çizgiyi 2 tepede yapıyoruz.
Metin h2 yayılma alanı (renk: turuncu; dolgu-alt: 3 piksel; kenarlık-alt: 2 piksel düz #fff;)
Paragrafı kesinlikle konumlandırıyoruz, 180 tepe noktasına indiriyoruz. bloğunun genişliğini 250 piksele ayarlayın. Sol tarafa 4 tepe kenarlığı ekleyin. ve dolguyu ayarlayın.
Metin p (konum: mutlak; üst: 180 piksel; genişlik: 250 piksel; sol kenarlık: 4 piksel düz # ffb611; dolgu: 0 10 piksel;)
:: öncesi ve :: sonrası sözde öğelerin açıklanması
Daha önce .blocText sınıfına atanmış olan anahattı kaldıralım ve onu sözde elemanlar için ayarlayalım.
Sözde öğeler oluşturun :: önce :: sonra, ana stillerini tanımlayın.
Bunları mutlak olarak konumlandırıyoruz, genişlik ve yüksekliği %100 ve ücretli görünümü yarım saniyede ayarlıyoruz.
BlocText :: önce, .blocText :: after (içerik: ""; konum: mutlak; üst: 0; sol: 0; genişlik: %100; yükseklik: %100;)
Ayrı ayrı, :: önce kenarlığı üstten ve alttan 1 tepeye atamadan önce. ve X ekseni dönüşümü için dönüşümü ayarlayın: ölçek (0,1).
BlocText :: önce (kenarlık-üst: 1 piksel katı #fff; kenarlık-alt: 1 piksel katı #fff; dönüşüm: ölçek (0,1);)
Aynısını :: için yapıyoruz, sonra sadece kenarlık artık sol ve sağ tarafta ve Y ekseni boyunca dönüşüm
BlocText :: sonra (sınır-sol: 1 piksel düz #fff; sağ kenar: 1 piksel düz #fff; dönüşüm: ölçek (1,0);)
Ve görünümleri için, 1'deki tüm eksenlerin dönüşümünü gösteriyoruz.
Dws: üzerine gelin .blocText :: önce, .dws: üzerine gelin .blocText :: sonra (dönüştürme: ölçek (1,1);)
Geriye metni gizlemek kalıyor, bunun için .text sınıfını opacity: 0 olarak ayarlıyoruz ve pürüzsüz görünümünü ekliyoruz.
Ve üzerine gelindiğinde metin görüntülenir.
Dws: .text üzerine gelin (opaklık: 1;)
Sonunda, resmin üzerine gelindiğinde harika Hover Efektleri elde ettik.
Videoyu kim merak ettiyse, sosyal ağlarda arkadaşlarınızla paylaşın ve aynı zamanda yorum yapmayı unutmayın.
Ders Denis Gorelov tarafından hazırlandı.
Öncelikle konuya pek hakim olmayanlar veya konuya hiç girmeyenler için kısaca ne olduğunu anlatacağım. Bunlar, fare imleciyle üzerlerine geldiğinizde bir web sitesinin öğelerine uygulanan çeşitli efekt türleridir (açılır başlıklar, araç ipuçları, yumuşak geçişler, dönüştürme, döndürme, yakınlaştırma, kaydırma vb.). Bu efektler, çeşitli jQuery eklentileri veya saf kullanılarak uygulanabilir.
Bugün, javascript kitaplıklarını bağlamadan CSS3 kullanılarak oluşturulan görüntüler için geniş bir orijinal vurgulu efekt koleksiyonu hazırladım. Saf CSS3'te vurgulu efektleri uygulamanın avantajları ve dezavantajları hakkında konuşmayacağım, bu başka bir konudur, sadece örneklere bakın ve gerekirse sitenizde beğendiğinizi kullanın. İncelemede sunulan tüm efektler, bir demo örneği ve kaynaklarla birlikte ayrıntılı belgelerle sağlanır. Kılavuzlar çoğunlukla burjuva dilindedir, ancak her şey az çok sezgiseldir.
Tüm bu örneklerin yalnızca CSS3 özelliklerini destekleyen modern tarayıcılarda düzgün çalışacağına dikkatinizi çekmek istiyorum.
Genel resmi bozmamak için makine çevirisi ile efektlerin isimlerini bozmadı (bazıları hariç), oyunların orijinallerini geliştiricinin dediği gibi bıraktı.
Tasarımda ve tipografide ince çizgiler kullanan küçük resimler için çok ilginç bir fareyle üzerine gelme efekti. Resimler için altyazıların görünümü, yumuşak ve müdahaleci olmayan 3B dönüşümler ve sözde öğelerin yumuşak geçişleri için birkaç farklı efekt türü. Yalnızca modern tarayıcılarda çalışır.
iHover, Bootstrap 3 desteğine sahip, saf CSS3 vurgulu efektlerinin etkileyici bir koleksiyonudur.Scss CSS (dosya) ile oluşturulmuştur, değişkenlerle kolayca değiştirilebilir. Kod modülerdir, tüm dosyayı eklemeye gerek yoktur. Tek pakette 30'dan fazla farklı efekt. Her şey oldukça iyi belgelenmiştir ve etkilerin kullanımı çok kolaydır. Tek yapmanız gereken HTML işaretlemesini doğru bir şekilde hizalamak ve CSS dosyasını çalıştırmak.
Resim yazıları için bazı basit ama şık vurgulu efektler oluşturur. Buradaki fikir, küçük resimlerin üzerine gelindiğinde başlık, yazar adı ve bağlantı düğmesinin çarpıcı biçimde görünmesini sağlamaktır. Bazı efektler için görsel 3D dönüşümler kullanılır.
Herhangi bir özel zil ve ıslık olmadan çok basit bir geçiş efekti, bir çerçeve içinde tamamen yuvarlak bir görüntü, üzerine gelindiğinde odağı değiştirerek dönüşür ve bu kadar.
CSS3 küçük resimleri için fareyle üzerine gelme efektleri
Geliştirici, küçük resimler için ek açıklamalar (alt yazılar) göründüğünde, çalışmasını geçiş efektlerine sahip bir resim galerisi örneği olarak konumlandırır. IE 9+ dahil olmak üzere modern tarayıcılar için güçlü destek ilan edildi. Tabii ki tam teşekküllü bir galeri demek zor, ancak imzaların ortaya çıkmasındaki etkisi oldukça ilginç.
Kesinlikle dairesel küçük resimlerin üzerinde gezinirken etkileyici dönüştürme efektleri oluşturmak için başka bir CSS kuralları seti. Paket, 7 çeşit CSS3 geçişi, kurulum ve kullanım hakkında çok ayrıntılı belgeler içerir. Efektler tüm modern tarayıcılar tarafından desteklenir.
Fareyle üzerine gelindiğinde küçük resimleri döndürme
Fare imleci ile üzerlerine geldiğinizde yuvarlak küçük resimleri döndürmenin basit etkisi, blogumda, ana sayfadaki yayınların duyurularında görebileceğinizle hemen hemen aynıdır. Birkaç satır css kodunda uygulanır.
Kelimenin tam anlamıyla tercüme edilirse: "Üzerine geldiğinizde cinsel etki." Tabii ki, şiddetli bir hayal gücünüz yoksa, bu efektte çok seksi bir şey fark etmeyeceksiniz, ancak efekt kendi yolunda ilginç ve dikkat etmeye değer.
Görüntüler için beş farklı vurgulu efekt. Üç varyasyonda açılır başlıklar, yatay hareketle şeffaflık ve dönüş derecesini değiştirme şeklinde perdeler.
Resim yazıları için özel olarak CSS3 kullanılarak uygulanan 4 çeşit animasyon efekti. Farklı solma pozisyonları ve geçiş efektleri, oldukça standart performans. Animasyonun nasıl çalıştığını anlamak için demo sayfasının kaynak koduna bakın, ayrı bir belge bulamadım.
Çeşitli resim yazısı görünümleri, döndürme, solma, patlama ve daha fazlasını içeren galeri çizgili küçük resimler. Kullanma ve yapılandırma ile ilgili belgeler oldukça yetersizdir, ancak gerçekten istiyorsanız, çözebilirsiniz.
Bu efekt, animasyon öğelerinin eklenmesi dışında, fareyle üzerine gelindiğinde görüntülerin parlaklığında banal bir değişiklik olan özel bir şeyi temsil etmez. Demonun kaynak kodunu genişleterek uygulamanın ayrıntılarını kendiniz bulmanız gerekecek.
Görüntüler için başka bir 10 vurgulu efekt seti, vurgulu, yakınlaştırma, döndürme, döndürme, solma vb.
Çerçeveyi resimlerin etrafında canlandırmak için çeşitli efektler, oldukça çekici görünüyor, nasıl kurulacağına ve kullanılacağına dair ayrıntılı bir kılavuz var.
Fareyle üzerine gelindiğinde küçük resim başlıklarını etkin bir şekilde görüntülemek için uygulanan orijinal CSS3 vurgulu efektleri. CSS kural seti, farklı görseller için ayrı ayrı kullanabileceğiniz 10 farklı efekt içerir. Efektler gerçekten etkileyici, özellikle de her şeyin CSS3 ile yapıldığını anladığınızda. Ayrıntılı bir kılavuz neyin ne olduğunu anlamanıza yardımcı olacaktır.
Buradaki fikir, bir tür yazı için arka plan şekli olan ve fareyle üzerine gelindiğinde başka bir şekle dönüşen bir SVG oluşturmaktır. Böylece birçok farklı seçenek yapabilirsiniz, örnekte üç tip geçiş efekti gösterilmiştir. SVG kullanmanın güzel yanı, formu ana kapsayıcıya uyacak şekilde yeniden boyutlandırabilmemizdir.
kayan görüntüler
Bu efektin özü, imzanın görünmesi için görüntünün yukarı ve aşağı hareket etmesidir. Stil parametreleriyle çalışırsanız, oldukça güzel efektler elde edebileceğinizi düşünüyorum, ancak varsayılan olarak her şey çok basit görünüyor.
Bu efektle, her şey basittir, resimlerin açıklamaları sağ üstte veya sol altta kayar, yarı saydam koyu arka plana sahip bir şerit şeklinde, css özelliklerini kullanarak her şeyi yeniden düzenlemek çok basittir.
İlginç bir çözüm, minyatürler karanlık bir biçimde sunulur, üzerlerine geldiğinizde görüntüler belirir ve imza açık bir arka planda açılır.
Köşeden bir resim yazısı çıkar ve resmin tüm alanı boyunca çapraz olarak genişler.
Küçük resim resimleri için açılır resim yazıları uygulamak için bazı daha ilginç çözümler. Çevrimiçi düzenleyicide parametreleri deneyebilir ve daha etkileyici sonuçlar elde edebilirsiniz.
Küçük resimlerin üzerine gelindiğinde bir dizi güzel efekt, çeşitli görünüm türleri ve resimler için resim yazısı tasarımı. Hafifçe koyulaştırılmış bir arka planın aksine ince çizgiler, okunması kolay bilgi blokları oluşturur.
Tuhaf şekiller ve yakınlaştırma efekti, altyazıların küçük resimlere animasyon efektiyle birleştirildi.
Farklı görünüm varyasyonlarında görüntülerin küçük resimleri üzerinde simgelerin üst üste bindirilmesinin harika etkileri. Örnek, border-radius kullanılarak bir daire içinde özetlenen (+) sembolünü kullanır: CSS'de, açılır paneli daha bilgilendirici hale getirmek için yazı tipi simgelerini de kullanabilirsiniz.
Yalnızca CSS3 ve HTML5 kullanarak görüntülere hacimsel resim yazıları çıktısı almak için görsel bir slayt efekti oluşturma örneği.
6 Resim başlıkları
6 CSS3 kullanılarak fareyle üzerine gelindiğinde görüntüler için açılır resim yazılarının görünümü için seçenekler. Uygulama ve yapılandırma hakkında ayrıntılı ders, indirilebilir kaynaklar.
Ve son olarak, tabiri caizse, CSS3 kullanarak bir küçük resim için açılır bir resim yazısı oluşturmanın en basit yolundan bahsetmeden geçemeyeceğim.
SendPulse hizmeti, bir abonelik tabanı oluşturmak ve sitenize gelen rastgele ziyaretçileri normal ziyaretçilere dönüştürmek için bir pazarlama aracıdır. SendPulse, müşterileri çekmek ve elde tutmak için en önemli işlevleri tek bir platformda bir araya getiriyor:
● e-posta bültenleri,
● web push,
● SMS postalama,
● SMTP,
● Viber'da mesajlaşma,
● facebook messenger'a mesaj gönderme.
Bülten e-postası
Ücretsiz olanlar da dahil olmak üzere e-posta bültenleri yürütmek için çeşitli tarifeler kullanabilirsiniz. Ücretsiz tarifenin sınırlamaları vardır: abonelik tabanı 2500'den fazla değildir.Tamam, e-posta posta hizmetiyle çalışırken ilk olarak, kendi postanızı oluşturmakla başlayın. adres defteri... Bir başlık belirleyin ve e-posta adreslerinin bir listesini yükleyin.
SendPulse oluşturmayı kolaylaştırır abonelik formları açılır pencere olarak, satır içi formlar, kayan ve ekranın belirli bir bölümüne sabitlenir. Abonelik formları yardımıyla sıfırdan bir abone tabanı toplayacak veya üssünüze yeni adresler ekleyeceksiniz.
Form tasarımcısında, tam olarak ihtiyaçlarınızı en iyi şekilde karşılayan abonelik formunu oluşturabilirsiniz ve hizmet ipuçları bu görevle başa çıkmanıza yardımcı olacaktır. Mevcut hazır formlardan birini kullanmak da mümkündür.
Abonelik formları oluşturulurken kurumsal domain ile e-posta kullanılması zorunludur. Nasıl olduğunu okuyun.
Mesaj şablonları abonelere mektuplarınızı güzel bir şekilde tasarlamanıza yardımcı olacaktır. Özel bir kurucuda kendi mektup şablonunuzu oluşturabilirsiniz.
otomatik raporlar... İçerik yöneticileri otomatik postalamayı aktif olarak kullanır. Bu, müşteri hizmetleri sürecini otomatikleştirmeye yardımcı olur. Otomatik besleme oluşturmanın birkaç yolu vardır:
● Ardışık harf dizisi... Bu, koşullar ne olursa olsun, alıcılara belirli bir sırayla gönderilecek birkaç mektup yazıldığında en basit seçenektir. Kendi seçenekleriniz olabilir - mesaj dizisi(basit mesaj dizisi), özel tarih(harfler belirli tarihlere göre zamanlanır), tetik mektubu- mektup, abonenin eylemlerine bağlı olarak gönderilir (mesaj açma vb.).
● Otomasyon360- belirli filtreler ve koşullarla ve ayrıca dönüşümleri hesaba katarak postalama.
● Hazır zincirlerşablona göre. Belirli bir şablona göre bir dizi harf oluşturabilir veya şablonu değiştirebilir ve ihtiyaçlarınıza göre ayarlayabilirsiniz.
A / B testi bir dizi mektup göndermek için farklı seçenekleri denemenize ve açıklıklar veya geçişler için en iyi seçeneği belirlemenize yardımcı olacaktır.
Push Bildirimleri Gönderme
Push-mailing'ler bir tarayıcı penceresindeki bir aboneliktir, rss-aboneliklerinin bir çeşit yedeğidir. Web-push teknolojileri hızla hayatımıza girdi ve müşterileri çekmek ve elde tutmak için push-posta kullanmayan bir site bulmak zaten zor. İstek komut dosyası, manuel olarak mektup gönderebilir veya bir dizi mektup oluşturarak veya RSS'den veri toplayarak otomatik postalar oluşturabilirsiniz. İkinci seçenek, sitenizde yeni bir makale göründükten sonra abonelerinize kısa bir duyuru ile otomatik olarak bir bildirim gönderileceği anlamına gelir.
Gönder'den YeniNabız- artık reklamları yerleştirerek push bildirimleri ile sitenizden para kazanabilirsiniz. 10 $ 'a ulaştıktan sonra, ödeme sistemlerinden birine her Pazartesi ödeme yapılır - Visa / mastercard, PayPal veya Webmoney.
Servisteki push mesajları tamamen ücretsizdir. Ödeme, SendPulse hizmetinden bahsetmeden yalnızca Beyaz Etiket - postaları için alınır, ancak hizmet logosu sizi rahatsız etmiyorsa, push bildirimlerini kısıtlama olmadan ücretsiz olarak kullanabilirsiniz.
SMTP
SMTP işlevi, beyaz listeye alınmış IP adreslerini kullanarak postalarınızı kara listeye alınmaktan korur. SendPulse postalarında kullanılan DKIM ve SPF kriptografik imza teknolojileri, gönderilen e-postaların güvenilirliğini artırarak, e-postalarınızın spam veya kara listeye alınma olasılığını azaltır.Facebook Messenger Botları
Facebook sohbet robotu beta testinde. Sayfanıza bağlayabilir ve abonelere mesaj gönderebilirsiniz.SMS gönderme
SendPulse hizmeti, telefon numaralarına göre posta göndermeyi kolaylaştırır. İlk olarak, telefon numaralarının bir listesini içeren bir adres defteri oluşturmanız gerekir. Bunu yapmak için "Adres Defteri" bölümünü seçin, yeni bir adres defteri oluşturun, telefon numaralarını yükleyin. Artık bu veritabanı için bir SMS posta listesi oluşturabilirsiniz. SMS mesajlaşma fiyatı, alıcının telekom operatörlerine bağlı olarak değişir ve gönderilen 1 SMS için ortalama olarak 1,26 ruble ile 2,55 ruble arasındadır.Ortaklık Programı
SendPulse, tarife için ödeme yapan bağlantınızı kullanan kayıtlı bir kullanıcının size 4000 ruble getireceği bir ortaklık programı uygular. Davet edilen kullanıcı, hizmeti kullanmanın ilk 5 ayı için 4000 ruble indirim alır.Efekti beğendiyseniz, bitmiş kodu kopyalayıp kullanabilirsiniz!
Web sitenize hayat verin!
Çeşitli vurgulu efektler sitenizin sayfalarına tazelik getirebilir. Önceden, herhangi bir efekt için javascript ile uğraşmak zorundaydınız, ancak bugün, CSS3 teknolojisinin ortaya çıkmasından sonra, javascript kullanımı atlanarak her şey yapılabilir.
Bugünün örneklerinin tümü yeni modern tarayıcılar için uygulanmış ve optimize edilmiştir ve kesinlikle onlarda (örneğin Mozilla veya WebKit tarayıcılarında) çalışacaktır. IE'de çalışma konusunda sizi temin edemeyiz, ancak en son sürümlerde efektler kesinlikle beklendiği gibi çalışacaktır. Ancak tarayıcının hala efekti desteklememesi durumunda her efekt için çekici bir geri alma seçeneğinin hazırlandığını unutmayın.
01. Artış
Demo: Görüntülemek için
Bu etkinin uygulanması çok kolaydır ve çeşitli şekillerde yapılabilir. Her görüntüye bir kenar boşluğu parametresinin eklendiği ve ardından üzerine gelindiğinde bu parametrenin kaldırıldığı bir yöntem kullandık. Diyelim ki kenar boşluğu ayarı 15 pikselden başlıyor ve üzerine gelindiğinde 2 piksel oluyor, bu da görüntünün zıplıyormuş gibi görünmesini sağlıyor. Bağlantılar yatay yerine dikey olsa bile bu efekti yalnızca metinle kullanabilirsiniz.
Buradaki geçiş, kendi takdirinize bağlı olarak ayarlanabilir ve efekt, herhangi bir geçiş olmadan da çekici olacaktır. Örneğin, efekte biraz lezzet katacağını düşündük, efekti biraz pürüzsüz hale getirdik.
CSS'yi Yükselt
Ör1 resim (
kenarlık: 5px düz #ccc;
yüzer: sol;
kenar boşluğu: 15 piksel;
-webkit-geçiş: kenar boşluğu 0,5 saniyelik kolay çıkış;
-moz-geçiş: kenar boşluğu 0,5 sn kolaylaşma;
-o-geçiş: marj 0,5 saniyelik hareket kolaylığı;
}
Ör1 img: üzerine gelin (
üst kenar boşluğu: 2 piksel;
}
02. İstifle ve Büyüt
Demo: Görüntülemek için
Bu efektin yazarı, görünüşe göre bir tür lav lambası efekti elde etmek istedi, çünkü fareyi bağlantı listesinin üzerine getirdiğinizde, her görüntü yavaşça genişler ve ardından orijinal boyutuna döner.
Buradaki uygulama için 400x133 piksel boyutunda görüntüler kullanıldı. Daha sonra CSS kullanılarak 300x100 piksele yeniden boyutlandırıldılar ve üzerine gelindiğinde genişletildiler. Tüm liste örnekte ortalandığından, görüntülerin yeni boyutu tüm hizalamayı kırmıştır. Bu sorun, yakınlaştırılan görüntülerin genişliğinin yarısına negatif kenar boşlukları ayarlanarak çözülebilir.
Stack & Grow için CSS kodu
/ * Örnek 2 * /
#konteyner (
genişlik: 300 piksel;
kenar boşluğu: 0 otomatik;
}
# ex2 görsel (
yükseklik: 100 piksel;
genişlik: 300 piksel;
kenar boşluğu: 15 piksel 0;
-webkit-geçiş: tüm 1'lerin kolaylığı;
-moz-geçiş: tüm 1'lerin kolaylığı;
-o-geçiş: tüm 1'ler kolaylık;
}
# ex2 img: üzerine gelin (
yükseklik: 133 piksel;
genişlik: 400 piksel;
sol kenar boşluğu: -50 piksel;
}
03. Metni Soldur
Demo: Görüntülemek için
Burada yazar, imleci bir öğenin üzerine getirdiğinizde ve efekt diğerinde görüntülendiğinde javascript tipi bir olay gibi bir şey yaratmak istedi. Burada metin ve resim çekildi ve daha sonra sola hizalanmış ayrı bir div'e yerleştirildi. Ardından, div'e color: Transparent ve line-height: 0px parametreleri eklendi. Bu, metnin div'in en üstüne yerleştirilmesine ve onu tamamen gizlemesine izin verdi.
Metnin tekrar görünmesi için satırın rengini ve yüksekliğini değiştirmemiz yeterlidir. Resmin üzerine geldiğinizde, metin yeniden görünür. Çok komik ve kolay etki.
CSS'de Metni Soldur
# ex3 (
genişlik: 730 piksel;
yükseklik: 133 piksel;
satır yüksekliği: 0 piksel;
renk: şeffaf;
yazı tipi boyutu: 50 piksel;
yazı tipi ailesi: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
yazı tipi ağırlığı: 300;
metin dönüştürme: büyük harf;
}
# ex3: üzerine gelin (
satır yüksekliği: 133 piksel;
renk: # 575858;
}
# ex3 görsel (
yüzer: sol;
kenar boşluğu: 0 15 piksel;
}
04. Çarpık Fotoğraf
Demo: Görüntülemek için
Bu efekt çok basittir, ancak bir küçük resim galerisi için harika çalışır. İlk olarak, bir görüntü ızgarası oluşturmanız ve ardından üzerlerine geldiğinizde görüntüleri döndürmeniz gerekir, bu da çekici bir etki yaratır.
Burada kullanılacak birçok yeni CSS değeri var, bu nedenle eski tarayıcılar için geri alma seçeneği de dikkate alınmaya değer. Galerimizde geçişler, dönüşümler ve blok gölgeler yine sizin isteğinize göre kullanılacaktır. Dönüşüm, görüntünün döndürülmesinden sorumlu olacak ve geçişler yumuşak ve pürüzsüz etkiden sorumlu olacaktır.
Burası, sözde seçicileri uygulayabileceğiniz yerdir.
Eğri Fotoğraf CSS'si
# ex4 (
genişlik: 800 piksel;
kenar boşluğu: 0 otomatik;
}
# ex4 görsel (
kenar boşluğu: 20 piksel;
kenarlık: 5 piksel düz #eee;
-webkit-box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
kutu gölgesi: 4px 4px 4px rgba (0,0,0,0.2);
-webkit-geçişi: tüm 0,5 saniyelik kolaylık;
-moz-geçiş: tüm 0,5 saniyelik kolaylık;
-o-geçiş: tüm 0,5 saniyelik kolaylık;
}
# ex4 img: üzerine gelin (
-webkit-dönüşüm: döndür (-7 derece);
-moz-dönüşüm: döndür (-7 derece);
-o-dönüşüm: döndür (-7 derece);
}
05. Karartın ve Yansıtın
Demo: Görüntülemek için
Bu etkinin uygulanması biraz daha karmaşıktır, bu yüzden iyi bir etki elde etmek için biraz kurcalamamız gerekti. Standart görüntü konumu biraz şeffaftır. Ardından, resmin üzerine geldiğinizde şeffaflık seviyesi düşürülür ve resim orijinal görünümüne geri yüklenir ve ayrıca hafif bir parlama ve yansıma vardır (yalnızca WebKit ailesinin tarayıcıları için).
Ne yazık ki, yansıma gerçekten bir geçiş değildir, bu nedenle içeriğin geri kalanı ağır çekimde görünse bile hemen görünür.
Yansımalar için CSS hakkında kafanız karıştıysa, bununla ilgili daha fazla bilgiyi (David Walsh) bölümünden okuyabilirsiniz.
Soldur ve Efekt CSS'sini Yansıt
# ex5 (
genişlik: 700 piksel;
kenar boşluğu: 0 otomatik;
minimum yükseklik: 300 piksel;
}
# ex5 resim (
kenar boşluğu: 25 piksel;
opaklık: 0.8;
kenarlık: 10 piksel düz #eee;
/ * Geçiş * /
-webkit-geçiş: tüm 0,5 saniyelik kolaylık;
-moz-geçiş: tüm 0,5 saniyelik kolaylık;
-o-geçiş: tüm 0,5 saniyelik kolaylık;
/ * Refleks * /
-webkit-box-reflect: 0px'in altında -webkit-gradient (doğrusal, sol üst, sol alt, (şeffaf), renk durdurma (.7, saydam), (rgba (0,0,0,0.1))'e );
}
# ex5 img: üzerine gelin (
opaklık: 1;
/ * Refleks * /
-webkit-box-reflect: 0px'in altında -webkit-gradient (doğrusal, sol üst, sol alt, (şeffaf), renk durdurma (.7, saydam), (rgba (0,0,0,0.4)) );
/ * Parıltı * /
-webkit-box-shadow: 0px 0px 20px rgba (255.255.255,0.8);
-moz-box-shadow: 0px 0px 20px rgba (255.255.255,0.8);
kutu gölgesi: 0px 0px 20px rgba (255,255,255,0.8);
}
Çözüm
Bu 5 örnek, kendinize ait bir şey yaratmanız için size ilham vermek için yeterli olmalıdır. Her zaman hazır örneklerle deneyebileceğinizi ve sonra bize onlardan bahsedebileceğinizi unutmayın.
İnternette başka çekici efektlerle karşılaştıysanız, lütfen bize ve okuyucuların geri kalanına bundan bahsedin.