İçerik
- 01. Resimleri site renk şemalarıyla eşleştirin
- 02. Bir ızgaranın son satırında alanı eşit olarak paylaşın
- 03. Kutu gölgeli parçacık animasyonları oluşturun
- 04. Çokyüzlüleri dönüşümlerle canlandırın
- 05. Konumlandırma için master 'calc ()'
- 06. "Kutu boyutlandırma" ile kutu modelini mantıklı hale getirin
- 07. CSS ile dikey olarak ortala
- 08. İlgili nesnelerin bir bankasını hedefleyin
- 09. Kontrol hecelemesi
- 10. Yazma Modlarından yararlanın
- 11. Renk geçişlerini alışılmadık şekillerde kullanın
- 12. Bağlantılarda Dize Eşleştirme kullanın
- 13. FOUT'un sizin için çalışmasını sağlayın
- 14. Arka planlar için SVG'yi keşfedin
- 15. Kullanıcıları 3B geçişlerle odaklayın
- 16. CSS ve matematik ile dairesel menüler oluşturun
- 17. Bağlantıları fareyle üzerine gelindiğinde canlandırın
- 18. Basit ana kare animasyonları yapın
- 19. Gölgelerle yüzen 3B efektler oluşturun
- 20. ": target" kullanarak sayfayı eleMents'i güncelleyin
- 21. İnce animasyonlarla geri bildirim sağlayın
- 22. "Canlandırmaya" hazırlanın
- 23. İnsancıl girdi alanları
- 24. CSS animasyonlarını duraklatın ve oynatın
- 25. CSS değişkenleri kullanmayın
Herhangi bir teknolojinin bir noktasında, yapılabilecek hemen hemen her şeyin yapıldığı hissi vardır. Bir şey artık o kadar yeni ve parlak olmadığında, ilgi azalır ve bir sonraki büyük şeye dikkat çekilir. Bu, er ya da geç, onu sıradanlığa indirmeden önce, teknolojinin belirli bir yönü tarafından korkunç bir şekilde heyecanlanmaya eğilimli olan web endüstrisinde sık sık karşılaşılan bir durumdur.
CSS ilk ortaya çıktığında devrim niteliğindeydi ve zamanla tasarımcıların esnek, sıkı bir şekilde hazırlanmış ve güzel web sayfası düzenleri oluşturmasını sağlamak için gelişti. Yine de son zamanlarda, çeşitli çevrelerden CSS'nin yorgun olduğu ve belki de güneşteki zamanının gittiğine dair bir öneri geldi.
CSS dünyasında hala bolca heyecan ve hayat olduğunu göstermek istiyorum, bu henüz keşfetmemiş olabileceğiniz en son özelliklerde veya CSS'nin bir yönünü daha önce düşünmediğiniz bir şekilde kullanarak.
Sektörün en iyi CSS uzmanlarından bazılarının verdiği ipuçlarını burada bulabilirsiniz.
(Not: Bu özellikteki bazı teknikler son teknoloji ürünüdür ve tüm tarayıcılarda tam olarak desteklenmeyebilir. Herhangi bir çalışmayı canlı hale getirmeden önce baştan sona test edin ve yedeklerin yerinde olduğundan emin olun.)
01. Resimleri site renk şemalarıyla eşleştirin
Christopher Schmitt, konferans organizatörü
Konferansların kendi renk şemaları vardır ve birçok konuşmacı ile portreleri yönetmek için iş akışı karmaşık olabilir. Filtreleri manuel olarak uygulamak ölçeklemez ve örneğin belirli bir Photoshop eylemine erişiminizin olmasına dayanır. Şimdi yüksek çözünürlüklü gri tonlamalı PNG kullanıyorum ve CSS filtreleri kullanarak tonlar ekliyorum. Bu, herhangi bir portreyi bir etkinliğin şemasıyla eşleştirmeme ve ayrıca görüntüleri birden çok temada yeniden kullanmamı sağlıyor. Her biri için yeni bir CSS kuralına ihtiyacım var. Bir demo izleyin.
02. Bir ızgaranın son satırında alanı eşit olarak paylaşın
Stephen Hay, tasarımcı ve yazar
Bir ızgarada görüntülenecek bilinmeyen sayıda öğeniz varsa, son satırı eşit olarak bölmek için Flexbox'ı kullanabilirsiniz. Yani tek bir öğe varsa, tüm satırı kaplayacaktır; iki öğe varsa, satır ikiye bölünür ve bu böyle devam eder. Bir demo izleyin.
03. Kutu gölgeli parçacık animasyonları oluşturun
Ana Tudor, kodlayıcı ve matematik fanatiği
Karıştırarak kutu gölgesi Biraz matematik ve Sass ile 2D eğrilerin grafiğini çizebilir, 3D hareketi taklit edebilir ve herkesin kanvas için hata yapacağı çılgın parçacık animasyonları oluşturabilirsiniz! Bir demoyu ve başka bir tanesini görün.
04. Çokyüzlüleri dönüşümlerle canlandırın
Ana Tudor, kodlayıcı ve matematik fanatiği
Muhtemelen kenarlıklarla oluşturulmuş saf CSS poligonları görmüşsünüzdür, ancak dönüştürmek Emlak. İç içe yerleştirilmiş öğelerde dönüşümlerin zincirlenmesi ve uygulanması, görüntü arka planlarına veya kenarlıklarına ve şeffaf iç mekanlara sahip karmaşık çokgenler oluşturmamızı sağlar. 3B dönüştürmeleri kullanarak, bu 2B şekilleri çokyüzlüler halinde birleştirebilir ve katıların WebGL ile kolayca karıştırılacak şekilde birleştirilmesini, açılmasını, patlamasını veya yeniden birleştirilmesini sağlayabiliriz. Bir demo izleyin.
05. Konumlandırma için master 'calc ()'
Ana Tudor, kodlayıcı ve matematik fanatiği
Sevdim hesap () keşfettiğim andan itibaren. Kenar boşluklarını, dolguyu veya boyutları uydurmak için kullanışlıdır ve arka planları, degradelerin veya dönüştürmelerin içinde konumlandırmak veya boyutlandırmak için kullanıldığında bir cankurtaran olabilir ve yalnızca aynı eski birimlerle değil, aynı zamanda yeni ve havalı görüntü alanı olanlarla da birleştirilebilir.
06. "Kutu boyutlandırma" ile kutu modelini mantıklı hale getirin
Sawyer Hollenshead, Oak Studios geliştiricisi ve tasarımcısı
Kullanım kutu boyutlandırma akıl sağlığını kurtarmak için. Bu olmadan, tanımlanmış genişliği 250px ve 25px dolgulu bir öğe 300px genişliğinde birleşerek pikselleri ve yüzdeleri karıştırmayı zorlaştırır. İle kutu boyutlandırma:border-box Bunun yerine kenarlıklar ve dolgu, tanımlanan genişlik içinde yerleştirilir.
07. CSS ile dikey olarak ortala
Trent Walton, Paravel kurucusu
Tarihsel olarak, dikey olarak hizalanmasını istediğiniz bitişik metne sahip bir görüntünüz varsa, CSS ile bir şeyi dikey olarak ortalamak zordu. Ezmek ve küfür etmek yerine, hizalama sorunlarıyla başa çıkmak için Flexbox'ı kullanın. Bir demo izleyin.
08. İlgili nesnelerin bir bankasını hedefleyin
Jonathan Smiley, Zurb ortağı ve tasarım lideri
Her bir sınıfa ortak öznitelikler eklemek yerine, ilgili nesnelerin büyük bir bankasını hedeflemek için, sınıf adlarında yaklaşık öznitelik seçicileri kullanarak CSS çizgi kalınlığını tıraş edin. Örneğin ... [class * = "- block-grid-"] {} ... şunun benzerlerini hedefler: .small-block-grid-3 .large-block-grid-5
09. Kontrol hecelemesi
Savid Storey, açık web savunucusu
Tireleme basılı olarak kabul edilir ve bazı geliştiriciler tire mülk çevrimiçi, ancak çok azı daha iyi kontrol sağlayan diğer mülklerin farkındadır. Dikkatli değilseniz, tirelerin birden çok satırda kullanıldığı tireleme merdivenleri elde edersiniz. Genel bir kural, bir satırda ikiden fazla olmamaktır ve bunu kullanarak kontrol edebilirsiniz. tireli sınır çizgileri. Ayrıca, tire-limit-chars tirenin kesilmesinden önceki ve sonraki minimum karakter sayısıyla birlikte tirelenecek bir kelimenin minimum uzunluğunu belirlemenizi sağlar.
10. Yazma Modlarından yararlanın
David Storey, açık web savunucusu
Yazma modları, metnin aktığı yönü tanımlamanıza olanak tanır. Bazı Doğu Asya metinleri dikey olarak yazılır, satırlar sağdan sola büyür ve şununla belirtilir: yazma modu: dikey rl (tb-rl IE'de). Dikey metin, Avrupa yazı sistemlerinde gerçekten kullanılmaz, ancak sınırlı yatay alanınız olduğunda tablo başlıkları için kullanışlı olabilir.
11. Renk geçişlerini alışılmadık şekillerde kullanın
Ruth John, tasarımcı
Arka plan gradyanları, kenarlıklar ve madde işaretleriyle birlikte kullanıldığında harika görünebilir. Hem blogumda kullanıyorum hem de bir önişlemci ile yeniden kullanılan kodla bir mixin çağırabilir, böylece manuel olarak tekrar etmeyebilirim. Süper çılgınlık yapmayın çünkü gradyanlar işlemci açısından ağır olabilir. Liste madde işaretleri için SCSS mixin:
@mixin gradedBullet ($ renk) {arka plan resmi: doğrusal gradyan (sol, açıklaştır ($ renk,% 15) 10px, $ renk 11px, $ renk 20px, koyulaştır ($ renk,% 15) 21px, koyulaştır ($ renk ,% 15) 30 piksel, şeffaf 31 piksel); }
12. Bağlantılarda Dize Eşleştirme kullanın
Ruth John, tasarımcı
Blogumda, sosyal simgeleri biçimlendirmek için dize eşlemeli CSS öznitelik seçicileri kullandım. Bunlar blogum boyunca bazen metinle bazen de olmadan, ancak her zaman bir simge ile görünüyor. Doğru bağlantıyı doğru sosyal simgeyle biçimlendirmek için, href çapa öğesinin özelliği. kullanırım *= Böylece href çapa öğesinde yalnızca belirttiğim dizeyi içermesi gerekir.
/ * tüm sosyal bağlantılar için * / .social a: {display: inline-block; sağ dolgu: 30px; font-family: 'FontAwesome ’;} / * Her belirli bağlantı * / .social a [href * =" twitter "]: {content:" f099 "öncesinde; color: # 52ae9f;} .social a [href * = "github"]: {içerik: " f09b" öncesinde; color: # 5f2e44;} .social a [href * = "feed"]: {content: " f09e" öncesinde; renk: # b47742;}
13. FOUT'un sizin için çalışmasını sağlayın
Jason Pamental, H + W tasarım müdürü
Web, tarayıcı bling'i oluşturamasa bile içerik sunması gerektiği üzerine inşa edilmiştir. Yavaş yüklenen web yazı tipleri sinir bozucu olabilir, FOUT (Stilsiz Metin Flash) gezinme ve yazı tipleri indirilirken metin yeniden akıtma gibi rahatsız edici olabilir. Google ve Typekit bir cevap veriyor: web yazı tipi yükleyici. Yazı tiplerinin yükleme durumuna bağlı olarak bir sayfaya sınıflar enjekte ederek, yeniden akışı minimumda tutmak için bu sınıflarla yedeklerin stilini belirleyebilir ve ayrıca WebKit’in "görünmez içerik" sendromunu ortadan kaldırabilirsiniz. Bir demo izleyin.
14. Arka planlar için SVG'yi keşfedin
Emil Björklund, inUse web geliştiricisi
Şu anda SVG desteği olmayan tek tarayıcılar IE8 ve altı ve Android 2 WebKit'tir ve bu nedenle, özellikle Grunticon gibi bir PNG geri dönüş çözümü ile birlikte CSS'de arka planlar için SVG kullanmak mümkündür. SVG, CSS ile stilize edilebilir ve HTML'ye uygulandığı haliyle oynayabileceğimiz SVG'den CSS özelliklerinin (filtreler!) İlginç bir taşması vardır.
15. Kullanıcıları 3B geçişlerle odaklayın
Emil Björklund, inUse web geliştiricisi
3B dönüşümleri kullanma ve z boyutu kullanıcı arayüzlerinde, özellikle içeriği gizlemek / göstermek veya daraltmak / genişletmek için gerçekten yararlı olabilir. Bu durumlarda 2D geçişe geri dönüş yapmak veya hiç geçiş olmaması da oldukça kolaydır. Biraz ilerici bir iyileştirmenin uzun bir yol kat edebileceği bir alandır.
16. CSS ve matematik ile dairesel menüler oluşturun
Sara Soueidan, ön uç geliştiricisi
Dairesel menüler mobil uygulamalarda popülerdir ve basit bir dairesel menü oluşturmak için CSS dönüşümlerini ve geçişlerini kullanabilirsiniz. Bu menü, yukarı veya aşağı doğru açılan bir menü oluşturmak için değiştirilebilir ve özelleştirilebilir. CSS'de bir öğeyi çapraz olarak çevirmenin doğrudan bir yolu yoktur, ancak öğeleri konumlandırmak istediğiniz dairenin yarıçapının değerini kullanabilir ve yatay ve dikey çevirme değerlerini hesaplamak için basit bir matematik kuralı uygulayabilirsiniz. translateX () ve translateY () fonksiyonlar. Bu şekilde, bir diyagonal menü öğelerini daire üzerinde doğru konumlara taşımak için çevirme. Menüyü kapatan / açan tıklama olayı, JavaScript kullanılarak işlenebilir veya bunu bir adım öteye taşıyabilir ve bir CSS onay kutusu saldırısı kullanarak yalnızca CSS menüye sahip olabilirsiniz. Demomda, JavaScript ve tüm tarayıcılarda desteklenmeyen HTML5 classList API'sini kullanıyorum, bu nedenle demoyu çalışması için modern bir tarayıcıda görüntülemeniz veya classList API'sini kullanmak yerine jQuery kodunu yorumlamanız gerekecek kodu.
Bir demo ve tam eğitici görün. CSS Onay Kutusu hack örneği.
17. Bağlantıları fareyle üzerine gelindiğinde canlandırın
Paul Lloyd, The Guardian etkileşim tasarımcısı
Bir eylemin çalışması veya önemli bilgiler sağlaması için fareyle üzerine gelme durumlarına güvenilmemelidir, ancak yine de fare tabanlı kullanıcılar için arayüzleri geliştirebilirsiniz. 24ways.org'da, önceki / sonraki gezinme bölümündeki bağlantıların üzerine geldiğinizde makale başlıklarını açıklıyoruz. Bu, bir ::sonra bir değerinden kaynaklanan oluşturulmuş içeriği içeren sözde öğe veri- özniteliği, üzerine gelindiğinde görünüme kaydırılması için bir CSS geçişi uygulanmıştır. Bir demo izleyin.
18. Basit ana kare animasyonları yapın
Paul Lloyd, The Guardian etkileşim tasarımcısı
24ways.org'da özetlere fareyle üzerine gelindiğinde açılan hareketli köşe kanatları ekledik. Bu, @keyframes sprite tabanlı animasyon elde etmek için bir arka plan resminin konumunu değiştirerek, animasyon özelliği ile kural. İşin püf noktası, animasyon sprite'nizde sahip olduğunuz kare sayısını, adımlar () değer. Bir demo izleyin.
19. Gölgelerle yüzen 3B efektler oluşturun
Catherine Farman, Happy Cog geliştiricisi
Yakın zamanda yapılan bir proje, altında yuvarlak bir gölge olan yüzen bir ürün fotoğrafı gerektirdi ve bu, ekrandan çıkmanın 3B efekti yarattı. Gölge birkaç CSS3 özelliği kullanır: border-radius alfa şeffaflığı ve kutu gölgesi. Ürün ızgaraları, bir ana sayfa kahramanındaki vitrin görüntüleri veya skeuomorfik bir eğime sahip herhangi bir tuhaf tasarım için iyi çalışır. Bir demo izleyin.
20. ": target" kullanarak sayfayı eleMents'i güncelleyin
Simon Madine, HeRe kıdemli web geliştiricisi
CSS, her zamanki anlamıyla bir programlama dili değildir, ancak yine de JavaScript'e geri dönmeden akıllıca şeyler yapabilirsiniz. Örneğin, :hedef sözde sınıf, tıklanan bir bağlantının hedefi olan öğelere uygulanır.
Bunu bir sayfanın durumunu tanımlamak, çok sayıda öğe içeren bir ebeveyni hedeflemek için kullanabilirsiniz ve bağlantılarınız tek bir tıklama ile tüm alt öğelerin görünümünü ve düzenini kontrol etmenin bir yolu haline gelir. Bir demo izleyin.
21. İnce animasyonlarla geri bildirim sağlayın
Neil Renicker, tasarımcı ve geliştirici
CSS sözde öğeleri ::önce ve ::sonra CSS geçişlerinin yanı sıra, fare kullanıcılarına ince geri bildirim sağlayan keyifli animasyonu etkinleştirebilir. Örneğin, bir sözde öğe içinde bir CSS oku oluşturun, sözde öğeye bir geçiş uygulayın (geçiş: tüm kolay giriş .15s;) ve ardından basit bir düzen değişikliği ekleyin. : fareyle üzerine gelme sözde sınıf (düzeltme gibi kenar boşluğu). Bir demo izleyin.
22. "Canlandırmaya" hazırlanın
Paul Lewis, kodlayıcı ve Chrome geliştirici ilişkileri ekip üyesi
Kullandıysanız -webkit-dönüşümü: translateZ (0) sayfalarınızı sihirli bir şekilde hızlandırmak için, birçok tarayıcıda basitçe yeni bir birleştirme katmanı oluşturan hack, yerini canlandıracak. Yakında, tarayıcıya bir öğe hakkında neyi değiştirmeyi planladığınızı (konumu, boyutu, içeriği veya kaydırma konumu) söyleyebileceksiniz ve tarayıcı, başlık altında doğru optimizasyonu uygulayacaktır. Daha fazla bilgi.
23. İnsancıl girdi alanları
Yaron Schoen, Made For Humans kurucusu
Kullanıcıların etkileşimde bulunduğu öğelere hızlı animasyonlar eklemek, bir arayüzün daha az bilgisayar gibi görünmesini sağlar. Giriş alanları ile bir geçiş çağrısı içinde, böylece ona ne zaman odaklanırsanız veya odak dışı bırakırsanız, yumuşak bir geçiş olur.
girdi, metin alanı {-moz geçişi: tüm 0.2s hafifletme; -o-geçiş: tüm 0.2s hafifletme; -webkit geçişi: tüm 0.2s hafifletme; -ms-geçişi: tüm 0.2s hafifletme; geçiş: tüm 0.2 sn gevşetme;
24. CSS animasyonlarını duraklatın ve oynatın
Val Head, tasarımcı ve danışman
CSS animasyonunu değiştirerek "duraklatabilir" ve "oynatabilirsiniz". animasyon oynatma durumu Emlak. "Duraklatıldı" olarak ayarlamak, siz değiştirene kadar animasyonunuzu yerinde durdurur animasyon oynatma durumu -e koşma, örneğin fareyle üzerine gelindiğinde.
.animating_thing {animasyon: 10 sn doğrusal sonsuz döndürür; animasyon oynatma durumu: duraklatıldı; }. animating_thing: hover {animation-play-state: running; }
25. CSS değişkenleri kullanmayın
Dave Shea, tasarımcı ve yazar
Sonunda, örneğin bir rengin onaltılık değerini bir kez yazmak ve bir stil sayfası aracılığıyla ona referans vermek için CSS değişkenleri alıyoruz. Ancak resmi spesifikasyon ayrıntılıdır, sözdizimsel karmaşıklık ekler, yetersiz işlevsellik sunar ve çoğu tarayıcı tarafından büyük ölçüde desteklenmez. Sass'ın oldukça popüler olduğu ve özel işlevler ve if / else ifadeleri gibi güçlü programlama mantığına sahip değişkenlerin ötesine geçtiği bir çağda, resmi özellikler çok kısa sürüyor.
Umarım bu önemli ipuçları, CSS görüşünüzü ve web geliştirme ve tasarımda temsil ettiği olasılıkları yenilemiştir. Herhangi bir çalışmayı hayata geçirmeden önce tarayıcı desteğini kontrol etmek için bu tekniklerden herhangi birini iyice test etmeyi unutmayın.
Kelimeler: Craig Grannell İllüstrasyon: Mike Chipperfield
Bu makale ilk olarak net dergi 253 sayısında yayınlandı.
