ev / Kurulum ve konfigürasyon/ Bölünmez kısa çizgi html. HTML Özel Karakterleri

Bölünmez kısa çizgi html. HTML Özel Karakterleri

Bir HTML belgesinin gövdesinde klavyede gördüğünüz tüm karakterlere izin verilmez. Ancak, bu mantıklı. Her etiket bir ( ile başlıyorsa<) и заканчивается символом (>), o zaman bu karakterlerin sıradan metin içinde belirtilmemesi oldukça mantıklıdır. Bu karakterlerin HTML belgelerinde özel bir anlamı vardır. Tarayıcı bunları gördüğünde HTML etiketleri olduğunu düşünür ve onları öyle yorumlamaya çalışır.
Bir HTML belgesinin metnine girilmesi yasak olan karakterlerin eklenmesi sorununu çözmek için, bir dizi özel karakter geliştirildi - klavye girişinden yasaklanan karakterlerin yerini alan diziler. Klavyenizde bulunmayan karakterler de özel karakterlerle değiştirilebilir. Bu tür her bir dizi (anımsatıcı referans) mutlaka bir ve işareti (&) ile başlar ve noktalı virgül (;) ile biter. (&) ve (;) arasında şunları girebilirsiniz:

özel karakter adı (& isim;);
‰ () işaretinden sonra girilen sayısal bir kod, yani sayısal kodunu belirterek özel bir karakter yazarken aşağıdaki gösterimi kullanmanız gerekir: (& code;);

Sayısal kod, ondalık veya onaltılık gösterimde gösterilebilir.
Örneğin, küçüktür işaretini görüntülemek için (<) мы должны написать: < (sembol adı) veya & 60;(ondalık olarak sayısal kod) veya & x0003C;(onaltılık olarak sayısal kod).

Kırılmaz alan

Bölünmez alanın temel amacı () (bölünmeyen boşlukla) - kelimeleri ayırın, ancak bu yerde satır sonlarını yasaklayın. Tarayıcı penceresinin boyutu sabit olmadığı için paragrafta yeni bir satıra geçiş otomatik olarak gerçekleşir. Bu durumda tarayıcı, boşluk veya kısa çizgi olan her yerde satırı kesecektir. İmla kurallarına göre parçalanamayan dil yapıları vardır. Kırılmayan alan tasarımları, örneğin şunları içerir:

baş harfleri olan soyadları;
em tire, onlardan önce gelen kelimeyle;
tek heceli kelimelerin ardından bir kelime;
sayılar ve ardından ölçü birimleri.

Bu durumlarda, bölünmez boşluk () genellikle HTML kodunda kullanılır. Böyle bir boşluk normal bir boşluk gibi görünecek, ancak göründüğü kelimelerin her koşulda aynı satırda olmasını sağlar.

15 m / s
100 km / s

Bildiğiniz gibi, HTML'de ardışık birkaç sıradan boşluk, tek bir boşlukla değiştirilir. Metinde 10 boşluk yazarsanız, tarayıcı bunlardan 9'unu kaldıracaktır. Metinde gerçek boşluklar eklemek için bölünmeyen bir boşluk kullanabilirsiniz. () .

alıntılar

Basım endüstrisinde üç tür tırnak işareti vardır: çift açılı tırnak işaretleri veya balıksırtı (""), tipografik tırnak işaretleri ("") ve el yazısı "pençeler" (""). Kodla çalışırken, düz çift tırnak ("") ve tek düz tırnak ("") kullanacaksınız.
Geleneğe göre, Rusça'da ana tırnak işareti türü “Noel ağaçları” dır. HTML'de Noel ağaçları sembollere karşılık gelir « ve » ... Birçok yayın, "Noel ağaçları" yerine tipografik tırnak işaretleri ve çift düz tırnak işaretleri kullanır.
Sol ve sağ tipografik tırnak işaretleri karakterlere karşılık gelir “ ve ” sırasıyla ve sol alt alıntı „ .
Doğrudan çift tırnak, özel bir karakterle eşleşir " .

Özel tırnak işaretlerinin kullanımı aşağıdaki örnekte gösterilmiştir:

Örnek: Alıntıları Kullanma

Kısa çizgi ve tire.

Basım endüstrisinde birbirine çok benzeyen üç karakter vardır: uzun tire, en tire ve tire. Bunlardan bilgisayar klavyesinde sadece bir tane var - bu bir kısa çizgi. Metne kısa çizgi veya kısa çizgi konması gerektiğinde genellikle her durumda kullanılan kişidir. Ancak bu karakterlerin kullanımıyla ilgili belirli noktalama kurallarına uymalısınız.
Örneğin, kısa çizgi (-) yalnızca sözcüklerin içinde veya sayılar arasında kullanılır. Cümlede kelimelerin arasına uzun tire (-) konur ve bu kelimelerden boşluklarla ayrılır. Uzun tire, anımsatıcı bir bağlantıya karşılık gelir — ... Harfsiz sayıların arasına veya büyük harflerle yazılan kelimelerin arasına uzun tire (-) konulur ve matematik formüllerinde eksi işareti olarak da kullanılır. Kısa çizgi ile kelimeler arasında boşluk yoktur. Uzun tire, anımsatıcı bir bağlantıya karşılık gelir - .

