ana / Kurulum ve kurulum / Denetimli HTML Hakkı. HTML Özel Semboller

İlham veren HTML Heyeti. HTML Özel Semboller

HTML belgesinin metninde, klavyede gördüğünüz tüm karakterleri uygulamaya izin verilir. Ancak, mantıklı. Her etiket bir sembolle başlarsa (<) и заканчивается символом (>), bu karakterlerin normal metin içinde belirtilemeyeceği oldukça mantıklıdır. Bu karakterler HTML belgelerinde özellikle önemlidir. Tarayıcı onları gördüğünde, bunun HTML etiketlerinin olduğunu düşünüyor ve bunları böyle yorumlamaya çalışıyor.
HTML belgesine girerek yasaklanmış sembol ekleme ile ilgili sorunu çözmek için, klavyeye girmek için yasaklanan karakterleri değiştiren bir dizi uzmanlar geliştirilir. Klavyenizde bulunmayan semboller de özel sembollerle değiştirilebilir. Her bir sekans (referans mnemonic), Amper ve (&) sembolü ile başlar ve bir noktalı virgülle (;). (&) İle () arasında () tanıtılabilir:

Özel sembolün adı (ve adı;);
‰ ()) işaretinden sonra girilen sayısal kod, yani özel sembolü kullanırken, sayısal kodunu belirleyerek aşağıdaki girişi kullanmanız gerekir: (& kod;);

Sayısal kod ondalık veya onaltılık formda gösterilebilir.
Örneğin, bir işareti daha az görüntülemek için (<) мы должны написать: < (Sembol Adı) veya Ve 60; (Ondalık sistemde sayısal kod) veya & x0003c; (onaltılık bir sistemdeki sayısal kod).

İnspetent boşluk

Ayrılmaz bir alanın ana atanması () (kırılmayan alandan) - Kelimeleri paylaşın, ancak bu yerde yeni bir dizgeye geçişi yasaklayın. Tarayıcı penceresinin boyutu tutarsız olduğundan, paragraftaki yeni bir dizgeye geçiş otomatik olarak. Aynı zamanda, tarayıcı bir boşluğun veya bir tire olduğu yerde dizeyi kıracaktır. Yazım kurallarına göre, parçalanamayan dil yapıları var. Örneğin, ayrılmaz bir alana sahip yapılar, atfedilebilir:

baş harfleriyle soyadlar;
Önceki kelimeyle uzun çizgi;
tek elemeli kelimeler ve ardından bir kelime;
sonraki ölçüm birimlerine sahip rakamlar.

Bu durumlarda, HTML kodunda genellikle yıkılmaz bir alan () kullanılır. Böyle bir boşluk her zamanki gibi görünecek, ancak bu, herhangi bir koşulun altında olduğu, bunun arasında olan kelimelerin aynı çizgide olacağını garanti eder.

15 m / s
100 km / s

Zaten bildiğiniz gibi, HTML'de, ardışık birkaç boşluk çalıştırılarak bir boşlukla değiştirilir. Metninde 10 boşluk yazarsanız, tarayıcı 9'larını kaldıracaktır. Metin içindeki gerçek boşluklar eklemek için, tartışılmaz bir alanı kullanabilirsiniz. () .

Tırnaklar.

Baskıda, üç tip tırnak vardır: çift açısal tırnak veya "Noel ağaçları" (""), tipografik alıntılar ("") ve el yazısı "ayak" (""). Yazılım kodlarıyla çalışırken, çift düz tırnak ("") ve tek doğrudan tırnak ("") kullanırsınız.
Rusça geleneğiyle, ana tırnak türü "Noel ağaçları". HTML'de "Herringbones" sembollerine karşılık gelir « ve » . Birçok yayında, "Noel ağaçları" yerine tipografik tırnak ve çift düz alıntılar da kullanılır.
Sol ve sağ tipografik alıntılar sembollere karşılık gelir. “ ve ” Buna göre, sol alt tırnaklar - „ .
Doğrudan Çift Tırnaklar Özel Fit " .

Alıntıların kullanımı Özel semboller aşağıdaki örnekte gösterilir:

Örnek: Alıntıların Kullanımı

Defisc ve çizgi.

Baskıda, birbiri üzerinde üç çok benzer işaret vardır: uzun çizgi, kısa çizgi ve tire. Bunlardan sadece bir bilgisayar klavyesinde var - bu bir tiredir. Genellikle tüm durumlarda, metinde kısa bir tire veya çizgi koymanız gerekir. Bununla birlikte, bu işaretlerin uygulanmasına ilişkin noktalama işaretleri için belirli kurallara uymak gerekir.
Böylece, tire (-) sadece kelimelerin içinde veya sayılar arasında geçerlidir. Teklifteki kelimeler arasına uzun bir çizgi (-) yerleştirilir ve bu kelimelerden boşluklarla ayrılır. Uzun çizgi bağlantı-mnemonic'e karşılık gelir — . Kısa bir çizgi (-) harfler arasında veya büyük harflerle yazılan kelimeler arasında, ayrıca matematiksel formüllerde "eksi" işareti olarak da kullanılır. Kısa çizgi ve kelimeler arasında boşluk bırakılmaz. Kısa çizgi bağlantı-mnemonic'e karşılık gelir - .

