Share
Jeg vedder på en haug av dere ikke innser at vi kan skape illusjonen av figurer ved å bruke 100% CSS. Ved å utnytte grenseegenskapen på kreative måter kan vi lage noen virkelig interessante polygoner. I denne uken er screen, vi finner ut en måte å lage talebobler uten å ta utgangspunkt i bakgrunnsbilder.
De fleste av oss er nå kjent med å bruke "-moz-grense-radius" og "-webkit-grense-radius" -egenskapene for å lage avrundede hjørner - eller til og med komplette sirkler - men det finnes andre teknikker for å lage mer kompliserte former.
blockquote # one width: 250px; bakgrunn: # e3e3e3; polstring: 25px; stilling: relativ; #one .arrow width: 0; høyde: 0; linjehøyde: 0; border-top: 30px solid # e3e3e3; border-left: 60px solid hvit; border-right: 10px solid hvit; posisjon: absolutt; bunn: -30px; høyre: 30px;
Legg merke til hvordan egenskapen "bunn" er den gjensidige av egenskapen "border-top".
blockquote # two width: 250px; bakgrunn: # e3e3e3; polstring: 25px; stilling: relativ; blockquote # two .arrow width: 0; høyde: 0; linjehøyde: 0; border-top: 40px solid # e3e3e3; border-left: none; grense-høyre: 30px solid hvit; posisjon: absolutt; bunn: 60%; høyre: -30px;
blockquote # tre width: 450px; bakgrunn: # e3e3e3; polstring: 25px; stilling: relativ; #three .arrow width: 0; høyde: 0; linjehøyde: 0; border-bottom: 25px solid # e3e3e3; border-right: 50px solid hvit; posisjon: absolutt; topp: -24px; venstre: 20px;
Jeg skriver dette avsnittet før du legger opp veiledningen. Jeg lærte noe i kveld. Visste du at hvis du vil at dokumentet ditt skal validere, kan du ikke plassere tekst direkte inn i en blockquote? Det må være nestet i et foreldreelement - som
stikkord. I tillegg likte validatoren ikke det faktum at jeg brukte en span-kode i blockquote. Det gir mulighet for en overflod av elementer, men dessverre ikke spenningen! Jaja; ingen stor sak. Bare erstatt det med et annet element. Det gjør neppe en forskjell.
Jeg er veldig ivrig etter å se hvordan dere har implementert dette unike trikset i dine egne prosjekter. Send oss linker til eksemplene dine, via kommentarene. Takk for at du så på. Neste uke, planlegger å lære noe mye mer avansert ... Jeg trenger bare å finne ut hva! Inntil da.
Accentsconagua