Bloggande iFokus

Bloggande

Etikett: bloggdesign-html-och-css
Läst 4839 ggr
MatildaTheL
2

Runda hörn på bild direkt i bloggen

Hej Igen!

Jag har hört att man på blogg.se ska kunna få sin bild med rundade hörn direkt i bloggen när man lägger ut bilden i ett inlägg så att säga, någon som vet hur man gör det och hur det fungerar? :)

Jess89
0
#1

För att få runda hörn på dina bilder gör du så här

1. leta upp den här koden som ser ut så här

.image {
background:#F7F5F4;
width: 670px;
padding: 11px;
margin: 0px 6px 20px 0px;
-webkit-box-shadow: 1px 1px 2px 1px #aaaaaa;
box-shadow: 1px 1px 2px 1px #aaaaaa;
-webkit-border-radius: 5px;
border-radius: 5px;
}

2. Sätt in den här koden någon stanns i koden

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;

exempel:

image {
background:#F7F5F4;
width: 670px;
padding: 11px;
margin: 0px 6px 20px 0px;
-webkit-box-shadow: 1px 1px 2px 1px #aaaaaa;
box-shadow: 1px 1px 2px 1px #aaaaaa;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}

Ett tips är att du själv går in på designadinblogg.se och läser hur du ska göra. Det står väldigt mycket bra där!

Vänliga hälsningar Jessica
medarbetare på socialt stöd & Anhöriga

Mimmi
2
#2

Det där är väldigt mycket onödig kod! För det första behöver man inte skriva en kodrad för varje hörn om alla hörn ska ha samma värde. Så kallade border prefixes (t.ex. -moz) är inte heller särskilt nödvändiga nu för tiden, men jag skriver med dem här nedan ändå.

Det är alltså bara desss kodrader som behövs: 
**
border-radius: 5px;**
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;

De är helt likvärdiga till de Jessica skrev.

Dessa lägger du in under .image i din stilmall.

MatildaTheL
0
#3

okej tack båda för svar!

Designadinblogg.se är en jättebra sida som jag kollar jättemycket på!

Cafesinner
1
#4

Annars är www.roundpic.com skitbra!!!