CSS3 için Başlangıç Kılavuzu

Bu makale bizim bölümümüzün bir parçası. "HTML5 / CSS3 Dersleri serisi" - sizi daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için. Buraya TIKLAYIN Aynı serideki daha fazla makale görmek için.

2005 yılında ilan edilmesinden bu yana, Cascading Style Sheet'in 3. seviyesinin veya CSS3 olarak daha iyi bilinen seviyesinin geliştirilmesi birçok tasarımcı ve geliştirici tarafından yakından izlendi ve izlendi. Hepimiz CSS3'ün yeni özelliklerine - metin gölgeleri, resimlerle sınırlar, opaklık, çoklu arka planlar vb..

Bugün itibariyle, tüm CSS3 seçicileri henüz tam olarak desteklenmemektedir. Ancak bu, yeni CSS3 malzemelerini test ederken eğlenemeyeceğimiz anlamına gelmez. Bu gönderi, CSS 2.1'e zaten aşina olan ve ellerinizi CSS3.0'da kirletmek isteyen tüm tasarımcı ve geliştiricilere yöneliktir..

Yararlı bir CSS3 okuma, örnek kodlar, ipuçları, öğreticiler, hile sayfaları ve daha fazlası. Bunları projelerinizde kullanmaktan çekinmeyin, uyumsuz tarayıcılarda incelikle düştüğünden emin olun.

CSS3'e Başlarken

CSS3'e Giriş

CSS ve CSS3'e resmi bir yol haritası. Bu belge size CSS3'ün gelişimi hakkında genel bir fikir vermektedir..

CSS3: Tasarımı bir üst seviyeye taşıyın

CSS3'ün avantajları, açıklamaları ve CSS3 özellikleri ve seçicileri örnekleri ile.

CSS3 ile birkaç püf noktası

Webmonkey, CSS3'te yuvarlatılmış kenarlıklar, kenarlıklar, alt gölgeler, görüntü hileleri ve daha fazlası dahil olmak üzere çeşitli temel hileler sunar..

Röportaj: CSS3'te Eric Meyer ile altı soru

Six Revision'daki Folks, Eric Meyer ile CSS3 hakkındaki değerli görüşler ve cevaplar ile görüştü..

CSS3: Aşamalı Geliştirme

Kodunuzu henüz bu özellikleri desteklemeyen eski tarayıcılarda tatmin edici bir kullanıcı deneyimi sunarken, CSS3 özelliklerini bunları destekleyen tarayıcılarda kullanmak için zarif (veya aşamalı) geliştirme tekniklerini nasıl kullanabilirsiniz?.

CSS3: Arka Plan ve Sınırlar

Yuvarlak kenarlıklar (Sınır yarıçap)

CSS3'lerle yuvarlatılmış kenarlık oluşturmak için bir rehber border-radius özellik.

Görüntü ile yuvarlatılmış kenarlıklar (Sınır images)

Görüntüler ile sınırlarında nasıl kullanılır border-image özellik.

CSS3 sınırları, arka planlar ve kutular

Aşağıdaki gibi yeni CSS3 özelliklerinin örnekleriyle ayrıntılı açıklama: Arka plan-klip, background-origin, background-attachment, kutu gölge, kutu-dekorasyon-break, border-radius ve border-image.

CSS3: Metin

Tipo Etkisi

CSS3 ile basit tipo efekt yaratın.

Metin gölgesini kullanarak altı metin efekti

Metin efektleri şunları içerir: eski / retro, neon, iç metin, anaglif, ateş ve masa oyunu.

Güzel tipografi

Temel işaretleme alma ve saf CSS3 ile çekici ve güzel bir tipografik tasarıma dönüştürme.

Metin Döndürme

Bir şeyleri doğru konumlandırmak için görüntü sprite ve CSS serpin kullanır.

Anahat Metni

CSS3'ü kullanarak metninize anahat veya kontur ekleme text-stroke özellik.

Metin maskeleme efekti

Etkileşimli metin maskeleme efekti kullanarak Metin gölgesi CSS özelliği.

CSS3 ile bağlantı dürtme (animasyon)

Javascript hendek ve tamamen CSS3 ile dürtme efekti oluşturmak.

CSS Seçim Şekillendirme

Metin seçimi stilini CSS3 ile değiştirme.

CSS3: Menü

Birden çok sütun içeriği

Her sütun için ayrı ayrı katmanlar ve (veya) paragraflar atamak zorunda kalmadan web sitenizde bir sütun kümesi oluşturmak için CSS3'ü kullanma.

Just CSS ile seksi ipuçları

Gelişen CSS standardının kullanılması bazı güzel çapraz tarayıcı araç ipuçlarını iyileştirebilir.

Daha fazla ipucu:

Saf CSS3 ipucu
CSS3 ile ipuçları.

Aşağıya doğru açılan menü

Kullanarak çok seviyeli bir açılır menüde Apple.com nasıl oluşturulur border-radius, kutu gölge, ve Metin gölgesi.

CSS3-Sadece Sekmeli Alan

Bir sekmeye tıklayın, tüm panelleri gizleyin, sadece tıkladığınız sekmeye karşılık geleni gösterin - tümü CSS ile.

CSS3 ile 3D Şeritler

Sadece CSS3 ile güzel görünümlü 3D kurdeleler oluşturun.

CSS3: Alt gölge

Resimdeki gölge

Görüntü kullanmadan gölgeleri bırakmak için birkaç teknik ve olası görünümlerden bazılarını gösterin.

Kutu Gölgeli Kızdırma Sekmeleri

Resimsiz CSS3'te sezgisel ve güzel sekmeler nasıl oluşturulur.

CSS3: Düğmeler

Öğretici: Güzel düğmeler

Güzelce bozulan güzel çapraz tarayıcı uyumlu CSS3 düğmeleri nasıl oluşturulur.

Konuşma baloncuğu

CSS 2.1 ile oluşturulan ve CSS3 ile geliştirilmiş çeşitli konuşma balonu efektleri.

Github hem düğmeler

Mümkün olan en basit işaretlemeyi korurken CSS3 kullanarak nelerin mümkün olduğunu gösteren düğmelerin toplanması.

Döndürme, CSS3 ve MooTools ile Simgeleri Solma

Dinamik, dönen elemanlar oluşturmak için CSS3 ve MooTools nasıl kullanılır?.

Görüntü yerleşimi

CSS3 border-image özelliğinin pratik uygulaması.

Daha

CSS3 + Mootools. Mootoollarda deney örneği. Bu, çekirdek MooTools çerçeve çalışmasına CSS3 özelliklerini ekler.
Logo CSS3 ve MooTools veya jQuery ile patlayan. Statik görüntü alın ve farenin üzerinde animasyonlu, patlayıcı bir etki yaratın.
HTML 5 ve CSS Gücü 3. HTML 5 ve CSS 3 hızla popülerlik kazanıyor, Perishable Press nasıl ve neden olduğunu açıklamak için burada.
CSS3 Animasyonları ve JavaScript Örneği ile Dönen Işınlar. Bir görüntünün arkasında basit ve ince ışın eğirme efekti.
CSS3 Polaroid Fotoğraf Galerisi. Saf CSS stiliyle havalı görünümlü bir Polaroid fotoğraf yığını oluşturma.
HTML 5 ve CSS 3: Yakında Kullanacağınız Teknikler. HTML5 ve CSS3 ile sıfırdan bir blog oluşturmaya yönelik bir adım.