idioteque's profile picture

Published by

published
updated

Category: Web, HTML, Tech

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


63 Kudos

Comments

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

monique >:3

monique >:3's profile picture

thank uu for thiss >_<


Report Comment

princess angel

princess angel's profile picture

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

vivi's profile picture

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

Veronika_Vampire's profile picture

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 jono; ; Report

thxx

by Veronika_Vampire; ; Report

vel venomous

vel venomous 's profile picture

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 idioteque; ; Report

oh okay okay ty!!

by vel venomous; ; Report