Dollita's profile picture

Published by

published
updated

Category: Web, HTML, Tech

PART 2 Profile picture frame layout & How to use 🎨

Part 2 of Profile picture frame layout & How to use 

I can't post all in 1 post cuz SpaceHey have 40 pic limit o(〒﹏〒)o

Sorry for the inconvenience (# ̄ω ̄) 

Feel free to use, i don't own any design below, all the credit goes to every amazing artists:

Basil

Members Cabinet

Stupid Ugly Idiot

Strawberry 🍓 

GREGORIAH

 ...

Please tell me if you the artist so I can give you credit(´• ω •`)ノ

It may took a while for pictures to load so pls be patient (^^#)

Tell me if there is any error (⌒▽⌒)❤ 

Oh more cute frame here: Still not my tho 👩🏻‍🎨

Icon Profile pic Frame overlay

More profile pic overlay

How to use: o( ❛ᴗ❛ )o

Right click at the frame you like to copy image link address, paste to (put link here) section like below, then put this code in your 'Edit your profile'

+YOUR PROFILE FRAME

.profile .profile-pic img {

  -webkit-mask-image: url(put link here);

  -webkit-mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center;

}

+ FRIEND PROFILE FRAME  

.profile .friends .person img:not(.icon) {

  -webkit-mask-image: url(put link here);

  -webkit-mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center;

}

- For Blog Entry put it in HTML edit (this blue <> icon) 

.blog-entry .profile-pic img {

        -webkit-mask-image: url(put link here);

        -webkit-mask-size: 100%;

        -webkit-mask-repeat: no-repeat;

        -webkit-mask-position: center;

+ COMMENTER PROFILE FRAME(Both Profile and Blog)

.comments-table td:first-child img:not(.icon) {

        -webkit-mask-image: url(put link here);

        -webkit-mask-size: 100%;

        -webkit-mask-repeat: no-repeat;

        -webkit-mask-position: center;

}

Ex: The result look like my profile pic 

.blog-entry .profile-pic img {

        -webkit-mask-image: url(https://64.media.tumblr.com/21537f823a9682455940164951cd4f70/a13f6b3efb69d983-60/s250x400/4513c30e7c3d485e14827bda68c9750d7b2d80e4.pnj);

        -webkit-mask-size: 100%;

        -webkit-mask-repeat: no-repeat;

        -webkit-mask-position: center;

}

Sorry for bad English btw it my second language (ノωヽ)

Leave a Kudos if you like 

PART 1

 More cute stuff


0 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

Dollita

Dollita's profile picture

Some pic may not show in preview don't worry the link still works, i checked ( ̄▽ ̄)ノ just click on it it will show ~ヾ(・ω・)


Report Comment