Tire ve Dash kullanımı aşağıdaki örnekte gösterilir:

Örnek: Özel Değirmenler - ve -

Kendin dene "

Vakit nakittir...

Web sayfası bir şey çok uzun sürüyor.
2-4 saniye içinde yüklenmelidir.
Vakit nakittir...

Bazı popüler html specials listesi

Sembol	Açıklama	Mnemonic adı	Sayısal kod
	İnspetent boşluk
<	daha az	<
>	daha fazla	>	>
&	ampersand	&	&
"	doğrudan Çift Teklifi	"	"
"	kefalet	"	"
«	sol çift açısal teklif	«	«
»	sağ Çift Açısal Teklif	»	»
‘	sol tek tırnak	‘	‘
’	sağ Tek Teklif	’	’
‚	alt tek aktar	‚	‚
“	sol çift kotala	“	“
”	doğru Çift Teklif	”	”
„	alt çift kotacı	„	„
€	euro.	€	€
	copywrites		©
®	barlix markasının işareti	®	®

Specialsams çeşitleri

Her zamanki klavyede, matematiksel, teknik, geometrik ve diğer özel özelliklerin çoğunluğunu bulamazsınız.
Bu tür karakterleri HTML sayfasında uygulamak için, ilgili Mnemonic adlarını kullanabilirsiniz.

Nihai örnekte, farklı kodlar kullanılarak aynı sembol görüntülenebileceği gibi görülebilir.

Artemia Lebedev.

Klavyede bir Chestochka, genellikle sıfır ve daha yüksek harflerden "S" ve "X" dir. Yayımlanmamış insanlar alternatif olarak tire, sonra bir eksi, sonra bir çizgi ararlar. Lebedev bize bunu açıklıyor dört (Çeşitli sembollerin iki çeşidi verdi). Aslında onların en az dokuzVe şimdi size bunu söyleyeceğim.

İlgili eksi (-), zaten çok iyi bilinmektedir: eksi matematiksel ifadelerde kullanılır, herhangi bir rakam, büyük harfin yüksekliğinde, çizgi ve tire aksine aynı genişliğe sahiptir ve HTML olarak yazılır - .

Bu yerde, herkes genellikle bir çizgi için hareket eder. Ama bekle, henüz üç karakteri yorumlamadık!

Telefon numarası kaydında hangi karakter kullanılıyor (555-41-72)? Defis, diyorsun; Ve işte değil! Bunun için ayrı bir sembol var: dijital göğüs (Şekil çizgi). Neredeyse eksi gibi (-) gibi görünüyor, ama eksi yok.

Sorabilirsiniz: Neden o zaman eksi kullanılamaz, çünkü aynı görünüyor? Çünkü eksi bir çıkarma işaretidir ve telefon numarasında hiçbir şey kesilmez. Aynı sebepten dolayı, ET'in metni vurgulamak için kullanılması gerektiği ve ben değilim. Bu açıklanamıyor, sadece bilinebilir.

Dijital Chestka, U + 2012 koduna sahiptir ve HTML'de - olarak kaydedilir.

HAKKINDA transfer sembolüYumuşak tire olarak da bilinir, çok fazla bilinir. HTML'ye göre gösterilen bu sembol - transfer yapılabileceği yerlerde heceler arasında kelimelerle ayarlanır. Ekranda, çizginin sonuna çarptığında durum dışında görüntülenmez; Bu durumda, tarayıcı (üçüncü sürümle birlikte, Firefox'un bile bunu yapmayı öğrendiği) kelimeye tamamen tolere etmez, ancak bir tire koyar ve kelimenin kalan kısmını aktarır.

Bu, özellikle ekranın sağ tarafında devasa boş boşluklar yaratan uzun kelimelerde yardımcı olur. Transfer sembolünün devasa bir dezavantajı, manuel olarak düzenlenmenin uygunsuz olmasıdır (ancak, otomatik yazdırma programları bununla başa çıkabilir) ve kullanımının kullandığı ve metnin kaynak kodunu (bu nedenle, transfer sembolü ise daha iyidir) Düzenleme, veritabanında depolanan metindeki nesil sahne HTML kodunda CMS tarafından yapılır).

Listelerin işaretçileri olarak kullanılan bir defisi benzeri sembol - CHANDOCHKA (⁃) ( göğüs tokası). Stüdyolarda, Lebedev, Rus tipografik geleneğinin bir atış gibi bir şey olmadığını (karelerle geleneksel kupaların aklında olması) bir şey olmadığını ve (uzun) bir işaretçi olarak kullanmayı teklif ettiklerini fark ettim. Gördüğünüz gibi, bunu kendi web sitelerinde (veya yaptıklarını) yaparlar ve hatta bunun nasıl yapılacağını söyleyen bir makale çıkardılar.

