Rundt profilbilde med HTML og CSS

Man trenger faktisk ikke å gjøre et profilbilde rundt med et bilderedigerings program. Det kan nemlig gjøres med en enkel HTML og CSS kombinasjon. Jeg bruker denne koden veldig aktivt. Når du har lagt inn CSS-koden kan du selv velge hvilke bilder du ønsker å gjøre runde, enten det er profilbildet ditt eller andre bilder i designet. Det ser ut som koden ikke virker på bilder i innlegg.

VIKTIG: BILDET MÅ VÆRE KVADRATISK FRA FØR!

Altså alle sider på bildet må være like lange. Hvis bildet er avlangt enten vannrett eller loddrett vil det bare få veldig avrundede kanter, men det blir ikke rundt.

 

Du skal hit: Min blogg > Avansert design > Stilsett (CSS)

.img-circle {
border-radius: 50%;
}

Koden limes inn hvor som helst i stilsettet.

 

Her er koden for å identifisere bildet som en runding.

<img class="img-circle" src="URL TIL DITT BILDE HER" >

 

Dersom du ønsker å begrense størrelsen på bildet.

<img class="img-circle" src="URL TIL DITT BILDE HER" width="DITT TALL HER F.EKS 150">


















  • Jeg blogger mest for min egen del. Dette er en offentlig dagbok fremfor blogg, men en gang iblant legger jeg ut diverse innlegg som noen kanskje har nytte av. For eksempel miljø og bærekraft, økologisk kosmetikk eller webdesign. Dette finner du også i kategoriene mine.

    • bloggrevyen - Oversikt over nye norske blogginnlegg.
    • miniblogg - Kjapp blogging i miniformat.
    • bloggblogg - Her blogger vi selv om stort og smått.
    • forum - Tips, råd og hjelp om blogging og design.
    hits