Tire ve tire kullanımı aşağıdaki örnekte gösterilmiştir:

Örnek: Özel karakterler - ve -

Kendin dene "

Vakit nakittir...

Web sayfasının açılması çok uzun sürüyor.
2-4 saniye içinde yüklenmelidir.
Vakit nakittir...

Bazı popüler HTML özel karakterlerinin listesi

Sembol	Açıklama	anımsatıcı ad	Sayısal Kod
	kırılmaz alan
<	daha az	<
>	bundan fazla	>	>
&	ve işareti	&	&
"	düz çift alıntı	"	"
"	kesme işareti	"	"
«	sol çift açılı tırnak işareti	«	«
»	sağ çift açılı tırnak işareti	»	»
‘	sol tek alıntı	‘	‘
’	sağ tek alıntı	’	’
‚	alt tek alıntı	‚	‚
“	sol çift alıntı	“	“
”	sağ çift alıntı	”	”
„	alt çift alıntı	„	„
€	euro	€	€
	telif hakkı		©
®	tescilli ticari marka	®	®

Özel karakter çeşitleri

Normal bir klavyede matematiksel, teknik, geometrik ve diğer özel karakterlerin çoğunu bulamazsınız.
Bu tür karakterleri bir HTML sayfasında uygulamak için ilgili anımsatıcı adlarını kullanabilirsiniz.

Aşağıdaki örnekte, aynı sembolün farklı kodlar kullanılarak nasıl görüntülenebileceğini görebilirsiniz.

Artemy Lebedev.

klavyede bir tire, genellikle sıfırın sağında ve "Z" ve "X" harflerinin üzerindedir. Bilgisiz kişiler buna dönüşümlü olarak kısa çizgi, sonra eksi, sonra kısa çizgi derler. Lebedev bize bunun böyle olduğunu açıklıyor. dört(iki tire türü göz önüne alındığında) farklı bir karakter. Aslında, onların en az dokuz, ve şimdi size bundan bahsedeceğim.

İlişkin eksi(-), birçok kişi zaten onun hakkında her şeyi biliyor: eksi matematiksel ifadelerde kullanılır, herhangi bir rakamla aynı genişliğe sahiptir, kısa çizgi ve kısa çizgiden farklı olarak büyük harfin yüksekliğine hizalanır ve HTML ile yazılır olarak -.

Bu noktada, herkes genellikle bir çizgiye gider. Ama bekleyin, henüz üç sembolü ele almadık!

Telefon numaralarını (555‒41‒72) kaydetmek için kullanılan karakter nedir? Tire, diyorsun; ama hayır! Bunun için ayrı bir sembol var: dijital çizgi(şekil çizgi). Neredeyse eksi gibi (-) görünüyor, ancak eksi değil.

Şunu sorabilirsiniz: tamamen aynı görünüyorsa neden bir eksi kullanmıyorsunuz? Eksi bir çıkarma işareti olduğundan ve bir telefon numarasında hiçbir şeyden hiçbir şey çıkarılmaz. Aynı nedenle, metni vurgulamak için i yerine em kullanırsınız. Açıklanamaz, sadece bilinebilir.

Sayısal tire U + 2012 koduna sahiptir ve HTML'de - şeklinde yazılmıştır.

Ö tire yumuşak kısa çizgi olarak da adlandırılan , birçok kişi tarafından da bilinir. HTML'de - olarak gösterilen bu sembol, tireleme yapabileceğiniz yerlerde hecelerin arasına kelimelere yerleştirilir. Satırın sonuna geldiği durum dışında ekranda görüntülenmez; bu durumda, tarayıcı (derler ki, Firefox bile bunu üçüncü sürümden öğrendi) kelimenin tamamını taşımaz, ancak bir tire koyar ve kelimenin geri kalanını taşır.

Bu, özellikle tireleme, ekranın sağ tarafında büyük boşluklar oluşturan uzun sözcükler için yararlıdır. Tireleme karakterinin en büyük dezavantajı, onu manuel olarak yerleştirmenin uygun olmaması (ancak, otomatik yazma programları bunu halledebilir) ve kullanımının karmaşık olması ve metnin kaynak kodunu okunamaz hale getirmesidir (bu nedenle, tirelemenin yerleştirilmesi daha iyidir). karakterler, veritabanında depolanan metinden HTML kodu oluşturma aşamasında CMS tarafından gerçekleştirilir).

