Sayfaların düzeni giderek zorlaştığından, geliştiricilerin tasarımı somutlaştırmak için daha fazla ölçüm birimine erişime ihtiyaçları var. Her zamanki ilginin yanı sıra, EM ve REM ve piksellerin yanı sıra, hem VMIN hem de VH, bunlarla ilgili VB'nin hem de VH'nin daha güçlü birimleri var, oluşturmanın daha güçlü yolları sağlıyor. uyarlanabilir TasarımGenellikle @Media geçiş noktalarının kullanımını terk etmeye yardımcı olabilir.
İlginin ötesine geçiyoruz
Geleneksel CSS ölçüm birimleri, web tasarımında aşağıdaki sorunları oluşturur:
- Ölçüm yüzdesi birimi her zaman beklendiği gibi çalışmaz. Geliştiriciler, dış mevduatları hatırlamak, elemanların boyutlarını ayarlamalıdır. Vücut elemanının yüksekliğini ayarlamak için bir ölçüm yüzdesi ölçüsü kullanmamalısınız. Yazı tipi boyutunu kaydetme:% 50, standart boyutunun yarısına eşit metin boyutunu belirtir ve metnin boyutu ile içeren öğesinin boyutu arasında bağımlılığı oluşturmaz.
- Tarayıcı penceresinin farklı boyutları için mükemmel formun rakamlarını oluşturmak neredeyse imkansızdır. Elemanın mükemmel kare olmasını ve aynı zamanda adapte olmasını sağlamak çok zordur.
Ölçüm birimleri VW ve VH tüm bu sorunları büyük ölçüde çözer.
İdeal oranları desteklemek
Ölçüm birimlerini kullanma VW ve VH, web sayfalarında mükemmel rakamlar oluşturmak çok kolaydır. Bu birimler neredeyse hepsinin boyutlarını ayarlamak için kullanılabilir. cSS özellikleri. Bu nedenle, herhangi bir tarayıcı penceresinde, genişliğinin% 20'sini alır ve kare kalırsa, VW ölçüm birimini kullanarak genişlik ve yükseklik özelliklerinin aynı değerlerini belirlemeniz gerekir:
Div.twentysquare (arka plan: # 999 ; Genişlik: 20vw; Yükseklik: 20vw; )
Aşağıdaki bu örneğin gösterilmesine bakın, bağlantıya gidin ve değiştirme boyutundaki değişikliği görmek için görüntüleme ünitesinin boyutunu değiştirmeyi deneyin.
Aynı yöntemi kullanarak, yüksekliği, tarayıcı penceresinin herhangi bir boyutu ile genişliğinin iki katı olduğu bir dikdörtgen oluşturabilirsiniz:
Div.networect (genişlik: 20vw; yükseklik: 40vw;)
Bir afiş ayarla Mükemmel boyut oranı, aşağıdaki CSS kodu ile çok basittir:
Div.GoldenRect (genişlik: 100vw; yükseklik: 61 .8vw; arka plan: kırmızı;)
Uyarlanabilir bir blokta optimum metin ölçeklendirilmesi için, sağlanan tüm hacme girin, sadece Yazı tipi boyutunu VW ölçüm birimlerinde ayarlamanız gerekir.
Çeviri - Djurka
Yazardan: Dikdörtgenler içindeki dikdörtgen: Web sayfalarımızın her zaman yapıldığı budur. Geometrik figürler oluşturmak için CSS kullanarak bu kısıtlamalardan uzun süre serbest bırakmaya çalıştık, ancak bu rakamlar, dekore edilmiş elemanların içinde olan içeriği hiç etkilememiş veya nispeten dekore edilmiş sayfada diğer elementlerin bulunduğu içeriği asla etkilememiştir.
Rakamlar için yeni CSS şartnamesi, şeylerin mevcut konumunu değiştirir. 2012 yılının ortalarında Adobe tarafından sunulan, web tasarımcılarının, nispeten karmaşık figürlerin içindeki ve çevresindeki içeriğin akışını değiştirme yeteneğini - JavaScript kullanarak bile daha önce başaramayacağımız bir şey vermeyi amaçlamaktadır.
Örneğin, metnin aşağıdaki tasarımda yuvarlak fotoğrafları nasıl aktığını dikkat edin. Rakamlar olmadan, metin dikdörtgen bir şekle sahip olacak - tasarımı bir sonraki seviyeye yükselten rafine bir alımı atıyor.
Metnin bu örnekte plakanın kenarları boyunca yuvarlak bir şekilde nasıl bir şekle aldığını unutmayın. CSS rakamlarını kullanarak, benzer bir tasarım ve bir web sayfası için oluşturabiliriz..
Rakamların nasıl çalıştığını ve bunları nasıl kullanmaya başlayabileceğinizi ayrıntılı olarak bakalım.
Tarayıcı Desteği
CSS rakamları hala yalnızca WebKit gecelik ve krom kanarya'da desteklenir, ancak seviye 1 modülü aday önerisinin durumuna ulaşmıştır, bu nedenle şartnamede tanımlanan özellikler ve sözdizimi oldukça kararlıdır. Tarayıcıların geri kalanı onları koruyarak başlamadan önce biraz zaman alacaktır. Bu seviye, şekil etrafındaki içeriğin akışını değiştiren şekillerin özellikleri üzerine konsantre edilir. Özellikle, şekil dış özelliğine odaklanır ve bununla ilişkilidir.
Kesme ve kaplama maskesi, CSS filtreleri ve toplama ve birleştirme gibi diğer son yeteneklerle birlikte, CSS rakamları, Photoshop ve InDesign gibi grafik editörlere başvurmak zorunda kalmadan daha karmaşık bir zarif tasarım yaratmamıza izin verecektir.
Gelecekteki CSS seviyeleri rakamlar ayrıca rakamların içindeki içeriğin tasarımına da dikkat edecektir. Örneğin, bugün, sadece CSS'de eşkenar dörtgen bir rakam oluşturmak için yeterlidir: sadece elemanı 45 dereceye kadar çevirin ve içeriği içindeki içeriği çevirin. ters yönBöylece sayfada yatay olarak bulunur. Ancak eşkenriğin içindeki içerik uygun formu almaz ve her zaman dikdörtgen kalacaktır. SHAPE-Inside özelliği uygulandığında, içeriği aşağıdaki resme benzer şekilde bir işaretleme oluştururken, içeriğini çok eşkenat edebiliriz.
Yakında CSS rakamları ayrıca içerideki metnin, taşması düzeltmek ya da kullanmak yerine bu elmaslar gibi, metnin kendisi kabın kenarlarına göre yerleştirilmiştir..
Bugün CSS rakamlarını kullanmak için, Chrome Canary'de, erişilebilir deneysel özellikler yapan onay kutusunu etkinleştirmeniz gerekir.
CSS figürü oluşturma
Şekillerin özelliklerini kullanarak rakamı öğeye uygulayabilirsiniz. Şeklin rakamını değerin kalitesinde geçirirsiniz. İşlev Şekil, öğeye uygulamak istediğiniz şekli tanımlayan parametreleri ilettiğiniz kodun bir parçasıdır.
Şekiller, aşağıdaki işlevlerden biri kullanılarak oluşturulabilir:
Her figür bir dizi nokta ile belirlenir. Bazı fonksiyonlar parametre olarak puan alır; Diğerleri - Ofset parametrelerini kabul edin, ancak nihayetinde elemandaki rakamları bir dizi nokta olarak çizecektir. Örneklerdeki bu işlevlerin her biri için parametreleri analiz edeceğiz.
Şekil ayrıca, alfa kanalını sökerek görüntüden de belirlenebilir. Görüntü şekil özelliğine iletildiğinde, tarayıcı şeklini şekil-görüntü eşik değerine göre görüntüden alır. Şekil, alfa değeri belirtilen eşiğin üstünde olan piksellerle belirlenir. Görüntünün CORS uyumluluğu olmalıdır. Bazı nedenlerden dolayı verilen sebebi mevcut değilse (örneğin, mevcut değil), daha sonra herhangi bir rakam uygulanmayacaktır.
Aşağıdaki şekiller yukarıda belirtilen işlevleri değer olarak alır:
Şekil-dış: içeriğin şekli (dış) dönmesine neden olur
Şekil-içeriden: İçerik, şeklin şeklini içeriden alır.
Şekil-dış özelliği, şekle çevresinde harici bir girinti eklemek için şekil-marj ile birlikte kullanabilirsiniz; bu, içeriği rakamdan hareket ettirecek şekilde, aralarında boşluğu bırakır. Ayrıca, şekli-dış eşya-dış eşyayı alır, şekil-içeriden bir iç girinti ekleyen şekil-dolgu özelliğini alır.
Şekil veya fonksiyonun özelliklerini kullanarak, şeklin elemanını bildirme, yalnızca bir satır CSS kodu ile yapabilirsiniz:
Eleman (şekil-dış: daire (); / * içerik, Element * /) olarak ayarlanan daireyi mücadele edecektir.
Eleman (şekil-dış: URL (yol / / imge-shemle.png);)
Eleman (şekil - dış: URL (yol / / görüntü - şekli. PNG);) |
Ancak ... Bu satır CSS kodunu öğeye uygularsanız, aşağıdaki koşullar karşılanmazsa, rakam uygulanmayacaktır:
Öğenin yüzer olması gerekir. Gelecekteki CSS rakam seviyeleri, yüzen olmayan elemanlar için rakamları tanımlamamıza izin verecektir, ancak böyle bir olasılık yoktur.
Öğe belirtilmelidir. Öğe tarafından belirtilen yükseklik ve genişlik, koordinat sistemini oluşturmak için kullanılacaktır.
Yukarıdaki fonksiyonlarda gördüğünüz gibi, rakamlar bir dizi nokta ile belirlenir. Puanların koordinatları olduğu için, tarayıcı her noktada elemanın üzerinde nerede bulunulması gerektiğini bilmek için bir koordinat sistemi gerektirir. Böylece, örneğin aşağıdakileri olsaydı, yukarıda çalışacaktır:
Eleman (şamandıra: sol; yükseklik: 10EM; genişlik: 15EM; şekil-dış: daire ();)
Eleman (şamandıra: sol; yükseklik: 10EM; genişlik: 15EM; şekil - dış: daire ();) |
Bununla birlikte, belirli boyutların görevi onun cevabından etkilenmez (daha sonra konuşacağız). Her bir rakam, bir çift koordinat kullanılarak yerleştirilmiş bir nokta olarak tanımlandığından, noktanın koordinatlarındaki değişiklik, oluşturulan rakamı etkileyecektir. Örneğin, bir sonraki şekil, Polygon () işlevi kullanılarak oluşturulabilecek bir altıgen gösterir. Şekil altı puandan oluşur. Turuncu noktaların yatay koordinatının değiştirilmesi nihai rakamı değiştirir ve ayrıca, şeklin uygulandığı herhangi bir öğenin içine / dışındaki içeriğin yerleştirilmesini de etkileyecektir.
Eğer eleman yüzer ve sağ kenara eşitse, bir rakam uygulanır, soldaki içerik, poligon () işlevinin içindeki turuncu nokta koordinatlarından biri değiştirildiğinde konumunu değiştirir..
Referans blok şekli
CSS rakamları, rakamın çizildiği referans bloğu (referans kutusu) içinde tanımlanır ve oluşturulur. Elemanın yüksekliğine ve genişliğine ek olarak, elemanın blok modelinin bileşenleri - Marj kutusunun, içerik kutusunun, dolgu kutusu ve sınır kutusunun bileşenleri de, elemanın rakamını belirlemek için dizinlerdir.
Varsayılan olarak, harici geri dönüş birimi (marj kutusu) referans olarak kullanılır, bu nedenle, şekle uyguladığınız eleman zaten aşağıdaki harici bir girintiye sahipse, rakam dış dönüşün kenarında bitecektir. sınır. Bir blok modelinin diğer bazı değerlerini kullanmak istiyorsanız, bunları, şeklin özelliğini geçtiğiniz şeklin özelliğini belirleyebilirsiniz:
Şekil-dış: daire (% 50% 50'de 250px) dolgu kutusu;
Şekil - Dışında: Daire (% 50% 50'de 250px) Dolgu - Kutu; |
Bu kuraldaki padding kutusu anahtar sözcüğü, rakamın uygulanmasını ve dolgu kutusu formundaki kısıtlamayı belirler (dahili kibir alanı). Circle () işlevi, daireyi, boyutunu ve maddeye göre yerleştirilmesini belirler.
Figürlerin kullanıldığı rakamların tanımı
Kullanıcı profilinin veya geri çağrıya gelince, kullanıcının avatarının dairesel görüntüsünün bilgi metniyle başa çıkacağımız gerçeğiyle başlayacağız.
CSS şekillerini kullanarak, kullanıcı görüntüsünün etrafındaki metin, dikdörtgen bir şekilde tasarruf etmek yerine aerodinize edilir..
Aşağıdaki işaretlemeyi kullanarak profil görüntüsüne yuvarlak bir şekil uygulamak için Circle () işlevini kullanacağız:
Lorem Ipsum Dolor Sit Amet, ConserTetur Adipising Elit. Harum Itaque Nam Banditis Evenyiet Enim Eligendi Quae Adipisci?
Assumenda Blanditiis Voluptaş Tempore Porro Quibusdam Beatae Deleniti Quod Asferiores Sapiente Dolorem Hatası! Quo Nam Quasi Soluta Reprehenderit Laudantium Optio IPSAM DUCIMUS Sonuçta Enim Fuga Quibusdam Mollitia Nesciunt Modi.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d "(! Lang: Profil resmi" / > !}< p > Lorem Ipsum Dolor Sit Amet, ConserTetur Adipising Elit. Harum Itaque Nam Banditis Evenyiet Enim Eligendi Quae Adipisci?< / p > < p > Assumenda Blanditiis Voluptaş Tempore Porro Quibusdam Beatae Deleniti Quod Asferiores Sapiente Dolorem Hatası! Quo Nam Quasi Soluta Reprehenderit Laudantium Optio IPSAM DUCIMUS Sonuçta Enim Fuga Quibusdam Mollitia Nesciunt Modi.< / p > |
Söyle olabilir: "Neden resimleri yuvarlama için sınır yarıçapını kullanamıyoruz?" Cevap: Sınır Yarıçapı özelliği, uygulandığı öğenin içindeki ve dışındaki içeriğin yerini etkilemez. Sadece öğenin veya arka planın sınırlarını etkiler. Arka plan yuvarlatılmış köşelerde kesilir. Elemanın içindeki içerik dikdörtgen kalacaktır ve elemanın dışındaki içerik de, eleman dikdörtgen kalmış gibi davranacaktır.
Yuvarlak görüntüyü yapmak için Sınır Radius özelliğini kullanacağız - işte sayfadaki resimleri veya diğer öğeleri yuvarlamak için yaptığımız şeyler:
img (şamandıra: sol; genişlik: 150px; yükseklik: 150px; sınır - yarıçapı:% 50; marj - sağ: 15px;) |
CSS rakamları olmadan, metin bir resim bir kare olarak görür ve kare rakamı bağlar ve yuvarlak değil.
CSS şekillerini desteklemeyen tarayıcıda, yuvarlak görüntünün etrafındaki içeriğin yuvarlak olmadığı gibi yerleştirilecektir. Eski tarayıcılarda böyle görünecek budur. İçeriğin belirli bir rakamın etrafında düzenini değiştirmek için, şeklin özelliklerini kullanın.
İmg (şamandıra: sol; genişlik: 150px; yükseklik: 150px; kenarlık-yarıçapı:% 50; şekil-dış: daire (); şekil marjı: 15px;)
iMG (Float: Sol; Genişlik: 150px; Yükseklik: 150px; Sınır - Yarıçapı:% 50; Şekil - Dış: Daire (); Şekil - Marj: 15px;) |
Bu kodun yardımıyla, metin, görüntüye uygulanan yuvarlak rakamın "görebileceği" ve ilk ekran SCHOT'ta gösterildiği gibi yazdırır. (Sonuç olarak bakabilirsiniz.) Rakamları desteklemeyen tarayıcılarda, ikinci resimde gösterilen gibi görünecektir.
Circle () işlevini kullanabilirsiniz. saf formu Veya parametreleri kendisine iletin. İşte resmi sözdizimi:
daire () \u003d daire ([[
Soru işaretleri, bu parametrelerin isteğe bağlı olduğunu ve kaçırılabileceğini göstermektedir. Özlediğiniz parametreler varsayılan değerler alacaktır. Daire () olduğu gibi (), konumun doğrudan gösterimi yerine, varsayılan olarak, dairenin merkezi, uyguladığınız öğenin ortasında olacaktır.
Herhangi bir uzunluk uzunluğu (PX, EM, PT vb.) Bir daire yarıçapını ayarlayabilirsiniz. Ayrıca, en yakın tarafı veya en uzak tarafını kullanarak parametreleri kullanarak yarıçapı da ayarlayabilirsiniz, ancak en yakın taraf varsayılan değerdir Tarayıcının, elemanın ortasından en yakın tarafa kadar yarıçap mesafesini üstleneceği anlamına gelir, en uzak tarafın merkezden uzak tarafa mesafeyi kullanır.
Şekil-dış: daire (en uzak taraf% 25% 25); / * Yarıçili, yarıçapı, koordinat sisteminde% 25% 25 ile yerleştirilen en uzun tarafın yarısına eşit olan daireyi belirler * / şekilsiz: daire (500px 300px'de 250px); / * Merkezi 500px yatay olarak ve 300 piksel olarak dikey olarak, 250px'lik bir yarıçaplı olan daireyi belirler.
Elips () fonksiyonu, yarıçap parametresi yerine, aynı değer grubuna sahip olan daire (), ayrıca iki tane alır: eksen boyunca bir tane, diğeri - eksis-y.
elipse () \u003d elipse ([[[
İnset () işlevi doğrudan bir daire veya elips ile ilişkili değildir, elemanın içindeki dikdörtgen şekiller oluşturmak için kullanılır. Öğeler hem dikdörtgen olduğu için, dikdörtgenler oluşturmak için gerekli değildir. Bunun yerine, iç () yuvarlatılmış köşelerle dikdörtgenler oluşturmamıza yardımcı olabilir, böylece içerik yuvarlatılmış köşeleri aşağı doğru akar.
İnset () işlevi, referans ünitesinin kenarlarına göre ofseti belirleyen, elemanın içindeki dikdörtgenin yerini belirleyen birden dörtlük ofset parametresinden alır. Yuvarlak köşeler, dört değerden birini kullanarak, tur raund ile birlikte, dört değerden birini kullanarak tam olarak aynı şekilde gösterilir.
İnset () \u003d inset (ofset (1,4)?)
İnset () \u003d inset (ofset (1, 4) [yuvarlak< border - radius > ] ? ) |
Aşağıdaki kod, yüzen bir eleman üzerinde yuvarlatılmış köşelerde bir dikdörtgen oluşturur.
Eleman (şamandıra: sol; genişlik: 250px; yükseklik: 150px; şekil-dış: inset (0px round 100px) kenarlık kutusu;)
Eleman (şamandıra: sol; genişlik: 250px; yükseklik: 150px; şekil - dış: iç (0px round 100px) sınır - kutu;) |
Şekillerin ikincisi özelliği, herhangi bir sayıda nokta kullanılarak daha karmaşık belirsiz rakamları tanımlayan çokgendir (). İşlev, her bir çiftin noktanın konumunu belirlerken bir dizi buhar koordinatını alır.
Aşağıdaki örnekte, yüzen görüntü sağ kenarda bulunur, ekranın tüm yüksekliğini işgal eder ve görünüm penceresinin görünümlerini kullanarak. Metnin görüntünün içindeki sol tırmanma kum saati'ne istiyoruz ve görüntü için standart olmayan rakamı belirlemek için çokgen () işlevini kullanıyoruz.
CSS Yukarıdaki görüntünün kodu aşağıdaki gibidir:
img.right (şamandıra: sağ; yükseklik: 100vh; genişlik: Calc (100vh + 100vh / 4); şekil-dış: çokgen (40% 0, 100% 0, 100% 100,% 40% 100% 45 %,% 45% 40);)
img. Sağ (şamandıra: sağ; yükseklik: 100vh; genişlik: Calc (100vh + 100Vh / 4); Şekil - Dışında: Poligon (% 40 0, 100% 0, 100% 100,% 40% 100%,% 45% 60, % 45% 40);) |
Figürü belirleyen noktaların koordinatlarını benim gibi uzunluk veya yüzde birimlerinde ayarlayabilirsiniz. Bu kod gerekli sonucu verecek, ancak gördüğünüz gibi, şeklin işlevi, görüntünün kalan bölümlerini belirtilen şekilde dışarıya etkilemez. Gerçek şu ki, şeklin fonksiyonunun elemana kullanılması - bir görüntü veya bir konteyner olsun ya da başka bir şey olup olmadığı - kolaylık içerik alanı dışındaki hiçbir şeyi etkilemez. Arka plan, sınırlar ve diğer her şey değişmeden kalacaktır.
Oluşturulan çokgenleri görsel olarak göndermek için, görüntünün parçalarını figürün dışına "düzeltmesi" gerekir. Bu, Bize CSS maskeleme modülü spesifikasyonundan bize yardımcı olacaktır.
Klips Path özelliği, şeklin aynı fonksiyonlarını ve şeklin mülkü olarak anlamını alır. Şekil dışı özellik için kullandığımız poligonal figürü verirsek, klibi yol özelliği, görüntünün bir kısmını figürün dışına doğru yapacaktır.
img.right (şamandıra: sağ; yükseklik: 100vh; genişlik: Calc (100vh + 100vh / 4); şekil-dış: çokgen (40% 0, 100% 0, 100% 100,% 40% 100% 45 %,% 45% 40); / * Şekilin Konturunda Kırpma Resimleri * / Klips Path: Poligon (40% 0, 100% 0, 100% 100%,% 40% 100,% 45% 60, 45 % 40);)
img. Sağ (şamandıra: sağ; yükseklik: 100vh; genişlik: Calc (100vh + 100Vh / 4); Şekil - Dışında: Poligon (% 40 0, 100% 0, 100% 100,% 40% 100%,% 45% 60, % 45% 40); / * Şekillerin konturunda süsleme resimleri * /klips - Yol: Çokgen (% 40 0, 100% 0, 100% 100%,% 40% 100,% 45% 60%,% 45% 40); ) |
Sonuç böyle görünüyor:
Klips Path özelliği hala öneklerle birlikte desteklenir, yani. Prefix -Webkit eklenmesiyle Chrome'da çalışacak. Demoya bakabilirsiniz.
Clip-Path özelliği, oluşturulan şekilleri ve kırpma parçaları şeklin dışındaki parçaları görsel olarak sunmaya yardımcı olduğu için, şeklin figürü için harika bir uydudur, böylece bunları birlikte kullanmak için çok sık kullanılacaksınız.
Poligon () işlevi de isteğe bağlı kabul eder anahtar kelime Sıfır olmayan veya evrenselodd olabilir. Poligon içindeki kesişen alanların nasıl davranacağını tanımlar. Ayrıntılar için SVG Dolum Kuralı özelliğine göz atın.
Bir resim kullanarak bir figürü tanımlama
Görüntüyü kullanarak rakamı ayarlamak için, ALPHA kanalı görüntüde, tarayıcının görüntüyü çıkaracağı görüntüde bulunmalıdır.
Şekil, alfa değeri belirli bir eşikten daha yüksek olan piksellerle belirlenir. Varsayılan eşik değeri Tamam (tamamen saydam) veya doğrudan şekil-görüntü eşik özelliklerini kullanarak belirleyebilirsiniz. Böylece, herhangi bir opak piksel, resim tarafından tanımlanan şeklin bir parçası olarak kullanılabilir.
Gelecekteki seviye CSS rakamları, Alfa kanalı yerine görüntü parlaklığı verilerinin kullanımına geçişe izin verebilir. Bu olursa, şekil-görüntü eşiği, anahtar durumuna bağlı olarak bir eşik veya parlaklık veya alfa kanalı için eklenecek şekilde genişletilecektir.
Eleman şeklini belirlemek için aşağıdaki görüntüyü kullanıyoruz ve metni zorlamak için zorla:
Tabii ki, eğer arka planı öğeye uyguladıysanız, arka planın belirtilen şeklin dışına çıkması gerekir. Maskeler modülünden Maske-Image özelliği (karşılık gelen ön eklerle) bu konuda yardımcı olabilir, çünkü klips yol özelliği, alfa kanalı değerini bir değer olarak kabul etmiyor. Sonuç böyle görünüyor:
Kompleks rakamlar oluşturursanız, resmi kullanarak şekle ayarlamak için uygun olabilirsiniz. Bu, noktaları manuel olarak ayarlamak yerine Photoshop'ta alfa görüntü kanalının kullanılmasına izin verecektir.
Ayrıca, birçok yüzer elemanınız olduğunda veya elemanın içindeki istisnalar varken, şeklin işlevi yerine görüntüyü kullanmak için uygun olacaksınız. şu an Birkaç figürü bir elemana ilan etme imkanı yoktur. Ancak görüntü birkaç alan içeriyorsa, tarayıcı bu alanları kaldırır ve kullanır.
CSS Rakamları Duyarlı Tasarımda
CSS rakamları duyarlı bir tasarım için mi geliyor? Şekli dış mekan için geçerli şartname bu anı içerir, çünkü elemanın boyutunu veya yüzde boyutunu veya uzunluk birimlerini ayarlamanıza izin verir ve şekli tanımlayan noktalar (Şekil işlevinin parametreleri) de belirtilebilir. yüzde olarak. Bu, belirli bir şekil dışına olan bir elemanın, yüzde belirtilen boyutlara sahip herhangi bir yüzer elemanın yanı sıra tamamen duyarlı olabileceği anlamına gelir.
Şekli içindeki özelliği henüz duyarlı değil, ancak bir seviye 2 modülüne kaydırıldığı içindir. Mevcut kısıtlamalarının çoğu bir sonraki seviyeye geçecektir.
Rakamlar oluşturma araçları
Fonksiyonları kullanan karmaşık şekillerin oluşturulması, özellikle çokgen () kullanılarak çok sayıda nokta ve koordinat içeren bir rakam oluşturursanız, zaman alıcı bir görev olabilir. Neyse ki, Web Platformu Adobe ekibi, bu süreci çok daha kolay hale getirmek için etkileşimli araçların üretimi üzerinde çalışıyor. Bear Travis, görsel olarak poligonal rakamlar yaratmamızı sağlayan rakamlar oluşturmak için bir araç koleksiyonu yarattı. Araç, şeklin işlevini oluşturur. Yararlı olabilir, ancak belirli bir görüntüye dayalı bir rakam oluşturursanız, alet böyle bir fırsat sağlamaz.
Adobe Web Platformu tarafından daha gelişmiş ve etkileşimli bir araç geliştirilmiştir. Araç yakın zamanda braketlerin ücretsiz editörü için bir uzantı olarak serbest bırakıldı. Tarayıcıdaki şekilleri görselleştirmenize ve düzenlemenizi sağlar ve sayfada değiştirdiğinizde stil tablosundaki şeklin değerlerini güncelleyen çevrimiçi önizleme yeteneğine sahiptir. Anında görsel verir geri bildirim Değişiklikleriniz, rakamların sayfadaki diğer öğelerle nasıl etkileşime girdiğini görmenizi sağlar.
Parantez içindeki önizleme modunu kullanarak tarayıcıda bir poligonal rakamı düzenleme. Ekran Girişi Yapılan Razvan Caliman.
Bu araç, şekillerin oluşturulmasını, düzenlenmesini ve çarpışmasını kolaylaştırdığı için vazgeçilmez hale gelecektir. Şekil düzenleyicinin parantez içinde nasıl aranacağını ve kullanmaya başlamayı açıklayan Razvan Caliman.
Gelecek: CSS İstisnaları
Rakamların CSS özellikleri, CSS rakamlarına ve istisnalarına adanmış bir spesifikasyondur, ancak bölünmüştür. CSS şekil, şekil-iç ve şekil dış özelliklerini belirlerken, İstisna CSS, örneğin mutlak konumlandırmaya sahip olan, içeriğin yüzen olmayan elemanları bulunmasına neden olan özellikleri tanımlar. Aşağıdaki resimde gösterildiği gibi, tüm figürü, farklı taraflardan gelen içerikle güçlendirmeyi mümkün kılar.
Gelecekte, CSS istisnaları, içeriğin dergi dönüşünde gösterildiği gibi bir kesim olarak böyle bir rakamı açığa çıkarmasına izin verecektir. Bakır ayrıca yuvarlak olabilir ve metin de dokunacaktır..
Yeni rakam seviyesi
Rakamların mevcut CSS özellikleri sadece ilk adımdır. Yakında, yeni fırsatlar bize daha fazla kontrol verecek. İçeriği oluşturmak ve güçlendirmek için gereklidir, bu nedenle sadece birkaç kod satırı yardımı ile yaşayan bir tasarımdaki düzenleri açmamız daha kolay olacaktır. Bugüne kadar, şartname editörleri, şekil-dışın tamamlanmasına odaklanır ve CSS rakamlarının desteğini görebilirsiniz. büyük miktar 2014 yılı sonuna kadar tarayıcılar.
Bugün rakamları, destekleyici olmayan tarayıcılarda kabul edilebilir bir replasman olduğunu bilerek ilerici geliştirme stratejisinin bir parçası olarak kullanabilirsiniz. Son zamanlarda onları web siteme uygulamaya başladım ve değiştirme oldukça kabul edilebilir görünüyor. Daha karmaşık bir tasarım için, tarayıcının desteğini doğrulamak için bir komut dosyası kullanabilirsiniz ve destek yoksa herhangi bir değiştirme sağlayabilirsiniz. Şekli dış mekanın korunmadığını kontrol etmek için bu komut dosyasını kullanarak modernizr testlerini de kullanabilirsiniz veya bu testi içeren kendi montajınızı indirebilirsiniz.
CSS rakamları, baskı ve web tasarımı arasında başka bir köprü oluşturmamızı sağlar. Bu makaledeki örnekler basittir, ancak ekranda yeniden yapıp yapamayacağınız konusunda endişelenmeden, bir dergi veya poster ile karşılaştırılarak bir tasarım yaratmanın temelini vermelidirler. Böylece okudunuz - dikdörtgen olmayan işaretlerden rakamların animasyonuna - şimdi deneylerin zamanı.
Vlad Merzehevich
Sitelerde, üçgenler herkese uygulanır ve tasarım öğelerinin bir parçası olarak, örneğin, okuyucunun dikkatini doğru yere yönlendiren bir işaretçi olarak hizmet vermektedir. Ayrıca, üçgenler dekoratif fonksiyonlar, kullandıkları bloklar, daha zarif ve modern hale getirir. İncirde. 1, tasarımda bir üçgen kullanmanın bir örneğini göstermektedir.
İncir. 1. Web Tasarımında Üçgenler
Doğrudan üçgen yapmak cSS Araçları İmkansız, bu yüzden iki yöntem sınır ve dönüşüm için eklemenizi sağlar.
Sınır kullanarak.
Sınır özelliği yoluyla yaratılan sınırlar doğrudan üçgenlerle ilgili olmasa da, bu kadar sık \u200b\u200bkullanılacak sınırdır. Eğer elemanın sıfır genişliğini ve yüksekliğini ayarlarsanız, yeterince kalın bir sınır oluşturursanız, dört üçgen bir dizi göreceğiz (Şek. 2). Netlik için, her taraftaki sınırlar farklı renkler ayarlanır.
İncir. 2. Öğeye sınır eklemek
Sadece istenen sınırı bırakarak ve gerisini şeffaf yaparak, istenen rengin üçgenini alırız (Şekil 3).
İncir. 3. Şeffaf Kenarlıkları olan Öğe
Örnek 1, bir psödo elemanı ile bloğa bir üçgenin eklenmesini gösterir.
Örnek 1. Üçgenle Blok
Kesinlikle konumlandırılmış elemanlar için, sıfır genişlik ve yükseklik gerekli değildir.
Sınırların birleşimi nedeniyle, daha önce belirtilenlerle birlikte, bize sekiz seçenek verdiği dört daha fazla üçgen türü elde edebilirsiniz. Görünüşleri ve gerekli kod tabloda gösterilir. bir.
| Görünüm | Stil |
|---|---|
| sınır: 20px katı şeffaf; Sınır üstü: 20px katı yeşil; | |
| sınır: 20px katı şeffaf; Kenarlık sağ: 20px katı yeşil; | |
| sınır: 20px katı şeffaf; Sınır alt: 20px katı yeşil; | |
| sınır: 20px katı şeffaf; Sınır-sol: 20px katı yeşil; | |
| sınır: 20px katı şeffaf; Sınır üstü: 20px katı yeşil; Kenarlık sağ: 20px katı yeşil; | |
| sınır: 20px katı şeffaf; Kenarlık sağ: 20px katı yeşil; Sınır alt: 20px katı yeşil; | |
| sınır: 20px katı şeffaf; Sınır alt: 20px katı yeşil; Sınır-sol: 20px katı yeşil; | |
| sınır: 20px katı şeffaf; Sınır-sol: 20px katı yeşil; Sınır üstü: 20px katı yeşil; |
Tablodan, görünmez sınırların bir yer kaplaması, öğeler konumlandırıldığında olduğunu düşünebilir. Stil, ayrıca, sıfır genişlik ve yükseklik eklemek veya Örnek 1'de yapıldığı gibi konum özelliğini kullanmanız gerekir.
Sınırların farklı kalınlığını belirlerseniz, üçgen başka bir formla yapılabilir. Böylece, Şekil l'de gösterilen bir blok oluşturma kodu. 4 Örnek 2'de verilmiştir.
İncir. 4. Akut üçgen
Örnek 2. Keskin bir üçgen
Sınırla, Şekil l'de gösterilen bir çerçeve oluşturmak için katı renkli üçgenler elde ediyoruz. 5 Cunning'e devam etmeli ve diğerinin üstüne biraz yer değiştirerek bir eleman uygulayın. Yine, psödo elemanları bize yardımcı olacak: önce ve: sonra (Örnek 3).
İncir. 5. Köşeli Çerçeve
Örnek 3. Yerleşim Üçgenleri
Bir tek elemanı diğerinin üstüne uyguladığımız gerçeğinden dolayı, bu yöntem sadece monoton dolgu için uygundur ve gradyanlar veya arka plan resimleri için uygun değildir.
Dönüşümün Kullanımı
Dönüşüm yardımı ile, kare elemanı 45 ° döndürebilir ve ondan bir eşkenar rhombus edelim. Bu, böyle bir üçgen değildir, bu yüzden çıkıntılı parçayı bize bırakmamız gerekiyor ve başka bir elementten sonra gizlenmeyi bırakmamız gerekiyor (Örnek 4).
Örnek 3. Dönüşüm
Bu örneğin sonucu Şekil 2'de gösterilmiştir. 6.
İncir. 6. Gölge ile Üçgen
Çevrimiçi CSS3 jeneratörü dik grafik efektleri oluşturmak ve CSS kodunu elde etmek için. Farklı durumlar için stilleri ayrı ayrı değiştirebilirsiniz: Hover ,: Active, vb. Elleriniz, karmaşık gölgeler, gradyanlar, 3B efektler, metinle etkiler ve çok daha fazlasını oluşturmak için bir arayüz alır. Projenin, gelişiminize başlayabileceğiniz kendi galeri etkileri vardır. Projenin ayırt edici bir özelliği, stilleri alabilmenizdir. ayrı elemanÖrneğin, bir gölge veya gradyan için.
Siteye ilk girdiğinizde, giriş alanı için boşluk, düğmeler, blok veya proje galerisinden hazır bir kalıbı seçmemize bize sunuyoruz. Örneğin, geometrik figürler galerisinden basit bir şeyle başlayalım. Galeri işaretinden seçim yapın ve Yin-Yang'ı seçin ve sağ üst köşedeki "Kodu Al" i tıklayın:
Mevcut geliştirme için hazır CSS gösterilecek hTML örneği Kod. Proje Galerisi, çeşitli CSS rakamları için 20'den fazla boşluğa sahip ve elbette, kendinizinkini yaratabilirsiniz.
Galerinin Bölümüne Göre Düğmeleri Görüyoruz, metin Alanları, Doğrudan metin için etkiler, yukarıda belirtilen figürler ve degradeler kümeleri. Metnin etkileriyle oynuyoruz:
site - WOW BT 3D!
Oluşturulan CSS'nin şaşırtıcı derecede çok temiz ve okunabilir olduğunu fark etmelidir. Bir tür sevimli düğmeye bakalım:
site Cool Düğmesi.
Ek özellikler yerel masacül tarayıcısında durumunuzu kaydetme içerir. Sekmeyi yanlışlıkla kapattıysanız, bir sonraki siteye gittiğinizde tüm değişiklikleriniz sizinle birlikte kalacaktır.
Standart olmayan yazı tiplerini kullanırken Google yazı tipleri. Enjoyss, onları otomatik olarak HTML örneği olarak ekler. Benim durumumda, metin ve düğmeler için böyle görünüyor:
Son CSS oldukça hacimli, bu yüzden sadece makalenin sonunda getirdim:
Yin Yang (
Şamandıra: Sol;
Genişlik: 96px;
Yükseklik: 48px;
Konum: Göreceli;
Sınır: 2px katı # F81;
Sınır alt genişliği: 50px;
-Webkit-Sınır-yarıçapı:% 100;
Sınır-yarıçap:% 100;
Renk: RGBA (0,0,1);
-O-metin taşması: klip;
Metin taşması: Klip;
-Webkit-Transform: Rotatez (-45Deg) SCALEX (1) SCALYY (1) SCALYZ (1);
Dönüştür: Rotatez (-45deg) Scalex (1) ScaleY (1) Scalez (1);
Dönüşüm kökenli:% 50% 50 0;
Yin-yang :: önce (
Genişlik: 12px;
Yükseklik: 12px;
Konum: Mutlak;
İçerik: "";
Üst:% 50;
Sol: 0;
Sınır: 18px katı # F81;
-Webkit-Sınır-yarıçapı:% 100;
Sınır-yarıçap:% 100;
Yazı Tipi: Normal normal normal% 100 / normal Arial, Helvetica, Sans-Serif;
Renk: RGBA (0,0,1);
-O-metin taşması: klip;
Metin taşması: Klip;
Arka plan: RGBA (255,255,255,1);
Metin gölge: Yok;
-Webkit-transform kökenli:% 50% 50 0;
Dönüşüm kökenli:% 50% 50 0;
}
Yin-yang :: Sonra (
Genişlik: 12px;
Yükseklik: 12px;
Konum: Mutlak;
İçerik: "";
Üst:% 50;
Sol:% 50;
Sınır: 18px katı RGBA (255,255,25,1);
-Webkit-Sınır-yarıçapı:% 100;
Sınır-yarıçap:% 100;
Yazı Tipi: Normal normal normal% 100 / normal Arial, Helvetica, Sans-Serif;
Renk: RGBA (0,0,1);
-O-metin taşması: klip;
Metin taşması: Klip;
Arka plan: # F81;
Metin gölge: Yok;
-Webkit-Transform: Scalex (1) ScaleY (1) Scalez (1);
Dönüştür: SCALEX (1) SCALY (1) SCALYZ (1);
-Webkit-transform kökenli:% 50% 50 0;
Dönüşüm kökenli:% 50% 50 0;
}
Enjoy-CSS-3DText (
İmleç: İşaretçi;
Sınır: Yok;
Yazı Tipi: Normal normal normal 72px / normal "Passero One", Helvetica, Sans-Serif;
Renk: RGBA (255,255,255,1);
Metin Hizası: Merkez;
-O-metin taşması: klip;
Metin taşması: Klip;
Metin gölge: 0 1px 0 RGB (204.204444), 0 2PX 0 RGB (201,201,201), 0 3PX 0 RGB (187,187,187), 0 4PX 0 RGB (185,185,185), 0 5 Px 0 RGB (170,170,170), 0 6 piksel 1px rgba (0 0.0,0,0980392), 0 0 5px RGBA (0,0,0,0,0,0980392), 0 1px 3px RGBA (0,0,0,0,298039), 0 3px 5px RGBA (0,0,0,0, 0,2), 0 5px 10px RGBA (0.0.0.0.247059), 0 10px 10px RGBA (0.0.0.0.2), 0 20PX 20PX RGBA (0.0.0.0.14902);
-Webkit-Geçiş: Tüm 300ms Kübik-Bezier (0.42, 0, 0.58, 1);
-Moz-Geçiş: Tüm 300ms Kübik-Bezier (0.42, 0, 0.58, 1);
-O-geçiş: Tüm 300ms Kübik-Bezier (0.42, 0, 0.58, 1);
Geçiş: Tüm 300ms Kübik-Bezier (0.42, 0, 0.58, 1);
-Webkit-Transform: Scalex (1) ScaleY (1) Scalez (1);
Dönüştür: SCALEX (1) SCALY (1) SCALYZ (1);
-Webkit-transform kökenli:% 50% 50 0;
Dönüşüm kökenli:% 50% 50 0;
}
Enjoy-CSS-3DText: Hover (
Renk: RGBA (169,214,169,1);
Metin gölge: 0 1px 0 RGBA (255,255,25,1,1), 0 2px 0 RGBA (255,255,25,1,1), 0 3PX 0 RGBA (255,255,25,1,1,25,2,25 , 2,1,25,25,25,1,2,1,25,1), 0 5px 0 RGBA (255,255,255, 1), 0 6PX 1PX RGBA (0,0,0,0,0980392), 0 0 5px RGBA (0,0,0,0,0980392), 0 1px 3px RGBA (0,0,0,0,0,0,98039), 0 3px 5px RGBA (0,0,0,0,0,2), 0 - 5px 10px RGBA (0,0,0,0,247059), 0 -7px 10px RGBA (0,0,0,0,0,0.2), 0 -15PX 20PX RGBA (0.0, 0.0.14902);
-WebKit-Geçiş: Tüm 200ms Kübik-Bezier (0.42, 0, 0.58, 1) 10ms;
-Moz-Geçiş: Tüm 200ms Kübik-Bezier (0.42, 0, 0.58, 1) 10ms;
-O-geçiş: Tüm 200ms Kübik-Bezier (0.42, 0, 0.58, 1) 10ms;
Geçiş: Tüm 200ms Cubic-Bezier (0.42, 0, 0.58, 1) 10ms;
}
Geribildirim-düğme (
Ekran: satır içi blok;
Şamandıra: Sol;
Konum: Göreceli;
İmleç: İşaretçi;
Marj: 0 2% 0 0;
Dolgu: 12px 22px;
Taşma: Gizli;
Sınır: Yok;
Yazı Tipi: Normal normal kalın 1.6EM / normal "senkoplama", Helvetica, Sans-serif;
Renk: # ECF0F1;
-O-metin taşması: klip;
Metin taşması: Klip;
-Webkit-
Arkaplan Kökeni: Dolgu kutusu;
Background-Click: Sınır Kutusu;
Arka Plan Boyutu: Otomatik Otomatik;
-WebKit-Box-Gölge: 0 10px 0 0 RGBA (178,49,49,1);
Kutu gölgesi: 0 10px 0 0 RGBA (178,49,49,1);
Metin gölge: 0 0 0 0 0 0 RGB (196,80,78), 1px 1px 0 RGB (196,80,78), 2px 2px 0 RGB (196,80,78), 3PX 3PX 0 RGB (196,80,78 ), 4px 4px 0 RGB (196,80,78), 5 piksel 5px 0 RGB (196,80,78), 6 piksel 6 piksel 0 RGB (196,80,78), 7 piksel 7 piksel 0 RGB (196,80,78), 8PX 8PX 0 RGB (196,80,78), 9px 9 piksel 0 RGB (196,80,78), 10 piksel 10 piksel 0 RGB (196,80,78), 11px 11px 0 RGB (196,80,78), 12px 12px 0 RGB (196,80,78), 13px 13PX 0 RGB (196,80,78), 14 piksel 14 piksel 0 RGB (196,80,78), 15 piksel 15 piksel 0 RGB (196,80,78), 16 piksel 16 piksel 0 RGB (196,80,78), 17px 17px 0 RGB (196,80,78), 18px 18px 0 RGB (196,80,78), 19PX 19PX 0 RGB (196,80,78), 20 px 20 piksel 0 RGB (196 80,78), 21px 21px 0 RGB (196,80,78), 22px 22px 0 RGB (196,80,78), 23 piksel 23 piksel 0 RGB (196,80,78), 24 piksel 24 piksel 0 RGB (196.80, 78) , 25px 25px 0 RGB (196,80,78), 26px 26px 0 RGB (196,80,78), 27px 27px 0 RGB (196,80,78), 28px 28px 0 RGB (196,80,78), 29px 29px 0 RGB (196.80.78), 30px 30px 0 RGB (196,80,78), 31PX 31PX 0 RGB (196,80,78), 32PX 32PX 0 RGB (196,80,78), 33 piksel 33 piksel 0 RGB ( 196,80,78), 34PX 34PX 0 RGB (196,80,78) ), 35PX 35PX 0 RGB (196,80,78), 36PX 36PX 0 RGB (196,80,78), 37PX 37PX 0 RGB (196,80,78), 38 piksel 38 piksel 0 RGB (196,80,78), 39PX 39PX 0 RGB (196,80,78), 40 piksel 40 piksel 0 RGB (196,80,78), 41px 41PX 0 RGB (196,80,78), 42px 42PX 0 RGB (196,80,78), 43px 43px 0 RGB (196,80,78), 44PX 44PX 0 RGB (196,80,78), 45 piksel 45 piksel 0 RGB (196,80,78), 46 piksel 46PX 0 RGB (196,80,78), 47PX 47PX 0 RGB (196.80.78), 48px 48PX 0 RGB (196,80,78), 1px 1px 0 RGBA (196.80,78,0,980392), 2px 2px 0 RGBA (196.80,78,0,0,960784), 3px 3px 0 RGBA (196.80,78,0.941176), 4px 4px 0 RGBA (196.80,78.0.921569), 5 piksel 5 piksel 0 RGBA (196.80,78,0,0,901961), 6px 6 piksel 0 RGBA (196.80.78 0.882353), 7 px 7 px 0 RGBA (196.80.78.0.862745), 8PX 8PX 0 RGBA (196.80,78,78,78,43137), 9 px 9 piksel 0 RGBA (196.80,78,0,0,819608), 10 px 10 piksel 0 RGBA (196.80,78, 0.8), 11px 11px 0 RGBA (196.80,78,0,780392), 12px 12px 0 RGBA (196.80,78,78,760784), 13px 13px 0 RGBA (196,80,78,0,0,0,0, 0,0,741,11,80,78,0,0,064,1176), 14 piksel 14 piksel 0 RGBA (196.80,78,0,721569), 15 piksel 15 piksel 0 RGBA (196.80,78,0,701961), 16px 16 piksel 0 RGBA ( 196,80,78.0 .682353), 17px 17px 0 RGBA (196,80,78,0,0658824), 18px 18 piksel 0 RGBA (196,80,78,0,0639216), 19 px 19 px 0 RGBA (196,80,78,0,0619608 ), 20px 20px 0 RGBA (196,80,78,0.6), 21px 21PX 0 RGBA (196.80,78,0,0,580392), 22px 22px 0 RGBA (196.80,78,0,78,0784), 23 piksel 23 piksel 0 RGBA (196.80,78,0,0,541176), 24 piksel 24 piksel 0 RGBA (196.80,78,0,521569), 25 piksel 25 piksel 0 RGBA (196.80,78.0498039), 26 piksel 26 piksel 0 RGBA (196.80,78,0478431), 27px 27px 0 RGBA (196, 80,78.0.458824), 28px 28px 0 RGBA (196.80,78,0,939216), 29px 29 px 0 RGBA (196.80,78.0. 419608), 30px 30px 0 RGBA (196.80,78,0.4), 31PX 31PX 0 RGBA (196,80,78.0.380392), 32PX 32PX 0 RGBA (196.80,78.0360784), 33 piksel 33 piksel 0 RGBA (196,80, 78.0.341176), 34PX 34PX 0 RGBA (196,80,78.0317647), 35 piksel 35 piksel 0 RGBA (196.80,78,0,98039), 36 piksel 36 piksel 0 RGBA (196.80,78,0,278431) 37 px 37 px 0 RGBA (196.80,78.0.258824), 38 piksel 38 piksel 0 RGBA (196,80,78,0.239216), 39PX 39PX 0 RGBA (196.80,78,0.219608), 40 piksel 40 piksel 0 RGBA (196, 80,78,0.2), 41px 41px 0 RGBA (196.80,78,0,080392), 42PX 42PX 0 RGBA (196,80,78,0.156863), 43px 43px 0 RGBA (196.80,78,0,7255), 44 piksel 44PX 0 RGBA (196,80,78 , 017647), 45px 45px 0 RGBA (196.80,78,0,980392), 46PX 46PX 0 RGBA (196.80,78,0784314), 47px 47PX 0 RGBA (196.80, 78.0788235), 48 px 48 px 0 RGBA (196.80,78 , 0,792157), 50px 50px 0 RGBA (196,80,78.0);
-Webkit-Transform: Scalex (1) ScaleY (1) Scalez (1);
Dönüştür: SCALEX (1) SCALY (1) SCALYZ (1);
-Webkit-transform kökenli:% 50% 50 0;
Dönüşüm kökenli:% 50% 50 0;
}
Geribildirim-Düğme: Hover (
Metin Hizası: Merkez;
Arka plan: -Webkit-linear gradyan (-90deg, # CE6161 0, # EF6664% 100);
Arka plan: -Moz-linear gradyan (180deg, # C6161 0, # EF6664% 100);
Arka plan: Doğrusal gradyan (180deg, # C6161 0, # EF6664% 100);
Arka plan-pozisyon:% 50% 50;
Arkaplan Kökeni: Dolgu kutusu;
-WebKit-Background-Click: Sınır Kutusu;
Background-Click: Sınır Kutusu;
-Webkit-arka plan boyutu: Otomatik Otomatik;
Arka Plan Boyutu: Otomatik Otomatik;
}
Geribildirim-Düğme: Aktif (
Üst: 5px;
Arka plan: -Webkit-linear gradyan (-90deg, # ff8583 0, # ff5350 100%);
Arka plan: -Moz-linear gradyan (180deg, # ff8583 0, # ff5350% 100);
Arka plan: Doğrusal gradyan (180deg, # ff8583 0, # FF5350 100%);
Arka plan-pozisyon:% 50% 50;
-Webkit-arka plan kökenli: Dolgu kutusu;
Arkaplan Kökeni: Dolgu kutusu;
-WebKit-Background-Click: Sınır Kutusu;
Background-Click: Sınır Kutusu;
-Webkit-arka plan boyutu: Otomatik Otomatik;
Arka Plan Boyutu: Otomatik Otomatik;
-WebKit-Box-Gölge: 0 5px 0 0 RGBA (178,49,49,1);
Kutu gölgesi: 0 5px 0 0 RGBA (178,49,49,1);
