snippets for layout coding

hi!!!!!1 i'm trying to build a ..catalog ? of cool useful stuff that i keep on discovering !^_^ if you have a request don't hesitate to ask for it!!! i'll always be looking for stuff to put on here hehe...

you can resize the little code boxes at the bottom right corner of the box!

flip columns, but not text:

main{direction:rtl;}main div * {direction: ltr;}

vertical layout:

.col{display:block;width:100%!important;}

full width page:

.container{width:100%;}

change style for every little block:

(blurbs, profile, contact, etc...) (like, if you wanna set the same border and background for all) without too many lines

main .col > div {
}

select friends and comments sections separately:

for friends only:

.friends:not(#comments) {
}

for comments only:

#comments {
}

select 'links' and 'interests' tables separately:

for interests only:

.table-section:not(.table-section + .table-section) {
}

for links only:

.table-section + .table-section {
}

replace text with css:

change font size to 0, and add an after/before element with a content value and with a set font size, example:

to replace the blurbs heading text:

.blurbs .heading h4 {
		font-size:0px;
}
.blurbs .heading h4::after {
		content:"Custom text";
		font-size:14px;
}

removing antialiasing for pixel-based fonts

apply a filter and 0px shadow to a text-based element, for example "p"s or "h4"s

might be only for my display or something, but if i don't include the text-shadow it will be grayish instead of black, for black text that is

textelement {
    filter:contrast(1);
    text-shadow: 0px 0px 0px;
}

moving tiled background:

as seen on here

first, find a tiled background! or make your own! here: https://hekate2.github.io/website-tools/generators/image_gen/generator.html thank you so muhc hekate... add the code to your style, replace the body::after background url to your tiled image url! important: match the transform:translate dimensions to the dimensions of your picture (example: the hekate pattern generator is 100x100 pixels, so transform is -100px, 100px. if you have a 256x256 pattern, the transform will be -256px, 256px. if you don't fix this, the animation will jump-cut) change the speed of your animation in the "animation" property, in seconds (where it says 10s, change it to anything you like (in seconds !!!!!))

@keyframes slide {
		0% {
		  transform: translate(0);
}
		100% {
		  transform: translate(-100px, 100px);
}
	}
body::after {
	content:"";
	display:block;
	position:fixed;
	top:-500px;
	left:-500px;
	background: url("");
	height: 200%;
	width: 200%;
	animation: slide 10s linear infinite;
	z-index:-1;
}

something else you're looking for that isn't here? LET ME KNOW PLEASEPLASEPLASEPALSEPLAEASPLEASPLEASPLEA i'd love to help

72 Kudos

Comments

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

jasmine	1718677158 do you know how to make the left column and its contents horizontal instead of vertical? like instead of stacking on top the sections read from left to right? this would help me so much!!! Report Comment
princess angel ౨ৎ	1711744664 Can u please help me with the blurbs I want 2 make mine a box but not like a scrollbox if that makes sense :( Report Comment
vivi	1706290522 tysm for this post!! it'll help me a lot :P how did u put the speech balloon in your profile status? thx again <3 Report Comment
Veronika_Vampire	1704537739 thank you sm for this post, I was wondering if you knew how to make drop down menu that looked like the stamps and quizzes section of this person's blurbs https://spacehey.com/randalismyboyfie Report Comment not op but i think this is what ur looking for https://www.w3schools.com/tags/tag_details.asp by jonny; 1704563707; Report thxx by Veronika_Vampire; 1704581741; Report
vel venomous	1697900546 omg thx for this! u seem like yk alot about css and stuff so i was wondering if u knew how to animate text? like make it wrap around the area it's in? idk if that makes sense but i rlly dk how 2 do it and i've been wondering for a rlly long time. TY IF U REPLY Report Comment yw!! :3i might get half of what you're asking, but there are so many ways to animate text!! exactly what are you trying to achieve? i don't really understand the "wrapping" part but if you mean about text sliding you can use a like this you can use a <marquee> tag! by daniel; 1697906234; Report oh okay okay ty!! by vel venomous; 1697911336; Report