Kısa çizgi benzeri başka bir karakter, madde işareti olarak kullanılan kısa çizgidir (⁃). kanlı kurşun). Lebedev Studio haklı olarak Rus tipografik geleneğinde mermi (yani kareli geleneksel daireler) diye bir şey olmadığını belirtiyor ve işaretleyici olarak bir (em) tire kullanılmasını öneriyor; Gördüğünüz gibi, web sitelerinde yaptıkları (veya yaptıkları) tam olarak bu ve hatta nasıl yapılacağını anlatan bir makaleye bile girdiler.

Aslında, U + 2043 koduna sahip liste işaretçileri için özel bir karakter var (ancak Lebedev bunun Rus tipografisi için geçerli olmadığını iddia ediyor). HTML'de, bir liste için böyle bir madde işareti yapmak CSS kullanarak oldukça kolaydır:

Ul (liste stili: yok içeride;) ul> li: önce (içerik: "\ 2043"; sol kenar boşluğu: -1ex; sağ kenar boşluğu: 1ex;)

(Elbette, yukarıdaki kod mükemmel değil ve sadece doğru tarayıcılarda çalışacak, ancak fikir sizin için açıktır, umarım.)

Şimdi nihayet kısa çizgiye geçebiliriz; burada her şey zaten yıpranmış durumda: arasındaki fark kısa çizgi(-, uzun tire, "n" genişliğinde bir tire, -) ve kısa çizgi(-, uzun tire, M-geniş tire, -). Rus tipografisinde son derece uzun bir tire kullanıldığı (sayısal aralıklarda bir tire kullanma olasılığı hakkında tartışmalar olsa da) bilinirken, Batı'da genellikle en tire tercih edilir.

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

- Canım sıkıldı, dit-elle.
- Cela n'est pas de ma faute, retorqua-t-il.

Yani dokuz farklı satır:

İmza	HTML	İsim	Amaç ve kullanım
-	-	kısa çizgi	teknik fizibilitenin olmadığı durumlarda diğer tüm hatlar yerine
‐	‐	tire	bir kelimenin kısımlarını ayırmak için: “açık gri”, “bence”, “bazıları” vb.
−	−	eksi	matematiksel ifadeler: 2 - 3 = -1
‒	‒	dijital çizgi	telefon numaraları ve diğer dijital kodlar
	-	tire	tireleyebileceğiniz yerlerde (uzun) kelimelerle
⁃	⁃	kanlı kurşun	liste işaretçisi
-	-	kısa çizgi	batı tipografisi
—	—	kısa çizgi	Rus tipografisi
―	―	yatay çubuk	diyaloglar (batı tipografisinde)

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

⁃
-
—

Merhaba sevgili habradrug! Bu eğitimde, iki HTML5 formunun nasıl oluşturulacağını öğreneceğiz: giriş formu ve kayıt formu. Bu formlar, CSS3 sözde sınıfını kullanarak birbirleriyle yer değiştirir: hedef. CSS3 ve bir simge yazı tipi kullanacağız. Bu demonun arkasındaki fikir, kullanıcıya bir giriş formu göstermek ve onlara kayıt formuna bir "git" bağlantısı sağlamaktır.
Bu derste, Demo 1'deki gibi bir efektin nasıl oluşturulacağını ayrıntılı olarak açıklayacağım.

HTML

Burada birkaç HTML5 hilesi kullandık. Örneğin, eleman tür = şifre kullanıcının yazdıklarını otomatik olarak gizler ve karakterleri noktalar veya yıldızlarla değiştirir (tarayıcıya bağlıdır). eleman tür = e-posta tarayıcının e-posta adresinin doğru biçimlendirilip biçimlendirilmediğini kontrol etmesine izin verir. Ayrıca parametreyi kullandık. gerekli = gerekli; bu seçeneği destekleyen tarayıcılar, alan doldurulana kadar kullanıcının formu göndermesine izin vermez, burada JavaScript gerekli değildir. Parametre otomatik tamamlama = açık bazı alanları otomatik olarak dolduracaktır. Ayrıca, kullanıcının formu doldurmasına yardımcı olmak için alternatif metin kullandık.

Şimdi iki zor nokta için. Muhtemelen iki bağlantı fark etmişsinizdir formun başında. Bu akıllı numara, çapalarla çalışırken formumuzun doğru şekilde davranmasını sağlayacaktır.

İkinci nokta, simgelerle bir yazı tipinin kullanılmasıyla ilgilidir. Simgeleri görüntülemek için data niteliğini kullanacağız. Parametreyi ayarlayarak data-icon = "icon_character" HTML'deki uygun sembollerle, tüm simgeleri biçimlendirmek için CSS'de yalnızca bir kural atamamız gerekir. Bu teknik hakkında daha fazla bilgiyi web sitesinde bulabilirsiniz: 24 Yol: Simgeleri Yazı Tipleri ve Veri Nitelikleriyle Görüntüleme.

CSS

Temizlik adına, temel parametreleri (html, body, vb.) atlayacağım, ancak bunları kaynak dosyalarda bulabilirsiniz. Yine tüm tarayıcılarda çalışmayacak CSS3 hileleri kullanıyorum. O halde başlayalım!