Aslında, liste işaretleri için, + 2043 koduna sahip özel bir sembol vardır (ancak, Lebedev, Rus tipografisine uygulanmadığını iddia eder). HTML'de liste için böyle bir işaretleyiciyi CSS kullanarak oldukça basittir:

UL (Liste Stili: İçeride Yok;) UL\u003e Li: Önce (İçerik: "\\ 2043"; Marj-Sol: -1ex; Marj-sağ: 1ex;)

(Tabii ki, verilen kod mükemmel değildir ve sadece doğru tarayıcılarda çalışacaktır, ancak fikir sizin için açıktır, umarım.)

Şimdi nihayet çizgiye gitebilirsin; Burada her şey zaten iyidir: arasındaki fark kısa lastik (-, çizgi, "n", -) harfi ile göğüs genişliği ve uzun lastik (-, EM Dash, "M" harfi ile göğüs genişliği, -). Rus tipografisinde, son derece uzun bir çizgi kullanıldığı bilinmektedir (olağanüstü, sayısal aralıklarda kısa bir çizgi kullanımı olasılığıyla ilgili anlaşmazlıklar yapılmakla birlikte), Batı'da, TR Dash genellikle tercih edilir.

Uzun çizgi de Rusça diyaloglarda kullanılır. Batı'da, ayrı bir sembol genellikle bu amaç için kullanılır. yatay çöp (―):

- JE M'ENNUIE SELEME, DIT-ELLE.
- Cela N'est Pas de Ma Faute, Rétorqua-T-Il.

Yani, dokuz farklı baca:

İşaret	Html	İsim vermek	Amaç ve kullanım
-	-	defisominus	teknik yeteneklerin yokluğunda diğer tüm yemekler yerine
‐	‐	tire	kelimenin parçalarının ayrılması için: "açık gri", "Bence", "ortak", vb.
−	−	eksi	matematiksel ifadeler: 2 - 3 \u003d -1
‒	‒	dijital göğüs	telefon numaraları ve diğer dijital kodlar
	-	transfer sembolü	(uzun) kelimelerde, transferi yapabileceğiniz yerlerde
⁃	⁃	göğüs tokası	liste işaretleyici
-	-	kısa lastik	batı tipografi
—	—	uzun lastik	rus tipografi
―	―	yatay özellik	diyaloglar (Batı tipografisinde)

Ve karşılaştırma için, bir satırda:
- ‐
−
‒

⁃
-
—

Merhaba, Sevgili Habradrug! Bu eğitimde, iki tür HTML5 formu oluşturmayı öğreneceğiz: giriş ve kayıt formu biçimi. Bu formlar birbirleriyle değişecektir. Pseudo sınıfı CSS3: Hedef. CSS3'ü ve yazı tipini simgelerle kullanacağız. Bu demo fikri, kullanıcıyı giriş formuna göstermek ve kayıt biçimine "geçiş" bir bağlantı sunmaktır.
Bu eğitimde, demo 1'deki gibi bir efekt nasıl oluşturulacağını söyleyeceğim.

Html

Burada birden fazla HTML5 teknik kullandık. Örneğin, öğe tür \u003d Şifre. Kullanıcının karakterleri yazdırdığı ve noktaları veya yıldız işaretleriyle değiştirdiği gerçeğini otomatik olarak gizler (tarayıcıya bağlıdır). Eleman tür \u003d e-posta Tarayıcının e-posta adres formatının doğruluğunu doğrulamasını sağlar. Ek olarak, parametreyi kullandık gerekli \u003d gerekli.; Bu parametreyi destekleyen tarayıcılar, kullanıcının form dolduruncaya kadar formu göndermesine izin vermez, burada JavaScript gerekli değildir. Parametre autocomplete \u003d Açık. Bazı alanları otomatik olarak doldurur. Ayrıca, formu doldururken kullanıcıya yardımcı olacak değiştirilebilir bir metin kullandık.

Şimdi yaklaşık iki kurnaz an. Muhtemelen iki bağlantıyı farkettin Formun başında. Bu akıllı teknik, çapa (çapa) çalışırken formumuzun doğru davranmasına izin verecektir.

İkinci nokta, bir yazı tipinin simgelerle kullanımı ile ilişkilidir. Simgeleri görüntülemek için veri niteliğini kullanacağız. Parametrenin ayarlanması data-icon \u003d "icon_character" HTML'deki ilgili karakterlerle, tüm simgelerin stilini ayarlamak için CSS'de yalnızca bir kural atamalıyız. Web sitesinde bu resepsiyon hakkında daha fazla bilgi edinebilirsiniz: 24 Yol: Yazı tipleri ve veri özellikleri ile simgeleri görüntüleme.

CSS.

Temizlik kodu için, temel parametreleri (HTML, Vücut vb.) Atlayacağım, ancak bunları kaynak dosyalarda bulabilirsiniz. Tüm tarayıcılarda çalışmayacak CSS3 tekniklerini kullandığımı tekrar ediyorum. Haydi başlayalım!

