Wat is een betere manier om een ​​Community Community Project te runnen dan op CodePen? In deze, de eerste van dergelijke uitdagingen, wil ik dat je onze voorbeeldpen bekijkt, deze vlecht en verbetert. Dat is alles wat u hoeft te doen. De beste voorbeelden worden over een week of zo tentoongesteld!

Update: resultaten!

Inzendingen voor deze uitdaging zijn nu gesloten, kijk eens naar wat jullie allemaal bedachten!

De uitdaging

Een paar weken geleden schreef Jonathan een tutorial over het toevoegen van dynamische sectielinks aan een webpagina. Het idee is dat een JavaScript-fragment door een webpagina loopt, alle gevonden

 sectiekoppen, voegt vervolgens een link toe aan elke kolom zodat gebruikers die link kunnen delen.

De koppeling zelf is verborgen totdat de gebruiker over de titel zweeft.

Hier is de demo van Jonathan over CodePen

We willen dat je deze link er geweldig laat uitzien. Misschien schakel je de tekst uit voor een of ander pictogram? Of maak de link veel kleiner en geef hem een ​​achtergrond? Misschien is de ondoorzichtigheidsverandering een beetje veilig voor je - geef je het een geanimeerde pit? Doe alles wat je wilt, zolang het gebeurt binnen de rijken van het CSS-tabblad.

Terug naar jou

Dit is wat je moet doen, in een paar doodeenvoudige stappen.

Stap 1

Ga eerst naar de demo op CodePen. Dit is hoe het eruit ziet:

Stap 2

Druk op de Vork om uw eigen kopie ervan te maken en vervolgens zo veel wijzigingen aan de CSS aan te brengen als u wilt.

Stap 3 (optioneel)

Als u bent aangemeld bij CodePen, kunt u de beschrijving bewerken door op de info knop. Gebruik dit om mensen een idee te geven van wat je hebt gedaan.

Stap 4

Raken Opslaan, u bent klaar. Laat het ons weten in de comments als je klaar bent - en laat het ons gerust weten door ons ook twewdt tweeting.

Dat is het! Alle gegevens worden in CodePen aan deze verzameling toegevoegd en de beste voorbeelden worden binnen een week getoond op Tuts +!

Veel succes en vergeet niet om Tuts + op Codepen te volgen!