CodePen Challenge # 1 Style Section Links med CSS

Hvilken bedre måte å drive et webdesign-fellesskapsprojekt enn på CodePen? I dette, den første av slike utfordringer, vil jeg at du skal sjekke ut vårt eksempelpenne, gaffel og forbedre den. Det er alt du trenger å gjøre. De beste eksemplene vil bli vist i en uke eller så!

Oppdatering: Resultater!

Oppføringer for denne utfordringen er nå stengt - ta en titt på hva du alle kom opp med!

Utfordringen

For noen uker siden skrev Jonathan en veiledning om å legge til dynamiske seksjonskoblinger til en nettside. Tanken er at en utdrag av JavaScript går gjennom en nettside, finner alle

 seksjonsoverskrifter, legger deretter til en kobling til hver enkelt slik at brukerne kan dele den linken.

Selve lenken er skjult til brukeren svinger over tittelen.

Her er Jonatsons demo på CodePen

Vi vil at du skal gjøre denne lenken så fantastisk. Kanskje vil du bytte ut teksten til et ikon av noe slag? Eller gjør lenken mye mindre og gi den en bakgrunn? Kanskje er opacitetsendringen litt trygg for deg - gi den litt animert pizzazz? Gjør alt du vil, så lenge det skjer innenfor rike på CSS-fanen.

Over til deg

Her er hva du trenger å gjøre, i noen døde enkle trinn.

Trinn 1

For det første, gå videre til demoen på CodePen. Slik ser det ut:

Steg 2

Slå den Gaffel knappen for å lage din egen kopi av det, så gjør så mange endringer som du vil ha CSS.

Trinn 3 (Valgfritt)

Hvis du er logget på CodePen, kan du redigere beskrivelsen ved å trykke på info knapp. Bruk dette til å gi folk en ide om hva du har gjort.

Trinn 4

Truffet Lagre, du er ferdig. Sørg for å gi oss beskjed i kommentarene når du er ferdig, og gjerne gi oss beskjed ved å tweet oss også @ wdtuts.

Det er det! Alle oppføringer blir lagt til i denne samlingen på CodePen og de beste eksemplene vil bli vist på Tuts + i en uke eller så!

Lykke til og ikke glem å følge Tuts + på Codepen!