CSS3 kullanarak şekillendirme formları

İlk önce, temel stil formlarımızı atayalım.

#Subscribe, #login (pozisyon: mutlak; üst: 0px; genişlik:% 88; dolgu: 18px6% 60px6% 6; kenar boşluğu: 0 0 35PX 0; arka plan: RGB (247, 247, 247); sınır: 1px katı RGBA (147, 184, 189.0.8); kutu-gölge: 0pt 2px 5px rgba (105, 108, 109, 0.7), 0px 0px 8px 5px rgba (208, 223, 226, 0.4) Inset; Sınır-yarıçapı: 5px ;) #login (Z-index: 22;)

Burada başlık için mülkler atayacağız:

/ **** Metin **** / #wrapper H1 (yazı tipi boyutu: 48px; Renk: RGB (6, 106, 117); Dolgu: 2px 0 10px 0; Yazı Tipi Yüzü: "Franchisergular", "Arial Dar ", Arial, Sans-Serif; Yazı Tipi Ağırlığı: Kalın; Metin-Hizala: Merkez; Dolgu-alt: 30px;) / ** Altında, yalnızca WebKIT arka plan-klibi destekler: Metin; ** / #WRAPPER H1 (arka plan: -Webkit-yinelenen doğrusal gradyan (-45deg, RGB (18, 83, 93), RGB (18, 83, 93) 20px, RGB (64, 111, 118) 20px, RGB (64, 111, 118) 40px, RGB (18, 83, 93) 40px); -Webkit-Metin Dolgu-rengi: Şeffaf; -WebKit-Background-Click: Metin;) #wrapper H1: Sonra (İçerik: ""; ekran: blok; genişlik:% 100; yükseklik: 2px; marj üstten: 10px; arka plan: doğrusal gradyan (sol, rgba (147,184,189,0) 0, rgba (147,184,189,0,8)% 20, RGBA (147,184,189,1)% 53, RGBA (147,184,189,0,8)% 79, RGBA (147,184,189,0)% 100);)

Bugün sadece webkit desteği olan tarayıcıların arka Plan-Klip: MetinBu yüzden, yalnızca WebKit için çizgili bir arka plan yapacağız ve H1 başlığına bağlayacağız. Parametreden beri arka Plan-Klip: Metin Sadece WebKit tarayıcılarında çalışır, sadece WebKit özellikleriyle çalışmaya karar verdim. Bu yüzden CSS'yi iki bölüme ayırdım ve yalnızca WebKit gradyanı kullandım. Ancak, web sitelerinizde sadece webkit kullanmamalısınız! Yani, örneğin, parametre -Webkit-Metin-dolum rengi: şeffaf Şeffaf bir arka plana sahip olmamıza izin verir, ancak yalnızca WebKit tarayıcıları için, diğer tüm tarayıcılar bu özelliği yok sayar.

Ayrıca bir öğeyi kullanarak başlık altında ince bir çizgi oluşturduk: Pseudo sınıfından sonra. Boya 2px gradyan kullandık ve kenarlarda saydamlığı sıfıra indirdik.

Şimdi girdi alanlarına bakalım ve onlara güzel bir manzara verelim.

/ **** Gelişmiş Giriş Styling **** / / * Yer tutucu * / :: - WebKit-Giriş-yer tutucu (Renk: RGB (190, 188, 188); Yazı Tipi Stili: Italik;) Giriş: -Moz- Yer tutucu, Textarea: -Moz-yer tutucu (Renk: RGB (190, 188, 188); Yazı Tipi tarzı: Italik;) Giriş (Anahat: Yok;)

İlk önce, alanları stilize eder ve stroku çıkarırız. Ancak dikkatli olun: Strok, kullanıcının hangi alanın ne olduğunu anlamalarına yardımcı olur. Eğer kaldırırsanız, özellikleri uygulamanız gerekir: Aktif ve: Odak.

/ * Tüm alanlar Gönderme ve onay kutusu hariçtir * / #wrapper girişi: () () () (genişlik:% 92; marj üstten: 4px; Dolgu: 10px 5px 10px 32px; sınır: 1px katı RGB (178, 178, 178); kutu Üstelik: İçerik kutusu; Sınır-yarıçapı: 3PX; Kutu-Gölge: 0px 1px 4px 0px RGBA (168, 168, 168, 0.6) İnset; Geçiş: Tüm 0.2S Linear;) #wrapper Girişi: Değil (): Aktif , #Wrapper girişi: değil (): netleme (sınır: 1px katı rgba (91, 90, 90, 0.7); arka plan: rgba (238, 236, 240, 0.2); kutu-gölge: 0px 1px 4px 0px rgba (168 , 168, 168, 0.9) inset;)

Burada bir Pseudo sınıfı kullandık: onay kutuları dışındaki tüm alanları stillendirmek için değil. Ayrıca, strok ve eklentileri çıkarmaya karar verdim: Odak ve: Aktif.