CSS3 Kullanarak Formları Şekillendirme

İlk olarak, şekillerimize temel bir stil verelim.

#subscribe, #login (konum: mutlak; üst: 0 piksel; genişlik: %88; dolgu: 18 piksel %6 60 piksel %6; kenar boşluğu: 0 0 35 piksel 0; arka plan: rgb (247, 247, 247); kenarlık: 1 piksel katı rgba (147, 184, 189,0.8); kutu gölgesi: 0pt 2px 5px rgba (105, 108, 109, 0.7), 0px 0px 8px 5px rgba (208, 223, 226, 0.4) ek; kenarlık yarıçapı: 5px ;) #login (z-endeksi: 22;)

Burada başlığa özellikler atayacağız:

/ **** metin **** / #wrapper h1 (yazı tipi boyutu: 48 piksel; renk: rgb (6, 106, 117); dolgu: 2 piksel 0 10 piksel 0; yazı tipi ailesi: "FranchiseRegular", "Arial Narrow ", Arial, sans-serif; yazı tipi ağırlığı: kalın; metin hizalama: merkez; alt dolgu: 30 piksel;) / ** Altta, yalnızca webkit arka plan klibini destekler: metin; ** / #wrapper h1 (arka plan: -webkit-repeating-linear-gradient (-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-text-fill-color: şeffaf; -webkit-background-clip: text;) #wrapper h1: after (content: ""; ekran: blok; genişlik: %100; yükseklik: 2 piksel; kenar boşluğu: 10 piksel; 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 yalnızca webkit tarayıcılarının desteklediğini unutmayın arka plan klibi: metin bu yüzden sadece webkit için çizgili arka plan yapacağız ve onu H1 başlığına bağlayacağız. parametre beri arka plan klibi: metin sadece Webkit tarayıcılarında çalışır, sadece webkit özellikleriyle çalışmaya karar verdim. Bu yüzden CSS'yi ikiye böldüm ve sadece webkit gradyanını kullandım. Ancak, web sitelerinizde sadece webkit kullanmamalısınız! Yani, örneğin, parametre -webkit-metin-dolgu rengi: şeffafşeffaf bir arka plana sahip olmamızı sağlar, ancak yalnızca webkit tarayıcıları için diğer tüm tarayıcılar bu özelliği yok sayar.

Ayrıca başlığın altında: after sözde sınıf öğesiyle birlikte ince bir çizgi oluşturduk. 2 piksel yüksekliğinde bir gradyan kullandık ve kenarlardaki opaklığı sıfıra indirdik.

Şimdi giriş alanlarıyla ilgilenelim ve onlara güzel bir görünüm verelim.

/ **** gelişmiş giriş stili **** / / * yer tutucu * / :: - webkit-input-yer tutucu (renk: rgb (190, 188, 188); yazı tipi stili: italik;) giriş: -moz- yer tutucu, metin alanı: -moz-yer tutucu (renk: rgb (190, 188, 188); yazı tipi stili: italik;) giriş (anahat: yok;)

İlk olarak, kenar boşluklarını şekillendireceğiz ve konturu kaldıracağız. Ancak dikkatli olun: ana hat, kullanıcının hangi alanda olduklarını anlamasına yardımcı olur. Kaldırırsanız, aktif ve: odak özelliklerini uygulamanız gerekir.

/ * tüm alanlar gönderme ve onay kutusunu hariç tutar * / #wrapper giriş: değil () (genişlik: %92; kenar boşluğu: 4 piksel; dolgu: 10 piksel 5 piksel 10 piksel 32 piksel; kenarlık: 1 piksel katı rgb (178, 178, 178); kutu -sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba (168, 168, 168, 0.6) iç metin; geçiş: tümü 0.2s doğrusal;) #wrapper girişi: değil (): etkin , #wrapper girişi: değil (): odak (kenarlık: 1px katı rgba (91, 90, 90, 0.7); arka plan: rgba (238, 236, 240, 0.2); kutu gölgesi: 0px 1px 4px 0px rgba (168) , 168, 168, 0.9) iç metin;)

Burada, onay kutuları dışındaki tüm alanları biçimlendirmek için sözde olmayan sınıfı kullandık. Ayrıca konturu kaldırmaya karar verdim ve ekledim: odak ve: aktif özellikler.

Şimdi eğlenme zamanı: simgelerle yazı tipi. Sözde sınıflarda: Before ve: after kullanamayacağımız için, label parametresine bir ikon ekleyeceğiz ve ardından onu alana yerleştireceğiz. Fontomas kütüphanesini kullanacağım. Simgeleri ilgili harfe kendiniz eşleyebilirsiniz. Özelliği hatırla veri simgesi? İçinde mektubu eklemeniz gerekiyor. kullandım veri simgesi = 'u' giriş için, e-posta için 'e', şifre için 'p'. Harfleri seçtikten sonra, fontu indirdim ve fontsquirrel font oluşturucusunu kullanarak @ font-face için uygun bir formata dönüştürdüm.

