Bir stil sayfası örneği verelim - bir dosya oluşturun stil.css ve stilleri ekleyin:

gövde (yazı tipi ailesi: Arial, Verdana, Sans-serif; / * Yazı tipi ailesi * / yazı tipi boyutu: 12pt; / * Nokta cinsinden temel yazı tipi boyutu * / arka plan rengi: # f0f0f0; / * Web sayfası arka plan rengi * / renk: # 000000; / * Gövde metni rengi * /) h1 (renk: # a52a2a; / * Başlık rengi * / yazı tipi boyutu: 24pt; / * Punto cinsinden yazı tipi boyutu * / yazı tipi ailesi: Georgia, Times, serif ; / * Yazı tipi ailesi * / yazı tipi ağırlığı: normal; / * Normal metin stili * /)

Burada sayfanın gövdesini şekillendirdik. ve başlık için

... Ayrıca web sitenizdeki diğer öğeler için belirli stiller ayarlayabilirsiniz.

Şimdi stil sayfamızı siteye bağlayalım:

Selam Dünya!

Bu benim CSS stillerine sahip ilk sayfam

böylece anladık CSS nedir, bu teknolojinin neden kullanıldığını, stilleri siteye nasıl bağlayacağını öğrendi. Bu eğitim, Basamaklı Stil Sayfalarına bir tür giriş niteliğindedir. Diğer derslerde CSS teknolojisi hakkında daha detaylı konuşacağız.

Yazardan: merhaba webformyself portalının sevgili okuyucuları. Site yapımında, bir web kaynağının tasarımı büyük önem taşımaktadır. Bugün hakkında konuşacağımız css dili (basamaklı stil sayfaları) bundan sorumludur. Daha doğrusu, bağlantısı ve kullanımı hakkında. Web sayfalarının tasarımında kullanılan site için bazı css stillerine bir göz atalım.

css'yi bağlama

Bugün, yalnızca html'nin yetenekleri kullanılarak oluşturulmuş bir web sayfasını hiçbir yerde bulmak zor. Aslında, bu tür sitelerin görünümü sadece korkunç olurdu, bu nedenle, gerekli öğelerin işaretlenmesi hazır olduğunda, hemen dekore edilmeleri gerekir ve bu, ayrı bir dosyada css kullanılarak yapılır.

Genel olarak html dosyasına stilleri dahil etme olanaklarının da olduğunu söylemeliyim. Örneğin, stil niteliği veya aynı etiket kullanılarak tanımlanabilirler. Bunlara satır içi stiller denir. Bu yaklaşım bugün önerilmemektedir ve modern kalkınma standartlarını ihlal etmektedir.

Ve nasıl doğru yapılır, soruyorsun? Bunu yapmak için css uzantılı yeni bir dosya oluşturmanız ve ardından onu html'ye bağlamanız gerekir. Bu, harici dosyaları bağlamaktan sorumlu olan bağlantı etiketi kullanılarak çok basit bir şekilde yapılır. Bu şu şekilde yapılır:

Etiket, zaten anladığınız gibi bekar. Size özelliklerinden biraz daha bahsedeceğim:

rel = "stylesheet" - genellikle dosyanın sayfadaki rolünü tanımlamak için rel niteliği yazılır. Bizim durumumuzda rol, belirtilen bir stil sayfasıdır.

type = "text / css", tarayıcının bunları doğru şekilde yorumlaması için genellikle dahil edilen tüm dosyalara gösterilen MIME türüdür. Modern web tarayıcılarında bu özelliği yazmanıza gerek yoktur.

href = "style.css", harici dosyamızın adresini gösteren standart bir niteliktir. Bu durumda dosyanın isim stiline, css uzantısına sahip olması ve html belgesi ile aynı klasörde bulunması esas alınarak yazılır.

Gördüğünüz gibi, css dosyalarının bağlantısında sadece href niteliği değişecek, diğer her şeyin değiştirilmesine gerek yok. Sayfaya istediğiniz kadar stil sayfası bağlayabilirsiniz, ancak 2-4'ten fazlası ideal kabul edilir, çünkü sunucuya çok fazla istek gelmesi de pek iyi değildir.

Site için hazır css stillerini nereden alabilirim?

Pekala, tamam, bağlantıyla, umarım, her şey az çok açıktır. Ama boş bir dosya oluşturuyorsunuz ve eklemenin etkisini görebilmek için ya kuralları kendiniz yazmanız ya da bir yerden almanız gerekiyor.

Örneğin, internette birçok ücretsiz html şablonu var. Bunlardan herhangi birini indirirseniz, içeride kesinlikle web sitesi tasarımı için gerekli kuralları içeren hazır bir stil sayfası olacaktır. Ancak yalnızca kendi html belgesi için doğru şekilde çalışacaktır. Buradaki nokta, bu iki dilin sözde seçiciler kullanılarak birbirine bağlanmasıdır.

Seçici, css dilinin kendine özgü bir özelliğidir. Ne için ihtiyaç duyuyorlar? Peki, bu kodu hayal edin:

Başlık metni

Bir paragraftaki metin

Ve örneğin, css'de bir paragrafı ve başlığı nasıl şekillendireceğiniz aşağıda açıklanmıştır? Bunun için, yalnızca ihtiyacınız olan öğelere başvurmak üzere seçiciler oluşturuldu. Örneğin:

p (yazı tipi boyutu: 12px;) .title (yazı tipi boyutu: 36px;)

Tüm paragraflar için yazı tipi boyutunu 12 piksele ayarladık ve başlık sınıfına sahip öğelerin (bizim durumumuzda bu h1) çok daha büyük bir boyutu var - 36 piksel. Paragraflar söz konusu olduğunda, sayfada kaç tane olursa olsun stillerin hepsi için geçerli olduğunu unutmayın.

İkinci seçici yalnızca bir öğeye hitap etti - başlık sınıfı. Tabii ki, tamamen aynı sınıfa sahip başka öğeler de oluşturabilirsiniz, bu yasak değildir ve aynı kuralı alırlar, ancak sadece h1 etiketini html'de yazarsak (başlık sınıfı olmadan), o zaman hiçbir kural eklenmez. onun için.

Bu, css'nin istenen öğeleri seçmesine ve gerekli olmayanları kendi haline bırakmasına bu şekilde izin verir. Bunun internette bulabileceğiniz hazır stiller ile ne ilgisi var? Oradaki her şey belirli sınıflara ve tanımlayıcılara bağlıdır, bu nedenle bu tabloları herhangi bir dosyaya bağlayamazsınız, gerekli öğeler html'de uygun sınıflara sahip değilse çalışmaz.

Örneğin, stil sayfasında aşağıdaki kodu görüyoruz:

Gezinme (genişlik: 300 piksel; arka plan: su; ...) .nav a (ekran: blok; renk: #ccc; ...)

Zaten bundan yola çıkarak, html sayfamızda bir yerde nav sınıfına sahip bir öğe olması gerektiği ve bunun içinde bağlantıların olması gerektiği sonucuna varabiliriz. Bu durumda tasarım onlara uygulanacak ve görünümleri buna göre değişecektir. Böyle bir öğe bulunamazsa, kod basitçe yok sayılır.

Yine internette bu sınıf bağlantısını görebileceğiniz birçok hazır şablon bulabilirsiniz, bu nedenle html'de bir şeyi değiştirirseniz, ilgili işlemler stil sayfasında yapılmalıdır.

Site için kendi başınıza css stilleri nasıl yapılır?

Css korkutucu ve son derece zor değildir. İnsanlar tarafından web sayfaları tasarlamak için oluşturulmuş yaygın bir teknolojidir ve kendine has kuralları vardır. Bunları anlamak yeterlidir ve siz de bu dili kullanarak web kaynaklarının görünümünü oluşturabilirsiniz.

Hızlı gelişimin en önemli koşulu, kendiniz için öğreneceğiniz yeni bilgilerle birlikte sürekli uygulamadır. Bizimki size benzer bir uygulama verebilir.

Ek olarak, premium bölümümüzde css'in temellerini öğrenebilir ve ustalaşabilirsiniz. Tamamen bu dilin temel özelliklerine ayrılmış derslerden biri var. ...

En önemlisi, çalışma konusunda kararlı olun ve bunun çok zor olduğu ön yargısını bir kenara bırakın. Ayrıca web sitemizdeki ücretsiz materyaller, makaleler ve eğitim videoları da size yardımcı olabilir. Dilerseniz css ile çalışırken gerekli olan temel bilgileri de bunları kullanarak edinebilirsiniz.

Bu konuda sana veda ediyorum. Site oluşturma bilginizi geliştirmek için webformyself blogumuzu okuyun.

Bugün geliştirme sürecine biraz daha derine dalmak istiyoruz. Sıfırdan bir web sitesi veya uygulama geliştirirken, geliştirmeye yardımcı olacak bir kalıp koleksiyonuna kesinlikle ihtiyacınız olacak. Bugün tartışılacak olan budur. Sizin için kullanıma hazır CSS snippet'lerinden küçük bir seçki hazırladık!

Devam etmeden önce, bunun nasıl yapıldığını size açıklayayım. Nesneleri türlerine göre sınıflandırmaya çalıştık ve blok düzeyindeki öğeler, bağlantılar, giriş öğeleri, düz metin vb. için iyileştirmeler aldık.

Ayrıca yeniden kullanılabilirlik özelliğine de odaklandık, bu yüzden sınıfları kullandık. Stiller doğrudan bir öğeyi hedeflemez, bunun yerine kullanılabilecek ve daha sonra yeniden kullanılabilen semantik olmayan adlandırılmış sınıflardır.

Kendi projeleriniz için özelleştirmek üzere bazı şeyler için sınıf sınıfları da oluşturabilirsiniz. Şuna benzeyebilir:

Sınıfım (
/ * Harika stillerim burada * /
}

Sınıfım.özel (
/ * .my-class'a özel stiller yalnızca, yalnızca .custom sınıfına sahipse * /
}
Dolayısıyla .custom sınıfı tek başına bir şey ifade etmez ancak .my-class öğesine uygularsanız .my-class öğesinin stillerini biraz değiştirebilirsiniz. Ne demek istediğimizi anlıyor musun?

Şimdi özü anladınız, hadi kalıplara geçelim. Blok düzeyindeki öğelerle başlayacağız.

Lütfen bu eğitimde önek kullanmadığımızı unutmayın, ancak önek stilleri CSS dosyasında görebilirsiniz.

Blok seviye elemanları

Bir resim galerisi mi geliştiriyorsunuz ve resimlerinize küçük stiller mi eklemek istiyorsunuz? Blog makaleleriniz için bir şablon tasarlıyor ve kenar bloğunu vurgulamak mı istiyorsunuz? Özgeçmiş yazmak ve fotoğrafınızı biraz süslemek mi istiyorsunuz? Şimdi böyle bir fırsatın var!

İşaretleme

Burada tüm bölüm için blok seviyeli sınıfla bir ayrım yaptık ve ek sınıflar uyguladık. Bu blok düzeyinde bir öğe olduğu için elbette burada istediğinizi yapabilirsiniz. Bu stillerden birini resminize uygulamak istiyorsanız, buna display:block parametresini eklemeyi unutmayın.

Demoda, küçük div öğemize birkaç satır CSS uyguladık:

Blok seviyesi (
genişlik: 120 piksel;
yükseklik: 120 piksel;
kenar boşluğu: 20 piksel;
pozisyon: göreceli;
yüzer: sol;
}
Yazı tipi için daha fazla stil bulabilirsiniz, ancak bu yalnızca tanıtım amaçlıdır. Temel stillere odaklanalım.

gölgeler

Blok düzeyinde bir öğeye derinlik eklemenin en basit yollarından biri, bir alt gölge uygulamaktır. Ancak gölgeler oldukça tehlikelidir: tasarımınızı anında mahvedebilirler. Bize inanmıyorsanız, sayfalardaki gölgelere bir bakın.

Düşen gölge (
arka plan: # 9479fa;
}

gölge.top (
kutu gölgesi: 0 -4px 2px -2px rgba (0,0,0,0,4)
}

Alt gölge.sağ (
kutu-gölge: 4px 0 2px -2px rgba (0,0,0,0,4)
}

Drop-shadow.bottom (
kutu-gölge: 0 4px 2px -2px rgba (0,0,0,0,4)
}

Drop-shadow.left (
kutu gölgesi: -4px 0 2px -2px rgba (0,0,0,0,4)
}
Gölgenin kendisine derinlik vermek için negatif gölge yayılımının değerini nasıl kullandığımızı görün. Bu daha gerçekçi görünmesini sağlar. Yani en azından bize öyle geliyor.

Not: kutu gölge bildiriminde kullanılan renk, öğenizin arka plan rengine bağlı olarak değişebilir. Blok ne kadar hafif olursa, kontrastın ince olması için gölge o kadar açık olmalıdır.

Not: aynı öğeye farklı yönlerde sınıflar ekleyemezsiniz, çünkü ikincisi ilklerin üzerine yazacaktır. Bir kutunun birden fazla gölgesi olmasını istiyorsanız, birkaç kutu gölge parametresi oluşturmanız yeterlidir.

Böl (
arka plan: # 69D2E7;
}

Vurgu-koyu (
kutu-gölge: 0 0 5px 2px rgba (0,0,0, .35)
}

Vurgu-ışık (
kutu gölgesi: 0 0 0 10px rgba (255,255,255, .25)
}

Vurgu-içi (
kutu gölgesi: iç metin 0 0 7px 4px rgba (255.255.255, .5)
}

Vurgu-kenarlık (
kutu gölgesi: iç metin 0 0 0 7px rgba (255,255,255, .5)
}

Böl (
arka plan: # 8ec12d;
renk: # 333;
}

Kabartmalı ışık (
kutu gölgesi: iç metin 0 1px 0 rgba (255,255,255,0.7);
}

Kabartmalı-ağır (
kenarlık: 1px katı rgba (0,0,0,0.05);
kutu gölgesi:
ek 0 2px 3px rgba (255,255,255,0.3),
ek 0 -2px 3px rgba (0,0,0,0.3),
0 1px 1px rgba (255,255,255,0.9);
}
Gradyanlar

Böl (
arka plan rengi: # DEB8A0;
kutu-gölge: 0 0 0 1px # a27b62;
}

Gradyan-ışık-doğrusal (
arka plan görüntüsü: doğrusal gradyan (rgba (255,255,255, .5), rgba (255,255,255,0));
}

Gradyan-koyu-doğrusal (
arka plan görüntüsü: doğrusal gradyan (rgba (0,0,0, .25), rgba (0,0,0,0));
}
Genel olarak teknik, öğenizin üzerine şeffaftan daha şeffafa doğru bir gradyan içeren bir katman eklemektir. Photoshop'ta yapıldığı gibi aynı şekilde. Oldukça basit.

Lütfen degradelerin bazı tarayıcılarda (IE9 gibi) çalışmayabileceğini ve geri dönüşlerle ilgilenmeniz gerektiğini unutmayın.

Yani bu kolay kısımdı. Şimdi radyal gradyanlarla ilgilenelim. Blok öğelerinize çekici ışık efektleri eklemek istiyorsunuz, değil mi? O zaman radyal gradyanlara ihtiyacınız var. Desteklenen tarayıcılar için basit bir seçenekle başlayalım.

Gradyan-ışık-radyal (
arka plan görüntüsü: radyal gradyan (merkez 0, en uzak köşedeki daire, rgba (255,255,255,0.4), rgba (255,255,255,0));
}

Gradyan-koyu-radyal (
arka plan görüntüsü: radyal-gradyan (merkez 0, en uzak köşedeki daire, rgba (0,0,0,0.15), rgba (0,0,0,0));
}
Her radyal gradyan eklemek istediğimizde sözdizimimizi kontrol etmemiz gerektiği gerçeği dışında, oldukça basitti, değil mi?

Yuvarlatılmış köşeler

Tasarıma bağlı olarak keskin kenarlar güzel görünebilir veya her şeyi mahvedebilir. Her neyse, birden çok öğeye border-radius eklemek isteyebilirsiniz. Küçük bile. Bu yüzden birkaç sınıf oluşturduk.

Böl (
arka plan: # fca1cc;
}

Hafif yuvarlak (
sınır yarıçapı: 3 piksel;
}

Ağır yuvarlak (
sınır yarıçapı: 8 piksel;
}

Tam yuvarlak (
sınır yarıçapı: %50;
}

namlu yuvarlak (
sınır yarıçapı: 20 piksel / 60 piksel;
}
Border-radius hakkındaki teorimiz (eleman boyutuna göre):

* 0px'de keskin köşelerimiz olacak.

* 1 ile 4 piksel arasında biraz yuvarlatılmış köşelerimiz olacaktır. Çoğu insan bu köşelerin yuvarlak olduğunu bile söylemez ama kesinlikle bu köşelerin bıçak gibi keskin olduğunu düşünmezler!

* 5 ile 10 piksel arasında, korkunç olduğunu düşündüğümüz açılarla karşılaşacaksınız. Yap-çünkü-yapabiliriz içgüdüsünü takip etmeye çalışıyormuşsun gibi görünüyorlar. Ayrıca, daha önce de söylediğimiz gibi, köşeleri yuvarlama modası neredeyse bitti.

border-radius parametresini kullanırken hatırlanması gereken iki parametre vardır:

* border-radius: Bir kare eleman şekillendiriyorsanız %50 bize mükemmel bir daire verir. Dikdörtgen ise elips olur.

* İkon tarzı sınır yarıçapını elde etmek için tavsiyelere uyarsanız ideal oran 6.4'tür. Yani 100 * 100 piksellik bir kareniz varsa ve onu bir simgeye dönüştürmek istiyorsanız, o zaman 16 piksel (100 / 6.4 = 15.625) değerinde bir kenarlık yarıçapı uygulamanız gerekecektir.

Bu, blok elemanları için süslemelerle sona ermektedir. Şimdi linklere geçelim. Linkler tabii ki her adımda buluşuyoruz. Navigasyondan gelen bağlantılara, sosyal medya bağlantılarından çapalara kadar bağlantılar her yerde!

Şimdi satır içi bağlantılar ve blok bağlantılar arasındaki farkı oluşturalım. Çoğu durumda satır içi bağlantılar, geçerli sayfadan İnternet'teki başka bir sayfaya bağlantılardır. Blok bağlantıları biraz daha çok görevlidir: düğmeler, gezinme menüleri vb.

İşaretleme

Muhtemelen zaten anladınız. Bu bölüm için 2 farklı bağlama ihtiyacımız olacak: satır içi bağlantılı bir varyant için bağlantı içeren bir cümle ve blok bağlantılı bir örnek için basit bir bağlantı. İkinci durumda bağlantı etiketini kullanırız, ancak giriş öğelerini veya bir düğmeyi kullanabilirsiniz.

Bu, bir satır içi bağlantıyı göstermek için sahte bir metindir.

Bağlantı
satır içi referanslar

Satır içi bağlantı-1 (
ekran: satır içi blok;
kenar boşluğu: 0 0.2em;
dolgu: 3 piksel;
arka plan: # 97CAF2;
sınır yarıçapı: 2 piksel;
/ * Yazı tipi stilleri * /
metin-dekorasyon: yok;
yazı tipi ağırlığı: kalın;
Beyaz renk;
}

Satır içi bağlantı-1: üzerine gelin (
arka plan: # 53A7EA
}

Inline-link-1: aktif (
arka plan: # C4E1F8
}

Inline-link-1: ziyaret edildi (
arka plan: # F2BF97
}
Önemli: ziyaret edilen durumu satır içi bağlantılara eklemeyi unutmayın. Bazı insanlar hangi bağlantıları daha önce ziyaret ettiklerini bilmek ister. Burada gölge paletinin çemberi etrafında 180 derecelik bir dönüş uyguladık. Bu, standart bağlantıları ziyaret edilenlerden kolayca ayırt etmemizi sağlar.

Bu örnek, satır içi bağlantıları vurgulamak istediğinizde çok etkilidir. Bunun tasarım tercihinize bağlı olduğunu söyleyebiliriz: bazı insanlar bağlantıların net bir şekilde vurgulanmasını isterken, diğerleri harekete geçirici öğeler gibi bağlantıların çok büyük olmasını ister. Bu senin kişisel tercihin.

Bu "zor" bir örnekti. Standart bağlantı stillerine dayalı daha basit bir şeye bakalım.

Inline-link-2: üzerine gelin (
kenarlık-alt stili: noktalı;
}

Inline-link-2: aktif (
sınır-alt-tarzı: katı;
}

Inline-link-2: ziyaret edildi (
kenarlık-alt: 2 piksel katı # 97CAF2;
}
Sonuç olarak, standart durum için noktalı bir çizgi yapmaktır. Bir bağlantının üzerine geldiğinizde, çizgi noktalı bir çizgi haline gelir ve üzerine tıklarsanız, altı tamamen çizilir.

Satır içi bağlantı-3 (
ekran: satır içi blok;
pozisyon: göreceli;
sol dolgu: 6px;
/ * Yazı tipi stilleri * /
metin-dekorasyon: yok;
renk: # 6AB3EC;
metin gölgesi: 0 1px 1px rgba (255,255,255,0.9);
}

Inline-link-3: üzerine gelin (
renk: # 3C9CE7;
}

Inline-link-3: önce (
içerik: "25BA";
yazı tipi boyutu: %80;
ekran: satır içi blok;
dolgu-sağ: 3px;
işaretçi olayları: yok;
}

Satır içi bağlantı-3: fareyle üzerine gelin: önce (
renk: # F2BF97;
}
Bağlantıları engelle

Şimdi blok linkleri olan bir örneğe bakalım. Çoğu durumda, bir kullanıcı siteniz veya uygulamanızla etkileşime geçebildiğinde, bir düğme ile donatılmalıdır. Bir yorumu onaylama, başka bir sayfaya gitme, yetkilendirme ve çok daha fazlası için düğme. Bunu yapmak için hangi öğeyi kullanırsanız kullanın ("a", "giriş türü =" gönder "" "," düğme ", vb.), kullanıcıları çekmek için bazı ilginç stiller uygulamak isteyebilirsiniz.

Metro (
ekran: satır içi blok;
dolgu: 10 piksel;
kenar boşluğu: 10 piksel;
arka plan: # 08C;
/ * Yazı tipi stilleri * /
Beyaz renk;
yazı tipi ağırlığı: kalın;
metin-dekorasyon: yok;
}

Metro: üzerine gelin (
arka plan: # 0AF
}
Öyleyse aynı temeli koruyalım, ancak bir 3D efekti kullanalım. CSS-Tricks'i takip ederseniz, muhtemelen bu etkiyi fark edeceksiniz. Hatta bir çocuk sınıfı kullanıyoruz.

Metro.üç-d (
pozisyon: göreceli;
kutu gölgesi:
1px 1px # 53A7EA,
2px 2px # 53A7EA,
3px 3px # 53A7EA;
geçiş: tüm 0,1 saniyelik kolaylık;
}

Metro.üç-d: aktif (
kutu gölgesi: yok;
üst: 3 piksel;
sol: 3 piksel;
}
Harika görünmüyor mu? Özellikle aktif durumda. Yani, metro konusunda yeterli.

Kenarlı bağlantı (
ekran: satır içi blok;
dolgu: 8 piksel;
kenarlık: 3 piksel katı # FCB326;
sınır yarıçapı: 6 piksel;
kutu gölgesi:
0 2px 1px rgba (0, 0, 0, 0.2),
ek 0 2px 1px rgba (0, 0, 0, 0.2);
/ * Yazı tipi stilleri * /
metin-dekorasyon: yok;
yazı tipi boyutu: 14 piksel;
metin dönüştürme: büyük harf;
renk: # 222;
}

Kenarlıklı bağlantı: üzerine gelin (
kenarlık rengi: # FDD68B
}

Kenarlıklı bağlantı: aktif (
kenarlık rengi: # FEE8BD
}

Modern (
ekran: satır içi blok;
kenar boşluğu: 10 piksel;
dolgu: 8px 15px;
arka plan: # B8ED01;
kenarlık: 1px katı rgba (0,0,0,0.15);
sınır yarıçapı: 4 piksel;
geçiş: tüm 0.3 saniyelik hareket kolaylığı;
kutu gölgesi:
0 2px 2px rgba (0,0,0,0.3),
0 0 4px 1px rgba (0,0,0,0.2);
/ * Yazı tipi stilleri * /
metin-dekorasyon: yok;
metin gölgesi: 0 1px rgba (255,255,255,0.7);
}

Modern: üzerine gelin (
arka plan: # C7FE0A
}
Aşağıdaki sınıfla biraz daha karmaşık kutu gölgeleri bile ekleyebiliriz:

Kabartmalı bağlantı (
kutu gölgesi:
ek 0 -3px 2px rgba (0,0,0, .17),
0 0 4px 1px rgba (0,0,0, .1),
0 3px 2px rgba (0,0,0, .2);
}

Modern.kabartmalı bağlantı (
kutu gölgesi:
ek 0 1px 0 rgba (255,255,255,0.5),
0 2px 2px rgba (0,0,0,0.3), 0 0 4px 1px rgba (0,0,0,0.2),
ek 0 3px 2px rgba (255,255,255, .22),
ek 0 -3px 2px rgba (0,0,0, .15),
ek 0 20px 10px rgba (255,255,255, .12),
0 0 4px 1px rgba (0,0,0, .1), 0 3px 2px rgba (0,0,0, .2);
}

Modern.kabartmalı bağlantı: aktif (
kutu gölgesi:
0 -2px 1px rgba (255,255,255,0.2),
ek 0 3px 2px rgba (0,0,0,0.12);
}
Son olarak, bu, düğmeyi arka planın bir parçasıymış gibi göstermemizi sağlayan sözde bir öğe ekleyen bir sınıftır.

toplum (
pozisyon: göreceli;
z-endeksi: 2;
}

Socle: sonra (
içerik: "";
z-endeksi: -1;
pozisyon: mutlak;
sınır yarıçapı: 6 piksel;
kutu gölgesi:
iç metin 0 1px 0 rgba (0,0,0,0.1),
0 -1px 0 rgba (255,255,255,0.7);
üst: -6 piksel;
alt: -6 piksel;
sağ: -6 piksel;
sol: -6 piksel;
arka plan: doğrusal gradyan (rgba (0,0,0,0.1), rgba (0,0,0,0));
}
Border-radius parametresini ihtiyaçlarınıza göre değiştirmek isteyebilirsiniz. Düğmenin kenarlık yarıçapına bağlı olarak garip görünebilir.

Giriş öğeleri

Önceki eğitimlerde ele aldığımız gibi, formlar internetin her yerinde bulunabilir ve bunların çoğu girdi alanlarıdır. Ne yazık ki, giriş alanları için varsayılan stiller oldukça çekici değil. Daha iyisini yapabileceğimize inancımız tam!

İşaretleme

CSS kodu

Basit bir şeyle başlayalım: varsayılan kenarlığı değiştirin ve yuvarlatılmış köşeler ekleyin.

Basit giriş: üzerine gelin (
sınır yarıçapı: 8px
}

Basit giriş: odak (
anahat: yok;
sınır yarıçapı: 8 piksel;
sınır rengi: # EBD292;
}
Girdi alanları oldukça garip öğelerdir, bu nedenle işleri kolaylaştırmak için display:block olarak ayarladık. Dolgu, içerik için biraz boşluk bırakmak için burada.

Hiç iOS'tan giriş alanlarını yeniden oluşturmak istediniz mi?

Mac: odak (
anahat: yok;
kutu gölgesi:
ek 0 2px 0 rgba (0,0,0, .2),
0 0 4px rgba (0,0,0,0.1),
0 0 5px 1px # 51CBEE;
}

Derinlik (
Ekran bloğu;
kenarlık: 1 piksel katı rgba (255,255,255,0.6);
arka plan: doğrusal gradyan (#eee, #fff);
geçiş: tüm 0.3 saniyelik hareket kolaylığı;
kutu gölgesi:
ek 0 1px 4px rgba (0,0,0,0.4);
dolgu: 5 piksel;
renk: # 555;
}

Derinlik: odak (
anahat: yok;
arka plan konumu: 0 -1.7em;
}

Hat (
Ekran bloğu;
sınır: yok;
renk: # 333;
arka plan: şeffaf;
kenarlık-alt: 1 piksel noktalı siyah;
dolgu: 5px 2px 0 2px;
}

Satır: odak (
anahat: yok;
kenarlık rengi: # 51CBEE;
}
özetleyelim

İçerik tasarımı zor bir iştir. Ancak bu önceden oluşturulmuş sınıflara sahip olmak, özellikle CSS'ye aşina değilseniz, web sitenizi veya uygulamanızı geliştirirken size çok zaman kazandırabilir.

Buradaki temel fikir, bu sınıfları basamaklı stil sayfalarınızda (veya bir önişlemci kullanıyorsanız ayrı bir dosyada) bulundurmak ve işaretlemenizi geliştirirken onları çağırmaktır. Veya bir şeye hızlıca stil vermek istediğiniz stilleri kopyalayın.

Sonuçta bu sınıfları ancak size uygunsa kendi tasarımlarınız için kullanmanızı tavsiye edebiliriz. Kendi ilginç arayüz geliştirme sınıfları koleksiyonunuzu oluşturmak için birkaç saat harcayın ve gelecekteki projelerde ne kadar zaman kazanabileceğinizi görün.

Kılavuzu okuduğunuz için teşekkürler! Tabii ki, herhangi bir sorunuz varsa, yorumlarda onlara sormaktan çekinmeyin!

Dikkat! Gizli metni görüntüleme izniniz yok.

Bu kılavuz, Kasım 2009'dan beri düzenli okuyucumuz olan bir kullanıcının isteği üzerine tercüme edilmiştir.