Şimdi zaman eğlencelidir: simgeleri ile yazı tipi. Pseudo-Sınıfları kullanamadığımız için: Daha önce ve: Sonra, etiket parametresine bir simge ekleyeceğiz ve ardından sahaya yerleştireceğiz. Fontomas kütüphanesini kullanacağım. Simgeleri kendiniz uygun harfle eşleştirebilirsiniz. Özniteliği hatırla veri simgesi? Eklenmesi gereken içinde. kullandım data-icon \u003d 'U' Giriş yapmak için, 'e' e-posta için 'P' şifresi için 'P'. Harfleri seçer girmez, yazı tipini indirdim ve fontsquirrel font jeneratörünü @ font-face için uygun bir formata dönüştürme için kullandım.

@ Font-Face (Yazı Tipi Yüzü: "FontomascustomRegular"; SRC: URL ("Yazı Tipleri / Fontomas-Webfont.eot"); SRC: URL ("Yazı Tipleri / Fontomas-Webfont.eot? #iefix") Format ("Gömülü) OpenType "), URL (" Fonts / Fontomas-Webfont.woff ") formatı (" Woff "), URL (" Fonts / Fontomas-WebFont.TTF ") formatı (" TrueType "), URL (" Yazı Tipleri / Fontomas-WebFont .svg # fontomascustomrular ") formatı (" SVG "); Yazı Tipi Ağırlığı: Normal; Yazı Tipi Stili: Normal;) / ** Magic Trick! ** /: ATM: ATR (Veri-Simge); Yazı Tipi Yüzü: "FontomascuScuLular"; Renk: RGB (106, 159, 171); Konum: Mutlak; Sol: 10px; Üst: 35px; Genişlik: 30px;)

Tamam. Her simge için ayrı bir sınıfa sahip olmanız gerekmez. Parametreyi kullandık İçerik: attr (veri simgesi)Mektubu veri simgesi özniteliğinden almak için. Böylece, sadece bir yazı tipi atamamız, rengi seçin ve simgeyi yerleştirin.

Şimdi Gönder düğmesi için kuralları atayın.

/ * Her iki düğmeyi de stilize eder * / #wrapper p.button girişi (genişlik:% 30; imleç: işaretçi; arka plan: RGB (61, 157, 179); dolgu: 8px 5px; font yüzü: "Bebasneueregular", "Arial Dar ", Arial, Sans-Serif; Renk: #FFF; Yazı Tipi Boyutu: 24px; Sınır: 1px Katı RGB (28, 108, 122); Marj-alt: 10px; Text-Gölge: 0 1PX 1PX RGBA (0, 0 0, 0.5); Sınır-yarıçapı: 3px; Kutu gölge: 0px 1px 6px 4px RGBA (0, 0, 0.07) Inset, 0px 0px 0px 3px RGB (254, 254, 254), 0px 5px 3PX 3PX RGB (210, 210, 210); geçiş: tüm 0.2s linear;) #wrapper p.button girişi: Hover (arka plan: rgb (74, 179, 198);) #wrapper p.button girişi: aktif, #wrapper P. düğmesi girişi: Odak (arka plan: RGB (40, 137, 154); pozisyon: göreceli; üst: 1px; sınır: 1px katı RGB (12, 76, 87); kutu-gölge: 0px 1px 6px 4px rgba (0, 0, 0, 0.2) inset;) p.login.button, p.signin.button (Metin hizası: Sağ; Marj: 5px 0;)

Hile, birkaç çerçeve oluşturmak için kutu gölge kullanmaktır. Doğal olarak, yalnızca bir kareyi kullanabilirsiniz, ancak birkaç tane olabilirsiniz. Uzunluk parametresini, 3px genişliğinde, bulanıklık olmadan bir "sahte" ikinci beyaz bir çerçeve oluşturmak için kullanacağız.

Şimdi Stilize Onay Kutusu, burada olağandışı olmayacağız:

/ * Stilize Chekbox "Beni Hatırla" * * / .keeplogin (Marj-Top: -5px;) .Keeplogin girişi, .keeplogin etiketi (ekran: 12px; yazı tipi tarzı: italik;) .Keeplogin girişi # Oturumlama (Marj-sağ: 5px;) .keeplogin etiketi (genişlik:% 80;)

Çizgili bir gradyan oluşturmak için birden fazla doğrusal gradyan kullanarak bodrum formlarını stilize ederiz.

P.change_link (pozisyon: mutlak; renk: RGB (127, 124, 124); Sol: 0px; yükseklik: 20px; genişlik: 440px; dolgu: 17px 30px 20px 30px: Yazı tipi boyutu: 16px; Metin hizası: Sağ; Sınır Üstü: 1px Katı RGB (219, 229, 232); Sınır-Yarıçapı: 0 0 5PX 5PX; Arka Plan: RGB (225, 234, 235); Arka Plan: Tekrarlayan-Lineer gradyan (247, 247, 247), RGB (247, 247, 247) 15px, RGB (225, 234, 235) 15px, RGB (225, 234, 235) 30px, RGB (247, 247, 247) 30px);) #wrapper p .Change_link A (Ekran: BLD; Yazı Tipi Ağırlığı: Bold; Arka Plan: RGB (247, 248, 241); Dolgu: 2px 6px; Renk: RGB (29, 162, 193); Marj-Sol: 10px; Metin -dorage : Yok; Sınır-yarıçapı: 4px; Sınır: 1px katı RGB (203, 213, 214); Geçiş: tüm 0.4s lineer;) #wrapper p.change_link A: Hover (Renk: RGB (57, 191, 215); Arka plan: RGB (247, 247, 247); sınır: 1px katı RGB (74, 179, 198);) #wrapper p.change_link A: Aktif (Konum: Göreceli; Üst: 1px;)

