Kształty,animacje Avatarów

[Gość Mateusz]

Są jakieś poradniki dotyczące Avatarów? Chciałbym zmienić z kwadratu na kółko oraz dodać że się obracają.

[Kogz]

Kształty:  http://forum.invisionize.pl/topic/42276-okr%C4%85g%C5%82e-avatary-ipb/

[Gość Mateusz]

Avatarki dalej sa kwadratowe.

.ipsUserPhoto {
/*padding: 1px;
border-radius:50%;
border: 1px solid #d5d5d5;
background: #F2F0F0;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);*/
}
 
.ipsUserPhotoLink:hover .ipsUserPhoto {
border-color: #c3c3c3;
border-radius: 50px
}
 
.ipsUserPhoto_variable { max-width: 155px; }
.ipsUserPhoto_large { max-width: 250px; max-height: 250px; }
.ipsUserPhoto_medium { width: 50px; height: 50px; }
.ipsUserPhoto_mini { width: 34px; height: 34px; }
.ipsUserPhoto_tiny { width: 20px; height: 20px; }
.ipsUserPhoto_icon { width: 16px; height: 16px; }

Edytowane 3 Stycznia 2015 przez qwertyxd

[tenechu]

.ipsUserPhoto {

padding: 1px;

border-radius:50%;

border: 1px solid #d5d5d5;

background: #F2F0F0;

-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);

-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);

box-shadow: 0px 2px 2px rgba(0,0,0,0.1);

}

 

.ipsUserPhotoLink:hover .ipsUserPhoto {

border-color: #c3c3c3;

border-radius: 50px

}

 

.ipsUserPhoto_variable { max-width: 155px; }

.ipsUserPhoto_large { max-width: 250px; max-height: 250px; }

.ipsUserPhoto_medium { width: 50px; height: 50px; }

.ipsUserPhoto_mini { width: 34px; height: 34px; }

.ipsUserPhoto_tiny { width: 20px; height: 20px; }

.ipsUserPhoto_icon { width: 16px; height: 16px; }

[Gość Mateusz]

Dzia tenechu, tylko zostało obramowanie. W którym kodzie mogę je wykasować?

[tenechu]

.ipsUserPhoto {
padding: 1px;
border-radius:50%;
background: #F2F0F0;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
 
.ipsUserPhotoLink:hover .ipsUserPhoto {
border-color: #c3c3c3;
border-radius: 50px
}
 
.ipsUserPhoto_variable { max-width: 155px; }
.ipsUserPhoto_large { max-width: 250px; max-height: 250px; }
.ipsUserPhoto_medium { width: 50px; height: 50px; }
.ipsUserPhoto_mini { width: 34px; height: 34px; }
.ipsUserPhoto_tiny { width: 20px; height: 20px; }
.ipsUserPhoto_icon { width: 16px; height: 16px; }

Ewentualnie border-radius możesz dać w px, lepiej będzie wyglądać jak będzie delikatnie zaokrąglone

[Gość Mateusz]

Dokładnie chodzi mi o taki efekt. 

 

A aktualny mam taki                    

Edytowane 3 Stycznia 2015 przez qwertyxd

[tenechu]

To wklej kod z mojego ostatniego posta.

[Gość Mateusz]

Jest wklejony.

 

 

 

Po wykasowaniu kodu

a.userNavPhoto:after, a.ipsUserPhotoLink:after {
bottom: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;

Mam taki efekt.

 

Teraz ostatnie pytanie. Jak wykasowac obramowanie? Chodzi mi o te białe obramowanie wokół avataru.

Edytowane 3 Stycznia 2015 przez qwertyxd

[Gość Mateusz]

To że nie mogę edytować to napiszę tutaj.

.ipsUserPhoto {
padding: 1px;
border-radius:50%;
background: #F2F0F0;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
 
.ipsUserPhotoLink:hover .ipsUserPhoto {
border-color: #c3c3c3;
border-radius: 50px
}
 
.ipsUserPhoto_variable { max-width: 155px; }
.ipsUserPhoto_large { max-width: 250px; max-height: 250px; }
.ipsUserPhoto_medium { width: 50px; height: 50px; }
.ipsUserPhoto_mini { width: 34px; height: 34px; }
.ipsUserPhoto_tiny { width: 20px; height: 20px; }
.ipsUserPhoto_icon { width: 16px; height: 16px; }

Na okrągłe Avatary z obramowaniem.

________________________________________________________________________________________________

 

.ipsUserPhoto {
padding: 1px;
border-radius:50%;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
 
.ipsUserPhotoLink:hover .ipsUserPhoto {
border-color: #c3c3c3;
border-radius: 50px
}
 
.ipsUserPhoto_variable { max-width: 155px; }
.ipsUserPhoto_large { max-width: 250px; max-height: 250px; }
.ipsUserPhoto_medium { width: 50px; height: 50px; }
.ipsUserPhoto_mini { width: 34px; height: 34px; }
.ipsUserPhoto_tiny { width: 20px; height: 20px; }
.ipsUserPhoto_icon { width: 16px; height: 16px; }

Na okrągłe Avatary bez obramowania

_______________________________________________________________________________________________________-

 

a.userNavPhoto:after, a.ipsUserPhotoLink:after {
bottom: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;

Kasujemy jezeli nie chcemy kwadratowego obramowania.

Edytowane 3 Stycznia 2015 przez qwertyxd