Proiect comunitar Creați o listă de descrieri

Ce stil ?! Așa că, în acest proiect al comunității vreau să stili ceva pe care nu l-ați folosit niciodată înainte; o listă de descriere ... Trimiteți-vă exemplele CSS și demne vor fi publicate pe site săptămâna viitoare. Citiți mai departe pentru a afla mai multe!

Puteți folosi orice tehnică doriți, atâta timp cât se întâmplă prin magia CSS

Acest lucru este ușor (ish)

Îți dau o simplă piesă de marcare (o listă de descriere) pe care ai libertatea de a-ți schimba stilul în orice fel te rog. Iată marcajul (descărcați-l înfășurat ca fișier html dacă doriți):

  PSDTUTS+
 Tutoriale Adobe Photoshop de la începători la avansați.
 Nettuts+
 Tutoriale de dezvoltare web, de la începători la avansați.
 Webdesigntuts+
 Tutoriale în profunzime și articole despre designul web.
 Wptuts+
 Un site web WordPress dedicat cursurilor de WordPress, tutoriale și video WordPress.

O descriere rapidă a listelor de descriere

Veți recunoaște probabil

ca lista de definiții, un element care a fost în jur de la HTML4. A fost repus în considerare pentru HTML5, totuși, pentru că a fost de multe ori înțeles greșit și, prin urmare, utilizat în mod greșit.

O listă de descriere în forma sa cea mai simplă cuprinde o listă

și descriere

. Este posibil să existe mai mulți termeni pentru o singură descriere, așa cum este posibil să existe mai multe descrieri ale unui singur termen. Există, de asemenea, biți suplimentari de marcare, cum ar fi care pot fi aruncate în mix, dar ne vom face griji despre asta încă o zi :)

Citiți mai multe din spec. W3C dacă vă simțiți curioși.

Ce credeți că puteți face cu această listă, utilizând puterea CSS? Iată două cu adevărat de bază exemple, doar pentru a obține o idee despre ceea ce facem aici.

Orice merge

Nu puteți atinge codul HTML, fără excepție. Dar există sarcini pe care le puteți face pentru a modela această listă prin CSS!

Joacă cu culorile
Modificați fonturile (utilizați @ font-face dacă doriți)
Faceți-o receptivă
Adăugați conținut dinamic cu elemente pseudo
Concentrați-vă pe utilizarea
Suflați-vă departe cu răsturnări și tranziții
Chiar și utilizarea texturilor și a imaginilor, dacă doriți (asigurați-vă că ați zip toată lotul în sus atunci când îl trimiteți peste)

Singurul lucru pe care trebuie să-l țineți cont este faptul că pagina demo are deja stiluri de resetare cu normalize.css.

Inscrie-ma!

Acest lucru nu a putut fi mai simplu:

Descărcați fișierele de bază
Modificați stilul în orice fel doriți
Includeți orice detalii personale și o descriere a ceea ce ați făcut
Puneți fișierul (fișierele) în sus și trimiteți-le la mine!

Voi publica cele mai bune când am adunat câteva. Acest lucru poate fi în curs de desfășurare - nu există un termen limită.

Aștept cu nerăbdare să văd ceea ce cu toții veniți! Mult noroc!

Web design