Şimdi iki hoş bir formumuz olduğunu görüyorsunuz, ancak onlardan birinin görüntülenmesini istiyoruz. Animasyon zamanı geldi!

Animasyon yarat

Yapacağımız ilk şey, ikinci formu gizliyoruz, Opaklık atama 0:

#Register (Z-index: 21; opaklık: 0;)

Giriş formunun bir Z-index parametresi olduğunu unutmayın: 22? İkinci form Bu parametreyi, giriş formunu "altına" koymak için 21'e atarız.

Şimdi en ilginç şey: Pseudo sınıfını kullanan yerlerde şekilleri değiştirin: Hedef. Hakkında bir şeyi anlamanız gerekir: Hedef: Hareket etmek için, çapa kullanacağız. Çapa normal davranışı - Sayfanın belirli bir öğesine atlayın. Ama istemiyoruz, sadece şekilleri yerlerde değiştirmek istiyoruz. Ve burada sayfanın başında iki bağlantı kullanarak numaramıza yardımcı olmak için geliyor. Bizi doğrudan ikinci forma göndermek yerine, "zıplama" nın etkisini test etmek yerine, bağlantıları linklere veriyoruz. görüntü yok. Bu atlamaları önlemeye yardımcı olacaktır. Sitede bu numarayı keşfettim: CSS3 Create (Fransızca).

#Toregister: Hedef ~ #wrapper #Relageister, #tologin: Hedef ~ #wrapper #login (z-index: 22; Animasyon-İsim: Fadeinleft; animasyon gecikmesi: .1S;)

Bu olanlar: düğmeye tıkladığımızda Katılmak#Toregister'a gidiyoruz. Sonra animasyon meydana gelir ve yalnızca #Relaster öğesine gidin. Animasyon adlı kullanıyoruz fadeinleft.. Sıfır saydamlığı kullanarak "gizle" formumuz olduğundan, yavaş yavaş görünecek bir animasyon uygulayacağız. Ayrıca z-dizini de değiştirdik, böylece başka bir formun üstünde görünür. Aynı şey, diğer form için de aynı şekilde olur.
İşte animasyon kodu. Dan Eden'den CSS3 animasyon çerçevesi kullandık ve bu çerçeveyi eğitimimizin altına uyarladık.

Animate (Animasyon Süresi: 0.5S; Animasyon-Zamanlama-İşlevi: Kolaylaştırın; Animasyon-Dolum Modu: Hem;) @Keyframes Fadeinleft (% 0 (Opaklık: 0; Dönüştürme: Translatex (-20px);)% 100 (Opaklık : 1; dönüşüm: translate (0);)))

"Kaybolan" formu solda bir karartma animasyonu olacaktır:

#Toregister: Hedef ~ #wrapper #login, #tologin: Hedef ~ #wrapper #Rejister (animasyon-isim: fadeoutleftbig;) @keyframes Fadeoutleft (% 0 (opaklık: 1; dönüşüm: translatex (0);)% 100 (opaklık : 0; dönüşüm: translate (-20px);)))

Artık animate.css dosyasını kullanarak Dan Eden'in diğer animasyonlarını kullanabilirsiniz: Sınıfı değiştirin. Sınıf sınıfı ve animasyon isimleri. Ayrıca, Animate-Custom.CSS dosyası dosyasının sonundaki diğer birkaç animasyonları da bulacaksınız.

Hepsi bu, arkadaşlar. Umarım bu eğitimi sevdin!

Bazı tarayıcılarda parametrede olduğunu unutmayın. arka Plan-Klip: Metin Desteklenmiyor. Internet Explorer 9 animasyon çalışmıyor. Internet Explorer'da 8 ve psödo sınıfının altında: Hedef Psödo sınıfı desteklenmiyor, bu yüzden bu etki orada hiç çalışmayacak.

P.S. Zevkle çeviriyle ilgili tüm yorumlar pm olarak kabul edeceğim. Teşekkür ederim!

Etiketler: Etiketler ekleyin

Makine yazma metni, basılı işaretler - grafik sembollerinden oluşur.
Grafik karakterler, metinde görünür bir ekrana sahip olan karakterlerdir.
Tüm grafik karakterler bir dizi üniforma üniversal unicode sisteminde toplanır.
Unicode grafik sembolünü HTML belgesine yerleştirin
- Bu tablonun ana ve tek amacı.

