css - zdjęcia w poście

Selektor zdjęć w poście

.post-body img

Usunięcie obramowania 

1) znalezienie w kodzie HTML linijki: border: 1px solid $(image.border.color) i jej usunięcie

lub

2) wpisanie w arkuszu css: .post-body img {border: solid 0px transparent;}

Obramowanie:

a) styl 

.post-body img {border-style: STYL;} 

hidden - niewidoczne, ukryte

solid - linia ciągła

dotted - linia kropkowa

dashed - linia przerywana

double - linia podwójna ciągła

groove - efekt wypukłej/podwójnej ramki

ridge - przeciwieństwo 'groove' w kolorach

outset - efekt klawisza

inset - efekt wciśniętego klawisza

b) grubość

.post-body img {border-width: GRUBOŚĆ;} 

wartość liczbowa w pikselach

thin - cienkie

medium - średnie

thick - grube

 c) kolor

.post-body img {border-color: KOLOR;}

green - nazwa koloru z np. tej listy

rgb(0, 255, 255) - za pomocą wartości RGB

 #0000FF - za pomocą kodu HEX (szesnastkowego) 

d) zaokrąglenie

.post-body img {border-radius: 10px;} 

- zaokrąglenie wszystkich narożników

.post-body img {border-radius: 5px 15px 25px 35px;} 

- zaokrąglenie każdego narożnika w innym stopniu

.post-body img {border-top-right-radius: 10px;}

- zaokrąglenie prawego górnego narożnika

Obramowanie - krótsza forma zapisu

.post-body img {border: solid 3px black;} 

Obramowanie - strony (w różnych kombinacjach)

{border-TOP-style: dashed;} - GÓRNA ramka jest przerywana

{border-RIGHT-width: 5px;} - PRAWA ramka ma grubość pięciu pikseli

{border-BOTTOM-color: red;} - DOLNA ramka ma kolor czerwony

{border-LEFT: solid 2px black;} - LEWA ramka jest ciągła o grubości dwóch pikseli i koloru czerwonego 

Obrys - w przeciwieństwie do obramowania jego zastosowanie niczego nie przesunie, wszystko pozostanie w swojej pozycji, ale stosuje się go jednocześnie dla wszystkich stron/krawędzi:

a) szerokość

.post-body img {outline-width: SZEROKOŚĆ;}

b) styl

.post-body img {outline-style: STYL;}

c) kolor

.post-body img {outline-color: KOLOR;} 

d) odstęp od zdjęcia

.post-body img {outline-offset: 5px;}

Obrys - krótsza forma zapisu

.post-body img {outline: 3px solid blue;}

Przezroczystość

.post-body img {opacity: 0.3;}

wartość może wynosić od 0 (niewidoczne) do 1 (pełna widoczność), sposób zapisu: 0.15, 0.4, 0.7 itp. (kropka zamiast przecinka!)

Pomniejszenie/powiększenie zdjęcia po najechaniu

.post-body img:hover {-webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85);} 

wartość musi być wszędzie taka sama, może wynosić: od 0 do 0.99 - pomniejszenie, 1 - normalna skala, od 1.01 i więcej - powiększenie