Provocarea CodePen # 1 secțiunea Style Link-uri cu CSS

Ce modalitate mai bună de a rula un proiect comunitar de proiectare web decât de pe CodePen? În aceasta, prima dintre aceste provocări, vreau să verificați exemplul nostru de stil, să îl furcăm și să îl îmbunătățim. Asta e tot ce trebuie să faci. Cele mai bune exemple vor fi prezentate într-o săptămână sau cam asa ceva!

Actualizare: Rezultate!

Intrările pentru această provocare sunt acum închise - aruncați o privire la ceea ce ați venit cu toții!

Provocarea

Cu câteva săptămâni în urmă, Jonathan a scris un tutorial despre adăugarea de linkuri din secțiunea dinamică către o pagină web. Ideea este că un fragment de JavaScript rulează printr-o pagină web, găsește toate

 secțiuni, apoi adaugă o legătură către fiecare, permițând utilizatorilor să partajeze acel link.

Linkul în sine este ascuns până când utilizatorul se plimba peste titlu.

Iată demo-ul lui Jonathan pe CodePen

Vrem ca acest link să arate minunat. Poate veți schimba textul pentru o anumită pictogramă? Sau faceți link-ul mult mai mic și dați-i un fundal? Poate că schimbarea opacității este un pic sigur pentru tine - dă-i niște pizzazii animate? Fă tot ce vrei, atâta timp cât se întâmplă în cadrul domeniului CSS.

Peste voi

Iată ce trebuie să faceți, în câțiva pași simpli.

Pasul 1

În primul rând, mergeți la demonstrația de pe CodePen. Asa arata:

Pasul 2

Loveste Furculiţă pentru a crea o copie proprie a acesteia, apoi efectuați cât mai multe modificări pe care doriți să le faceți la CSS.

Pasul 3 (opțional)

Dacă sunteți conectat (ă) la CodePen puteți edita descrierea apăsând pe Info buton. Utilizați acest lucru pentru a da oamenilor o idee despre ceea ce ați făcut.

Pasul 4

Lovit Salvați, ați terminat. Asigurați-vă că ne-ați informat în comentarii când ați terminat - și nu ezitați să ne anunțați prin tweeting-ul nostru @wdtuts, de asemenea.

Asta e! Toate intrările vor fi adăugate la această colecție pe CodePen și cele mai bune exemple vor fi prezentate pe Tuts + într-o săptămână sau cam asa ceva!

Noroc și nu uitați să urmați Tuts + pe Codepen!