Slik lager du CSS Gradient Border Colours

Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie.

Med alle de nye funksjonene i CSS3, er vi nå i stand til å bygge bildeløse nettsteder. Tidligere var bruken av bildet uunngåelig når det gjelder å vise gradientfarger. I dag blir det mye slankere ved bruk av CSS3 Gradient Background . I tidligere innlegg har vi vist deg hvordan du kan bringe CSS3 Gradient til spill som bakgrunnsfarge i forskjellige former og retninger; Linjære, elliptiske og gjentatte gradienter.

Men CSS3 Gradient stopper ikke bare for bakgrunnsbruk. Visste du at du også kan bruke den innen grenser ? Les videre for å lære hvordan du gjør dette.

Første metode

Den første metoden er ved å bruke CSS3 Gradient innen pseudo-elementer . Vel, la oss se hvordan trikset fungerer.

Topp til nederste gradientgrense

Vi vil starte med en enkel gradient som sprer seg fra topp til bunn. For å komme i gang, opprett en boks med en div, som følger.

HTML

CSS

 .box {width: 400px; høyde: 400px; bakgrunn: #eee; } 

For å danne gradienten i boksens grenser, sett en solid kant på toppen og bunnen av boksen først. Vi lager også 2 rektangler med 2 pseudoelementer s - :before og :after - og spesifiser bredden i samme størrelse som kantlinjebredden. Plasser rektanglene på venstre og høyre side av boksen og bruk linear-gradient gjennom background-image . Du kan se hvordan dette trikset viser seg under:

Venstre til høyre kantgradient

La oss nå lage en gradient som strekker seg til venstre og høyre på samme måte som forrige eksempel. Bare denne gangen legger vi til rammegrensen på venstre og høyre side, i stedet for på toppen og bunnen. På samme måte bruker vi også pseudo-element - :before og :after - for å forme 2 rektangler. Men i motsetning til det forrige eksempelet plasserer vi dem nå på toppen og bunnen av boksen.

Diagonal Border Gradient

Å lage diagonal gradient med dette trikset er, vel, teknisk komplisert.

Likevel stole vi på 2 pseudo-elementer :before og :after og bruk linear-gradient . Denne gangen vil vi imidlertid anvende 2 linear-gradient i pseudo-elementet . Og hver gradient spenner i motsetning til hverandre. Se følgende kildekode for detaljer.

Second Trick

Den andre metoden er ved å bruke CSS3 grensebildeegenskap. Grensebildeegenskapen i CSS3 lar oss fylle grensen med et bilde, samt CSS3 Gradient. Nettleserne støtter border-image er ganske bra; Chrome, Internet Explorer 11, Firefox, Safari og Opera er alle i stand til å fullt ut gjengi border-image . Det skal imidlertid bemerkes at border-image kun vil fungere på rektangulære former eller bokser. Det betyr at å legge til border-radius vil avvike border-image .

Følgende er egenskapsbeskrivelsen for grensebilde:

 border-bilde:  ; 

De er banen som angir bildet som brukes i grensen. Her vil vi fylle ut det med CSS3 Gradient i stedet. For å oppnå samme resultat som i de foregående eksemplene, bruker vi CSS3 Gradient innenfor grensebildet, som følger.

 .box {width: 250px; høyde: 250px; bakgrunn: #eee; grense: 20px solid gjennomsiktig; -moz-border-image: -moz-lineær-gradient (topp, # 3acfd5 0%, # 3a4ed5 100%); -webkit-grense-bilde: -webkit-lineær-gradient (topp, # 3acfd5 0%, # 3a4ed5 100%); border-image: lineær gradient (til bunn, # 3acfd5 0%, # 3a4ed5 100%); border-image-skive: 1; } 

border-image viser ingenting hvis vi ikke angir border . Så, som du kan se over, legger vi 20px av 20px med gjennomsiktig kantfarge. Deretter setter vi verdien av border-image og den linear-gradient sammen med leverandørprefikset for tidligere Webkit- og Firefox-versjoner.

Tillegget av grense-bilde-skive vist ovenfor vil sette innvendige forskyvninger for innholdet i image-border . Denne egenskapen er nødvendig for å vise gradienten fullt ut i området rundt boksen. Se utgangen nedenfor:

Denne metoden gir mer fleksibilitet til å justere gradienten i alle mulige retninger; venstre til høyre, topp til bunn, diagonal eller i vinkel. Nedenfor er noen eksempler:

Venstre til høyre gradient

Diagonal Gradient

Hva du oppdager etter ferdigstillingsdesignskolen

Jeg dro til design skolen, og hvis du gjorde det, kan du kanskje lure på om du tok den riktige beslutningen, spesielt når regningen begynner å hakke opp og gjeldene fortsetter å strømme inn. Det er viktig å investere i en utdanning, men i sannhet, Designskolen gjør forholdsvis lite for å forberede deg på arbeidsverdenen i cutthroat designindustrien (faktisk er nesten alle bransjer cutthroat - det er en konkurransedyktig verden der ute).Det du l

(Tekniske og design tips)

Microtip - CSS Tooltip Library med innfødte tilgjengelighetsfunksjoner

Du kan gjøre et raskt søk på GitHub for å finne dusinvis av tilpassede verktøytipsbiblioteker. Og det ser ut til at nye treffer nettet hver måned.Microtip er en unik ressurs siden den kjører på rene CSS verktøytips, tilbyr tilpasset estetikk, og den bruker kildekoden som er fullt tilgjengelig for alle brukere.Hvis du

(Tekniske og design tips)