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

Edycja awatarów komentujących

||
Wakacje to niewątpliwie możliwość wygospodarowania czasu, którego brakuje na co dzień, by trochę zaprzyjaźnić się z CSS. Albo go sobie przypomnieć (to zdecydowanie moja wersja) czy się nim po prostu pobawić. Mam kilka pomysłów, postaram się je Wam przedstawić podczas sierpniowej laby. Dzisiaj przedstawiam selektor odpowiadający za awatary komentujących: .comments .avatar-image-container. Podrzucę Wam trochę pomysłów na to, co można z nimi zrobić. 

Podstawowa zasada: jeśli chcesz, aby efekt obramowania czy cień dokładnie przylegał do awatara, ustaw padding: 0px;. Zwiększenie tej wartości do np. 2 pikseli sprawi, że będzie między nimi przerwa. 


1) border i border-radius

Kliknij na obraz, aby otworzyć oryginalny rozmiar. Ta grafika przedstawia kilka zastosowań border i border-radius dla awatarów komentujących . 

2) position

Dzięki nadaniu awatarowi position: relative; możesz przesuwać go w poziomie i pionie, np. 
position: relative;
left: 5px;
top: 30px;
A co za tym idzie: zrównać go z górną linią tekstu komentarza, wsunąć pod nick lub wrzucić aż za datę i godzinę. 

3) transform: rotate

Kolejnym możliwym efektem jest obracanie awatara (działają tutaj liczby dodatnie i ujemne):
transform: rotate(15deg); 
Poza tym możemy odwrócić go do góry nogami:
transform: rotateX(180deg);
lub posłużyć się odbiciem lustrzanym:
transform: rotateY(180deg);

Mam nadzieję, że powyższe pomysły się przydadzą oraz zainspirują Was do kolejnych. ;)

4 komentarze