27 AĞUSTOS 2014, ÇARŞAMBA

Css Deneyler #6 - Nabız Gibi Atan Düğmesi

Hey bu bugün çok şey var ki biz kalacağız göstermek size kuzey Bu deney için artık yeni CSS deneme oluşturmak yapmak için gittiğini gerçekten havalı titreşimli ama şimdi o ama olacak bu normal olacak olan edilmesi bulunuyor kare Ancak dikdörtgen görünümlü düğmesi üzerinde farenizi getirdiğinizde onun oğlan sorta neredeyse yetiştiriciliği büyür ve küçülür çevresinde anahat olmuştur ve check it out yani titreşen şu anda başlangıçta vardı ve olacak bazı yeni serin CSS Tricks ve özelliklerini öğrenmek konum bu yüzden sadece güneş No More düğmesi temel link bu örnek olan ne aslında olsa var bir konteyner

lanet var olduğunu Bu gerçekten sadece kullanılan ediliyor bu örnekte bir sürü yapmıyor Evin oturma ve biz de sararak bir div sınıfı var A Sınıfı sık sık çörekler için kullanan diğer BTN bu yüzden düğmesi ile bağlantı sararak

bir gün aşk var ve biz sınıf Aidid'in var bunun altında olduğunu BG aşk ve o hemen evet orada yaptım oluyor şimdi kapalı ilgisiz olduğunu ama çalışan bazı CSS teknikleri almak için bazen gereksiz olması

“İşte nasıl vurgulu bir darbeli anahat bir düğme oluşturmak için göstereceğim. Ekstra özellikler için Pro Up Düzeyine abone olun! http://leveluptuts.com/level-up-...”
LevelUpTuts

gerekir Bu sadece bir nedeni sorta kötü ama senin HTML% uh elemanları deney ve ya burada gerçekten harika bir şey onun yolunda yapım yani bu varsa en önde gidip böyle devam etmesine izin Eğer birlikte takip edebilirsiniz gibi HTML tamamen yapılandırılmış CSS ile şimdi en zaten var ne üzerinde gidelim Bizim CSS için biz sadece var CSS için çok Bu mor arka plan rengiyle bir gövde o zaman bir text-align var: sarma olan BTN sınıfı için merkez

Css Deneyler #6 - Nabız Gibi Atan Düğmesi Resim 1 Css Deneyler #6 - Nabız Gibi Atan Düğmesi Resim 2 Css Deneyler #6 - Nabız Gibi Atan Düğmesi Resim 3 Css Deneyler #6 - Nabız Gibi Atan Düğmesi Resim 4

sayesinde sevgili Elimizdeki diğer arka plan havada linke etrafında Sadece bir marj 30 piksel ve bir display:inline-blockmargin:0padding:0border:0width:27pxheight:27pxoverflow:hiddentext-indent:-9999pxbackground:urlhttp://x.myspacecdn.com/modules/common/static/img/playbuttonsprite.png piksel text-decoration: none rengi beyaz açık hide verilecek 100 piksel üzerinde 100 piksel hizalama kafa emin Texas emin olmak için merkezi hizalanmış ve hatta eğlenceli bir boyut makam ve döviz çiftlik tamamen ad

