Share
Tid for en annen CodePen utfordring! Vi vil at du skal ta et tydelig utsnitt og bruke en dekorativ dråpehett til begynnelsen - de beste eksemplene vil bli vist i en uke eller så!
Nylig publiserte vi en opplæring på første-brev, en fremvoksende CSS eiendom som for tiden blir diskutert over på W3C. Hvis du er ny for å slippe caps, ta en titt:
Enten du bruker denne nye teknikken eller en mer etablert CSS-tilnærming, vil vi at du skal vise oss hva som er mulig med CSS drop caps. Vær kreativ, vær dekorativ, bruk dine typografiske følsomhet og designers fantasi til å blåse ut våre sokker. Du kan bruke webfonter, farger, posisjonering, bakgrunner, transformasjoner, gradienter, masker, alt du finner er mulig.
Vanligvis med disse utfordringene ber vi deg om ikke å berøre markeringen, men i dette tilfellet kan du endre passasjen som brukes for å gi deg det første bokstaven du foretrekker (for eksempel: en "O" kan passe det du designer, eller en "P" kan passe godt med skrifttypen du bruker).
Merk: Pass på at du gir kreditt når det er nødvendig.
Her er hva du trenger å gjøre, i noen døde enkle trinn.
For det første, gå videre til demoen på CodePen.
Slå den Gaffel knappen for å lage din egen kopi av det, legg til et annet tekstpass hvis du ønsker det, og gjør så mange endringer som du vil at CSS.
Hvis du er logget på CodePen, kan du redigere beskrivelsen ved å trykke på innstillinger knapp. Bruk dette til å gi folk en ide om hva du har gjort.
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 frem her og på sosiale medier snart!
Lykke til og ikke glem å følge Envato Tuts + på Codepen!
Accentsconagua