@ font-face (font-family: "FontomasCustomRegular"; src: url ("fonts / fontomas-webfont.eot"); src: url ("fonts / fontomas-webfont.eot? #iefix") biçimi ("gömülü- opentype "), url (" fonts / fontomas-webfont.woff ") biçimi (" woff "), url (" fonts / fontomas-webfont.ttf ") biçimi (" truetype "), url (" fontlar / fontomas-webfont " .svg # FontomasCustomRegular ") formatı (" svg "); yazı tipi ağırlığı: normal; yazı tipi stili: normal;) / ** sihir numarası! ** /: after (içerik: attr (veri simgesi); yazı tipi ailesi: "FontomasCustomRegular"; renk: rgb (106, 159, 171); konum: mutlak; sol: 10 piksel; üst: 35 piksel; genişlik: 30 piksel; )

Bu kadar. Her simge için ayrı bir sınıfınız olması gerekmez. parametresini kullandık. içerik: attr (veri simgesi) data-icon özelliğinden mektubu almak için. Bu yüzden sadece bir yazı tipi atamamız, bir renk seçmemiz ve simgeyi yerleştirmemiz gerekiyor.

Şimdi form gönder butonu için kuralları atayalım.

/ * her iki düğmeyi de stil * / #wrapper p.button girişi (genişlik: %30; imleç: işaretçi; arka plan: rgb (61, 157, 179); dolgu: 8px 5px; yazı tipi ailesi: "BebasNeueRegular", "Arial Narrow ", Arial, sans-serif; renk: #fff; yazı tipi boyutu: 24 piksel; kenarlık: 1 piksel katı rgb (28, 108, 122); kenar boşluğu: 10 piksel; metin gölgesi: 0 1 piksel 1 piksel rgba (0, 0 , 0, 0,5); sınır yarıçapı: 3px; kutu gölgesi: 0px 1px 6px 4px rgba (0, 0, 0, 0.07) iç metin, 0px 0px 0px 3px rgb (254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); geçiş: tümü 0.2s doğrusal;) #wrapper p.button girişi: vurgulu (arka plan: rgb (74, 179, 198);) #wrapper p.button girişi: aktif, #wrapper s. düğme girişi: odak (arka plan: rgb (40, 137, 154); konum: göreli; üst: 1 piksel; kenarlık: 1 piksel katı rgb (12, 76, 87); kutu gölgesi: 0 piksel 1 piksel 6 piksel 4 piksel rgba (0, 0 , 0, 0.2) iç metin;) p.login.button, p.signin.button (metin hizalama: sağa; kenar boşluğu: 5px 0;)

İşin püf noktası, birden çok kare oluşturmak için kutu gölgesini kullanmaktır. Doğal olarak, yalnızca bir çerçeve kullanabilirsiniz, ancak birkaç tane de kullanabilirsiniz. Bulanıklık olmadan 3 piksel genişliğinde sahte bir ikinci beyaz kenarlık oluşturmak için uzunluk parametresini kullanacağız.

Şimdi onay kutusunun stilini belirleyelim, burada olağandışı bir şey yaratmayacağız:

/ * "beni hatırla" onay kutusunun stilini * / .keeplogin (kenar boşluğu: -5px;) .keeplogin girişi, .keeplogin etiketi (ekran: satır içi blok; yazı tipi boyutu: 12 piksel; yazı tipi stili: italik;) . keeplogin girişi # loginkeeping (sağ kenar boşluğu: 5px;) .keeplogin etiketi (genişlik: %80;)

Çizgili bir degrade oluşturmak için birden çok doğrusal degrade kullanarak şeklin alt bilgisine stil verin.

P.change_link (konum: mutlak; renk: rgb (127, 124, 124); sol: 0 piksel; yükseklik: 20 piksel; genişlik: 440 piksel; dolgu: 17 piksel 30 piksel 20 piksel 30 piksel; yazı tipi boyutu: 16 piksel; metin hizalama: sağa; üst kenarlık: 1 piksel katı rgb (219, 229, 232); kenarlık yarıçapı: 0 0 5 piksel 5 piksel; arka plan: rgb (225, 234, 235); arka plan: yinelenen doğrusal gradyan (-45 derece, rgb (247, 247, 247), rgb (247, 247, 247) 15 piksel, rgb (225, 234, 235) 15 piksel, rgb (225, 234, 235) 30 piksel, rgb (247, 247, 247) 30 piksel);) #wrapper p .change_link a (ekran: satır içi blok; yazı tipi ağırlığı: kalın; arka plan: rgb (247, 248, 241); dolgu: 2 piksel 6 piksel; renk: rgb (29, 162, 193); sol kenar boşluğu: 10 piksel; metin -dekorasyon: yok; sınır yarıçapı: 4 piksel; kenarlık: 1 piksel katı rgb (203, 213, 214); geçiş: tümü 0,4s doğrusal;) #wrapper p.change_link a: vurgulu (renk: rgb (57, 191, 215) ); arka plan: rgb (247, 247, 247); kenarlık: 1 piksel katı rgb (74, 179, 198);) #wrapper p.change_link a: etkin (konum: göreceli; üst: 1 piksel;)

Şimdi iki güzel şeklimiz olduğunu görebilirsiniz, ancak bunlardan sadece birinin görüntülenmesini istiyoruz. Animasyon zamanı!

Animasyon oluştur

Yapacağımız ilk şey, opaklığı 0'a ayarlayarak ikinci şekli gizlemektir:

#register (z-endeksi: 21; opaklık: 0;)

Giriş formunun bir z-index: 22 parametresi olduğunu unutmayın. İkinci form için, giriş formunun “altına” koymak için bu parametreyi 21'e ayarlayacağız.

Şimdi eğlenceli kısım için: Hedef sözde sınıfını kullanarak şekilleri değiştiriyoruz. Anlamanız gereken bir şey var: hedef: hareket etmek için çapaları kullanacağız. Bir çapanın normal davranışı, sayfanın belirli bir öğesine atlamaktır. Ama biz bunu istemiyoruz, sadece formların yerlerini değiştirmek istiyoruz. Ve bu, sayfanın başında iki bağlantı kullanma hilemizin kurtarmaya geldiği yerdir. Bizi doğrudan ikinci şekle yönlendirmek yerine, "sıçrama" etkisi yaşama riskiyle bağlantılara bir parametre vereceğiz. görüntü yok... Bu, atlamaktan kaçınmaya yardımcı olacaktır. Bu numarayı sitede keşfettim: CSS3 create (Fransızca).

#toregister: target ~ #wrapper #register, #tologin: target ~ #wrapper #login (z-endeksi: 22; animasyon-adı: fadeInLeft; animasyon gecikmesi: .1s;)

İşte olan: butona tıkladığımızda Katılmak, #toregister'a gidiyoruz. Ardından animasyon gerçekleşir ve ancak o zaman #register öğesine gideriz. adlı bir animasyon kullanıyoruz. solmaInLeft... Sıfır opaklık kullanarak şekli "gizlediğimiz" için, yavaş yavaş görünecek bir animasyon uygulayacağız. Ayrıca z-endeksini başka bir formun üstünde görünecek şekilde değiştirdik. Aynısı diğer form için de olur.
İşte animasyon kodu. Dan Eden'in CSS3 animasyon çerçevesini kullandık ve bu çerçeveyi öğreticimiz için uyarladık.

Animate (animasyon süresi: 0,5 sn; animasyon zamanlama işlevi: kolaylık; animasyon doldurma modu: her ikisi;) @keyframes fadeInLeft (%0 (opaklık: 0; transform: translateX (-20 piksel);) %100 (opaklık) : 1; dönüştür: çevirX (0);))

"Sönen" şeklin solunda bir solma animasyonu olacaktır:

#toregister: target ~ #wrapper #login, #tologin: target ~ #wrapper #register (animasyon adı: fadeOutLeftBig;) @keyframes fadeOutLeft (%0 (opaklık: 1; transform: translateX (0);) %100 (opaklık) : 0; dönüştürmek: translateX (-20 piksel);))

Artık animate.css dosyasıyla diğer Dan Eden animasyonlarını kullanabilirsiniz: .animate sınıfını ve animasyonların adlarını değiştirmeniz yeterlidir. animate-custom.css dosyasının sonunda birkaç başka animasyon da bulacaksınız.

Hepsi bu arkadaşlar. Umarım bu eğitimden keyif almışsınızdır!

Bazı tarayıcılarda parametrenin arka plan klibi: metin desteklenmiyor. Animasyonlar Internet Explorer 9'da çalışmaz. Internet Explorer 8 ve daha düşük sürümlerde, hedef sözde sınıf desteklenmez, bu nedenle bu efekt orada hiç çalışmayacaktır.

notÇeviri hakkındaki tüm yorumları kişisel bir mesajla memnuniyetle kabul edeceğim. Teşekkürler!

Etiketler: Etiket Ekle

Daktiloyla yazılmış metin, basılı karakterlerden oluşur - grafik semboller.
Grafik semboller, metinde görünür bir ekrana sahip sembollerdir.
Tüm grafik semboller, tek bir evrensel Unicode sistemi setinde toplanır.
Bir html belgesine bir Unicode grafik karakteri ekleyin
bu tablonun asıl ve tek amacı budur.

Aşağıdaki yollardan biriyle bir html belgesine bir sembol ekleyebilirsiniz:

sembol görüntüsünü tarayıcı penceresinden görsel html düzenleyici pencerenize kopyalayın
karakterin html kodunu doğrudan html belgesinin koduna kopyalayın

Bunların iki farklı yol olduğunu bir kenara bırakalım:

görsele görsel ekle
kodu kodun içine gömün.

Sembolün yazı tipi, boyutu ve HTML'deki rengi aşağıdaki gibi bir kodla ayarlanabilir:
KARAKTER KODU
nerede,
Arial - yazı tipi,
10px - piksel cinsinden yazı tipi boyutu,
# ff0000 - yazı tipi renk kodu (kırmızı)

Örneğin:
☎ - sembolün yazı tipi boyutu 30 pikseldir,
☎ - sembolün yazı tipi boyutu 30 pikseldir, renk - kırmızı
☎ - sembolün yazı tipi boyutu 20 pikseldir,
☎ - sembolün yazı tipi boyutu 10 pikseldir.
Yaklaşık. Özel karakterler eklemek için önerilen yazı tipleri Arial, Verdana ve Tahoma'dır. Bu yazı tipleri Unicode karakterlerini doğru bir şekilde görüntüler ve buna karşılık web uygulamaları tarafından doğru şekilde desteklenir.

"Sembol"
(görünür sembol ekranı)
Bu sütundan sembol görüntüsünü kopyalayabilir ve html metin düzenleyici penceresine yapıştırabilirsiniz. Karakter, 20px yazı tipi boyutunda kopyalanacaktır. Kopyalama tamamlandıktan sonra, kopyalanan karakter için yazı tipi boyutunu doğrudan özelleştirmeniz gerekebilir.
"İsim"
(sadece önemli veya anlaşılmaz karakterler için)
Sembolün amacının açıklaması, kapsamı, örnekler ...
"Anımsatıcılar"
Anımsatıcı, HTML'deki bir karakterin alfabetik kodunu ifade eden "formunun gerçek bir yapısıdır. Doğrudan bir html belgesinin html koduna eklenir. Anımsatıcılar, profesyonel yerleşim tasarımcıları arasında çok popülerdir. İnsanlar tarafından mükemmel bir şekilde hatırlanır ve tüm html uygulamaları tarafından desteklenir.Her anımsatıcı, sembolünün alfabetik bir adını (belirtimi) ve tarayıcı kodunu okumak için bir sinyal görevi gören ve monitör ekranında görüntülenmeyen bir hizmet işareti (&) içerir.Ad Her bir anımsatıcı benzersizdir ve okunması kolaydır, çünkü sembolü karakterize eden İngilizce sözcükten türetilmiştir.
Anımsatıcılar (Yunanca) - bir şeyi hatırlama sanatı. Anımsatıcılar, depolama nesnesi bir şeyle ilişkili bir duruma getirildiğinde hatırlanması zor bilgilerin algılanmasını kolaylaştırmak için kullanılır.
"Kod"
Kod, & gibi HTML'deki bir karakterin sayısal ondalık kodudur. Doğrudan html belgesinin html koduna eklenir. Sayısal ondalık kod, Unicode sistemindeki bir karakterin sıra numarasını gösteren bir sayıdan ve tarayıcı kodunu okumak için bir sinyal görevi gören ve monitör ekranında görüntülenmeyen birkaç hizmet karakterinden (& ve #) oluşur. Sayısal ondalık kod, çok yönlülüğü ve algılama kolaylığı nedeniyle yaygın ve yaygın olarak kullanılmaktadır.

HTML'deki Kontrol Karakterleri (XHTML)

HTML'deki (XHTML) kontrol karakterleri, bir web sayfasının HTML düzeninde kullanılan HTML dili hizmeti karakterleridir. Bu karakterler herhangi bir tarayıcı tarafından desteklenmelidir, çünkü onlarsız HTML metninin doğru görüntülenmesi imkansızdır. Kontrol karakterleri metinde görüntülenmez ve doğrudan klavyeden girildiğinde, tarayıcı tarafından sayfa ekranda çizildiğinde herhangi bir eylemin yürütülmesini gerektiren noktalama işaretleri olarak yorumlanır.

Genel insan kavramlarını sembolize ettikleri ve tarayıcı tarafından sıradan tipografik karakterler olarak yorumlandıkları sıradan metinlerde kontrol sembollerinin kullanılmasına izin verilir. HTML metinlerinde hizmet sembollerinin bu şekilde kullanılmasıyla, sembolün kendisinin değil, HTML kodunun girilmesi gerekir. Çünkü tekrar ediyorum, aksi takdirde tarayıcı hizmet sembolünü harekete geçirici mesaj olarak algılayacak ve monitör ekranında HTML metnini doğru şekilde görüntüleyemeyecektir.

Kontrol sembolleri ve bunların HTML kodları, istisnasız olarak tüm tarayıcılar tarafından bilinir ve anlaşılır, ne yazık ki, farklı tarayıcılarda yanlış görüntülenebilecek veya daha da kötüsü hiç görüntülenmeyebilecek diğer işaretler hakkında söylenemez.

Sözdizimi ve noktalama işaretleri


	uzunluk uzayı N (normal uzay)
	uzunluk alanı M (uzun alan)

-	yumuşak taşıma (yazdırılamaz karakter)	-
‑	tire		‑
-	çizgi uzunluğu N (normal çizgi)	-	–
—	uzun çizgi M (uzun çizgi)	—	—
.	puan		.
,	virgül		,
…	üç nokta	…	…
:	kolon		:
;	noktalı virgül		;
!	ünlem işareti		! ǃ
?	soru işareti		?
@	"köpek"		@
*	"Yıldız"		*
#	"kafes"		#
‘	sol üst tek tırnak işareti	‘	‘
’	tek sağ üst tırnak işareti	’	’
‚	sağ alt tek tırnak işareti	‚	‚
“	sol üst çift tırnak işareti	“	“
”	çift sağ üst tırnak işareti	”	”
„	sağ alt çift tırnak işareti	& bdquo	„
«	çift sol açılı tırnak işareti (rus)	«	«
»	çift dik açılı tırnak işareti (rus)	»	»
́	aksan işareti, örnek: Vasya		́
"	kesme işareti, örnek: sen "ben		"
´	akut, örnek: Vas'ya	´	´
¶	paragraf (yazdırılamayan işaret)	¶	¶
§	paragraf	§	§
ˆ	aksan (ters kuş)	ˆ	ˆ
˜	küçük tilde	˜	˜
¦	dikey noktalı çizgi	¦	¦
(	sol parantez		(
)	sağ parantez		)
〈	sol açılı ayraç	〈	〈
〉	dik açılı ayraç	〉	〉
‹	sol açılı ayraç, seçenek	‹	‹
›	köşeli ayraç sağ, seçenek	›	›
[	sol köşeli parantez		[
]	sağ köşeli parantez		]
/	eğik çizgi - eğik çizgi karakteri		/
\	ters eğik çizgi		\
⁄	eğik çizgi (bölme işareti)	⁄	⁄
ǀ	dikey çubuk		ǀ
ǁ	çift dikey çubuk		ǁ
‾	üst çizgi, örnek: Vasya‾vasya	‾	‾
¯	macron, örnek: Vasya¯vasya	¯	¯

Ticari markalar ve para birimleri

+	bir artı	+	+
−	eksi	−	- −
=	eşittir		=
±	artı veya eksi	±	±
×	çarpma işareti	×	×
÷	bölme işareti	÷	÷
⋅	nokta operatörü (orta hat)	⋅	· ⋅
∗	yıldız işareti operatörü (çizginin ortası)	∗	∗
∼	tilde operatörü	∼	∼
.	liste işaretçisi (çizginin ortası)	.
¹	üst simge "1"	¹	¹
²	üst simge "2"	²	²
³	üst simge "3"	³	³
HTML'de Üst Simge ve Alt Simge (XHTML) etiketler kullanılarak eklenebilir ^{ve _{, sırasıyla: SAYI ^{üst simge}→ NUMBER Üst Simge SAYI _{alt simge}→ NUMBER Abone}}
½	kesir "bir saniye"	½	½
⅓	kesir "üçte bir"		⅓
¼	kesir "dörtte bir"	¼	¼
¾	kesir "üç çeyrek"	¾	¾
№	numara işareti		№
%	yüzde		%
‰	ppm	‰	‰
°	derece	°	°
′	vuruş (dakika, fit)	′	′
″	çift asal (saniye, inç) Örnek 1: 30 ° 25 ′ 12 ″ Örnek 2: 25 ′ 12 ″	″	″
µ	mikro	µ	µ
π	Pi	π	π
ƒ	fonksiyon işareti ("integral" ile karıştırılmamalıdır)	ƒ	ƒ
∫	integral	∫	∫
∅	sıfırı geçti, boş küme ("çap" ile karıştırılmamalıdır)	∅	∅
⌀	çap (Latince "o" üstü çizili ile karıştırılmamalıdır)		⌀
ø	Latince "o" çapraz olarak üstü çizili	ø	ø
Ø	Latince büyük harf "O" çapraz olarak üstü çizili	Ø	Ø
∏	iş işareti	∏	∏
∑	toplama işareti	∑	∑
√	radikal (x'in karekökü veya kökü)	√	√
∝	orantılı şekilde	∝	∝
∞	Sonsuzluk	∞	∞
∠	enjeksiyon	∠	∠
⊥	ortogonal (dik)	⊥	⊥
∴	sonuç olarak imza	∴	∴
≅	neredeyse eşit	≅	≅
≈	neredeyse eşit	≈	≈
≠	eşit değil	≠	≠
≡	aynı şekilde	≡	≡
≤	küçük veya eşittir	≤	≤
≥	daha fazla veya eşit	≥	≥
∧	mantıksal VE	∧	∧
∨	mantıksal VEYA	∨	∨
⊕	artı bir daire içinde işaretle (doğrudan miktar)	⊕	⊕
⊗	daire içinde çarpma (çapraz ürün, gözlemciden gelen ok)	⊗	⊗
ʘ	daire içinde nokta (gözlemci üzerindeki ok)		ʘ










				✵ ✵