ildir uygun bir durum var Ben özellikle herhangi bir nedenle reklamları görüntülemek Sihirli Bu örnekte geliyor şimdi tamam hücre bu beeg ölüm yapacağız gerçekten ilginç bazı CSS özelliklerini kullanarak konum İlk kullanıcısının bu BG div vererek başlamak izin Mutlak bir pozisyon biz pozisyon göreceli olarak geleceğini söyledi hatırlıyorum kullanışlı Onun arka onun tüm içeriği dolduruyor olacak yaptım Alan diğer düğme ve biz bir konuma sahip böyledir: Mutlak ağırlığı olan konteyner yüzde 100 olacak yüksekliği yüzde 100 kabını olacak ve biz o üstünde başlar söylemek için gidiyoruz Latince 0 Bir üst vererek sol ve yanındaki biz San vermek istiyorum Çünkü anahat ve aline biz burada animasyon için gidiyoruz ne bu yüzden anahat ve anahat için biz bu olduğunu görmeye gidiyoruz söyleyebiliriz Işık anahat Onun Katı olacak ve iki piksel olacak şimdi görebiliyorum orada güvende olmak istiyorum Burada bu Aline var onun beyaz ve kalın nason onun şimdi ben de bu vereceğim Opaklık noktası 02 çünkü var eylem için bu tür bir güçlü beklemek bence % uh sınır burada öylece yüzden biz bu istiyoruz çok güçlü olacak biliyorum Biz bu olmak istiyorum bir nevi bize o olacak Kami toptan asla içine almak için gidiyoruz ilginç şeyler yani biz bir istiyorum sensin ne sonra bir animasyon oluşturmak ve bir vurgulu o animasyon tetiklemek ve biz animasyon ölçekleme olacak basitçe konum Bu .vg beri animasyon şimdi Girit önde gitti ve biz sadece söyleyebiliriz, bu I verebilir O beyinleri de ve daha sonra bir ay aramalar bizim animasyon vermek ve çocuklar burada kutlamak başında yani animasyon yüzde 80 var o parantez söylemek için gittiğini söyledi trance çiftlik ve biz bu ölçek için gidiyoruz Bir virgül 1 şimdi ne bunun anlamı olduğunu edeceğiz Animasyonu bu kadar başlayan at tüm arka plan burada var bu sınır lanet tam olarak olacak yüzde 100 ölçekli olacak Ne normalde tamam 121 olduğunu Şimdi biz nokta bir bu bir donukluk vermek için gidiyoruz bu da, ilk bir pasady olduğu için şimdi burada ve Saft ve uzaktan gelen aşk Animasyon o zincirler olacak dönüşümü ve ölçek bu kullanmak için gidiyoruz ve diğer numaralar burada 1.1 olacak kullanın ve 1,3 ortak 5 Şimdi bu sadece o tür vermek ve hatta ölçekleme için gidiyor bak X & Y erişim Bu bir dikdörtgen olduğundan ve biz her tarafta bazı üzgün, hatta boşluk istiyoruz biz biraz bu sayılarla oynayabilirsiniz ve en bu başka verelim tam şimdi ne olacak bakın 05 işaret cassidy falan Çünkü iki tarafın sadece biz Sir istediği bir ölçek şey olmak söyleyerek kaplıca olmak Bir geçiş kadar yeme şimdi eğlenmek için hemen önünüzde gidelim ve are burada yaptığı bu animasyon cad bu yüzden animasyon diyebiliriz Animasyon onun çağrılarını kullanarak gidiyoruz olacak o tekrarlamak için gidiyor, üç saniye alarak olduğunu ve kurşun tamam sonsuz ve biz demek o olacak yani alternatif söylemek için gidiyoruz tüm gitmek orada benden sonra Kaydet'i tıklatın ve ben bir noktalı virgül Fisher gerek hiçbir şey yapmadan biz bu düğmeyi orada olduğu gibi ve şimdi bilinen O büyüyor anahat ve o var neredeyse gibi Bir bunu sadece m hey dediğini bilmiyor onun Bir neredeyse bir şey hakkının bir üreme tür gibi darbe Biz bunu değiştirmek için olsaydı bu yüzden bu rakamlar gelmek içinde olduğunu görebilirsiniz gibi bir şey yüzde 100 ölçek için için bunu almak için gidiyor görebilirsiniz Neredeyse gülünç geniş daha geniş biz bir noktada bu vardı çünkü 135 yılında biri bile animasyon ben bile nerede var merak ediyorsanız ve eğer güzel olacak Bu numaralar arasından Gerçekten ben onlar düşündüm kadar ben bunu verdiği tuttu sadece bir deneme yanılma var mükemmel görünüyordu tamam bu yüzden şimdi diyerek bu anket en go ahead ve bu animasyonu kaldırmak izin PGDM ve ona olan mesafede onun kalbi bu yüzden BTN diyelim kez ve daha sonra liman nokta aramak BG efendim şimdi bir kez biz topuz üzerinde gezdirin Bu animasyon gerçekleşmesi gidiyoruz sadece böyle biz bu güzel politika bilgiye sahip Şimdi biz de bir geçiş ve bu diğer arka plan ekleyebilirsiniz DTN india: bu yüzden arka normalde mor aynı olduğunu söyleyebiliriz renk ve biz bu geçiş vermek için gidiyoruz Bir arka plan 0.3 saniye içinde o ve ben Tamam ve şimdi yapmamız gereken nereye gittiğimizi yukarıdaki hover olduğumu söylüyorlar BTN elemanı biz farklı bir renk öylece değişiklik bu konum ve şimdi bu önemli değil mutlaka bir şey gerçekten ama sadece gidiyor sana Biraz daha iyi bir görünüm iyileştirmek bunu değiştirmek de böylece zaman şimdi bir geçmiş başka bir renk vermek bu olduğunu Seni hangi bu turkuaz rengi çelik vardı düzeyini seçin şimdi biz bu üzerinde gezdirin ve size ah anahat% görebilir ama normalde ve nerede şimdi biz güzel bu var Bizim düğme etrafında etkileyecek titreşimli bu yüzden bu benim en sevdiğim etkiler ben bir web sitesinde gördüm ise oldukça serin nasıl yaptıklarını sadece anlamaya vardı yani bu bir topuz bu darbeli hover efekti oluşturmak nasıl Gerçekten serin etkisi 11 Zoe için çok aşk ted en keşfetmek Herhangi bir sorunuz varsa veya yorum bir yolla aşağıdaki videoyu yazarsanız onun yukarı doğru Twitter'da Facebook ve düzeyi hakkında Chuck Teds nokta com seviyede olduğunu biliyoruz ve diğer seviyesini kontrol Pro dokundu seviyesi up abonelik hizmeti hangi böylece videoları indirebilirsiniz aşk pro için kod örneklerini olabilir CSS deneyler ve hatta geri katalog yapıyor sırasında gidiyoruz emin olmak için bu kod örnekler var özel form bir reklam yapabilirsiniz var ücretsiz deneyim ve seviye yukarı acecomm dokundu diyor benzer bir iki saatlik diyor ustalık kursu bile var Ben var videoları dokunmatik seviyorum ama hiçbir dokunma artı pazarı için özel yapıldı Artık şimdi bir parçası olarak size getirmek mümkün değilim bu yüzden var seviye yukarı Pro paket öylesine kaydolmak 8,99 $ bir ay veya doksan beş dolar bir yıl ve sadece dışarı yardım desteği seviye yukarı lanse seviyesini yanlısı bir kontrol izliyor ve biz sonraki biri görürsünüz için teşekkürler.

