Construiți o tabelă de prețuri responsabilă cu state cu orientare netedă

În timpul acestui tutorial vom crea o masă elegantă de stabilire a prețurilor cu câteva efecte de mișcare uluitoare. Vom folosi scriptul Prefixfree al lui Lea Verou pentru a ne menține CSS curat, plus vom face totul receptiv, schimbând aspectul la câteva puncte de întrerupere.

Marcajul

Imaginea de mai jos afișează un schelet vizual al marcajului pe care îl vom crea. După cum puteți vedea, nu este construit folosind mese; folosim liste neordonate pentru flexibilitate maximă și reacție.

Marcaj HTML

Înainte de orice altceva, trebuie să începem cu un document gol. Foarte important aici este meta-tag-ul viewport, care va permite tuturor dispozitivelor să interpreteze corect aspectul nostru receptiv.

Acum putem începe cu carnea marcajului nostru de masă (sau mai degrabă listă markup):

  ... 
  De bază
   $ 9.99 pe luna 
 
  2 GB de stocare
 5 clienți
 10 proiecte active
 10 culori
 Bine ati venit
 Suport pentru e-mail 24/7
 
  Cumpară acum 
 
 ... 
 ...

În partea de jos, am inclus prefixfree (înainte de închidere tag), care ne permite să folosim proprietăți CSS neprefixate peste tot. Funcționează în spatele scenei, adăugând prefixul browserului actual la orice cod CSS, numai atunci când este necesar.

stiluri

După ce ați sortat marcajul nostru, să examinăm adăugarea unor stiluri. O să fac așa înăuntru