https://jsfiddle.net/Luxter/233wkur7/
Aby osiągnąć pożądany rezultat potrzebne są nam dwa obrazki: avatar właściwy oraz obrazek z ramką (ten drugi koniecznie musi zawierać tylko ramkę i resztę w kolorze przezroczystym). Za to odpowiada ten fragment:
- Kod: Zaznacz cały
<img class="avatar" src="http://visionlighthouse.cba.pl/vlforum/download/file.php?avatar=987_1484229301.jpg" />
<img class="border" src="http://i.imgur.com/PHEo7wJ.png" />
Dodatkowo oba te obrazki upychamy w <div> nadrzędny, który jest kontenerem na nie:
- Kod: Zaznacz cały
<div class="avatar_container">
Jakbyś teraz usunął w przykładzie zawartość dodanych CSS (prawa-górna ćwiartka), to byś zauważył, że obrazki owszem są, ale obok siebie. Aby zmusić je do zachodzenia na siebie dodajemy do CSS:
- Kod: Zaznacz cały
.avatar, .border {
position: absolute;
width: 120px;
height: 160px;
}
"position:absolute" oznacza, że oba obrazki mają się zaczynać od lewego-górnego rogu elementu nadrzędnego (właśnie po to dodaliśmy wcześniej nasz <div> kontener wcześniej). "width" i "height" to odpowiednio szerokość i wysokość obrazka oraz ramki (dobierzesz sobie swoje wartości).
Jeśli chcesz ramkę bardziej fikuśną, np. taką jak tu: https://jsfiddle.net/Luxter/u9wyj1wf/3/ (nieprostokątna rameczka spod której normalnie "wystawałby" prostokątny avatar), to poradnik jak to zrobić wstawiłem w tym temacie kilka postów wyżej: viewtopic.php?f=17&t=837#p12519
Jeżeli zaś Twoim celem było tworzenie własnych rameczek w sposób analogiczny do tego na VL (do czego link podesłałeś) to niestety nie mogę Ci pomóc, bo sam nie wiem jak to działa. Widzę tylko, że działa to w oparciu o bibliotekę kineticjs (która jest przestarzała i oficjalnie nierozwijana oraz bez wsparcia), więc jak już to polecam się rozejrzeć za nowszą alternatywą.
