Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 22, 2024 - @117.69 (what is this?)
Forum activity rating: Three Stars Posts: 33/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :4u: Love is not possession  :4u:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  CSS you use on every site?


« previous next »
Pages: [1] Print
Author Topic: CSS you use on every site?  (Read 1685 times)
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« on: February 05, 2023 @772.14 »

There are a few CSS snippets I use on almost every site Iv made; I figured Id share a few of the best here! Feel free to share your CSS snippets! :ha:

Spin! Makes things spin!
Code
.spin {
  animation-name: spin;
  animation-duration: 10000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


Hover Twist (like the MK Nav Bar)
Code
.twist {
  transition: 1s;
}
.twist:hover {
  transform: rotate(360deg);
}


Blink! Simulates the old <blink> tag!
Code
.blink {
  animation: blink-animation 0.95s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}


Center: Forces text centering on something (you can also make left right variants)
Code
.center {
  text-align: center !important;
}


Scrollbar styling - basic scrollbar styling on Chrome, Firefox and Safari
Code
* {
	scrollbar-color: #cd7c00 #000020;
}
::-webkit-scrollbar {
	background: #000020;
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: #000020;
}
::-webkit-scrollbar-thumb {
	background: #cd7c00;
	border-radius: 10px;
}

Bobbing: The bobbing animation used on MelonLand homepage!
Code
.bobbing {
  animation: bobbing 2s ease-in-out infinite;
  animation-direction: alternate;
}
@keyframes bobbing {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
RodFireProductions
Jr. Member ⚓︎
**


🍄🖤🐀

⛺︎ My Room
StatusCafe: rodfire8181
iMood: rodfire8181
Itch.io: My Games

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #1 on: February 05, 2023 @786.61 »

This one snippet always ends up on all of my sites. It makes things tremble in fear or excitement! It's the only animation I tend to implement.

Code
.scared {
  animation: an_shake .2s linear infinite;
}
.scared_h:hover {
  animation: an_shake .2s linear infinite;
}
@keyframes an_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); }
}
Logged

we art, web dev, and game dev
Cele
Sr. Member
****

any way the wind blows

⛺︎ My Room

View Profile

First 1000 Members!Joined 2022!
« Reply #2 on: February 06, 2023 @587.12 »

Thanks for those. I have a very simple thing everywhere, image align to right so text can still be next to it. And caption under it if wanna.
Code
figure {
  float: right;
  display: flex;
  flex-flow: column;
  margin: auto;
  max-width:450px;
  padding:5px;
}

figcaption {
  color: #000000;
  padding: 3px;
  text-align: center;
}



Logged
brisray
Sr. Member ⚓︎
****


⛺︎ My Room

View Profile WWW

RocketmanFirst 1000 Members!Joined 2023!
« Reply #3 on: April 30, 2023 @339.66 »

Another spinny thing. This is used on one of my pages to demonstrate moire patterns. A spinnning grid on top of a static one - https://brisray.com/computers/halftone.htm

Code
<style>
#rotate-div {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	width: 400px;
	text-align:center;
	padding-top:50px;
	padding-bottom:50px;
}
#steady-img {
	left:0;
	top:0;
}

#rotate-img {
	position: absolute;
	left:50px;
	top:50px;
	-webkit-animation: rotation 15s infinite linear; 
	animation: rotation 15s infinite linear; 
}

 @-webkit-keyframes rotation { 
	from {
		-webkit-transform: rotate(0deg);
	}	to {
		-webkit-transform: rotate(359deg);
	}
}

@keyframes rotation { 
	from {
		transform: rotate(0deg);
	}	to {
		transform: rotate(359deg);
	}
}
</style>

<div id="rotate-div">
	<img src="images/moire-vert.gif" id="steady-img">
	<img src="images/moire-vert.gif" id="rotate-img">
</div>
Logged
HayleyMulch
Jr. Member ⚓︎
**


(she/they) | if my grandmother had wheels, etc.

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: hayleymulch
iMood: HayleyMulch

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #4 on: May 17, 2023 @888.51 »

*bookmarks this topic*

Thanks for sharing these! :chef:
Logged

myrrhdoll
Newbie ⚓︎
*


something's on your shoulder (it's me)

⛺︎ My Room
StatusCafe: telltaleheart

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #5 on: June 21, 2023 @597.92 »

Code
* { box-sizing: border-box;}

no more math when it comes to margins, paddings and borders...

Code
.tilde::before, .tilde::after {
  content: ' ~ ';
}

~ It's cute and it doesn't mess with screen readers ~
Logged

~ the realest of them all... ~
do what you love!
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #6 on: September 14, 2023 @613.77 »

This is a handy snippet you can add to your body tag if your site uses very small text - it stops iPhones from making the text bigger and breaking your layout!

Code
-webkit-text-size-adjust: 100%;
« Last Edit: September 22, 2023 @554.62 by Melooon » Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
BinaryDigit
Newbie ⚓︎
*


⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #7 on: September 22, 2023 @553.72 »

Thank you for these cool snippets!

I love this typewriter effect, originally from this Codepen: https://codepen.io/geoffgraham/pen/jrWwWM (edit: wow I didn't realize it would embed instead of link!)

Code
/* GLOBAL STYLES */
body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

Then assign the class "typewriter" to the text you want to use this on in your HTML.


And I know this isn't a retro web thing, more a modern thing, but If I build in light/dark mode, I always use this:

Code
:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}
Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Best way to have a 2 column site?

Started by ObspogonBoard ☔︎ ∙ I need Help!

Replies: 3
Views: 2428
Last post February 13, 2023 @208.53
by fLaMEd
How do you prefer to keep your site organized (or not)

Started by NightdriftBoard ✁ ∙ Web Crafting

Replies: 30
Views: 8821
Last post August 02, 2024 @153.99
by candycanearter07
GUIDE: How to fix links on a frame site! - MK Frame-Link System

Started by MelooonBoard ✁ ∙ Web Crafting

Replies: 9
Views: 10321
Last post March 10, 2024 @777.40
by Salty

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi