Home | All Fwiends | Random | Online | Music | Blog | Search

Jinx_33's Blog

"it's all about being number 2"
Specter
101 years old
Norway
Last Login: 1624898125000
Contacting Jinx_33
Message
Report
Add
Block
All Blogs (5/10)
1617481196000

css ;D

soo i guess i'll write some stuff about css things i know and i'll give credits to people of course soo-

grillbert has amazing layouts like :

https://media.discordapp.net/attachments/771777197467893791/827998166308749346/unknown.png?width=755&height=364

or

https://media.discordapp.net/attachments/771777197467893791/827998904649515088/unknown.png?width=746&height=364

and 2 more and check out his amazing page for the css!

and if people are wondering how to make cursors there is a website for it called https://www.cursors-4u.com/ it will give you a css code down on the selected cursor :)

and a great start with color and images for layouts the css will be :

body{ background-image: url(image link here) }

body{color: insert color here;}

okay so if you want the gothic theme the link is here https://github.com/sophiezhng/my-space-windows-93-themes/blob/gh-pages/gothicglitch.css (credits to sohpiezhng on github!)-she has also more css layouts so check it out <3

also if ya want a little sticker on your right side of your screen here it is!

.url {
background: url(image url here) no-repeat;
position: fixed;
right: 0;
bottom: 0px;
color: #19e7be;
background-size: 300px;
height: 270px;
width: 270px;
border: none;
box-shadow: none;
filter: drop-shadow(8px 9px 15px #00000044);
z-index: 1000;
font-size: 0px;
opacity: 50;
}

(credits to starcandy, <3 thank youuu)

alsooo how to make your images shake when you put your cursor on them!

img:hover {
/ Start the shake animation and make the animation last for 0.5 seconds /
animation: shake 0.5s;

/ When the animation is finished, start again /
animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

(credits to a css website called https://www.w3schools.com/)

also how to make all your images black and white

img {
-webkit-filter: grayscale(100%); / Safari 6.0 - 9.0 /
filter: grayscale(100%);
}

(credit to the same website)

i think this is it i can't think of anything more but just thank to you all people that made those css, and btw i used one of grillberts css so thank you and have a good day guys.

Please login to leave a comment.