Bir HTML belgesine bir sembol ekleyin Yollardan biri olabilir:

sembolün görüntüsünü, tarayıcı penceresinden Visual HTML editörünüzün penceresine kopyalayın
hTML sembol kodunu doğrudan HTML belge koduna kopyalayın

Bunların iki farklı yol olduğuna inanıyorum:

görsel görsel ekle
kodu koda yerleştirin.

Bir sembol için yazı tipi, HTML'deki boyutu ve rengi kodla ayarlanabilir:
Code_simvol
Nerede,
Arial - Yazı Tipi,
10px - piksellerde yazı tipi boyutu,
# FF0000 - Yazı tipi renk kodu (kırmızı)

Örneğin:
☎ - 30px sembol yazı tipi boyutu,
☎ - 30px sembol yazı tipi boyutu, renk - kırmızı
☎ - Yazı tipi boyutu 20px sembolü,
☎ - Yazı tipi boyutu 10px sembolü.
Yaklaşık. Özel semboller eklemek için önerilen yazı tipleri - Arial, Verdana ve Tahoma. Bu yazı tipleri Unicode karakterlerini doğru ve kendilerini gösterir, sırayla, Web uygulamaları tarafından doğru şekilde desteklenir.

"Sembol"
(Görünür Sembol Ekranı)
Bu grafikten sembolün görüntüsünü kopyalayabilir ve Metin HTML Editör penceresine yapıştırabilirsiniz. Karakter, 20 piksel bir yazı tipi boyutuyla kopyalanır. Kopyalama işleminden sonra, kopyalanan işareti için bireysel bir yazı tipi boyutu doğrudan gerekebilir.
"İsim"
(Sadece önemli veya anlaşılmaz karakterler için)
Bir sembolün reçetesinin açıklaması, kapsamı, örnekler ...
"Mnemonics"
Mnemonica, HTML'deki harf kodunu belirten bir Allevant View Tasarımıdır. Doğrudan HTML belgesinin HTML koduna yerleştirilir. Mnemonics profesyonel ayetler arasında çok popülerdir. Bir kişi tarafından iyi hatırlanırlar ve tüm HTML uygulamaları tarafından desteklenirler. Her mnemonic Tarayıcı kodunu okumak için bir sinyal görevi gören ve monitör ekranında görüntülenmeyen bir sinyal görevi gören bir alfabe adı (atama) içerir. Her bir Mnemonic'in adı benzersiz ve kolayca okunabilir, çünkü oluşturulur karakteri karakterize eden İngilizce kelimesinden.
Mnemonica (Yunanca) - hiçbir şeyi ezberleme sanatı. Mnemotechnicn, ezberleme nesnesi bir konuda bir şeyle birlikte verildiğinde zorlu bilgilerin algılamasını kolaylaştırmak için kullanılır.
"Kod"
Kod - HTML'de sayısal ondalık sembol kodu, Tip &. Doğrudan HTML HTML belgesine eklenir. Sayısal ondalık kod, Unicode sistemdeki karakterin sekans numarasını ve tarayıcının kodunu okumak için bir sinyal görevi gören ve monitör ekranında görüntülenmeyen birkaç servis işareti (& #) gösteren bir sayıdan oluşur. Sayısal ondalık kod, algısının çok yönlülüğü ve sadeliği nedeniyle yaygın ve kullanıma sahiptir.

HTML Yönetimi Sembolleri (XHTML)

HTML (XHTML) HTML Yönetimi Sembolleri, HTML-Clash Web sayfalarında kullanılan HTML-dil servis karakterleridir. Bu karakterler herhangi bir tarayıcıyı desteklemelidir, çünkü onlar olmadan HTML metnini uygun şekilde görüntülemek imkansızdır. Kontrol sembolleri metinde görüntülenmez ve doğrudan uygulamadan klavyedeki tarayıcı, sayfayı ekranda çizerken herhangi bir işlem için arama işaretleri olarak yorumlar olarak yorumlanır.

Universal kavramları simgeleyen ve sıradan tipografik işaretler olarak bir tarayıcı tarafından yorumlandıkları normal metinlerde kontrol sembollerini kullanmasına izin verilir. HTML-metinlerdeki bu kullanım karakterlerinin bu kullanımı ile, karakterinin anlamını, yani HTML kodunu girmesi gerekir. Çünkü ben tekrar ediyorum - aksi halde tarayıcı servis karakterini bir eylem çağrısı olarak algılayacak ve Monitör ekranındaki HTML metnini doğru şekilde görüntülemeyecektir.

Kontrol sembolleri ve HTML kodları, istisnasız tüm tarayıcıları biliyor ve anlayamaz, bu da söylenemeyen, farklı tarayıcılarda yanlış görüntülenebilecek diğer işaretler hakkında veya daha da kötüsü - hiç gösterilmemesi.

Sözdizimi ve noktalama işaretleri


	Şekerleme uzunluğu n (sıradan alan)
	uzunluğun uzunluğu m (uzun anahtarlar)

