Uzziniet, kā izveidot neparastu sākumlapu, izmantojot CSS un attēlus
Uzziniet, kā izmantot CSS, lai izveidotu izdomātus sākotnējos ierobežojumus saviem punktiem. Ir pat vienkārša attēla aizvietošanas metode, lai izmantotu grafisko attēlu jūsu sākotnējai vāciņai.
Sākotnējo apvalku pamatstiļi
Dokumentos ir trīs pamatnosaukumu veidi:
- izvirzīts - visizplatītākais, kur pirmais burts ir lielāks un tajā pašā rindiņā kā pašreizējais teksts.
- samazinājās - arī diezgan bieži, ja pirmā burts ir lielāks un nokritās zem pirmās teksta rindiņas. Turpmāk tekstā ap to plūst.
- blakus - ja pirmā burte ir vienā kolonnā blakus pārējam tekstam. Tas ir vairāk izplatīts drukātā veidā nekā Web dizains.
Sākotnējie vāciņi vai pilienu vāciņi ir ļoti pazīstami. Tie ir lielisks veids, kā saģērbt citādi garu un garlaicīgu teksta platumu. Un ar CSS īpašumu: pirmā burta, jūs varat viegli noteikt, kā padarīt savu pirmo burtu mīļāko.
Izveidojiet vienkāršu sākotnējo vāciņu
Viss, kas jums jādara, lai izveidotu vienkāršu paaugstinātu sākotnējo vāciņu, ir padarīt lielāku burtu ar pirmo burtu ar pirmās burtu pseidom elementu:
p: pirmā burta {font-size: 3em; }Bet daudzi pārlūkprogrammas redz, ka pirmais burts ir lielāks par pārējo tekstu rindā, tādēļ tie virza līdzvērtīgi tam, kas būtu jēga šai pirmajai vēstulei, nevis pārējai rindai. Par laimi tas ir viegli salabot ar pirmās rindas pseido elementu un līnijas augstuma īpašību:
p: pirmā burta {font-size: 3em; } p: first-line {line-height: 1em; }Atskaņojiet ar sava dokumenta līnijas augstumu, līdz atrodat pareizo teksta izmēru.
Spēlē ar savu sākotnējo vāciņu
Tiklīdz jūs saprotat, kā izveidot sākotnējo vāciņu, varat to izģērbties iztekajās drēbēs, lai to izceltu. Spēlējiet ar krāsām, fona krāsām, malām vai jebkura cita, kas skar jūsu izskatu. Diezgan vienkāršs stils ir mainīt fonta un fona krāsu krāsas tikai pirmajai burtai:
p: pirmā burta {font-size: 300%; fona krāsa: # 000; krāsa: #fff; } p: first line {line-height: 100%; }Vēl viens triks ir centrā pirmajā rindā. Tas var būt sarežģīts ar CSS, jo teksta rindiņas vidusdaļa var būt citāda, ja jūsu izkārtojums ir elastīgs. Bet, atrodoties dažās spēlēs ar vērtībām, varat ievilkt savu pirmo rindiņu pietiekami, lai pirmais burts būtu vidū. Vienkārši spēlē ar procentos teksta ievilkumu punktā, kamēr tas izskatās labi:
p: pirmā burta {font-size: 300%; fona krāsa: # 000; krāsa: #fff; } p: first line {line-height: 100%; } p {teksta ievilkums: 45% ; }Blakus esošie sākumlapiņas ir cietas ar CSS
Ar CSS var būt grūti blakus esošie sākotnējie vāciņi, jo dažādās pārlūkprogrammās fonti tiek parādīti atšķirīgi. CSS blakus esošās vāciņa izveidošanas ideja ir pirmajā rindiņā izmantot teksta ievilkuma īpašību, lai to izspiestu (pa kreisi) negatīvu vērtību. Jums arī vajadzēs mainīt šī punkta kreiso rezervi par kādu summu. Atskaņojiet ar šiem numuriem, līdz punkts izskatās labi.
p {teksta ievilkums: -2.5em; margin-left: 3em; } p: pirmā burta {font-size: 3em; } p: first line {line-height: 100%; }Getting Really Fancy Sākotnējās Caps
Labākais veids, kā izveidot iedomātu sākotnējo vāciņu, ir mainīt fontu uz vairāk dekoratīvu fontu saimi. Ja izmantojat virkni fontu, kam seko vispārējs fonts , tas palīdzēs garantēt, ka jūsu sākotnējais vāciņš ir labi, lai jūsu klienti varētu to redzēt, neiegūstot pieejamību un lietojamības problēmas.
p: pirmā burta {font-size: 3em; fontu ģimene: "Edwardian Script ITC", "Brush Script MT", kursīvs; } p: first line {line-height: 100%; }Un, kā parasti, jūs varat apvienot visus šos ieteikumus, lai izveidotu sākotnējo vāciņu, kas reklāmu stilu piesaistītu savam punktam.
Grafiskās sākotnējās vāciņa izmantošana
Ja galu galā joprojām jums nepatīk, kā jūsu sākotnējie vāciņi izskatās lapā, varat izmantot grafiku, lai iegūtu precīzu meklēto efektu. Bet pirms jūs nolemjat pāriet tieši uz grafiku, jums jāapzinās šīs metodes trūkumi:
- Klienti bez attēliem neredz sākotnējo vāciņu un var neredzēt slēpto tekstu, ko attēls nomainās. Tas var padarīt šo punktu par nepieejamu vai grūti lasāmu.
- Attēli vienmēr papildina lapas ielādes laiku. Ja jums ir daudz sākotnējo vāciņu, varat būtiski palielināt lejupielādes laiku, ko daudzi cilvēki uzskata par nenozīmīgiem.
- Dažās pārlūkprogrammās tiek parādīta gan slēpta pirmā burta, gan attēls, kas var padarīt rindkopas tekstu nepāra.
- Šo iespēju ir ļoti grūti automatizēt, jo jums precīzi jāzina, kas ir pirmais burts, lai izmantotu pareizo grafiku. Tātad, katru reizi, kad rindkopu rediģē, jums var būt nepieciešams izveidot jaunu grafiku.
Pirmkārt, jums ir jāizveido pirmās vēstules grafiks. Es izmantoju Photoshop, lai izveidotu burtu L ar fontu "Edwardian Script ITC". Es to padarījos milzīgs - 300 pēdu lielumā. Pēc tam es attēlu samazināju līdz minimumam ap burtu un atzīmēju attēla platumu un augstumu.
Tad es izveidoju klasi "capL" par manu punktu. Šeit es definē, kādu attēlu izmantot, vadošo (line-height) un tā tālāk.
Jums ir jāizmanto attēla platums un augstums, lai iestatītu rindkopas teksta ievilkumu un polsterējumu. Manam L attēlam vajadzēja 95 pikses ievilkumu un 72 px polsterējumu.
p.capL {line-height: 1em; fona attēls: url (capL.gif); fona atkārtojums: nav-atkārtot; teksta ievilkums: 95 pikseļi; polsterējums augšpusē: 72 pikseļi; }Bet tas vēl nav viss. Ja jūs atstājat to tur, tad pirmajā burts tiks dublēts rindkopā - vispirms ar grafiku, pēc tam tekstā. Tātad, es pievienoju pirmo pirmo elementu ar klasi "sākotnējais" un lika pārlūkprogrammai nerādīt šo burtu:
span.initial {displejs: nav; }Un grafika tad parādās pareizi. Jūs varat spēlēt ar rindkopas teksta ievilkumu, lai teksts tiktu piesaistīts tieši līdz vēstulei, tomēr vēlaties to parādīt.