bunnie's profile picture

Published by

published
updated

Category: Web, HTML, Tech

code snippets and deco resources (๑´• .̫ •ू`๑).

yawwn ~*\(´O`)/ 

[wip] deco resources

collection by bunnieᖗ(ゝ◡╹)ᖘ

all creds at bottom !!<<33


The finished code snippets and deco resources have been uploaded!! check out my recent post:)


text symbols n emotes archive!


symbols

❤♥☁♛☯➳☭♂♀❀♡ඩ✧☀❦❧✯✤✺❋✷✸✼✵❂☺☻〠

ッヅ㋡▤▣▧▩❏❐❑❒▓░▒▩◿◺◹◸◥◢ ◤☛☚«»❁

ੈ✩‧₊ ˚⋆.ೃ࿔*:・ *ੈ✩‧₊˚  .ೃ࿐  *ೃ༄  ˏˋ°•*⁀➷ೃ ⁀➷  : ̗̀➛


emotes

( 。・_・。)人(。・_・。 ) ~(˘▾˘~) (づ。◕‿‿◕。)づ (¬_¬) 

╮ (. ❛ ᴗ ❛.) ╭  ٩꒰ʘʚʘ๑꒱۶ …ᘛ⁐̤ᕐᐷ ( ͒꒪̛ཅ꒪̛ ͒) ( ๑‾̀◡‾́)σ” 

(っ˘ڡ˘ς) (●´⌓`●) (๑´• .̫ •ू`๑). °(ಗдಗ。)° .-(๑☆‿ ☆#)ᕗ

(❀ •̀ᴗ•́ )♡(^ε^ )Lᵒᵛᵉᵧₒᵤ (ღ ・ิ◡・ิ)ε ・ิ ღ)*  ଘ( ॢᵕ꒶̮ᵕ (꒡ᵋ ꒡ღ) 

(っ˘³(•́ ᵕ •̀?)  (ु*´З`)ू(´ε` )♡  (^з^)-☆Chu!!  (ꈍᴗꈍ)ε`*)

˭̡̞(◞⁎˃ᆺ˂)◞₎₎=͟͟͞͞˳˚॰°ₒ৹๐  \(◕▿◕) (´ ⌣ `ʃƪ) ♡(^▽^) 。^‿^。 ´・ᴗ・`

 ⊂◉‿◉つ (•‿•◍) (ᴗᵔᴥᵔ) (=^・ω・^=) /ᐠ。ꞈ。ᐟ\ *◡* =^._.^=  

/ᐠ-ꞈ-ᐟ\ ˚‧º·(˃̣̣̥∩˂̣̣̥)‧ º·˚(T⌓T)‧º  ·(˚ ˃̣̣̥⌓˂̣̣̥ )‧º·╰(ɵ̥̥ ˑ̫ ɵ̥̥ ╰)  (-̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥᷄_-̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥̥᷅ )  (ʃᵕ̩̩ ᵕ̩̩)

(⋟﹏⋞)



banners

*̣̥☆·͙̥‧❄‧̩̥·‧•̥̩̥͙‧·‧̩̥˟͙☃˟͙‧̩̥·‧•̥̩̥͙‧·‧̩̥❄‧·͙̥̣☆*̣̥



INSERT IMAGE (i.e. blinks) 

<img src=“IMAGE URL”/>


ADD FILM GRAIN TO PAGE

html:before {

  animation: grain 8s steps(10) infinite;

  background-image: url(https://i.imgur.com/QpnTsrV.jpg);

  content: "";

  height: 300%;

  left: -50%;

  opacity:.2;

  position: fixed;

  top: -110%;

  width: 300%;

  pointer-events:none;

}

@keyframes grain {

  0%, 100% { transform:translate(0, 0) }

  10% { transform:translate(-5%, -10%) }

  20% { transform:translate(-15%, 5%) }

  30% { transform:translate(7%, -25%) }

  40% { transform:translate(-5%, 25%) }

  50% { transform:translate(-15%, 10%) }

  60% { transform:translate(15%, 0%) }

  70% { transform:translate(0%, 15%) }

  80% { transform:translate(3%, 35%) }

  90% { transform:translate(-10%, 10%) }

}


ROTATING PFP 


@keyframes spin{


  from{ transform:rotate(0deg); }

  to{ transform:rotate(-360deg); }

}

.general-about .profile-pic img{

  border-radius: 50%;

  animation: spin 7s infinite linear;

}


STAMPS/GIFS


<img src="url" width="110" height="70”/>




ADD CHARACTER TO SCREEN 


main:before {


    content: url(https://iili.io/HAKIb9t.png);


    position: fixed;


    bottom: -40px;


    right: -30px;


    transform: translateX(-3vw) translateY(-6vh);


    pointer-events: none;




BLINKIES


<img src=“IMAGEURL”/>



free blinkies:


<img src=“https://external-media.spacehey.net/media/sAUmJ79DYACPGulhP1o0VL6U7PNSEKBQBZuxeW1394jo=/https://shishka.neocities.org/shishka/img/blinkies/35.gif

 ”/>

<img src=“https://external-media.spacehey.net/media/sRGE4MbFzwQ06rmyGvb_HNi5FuNpJO41offqCNaV6mWY=/https://collection.ju.mp/assets/images/gallery17/16a70297.gif?v=8eb30ec7

 ”/>

<img src=“https://external-media.spacehey.net/media/sCrQZK9rEWcghn2QPmAQIDd3ZU31D1AJWCnnytKofW40=/https://64.media.tumblr.com/51d98fcfe84dd151369dc6c004786991/79bc40534f8a49ff-a2/s250x400/0ad9b9f7628d6202707f2f42524a5777f1dc7f44.gifv

 ”/>



FLOATIES // FLOATING IMAGE

<img src="IMAGE_URL"floating-image"/>


<style>
/* Make the image container position relative */
.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}

/* Position the image in the top right corner */
.image-container img {
  position: absolute;
  top: 20px;
  right: 20px;
}

/* Add a subtle animation */
.image-container img:hover {
  transform: scale(1.1);
}
</style>

Template (to create your own layout)


CREDITZ

Masterlist by Caitlynn 

Layout Help by Kyon

CSS Codes by ngiegs

Code Tips by r0bbyr4nd0m


12 Kudos

Comments

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

rabies ౨ৎ

rabies ౨ৎ's profile picture

silly question but how do u make blinkies/stamps not get stacked on top of eachother and be super long?? (like it is on my profile) like i wanna add 2 blinkies next to eachother then 2 blinkies under it to make it more cute and organizeed,,,,do u know what im saying?? i have no idea how to do it


Report Comment



display: flex;
flex-direction: row;

by (Jscorn); ; Report

Noé

Noé's profile picture

The font color is really hard to read, is there any chance you can make it darker


Report Comment



^-^ hope that helped!!

by bunnie; ; Report

That's perfect, thank you!

by Noé; ; Report