Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

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 

2 komentarze