Share
Ik wed dat een aantal van jullie zich niet realiseren dat we de illusie van vormen kunnen creëren door 100% CSS te gebruiken. Door de grenseigenschap op creatieve manieren te gebruiken, kunnen we een aantal echt interessante polygonen maken. In de loop van deze week screencast, we zullen een manier vinden om spraak-bubbels te maken zonder gebruik te maken van achtergrondafbeeldingen.
De meesten van ons zijn inmiddels bekend met het gebruik van de eigenschappen "-moz-border-radius" en "-webkit-border-radius" om afgeronde hoeken te maken - of zelfs volledige cirkels - maar er zijn andere technieken om ingewikkeldere vormen te maken.
blockquote # one width: 250px; achtergrond: # e3e3e3; opvulling: 25px; positie: relatief; #one .arrow width: 0; hoogte: 0; regelhoogte: 0; border-top: 30px solid # e3e3e3; border-links: 60px effen wit; border-right: 10px effen wit; positie: absoluut; onder: -30px; rechts: 30px;
Merk op dat de eigenschap "bottom" de reciproke is van de eigenschap "border-top".
blockquote # twee width: 250px; achtergrond: # e3e3e3; opvulling: 25px; positie: relatief; blockquote # twee .arrow width: 0; hoogte: 0; regelhoogte: 0; border-top: 40px solid # e3e3e3; border-left: none; border-right: 30px effen wit; positie: absoluut; onderkant: 60%; rechts: -30px;
blockquote # drie width: 450px; achtergrond: # e3e3e3; opvulling: 25px; positie: relatief; #three .arrow width: 0; hoogte: 0; regelhoogte: 0; border-bottom: 25px solid # e3e3e3; border-right: 50px effen wit; positie: absoluut; top: -24px; links: 20px;
Ik typ deze alinea minuten voordat ik de tutorial plaats. Ik heb vanavond iets geleerd. Wist u dat, als u wilt dat uw document valideert, u de tekst niet rechtstreeks in een blockquote kunt plaatsen? Het moet worden genest binnen een bovenliggend element, zoals het
label. Bovendien vond de validator het niet leuk dat ik een span-tag gebruikte in de blockquote. Het zorgt voor een overvloed aan elementen, maar helaas niet de overspanning! Oh nou ja; geen probleem. Vervang het gewoon door een ander element. Het maakt nauwelijks een verschil.
Ik wil graag zien hoe jullie deze unieke truc hebben geïmplementeerd in je eigen projecten. Stuur ons links naar uw voorbeelden, via de reacties. Bedankt voor het kijken. Volgende week ben je van plan iets geavanceerder te leren ... Ik moet gewoon uitvinden wat! Tot dan.
Accentsconagua