Add-ons for pfp !!

 Want this ? 


max

NOTES: 

 ANY WRITING LIKE THIS  / *BLANK* /  EXPLAINS WHAT THE CODE IS FOR 

 ALL ADD-ONS ARE ANIMATED GIFS 

 BORDER & PFP INCLUDED & CAN BE REMOVED/CHANGED 

 TO REMOVE BORDER  DELETE ( border: double ; border-radius: 10px;) IT'S FOUND AFTER THE PFP'S URL 



TEARDROP GIF

<style>



.general-about{


  position: relative;


 margin-top: 15px;


}


.general-about .profile-pic::before{

content: '';


  background: url('https://media2.giphy.com/media/gv1RoyU1t7GvwaK69O/giphy.gif?cid=6c09b952xnt5511mgtlfhe1j8cb0jlvnfkul5eimr3kxjj0x&ep=v1_stickers_search&rid=giphy.gif&ct=s') no-repeat; /* TEAR DROP GIF */


background-size: cover;

display: block;


  width: 30px;

  height: 35px;

  z-index: 99;

  position: absolute;

  top: 70px; /* MOVE GIF ^ & v */

  left: 19px; /* MOVE GIF R & L */

  rotate: 7deg; /* ROTATE GIF */




</style>


<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: url("https://i.pinimg.com/736x/35/fa/55/35fa55157fe2de11f9d505c23d9b5d2e.jpg"); display: inline-block; border: double ; border-radius: 10px ; content:"" } /* CHANGE URL 2 PFP U WANT */

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* PROFILE */ 

</style>

CIG GIF

<style>



.general-about{


  position: relative;


 margin-top: 15px;


}


.general-about .profile-pic::before{

content: '';


  background: url('https://media2.giphy.com/media/xT0xeoWXk2oHyatPZS/200w.gif?cid=6c09b952q0ngjgexrzdub4civ4dk4l0z61vdz6mmwcw73dnh&ep=v1_stickers_search&rid=200w.gif&ct=s') no-repeat; /* CIG GIF */


background-size: cover;

display: block;


  width: 60px;

  height: 60px; /* SIZE GIF */

  z-index: 99;

  position: absolute;

  top: 57px; /* MOVE GIF ^ & v */

  left: 15px; /* MOVE GIF R & L */

  rotate: -10deg; /* ROTATE GIF */




</style>


<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: url("https://i.pinimg.com/736x/3a/ee/18/3aee1846e0039a3dc89d6d0cd2c288e7.jpg"); display: inline-block; border: double ; border-radius: 10px ; content:"" } /* CHANGE URL 2 PFP U WANT */

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* PROFILE */ 

</style>


GLASSES GIF

<style>



.general-about{


  position: relative;


 margin-top: 15px;


}


.general-about .profile-pic::before{

content: '';


  background: url('https://media0.giphy.com/media/LOujFRz0ynuMaNeNn2/giphy.gif?cid=6c09b952tx744nm0wupvemszpzvziqoj681yg0us7ciyejxa&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=s') no-repeat; /* GLASSES GIF */


background-size: cover;

display: block;


  width: 116px;

  height: 100px; /* SIZE GIF */

  z-index: 99;

  position: absolute;

  top: 20px; /* MOVE GIF ^ & v */

  left:24px; /* MOVE GIF R & L */

  rotate: -2deg; /* ROTATE GIF */




</style>


<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: url("https://i.pinimg.com/736x/6f/39/aa/6f39aaf1e44acdde17a0525d0d7dc0cf.jpg"); display: inline-block; border: double ; border-radius: 10px ; content:"" } /* CHANGE URL 2 PFP U WANT */

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* PROFILE */ 

</style>


HAT GIF

<style>



.general-about{


  position: relative;


 margin-top: 15px;


}


.general-about .profile-pic::before{

content: '';


  background: url('https://media4.giphy.com/media/Jmfw7RIWM89yh40EAo/giphy.gif?cid=6c09b952ax9dbnlq95wyt141gj3907mi9zhvcrb4ihp2orxr&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=s') no-repeat; /* HAT GIF */


background-size: cover;

display: block;


  width: 109px;

  height: 95px; /* SIZE GIF */

  z-index: 99;

  position: absolute;

  top: -60px; /* MOVE GIF ^ & v */

  left:89px; /* MOVE GIF R & L */

  rotate: 29deg; /* ROTATE GIF */




</style>


<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: url("https://i.pinimg.com/736x/f4/cf/ba/f4cfba719f5d4999774ac37b22c06b46.jpg"); display: inline-block; border: double ; border-radius: 10px ; content:"" } /* CHANGE URL 2 PFP U WANT */

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* PROFILE */ 

</style>

BUBBLEGUM GIF

<style>



.general-about{


  position: relative;


 margin-top: 15px;


}


.general-about .profile-pic::before{

content: '';


  background: url('https://media0.giphy.com/media/2YoRN8dIxQ579zHQaP/200w.gif?cid=6c09b9525uy41ohlrrgeyxgva7icfglxxeuj6eqal0i8q1xg&ep=v1_stickers_search&rid=200w.gif&ct=s') no-repeat; /* BBG GIF */


background-size: cover;

display: block;


  width: 54px;  /* SIZE GIF */

  height: 60px; /* SIZE GIF */

  z-index: 99;

  position: absolute;

  top: 58px; /* MOVE GIF ^ & v */

  left:60px; /* MOVE GIF R & L */

  rotate: 0deg; /* ROTATE GIF */




</style>


<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: url("https://i.pinimg.com/474x/24/63/4e/24634e34e33a6fad98940c2537df1e66.jpg"); display: inline-block; border: double ; border-radius: 10px ; content:"" } /* CHANGE URL 2 PFP U WANT */

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* PROFILE */ 

</style>



do leave Kudos if you end up using any of these !! Comments are also appreciated ^^


1 Kudos

Comments

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