Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 14, 2024 - @771.85 (what is this?)
Forum activity rating: Four Star Posts: 52/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :transport: :transport: More is More :transport: :transport:

+  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 1173 times)
Melooon
Hero Member ⚓︎
*****


So many stars!

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

View Profile WWW

First 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« 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 ⚓︎
**


🍄🖤🐀

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


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
Full Member ⚓︎
***



View Profile WWW

First 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.

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)

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!

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

View Profile WWW

First 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« 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 ⚓︎
*



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: 1909
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: 26
Views: 5719
Last post January 26, 2024 @915.29
by Paprika
POLL: How many personal sites have you built?

Started by xandraBoard ✁ ∙ Web Crafting

Replies: 30
Views: 4326
Last post January 11, 2024 @150.49
by xXWebMasterXx_Gina

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


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