Witam. Na jednym z forum na silniku IPB jest możliwość edycji profilu w HTML/CSS i każdy użytkownik może sobie edytować własny profil.
Ja chciałbym zrobić sobie avatar w sercu, by takie coś osiągnąć trzeba użyć funkcji before i after, lecz niestety mi to nie chce działać.
Teraz pytanie do osób znających bardzo dobrze CSS w silniku IPB. Jak mam zrobić mój avatar by był w sercu. Poniżej przedstawiam kod, który ja wstawiam, lecz on nie chce działać.
.ipsUserPhoto {
position: relative;
width: 100px;
height: 90px;
}
.ipsUserPhoto:before {
position: absolute;
content: "";
left: 50px;top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.ipsUserPhoto:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
Wiecie co może być nie tak? Tworzenie takiego serducha znalazłem na tej(Kliknij ) stronie
kalitt
19 Marzec 2014 18:52
#2
To może nie to że sam kod nie chce działać co o tyle że samo forum ma filtrowanie niektórych tagów/cssów i przez to może nie chcieć załadziać
PS Sprawdzałeś czy zdjęcie to serduszko nie jest przykryte przez zdjęcie?
Nie jest przykryte, bo jedynie z całego kodu działa:
.ipsUserPhoto {
position: relative;
width: 100px;
height: 90px;
}
Raczej filtrowania nie ma forum.
manieKMP
20 Marzec 2014 05:37
#4
Po pierwsze kod nie zadziała tak jak tego chcesz, po drugie nie ma prawa zadziałać:
podpinasz go pod tag IMG (jedynie Opera dawała taką możliwość)
przedstawiony kod ma błąd (tylko lewą część serca wyświetla)
kształt wyświetlić takim kodem można na avatarze (kolor wypełnienia będzie przykrywać obrazek)
Poprawiony przykład kodu, z pomniejszonym i ustawionym w lewym górnym rogu serduchem
.avatar:before, .avatar:after {
position: absolute;
content: "";
left: 50px;
top: 40px;
width: 20px;
height: 30px;
background: red;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%; transform-origin: 0 100%;
}
.avatar:after {
left: 30px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
Efekt o który Tobie chodzi to nieco zachodu w zabawie z czymś takim jak maski… ogółem musiałbyś dorwać kształt, np. serca w svg (serce powinno być bodaj czarne, jako że tą część by “wycinało” na miejsce dla avatara),
a możne jest opcja by zrobić to bez funkcji before i after?
Da się zrobić tak, że zdjęcie w kształcie serca pokryje oryginalny avatar?
manieKMP
20 Marzec 2014 09:26
#6
Toć napisałem Tu masz wytłumaczenie o co chodzi.
Zrobiłem tak
.ipsUserPhoto {
width: 150px;height: 150px;
overflow: hidden;
color: #fff;background: url(http://s20.postimg.org/f9qosci2l/avatar.jpg);
-webkit-mask-image: url(http://s20.postimg.org/gndq9wry5/maska.png);
}
Lecz to nie działa, nie wiem czy dobrze zrobiłem. Pomocy.
manieKMP
21 Marzec 2014 19:14
#8
Poniższe kody testowane na forum dp, więc nie wiem jak będzie to wyglądać na tym, o którym piszesz. Jeżeli zachowane są takie same “proporcje” co do avatarów jak tutaj, to nie powinno być żadnych problemów:
Na Operze 20
.ipsUserPhoto {http://s20.postimg.org/gndq9wry5/maska.png );
Na Google Chrome
.ipsUserPhoto {http://s20.postimg.org/gndq9wry5/maska.png );
Tłumaczyć chyba nie muszę co poszczególne części kodów robią?
A co do efektu, próbka z GC.
PS. Jeśli jakaś część nie zadziała (a może tak być, jak w pewnej piosence “wszystko się może zdarzyć” ;)) to sprawdź, czy dopisanie na końcu wartości !important pomoże (przed średnikiem i profilaktycznie ze spacją oddzielającą od wartości…).
Opcją są maski css, myk jest w tym, że np. na Fx działa tylko svg, a na Google Chorme można wykorzystać png. 