Açıklama

İşte nasıl vurgulu bir darbeli anahat bir düğme oluşturmak için göstereceğim. Ekstra özellikler için Pro Up Düzeyine abone olun! http://leveluptuts.com/level-up-pro Level Up Haber Bülteni Abone http://eepurl.com/AWjGz Sorularınız için yorumlar veya ziyaret sonrası: http://leveluptuts.com/forum Level Up Tuts Destek: http://leveluptuts.com/donations

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

LevelUpTuts

LevelUpTuts

Ön uç web geliştiricileri için Öğreticiler. Level Up Tuts web geliştirme ve diğer medya uygulamaları ücretsiz öğreticiler sağlamanın bir yolu olarak Scott Tolinski ve Ben Schaaf tarafından başlatıldı. Biz bir medya yaratıcısı olarak büyüme bizim bilgi yararlı bulacağını umuyorum. Biz tam zamanlı (ve freelance) geliştiriciler Çünkü, Level Up Tuts sana getirmek için biz çalışıyoruz, bir yandan projesidir. Eğer öğrendiklerini hoşlanıyorsanız bu yüzden yeni dersler yapmaya devam edebilirsiniz bağış yapmak için çekinmeyin. Level Up Tuts bu hızlı anketi doldurarak geliştirmemize yardımcı olun https://docs.google.com/forms/d/1x7MTNp_umnvdkwJ5dfOVnnJtndkYdU7EDoCE9r8bYBk/viewform

YORUMLAR



10/10

  • 89
    Olumlu
  • 0
    Olumsuz
  • 14
    Yorum
  • 5352
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Darren Kitchen

    Darren Kitch

    3 EKİM 2011
  • Microsoft Help & Training Videos

    Microsoft He

    31 Mart 2009
  • videoisunrelated

    videoisunrel

    5 Mart 2009

ANKET



Bu sayfa işinize yaradı mı?