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

Legg til Tweetable Links i innholdet ditt med InlineTweet.js

Du ser denne funksjonen mye på store nettsteder som TechCrunch og Mashable. Du vil lese en artikkel og legge merke til at en hel setning er uthevet som en lenke .Likevel, når du klikker på det, åpnes et tweet-vindu som ber deg om å dele denne tekstbiten med dine Twitter-følgere. Det er en fin måte å drive trafikk til nettstedet ditt og oppfordre til flere sosiale aksjer.For å g

(Tekniske og design tips)

5 beste Windows Apps for å overvåke Internett-bruk

Når du kommer til internett hjemme eller som student, er det alltid en hette på din internettbruksgrense . Men når du er online, har du en tendens til å bli båret bort og noen ganger ender opp med å utmanne en hele måneds internettpakke innen et par uker.Det kan være flere grunner til det. For eksempel er noen nettsteder tyngre enn de andre. Tilsva

(Tekniske og design tips)