-	yumuşak transfer (baskısız)	-
‑	tire		‑
-	çizgi uzunluğu n (sıradan çizgi)	-	–
—	çizgi uzunluğu m (uzun çizgi)	—	—
.	nokta		.
,	virgül		,
…	nokta	…	…
:	kolon		:
;	noktalı virgül		;
!	ünlem işareti		! ǃ
?	soru işareti		?
@	"köpek"		@
*	"star"		*
#	"Kafes"		#
‘	tek üst Sol Alıntı	‘	‘
’	tek üst sağ cüfan	’	’
‚	tek düşük doğru aktör	‚	‚
“	Çift üst soldan alıntı	“	“
”	Çift Kişilik Üst Sağ Kuşak	”	”
„	Çift daha düşük sağ tırnak	& bdquo.	„
«	Çift Sol Köşe Teklifleri (RUS)	«	«
»	Çift sağ köşe alıntı (rus)	»	»
́	vurgu işareti, Örnek: Vasya		́
"	apostrof, örnek: sen "ben		"
´	akut örneği: sen	´	´
¶	paragraf (baskılayan işareti)	¶	¶
§	paragraf	§	§
ˆ	accent (ters kuş)	ˆ	ˆ
˜	küçük tilda	˜	˜
¦	dikey damla	¦	¦
(	yuvarlak Braketi Sol		(
)	sağa yuvarlak braket		)
〈	açı Braketi Sol	〈	〈
〉	sağa açılı braketi	〉	〉
‹	köşe Braketi Sol, Seçenek	‹	‹
›	köşe braketi sağa, seçenek	›	›
[	kare Braketi Sol		[
]	sağa kare braket		]
/	slash (Slash) - Skit Özelliği		/
\	ters Slash (Backslash)		\
⁄	kOSY Kesirli Özellik (Bölüm İşareti)	⁄	⁄
ǀ	dikey özellik		ǀ
ǁ	Çift dikey özellik		ǁ
‾	hollandalı, Örnek: Vasya)	‾	‾
¯	macron, Örnek: Vasya Ha	¯	¯

Ticari Markalar ve Para Birimi

+	bir artı	+	+
−	eksi	−	- −
=	eşit derecede		=
±	artı eksi	±	±
×	Çarpma işareti	×	×
÷	bölüm işareti	÷	÷
⋅	nokta Operatörü (Orta Dize)	⋅	· ⋅
∗	operatör "Yıldız" (orta dize)	∗	∗
∼	operatör "Tilda"	∼	∼
.	liste işaretleyici (orta çizgi)	.
¹	Üst Endeks "1"	¹	¹
²	Üst Endeks "2"	²	²
³	Üst Endeks "3"	³	³
HTML'de (XHTML) Yastıklı ve Değiştirme Endeksi etiketler ile eklenebilir ^{ve _{, buna göre: NUMARA ^{Yastıklı indeks} → Sayı ped endeksi NUMARA _{Sübstitüent indeksi} → Bir ikame endeksinin sayısı}}
½	"Bir saniye" kesir	½	½
⅓	"Üçte biri" fraksiyonu		⅓
¼	"Bir dördüncü" kesir	¼	¼
¾	kesir "Üç Çeyrek"	¾	¾
№	numara işareti		№
%	yüzde		%
‰	tanıtmak	‰	‰
°	derece	°	°
′	barkod (dakika, ayaklar)	′	′
″	Çift barkod (saniye, inç) Örnek 1: 30 ° 25 '12 " Örnek 2: 25 '12 ″	″	″
µ	mikro	µ	µ
π	P.	π	π
ƒ	fonksiyon işareti ("Integral" ile karıştırılmaması gereken)	ƒ	ƒ
∫	integral	∫	∫
∅	ezilmiş Sıfır, Boş Set ("çap" ile karıştırılmaması gereken))	∅	∅
⌀	Çap (Çapraz Latince "O" ile karıştırılmaması gereken)		⌀
ø	latince "o" çapraz olarak geçti	ø	ø
Ø	latin başlığı "O" çapraz olarak geçti	Ø	Ø
∏	İş işareti	∏	∏
∑	İşaret işareti	∑	∑
√	radikal (karekök veya kök x)	√	√
∝	orantılı	∝	∝
∞	sonsuzluk	∞	∞
∠	açı	∠	∠
⊥	ortogonal (dik)	⊥	⊥
∴	"Ayakta" işareti	∴	∴
≅	neredeyse eşit	≅	≅
≈	neredeyse eşit	≈	≈
≠	eşit değil	≠	≠
≡	aynı zamanda	≡	≡
≤	daha az veya eşit	≤	≤
≥	daha fazla veya eşit	≥	≥
∧	mantıksal I.	∧	∧
∨	mantıksal veya	∨	∨
⊕	artı bir daire girişi (Doğrudan Miktar)	⊕	⊕
⊗	"Daire içinde çarpma" işareti (vektör sanat, gözlemcisinden ok)	⊗	⊗
ʘ	Çember içindeki nokta (Gözlemceki ok)		ʘ










				✵ ✵