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. ;)