HTML STUFF

This is my page of HTML and CSS stuff I've made and want to share with people :]

back to site home

External Links

free drag'n'drop-style website builders, for if you can't be bothered to learn coding for realsies

straw.page, runs on mobile and markets itself as a good way for kids to get into websites
mmm.page, i like their scrapbooky branding and they boast about automatic responsiveness
hotglue.me, i also like their scrapbooky branding and they have a no-sign-up demo to see if you like it

external stuff for learning html, css, js, etc

sadgrl.online/learn, big name neocities user's superior web-building tutorials page
the bubbles effect i used on the homepage
lexyeevee's css tutorials intended for cohost but good for learning in general
lexyeevee and others' css pride flag tutorials again intended to fit in a cohost post but can be deployed anywhere
a few layouts to use, including one that makes it look like tumblr
interesting microlessons on different things you can do with your site, kinda like this page
loveberry's html/css resources for fun text things

Square Gallery

Shocking even myself, this page operates on pure CSS!

HTML

<h3>STANDARD TABLE</h3>
      
      		<table>
      		  <tr>
      		    <td>
      					<figure style="margin:0px;"> 
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      						
      						
      						
      						
      						
      					  
      					  
      					  
      					  
      						
      		    </td>
      		    <td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      		    </td>
      		    <td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      		    </td>
      		    <td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      		    </td>
      		    <td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      		    </td>
      		  </tr>
      		  
      		  
      		  
      		  
      		  <tr>
      		    <td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      		    </td>
      		  </tr>
      		  
      		  
      		  
      		</table>
      	
      		<h3>CUSTOMIZED TABLE</h3>
      		
      
      		<table>
      			<tr>
      				<td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      				</td>
      				<td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="155" height="155"></a>
      						<figcaption style="font-size:18px;color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      				</td>
      				
      				<td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid #d4af37;" src="IMAGE FILEPATH" alt="ALT TEXT" width="160" height="160"></a>
      						<figcaption style="font-size:20px;color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      				</td>
      				
      				<td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="155" height="155"></a>
      						<figcaption style="font-size:18px;color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      				</td>
      				<td>
      					<figure style="margin:0px;">
      						<a href="LINK PATH" target="_blank"><img style="border:3px solid black;" src="IMAGE FILEPATH" alt="ALT TEXT" width="150" height="150"></a>
      						<figcaption style="color:#2c4b6e;">FIGCAPTION</figcaption>
      					<figure>
      				</td>
      			</tr>
      		</table>

CSS

body {
          background-image: url("YOUR BACKGROUND"); /*Insert the location of the file you want to use as your background here*/
          background-size: auto 100%; /*This line determines the size of the background image...*/
          background-position: center; /*...and this determines the positioning.*/
          background-repeat: no-repeat; /*If you want a tiling background, you can change this to 'repeat' and delete the previous two lines.*/
          background-attachment: fixed; /*This prevents the background from moving when you scroll. You can get rid of it if you want, but make sure your background is big enough to cover the page's vertical length, or that it tiles.*/
          background-color: black; /*This is how I got around the problem of my background image being too small to cover the full page: on larger screens, the BG stretches to fit the page height, and the space on the sides forms black bars. (If you don't want it to vertically stretch, you can remove '100%' from the size line.)*/
        	text-align: center; /*This centers the page content by default*/
        }
        table {  /*I don't remember why, but these lines make the table centered on the page.*/
        	margin-left: auto;
        	margin-right: auto;
        }
        td {
        	text-align: center;  /*This centers the text within the table cells (aka the captions below the photos)*/
        }
        img {
        	transition: transform 0.25s; /*This sets the duration for every image transform you define...*/
        }
        img:hover {
        	transform: scale(1.15); /*...and this specifically sets the parameters of the hover action to that scale. You can edit the number to make it bigger or smaller when you roll over, and edit the transition to make the transition quicker or slower, or remove it entirely.*/
        }
        /*Remember, if you don't want to apply any of these universally to all [type] elements on a page, make a css class about it.*/

My biggest point of dissatisfaction with this is, as seen on the page I designed it for, the bug where rolled-over images will have a ring of transparency between them and the border. This can be resolved by not using a border (unhelpful) or giving the image file itself a border with a photo editing program (a lot of work)... a TRUE fix has yet to be discovered.

CSS Bookshelf

This one has javascript. Generally speaking, things moving can be achieved through CSS, but things *changing* has to be Javascript. (Don't say that to a webdev professional, they might laugh at you.) This one is highly customizable, and therefore, easy to fuck up. So pay attention.

HTML

<div class="row">
        	
        	
        		
        		<div class="column">
        		
        			
        			<div class="bookshelf">
        			
        				<div class="row">
        					<p class=floatright><a href="https://github.com/petargyurov/virtual-bookshelf"><img src="https://img.shields.io/badge/Extended%20with-Virtual%20Bookshelf-blue?logo=github" alt="Made Using Virtual Bookshelf"></a></p>
        					
        					<h2 class="byemargins">PAGE TITLE</h2>
        					<p>Page Description</p>
        					
        				</div>
        			</div>
        		
        			
        			<div class="bookshelf">
        			
        				<div class="book" onClick="bookA()">
        				
        					<div class="side spinestairs">
        					
        					
        						<span class="spine-title"> Title </span>
        						<span class="spine-author4"> ABCD </span>
        						
        						
        					</div>
        				</div>
        				
        				<div class="book" onClick="bookB()">
        					<div class="side spinetartan">
        						<span class="spine-title"> Title </span>
        						<span class="spine-author4"> 1234 </span>
        					</div>
        				</div>
        				
        				<div class="bookTwo" onClick="bookC()">
        					<div class="sideTwo spineargyle">
        						<span class="spine-titleTwo"> Title </span>
        						<span class="spine-author4"> ------ </span>
        					</div>
        				</div>
        			</div> 
        			
        			
        			<div class="bookshelf">
        			  
        			</div>
        			
        			
        			
        			
        			<div class="bookshelf">
        			</div>
        		</div>
        		
        		
        		
        		
        		<div class="column">
        		
        		
        			<div class="box">
        				<a href="/index.html"><div class="lilguy">BACK</div></a> 
        				<h1 id="tbTitle"> TITLE </h1> 
        				<p id="tbFandom"> FANDOM </p>
        				<p id="tbSeries"> SERIES </p>
        				<p id="tbPubDate"> DATE PUBLISHED </p>
        				<p id="tbUpDate"> DATE UPDATED </p>
        				<p id="tbFinished"> COMPLETION </p>
        				<p id="tbChapters"> CHAPTER COUNT </p>
        				<p id="tbWords"> WORD COUNT </p>
        				<p id="tbDescription"> DESCRIPTION </p>
        				<p id="tbWarnings"> CONTENT WARNINGS </p>
        				<p id="tbTags"> TAGS </p>
        				<p><a id="tbLINK" target="_blank"> LINK </a></p> 
        			</div>
        		</div>
        	</div>

CSS

/*BOOKSHELF STUFF*/
    
          :root { /*This is the stuff that came built in when I started building on the original code. I wouldn't recommend touching it. If you do, I can't save you!*/
              --spine-pyramid: linear-gradient(
                315deg,
                transparent 75%,
                rgba(255, 255, 255, 0.1) 0
                ),
                linear-gradient(
                  45deg,
                   transparent 75%,
                    rgba(255, 255, 255, 0.1) 0
                ),
                linear-gradient(
                  135deg,
                  rgba(255, 255, 255, 0.2) 166px,
                  transparent 0
                ),
                linear-gradient(
                  45deg,
                  rgba(0, 0, 0, 0.1) 75%,
                  transparent 0
                );
                background-size: 20px 20px;
              --spine-stairs: repeating-linear-gradient(
                  63deg,
                  rgba(255, 255, 255, 0.1),
                  rgba(255, 255, 255, 0.1) 1px,
                  transparent 3px,
                  transparent 0
                ),
                linear-gradient(
                  127deg,
                  rgba(255, 255, 255, 0.1),
                  rgba(255, 255, 255, 0.1) 90px,
                  transparent 55%,
                  transparent 0
                ),
                linear-gradient(
                  transparent 51%,
                  rgba(0, 0, 0, 0.1) 170px
                );
                background-size: 70px 120px;
              --spine-argyle: repeating-linear-gradient(
                  120deg,
                  rgba(255, 255, 255, 0.1),
                  rgba(255, 255, 255, 0.1) 1px,
                  transparent 1px,
                  transparent 60px
                ),
                repeating-linear-gradient(
                  60deg,
                  rgba(255, 255, 255, 0.1),
                  rgba(255, 255, 255, 0.1) 1px,
                  transparent 1px,
                  transparent 60px
                ),
                linear-gradient(
                  60deg,
                  rgba(0, 0, 0, 0.1) 25%,
                  transparent 25%,
                  transparent 75%,
                  rgba(0, 0, 0, 0.1) 75%,
                  rgba(0, 0, 0, 0.1)
                ),
                linear-gradient(
                  120deg,
                  rgba(0, 0, 0, 0.1) 25%,
                  transparent 25%,
                  transparent 75%,
                  rgba(0, 0, 0, 0.1) 75%,
                  rgba(0, 0, 0, 0.1)
                );
              background-size: 70px 120px;
              --spine-tartan: repeating-linear-gradient(
                  transparent,
                  transparent 50px,
                  rgba(0, 0, 0, 0.4) 50px,
                  rgba(0, 0, 0, 0.4) 53px,
                  transparent 53px,
                  transparent 63px,
                  rgba(0, 0, 0, 0.4) 63px,
                  rgba(0, 0, 0, 0.4) 66px,
                  transparent 66px,
                  transparent 116px,
                  rgba(0, 0, 0, 0.5) 116px,
                  rgba(0, 0, 0, 0.5) 166px,
                  rgba(255, 255, 255, 0.2) 166px,
                  rgba(255, 255, 255, 0.2) 169px,
                  rgba(0, 0, 0, 0.5) 169px,
                  rgba(0, 0, 0, 0.5) 179px,
                  rgba(255, 255, 255, 0.2) 179px,
                  rgba(255, 255, 255, 0.2) 182px,
                  rgba(0, 0, 0, 0.5) 182px,
                  rgba(0, 0, 0, 0.5) 232px,
                  transparent 232px
                ),
                repeating-linear-gradient(
                  270deg,
                  transparent,
                  transparent 50px,
                  rgba(0, 0, 0, 0.4) 50px,
                  rgba(0, 0, 0, 0.4) 53px,
                  transparent 53px,
                  transparent 63px,
                  rgba(0, 0, 0, 0.4) 63px,
                  rgba(0, 0, 0, 0.4) 66px,
                  transparent 66px,
                  transparent 116px,
                  rgba(0, 0, 0, 0.5) 116px,
                  rgba(0, 0, 0, 0.5) 166px,
                  rgba(255, 255, 255, 0.2) 166px,
                  rgba(255, 255, 255, 0.2) 169px,
                  rgba(0, 0, 0, 0.5) 169px,
                  rgba(0, 0, 0, 0.5) 179px,
                  rgba(255, 255, 255, 0.2) 179px,
                  rgba(255, 255, 255, 0.2) 182px,
                  rgba(0, 0, 0, 0.5) 182px,
                  rgba(0, 0, 0, 0.5) 232px,
                  transparent 232px
                ),
                repeating-linear-gradient(
                  125deg,
                  transparent,
                  transparent 2px,
                  rgba(0, 0, 0, 0.2) 2px,
                  rgba(0, 0, 0, 0.2) 3px,
                  transparent 3px,
                  transparent 5px,
                  rgba(0, 0, 0, 0.2) 5px
                );
            }
            
            .bookshelf { /*This is the style for the bookshelf divs. They're made for storing books, but you can put text in them too! Or other objects- try coding a bookend :>*/
              /*Spacing Stuff*/
              width: 91%;
              margin-top: 20px;
          	  margin-left: 20px;
              display: flex;
              flex-wrap: wrap;
              /*Color And Border Stuff*/
          	  background-color: #ededed;
              border: 5px solid black;
              border-radius: 3px;
              border-color: #ededed;
            }
            
            /*These are your book classes. When you want to make a book color you can use, */
            
            .book {
              /*You can change these, but beware of the div size. Wider books will fit less per row, and taller books will stretch the shelf. I don't use them, but you can weaponize them to make VERY interesting shelves!*/
              width: 50px;
              height: 280px;
              /*don't change this stuff unless you know what you're doing, it affects book spacing and rollover behavior*/
                position: relative;
                margin-left: 3px;
                transform-style: preserve-3d;
                transform: translateZ(0) rotateY(0);
                transition: transform 0.5s;
              /*Change this to change the body color of the book!*/
          	  background-color: #940404;
            }
            .bookTwo { /*Here's the second class, for the sake of our demonstration bookC.*/
              width: 50px;
              height: 280px;
              position: relative;
              margin-left: 3px;
              transform-style: preserve-3d;
              transform: translateZ(0) rotateY(0);
              transition: transform 0.5s;
          	  background-color: #065c0c;
            }
            
            /*Each book class needs a corresponding side class. This is what affects the actual book contents- the main book class is just the container they go in, just like the bookshelf is!*/
            /*Well, 'needs' is a strong word. None of this is automatic, you have to define the book and the side and the spinetitle (we're getting to that) separately. You can make a bunch of book classes for colors, a bunch of side classes for text colors, and swap 'em out... But I like to make ones that correspond with each other so I can make themes and categories and whatnot.*/
            
            .side { 
              position: absolute; 
              border: 2px solid black; /*This changes the border around the book- line weight, line type, color.*/
              border-radius: 3px; /*This changes how rounded the corners are.*/
              font-weight: bold; /*Makes it bold or not bold.*/
              color: #450000; /*This is the... actually, I don't know what this is. What is this? What does this color go to??*/
              text-align: center; 
              transform-origin: center left;
            }  
            
            .sideTwo { 
              position: absolute;
              border: 2px solid;
              border-radius: 3px;
              font-weight: bold;
              color: #003304;
              text-align: center;
              transform-origin: center left;
            }    
            
            /*Each book class needs a hover animation. This IS required. You have to do this one. They ought to be identical.*/
            
            .book:hover {
              z-index: 1;
              transform: translateY(-20px);
            }  
            .bookTwo:hover {
              z-index: 1;
              transform: translateY(-20px);
            }
            
            /*Here are the title classes, which further affect the book contents- specifically, the sideways title text. Again, changing is only necessary if you want to edit colors.*/
            /*I imagine if you're smarter than me you can figure out how to affect the text color through the html, but I haven't been able to.*/
            
            .spine-title {
              margin: 2px;
              position: absolute;
              top: 0px;
              left: 0px;
              font-size: 12px;
              color: #e8e3e3; /*Text color*/
              writing-mode: vertical-rl;
              text-orientation: mixed;
            }  
            .spine-titleTwo {
              margin: 2px;
              position: absolute;
              top: 0px;
              left: 0px;
              font-size: 12px;
              color: #ffec1f;
              writing-mode: vertical-rl;
              text-orientation: mixed;
            }
            
            /*These are the different patterns you can use. To add new ones, I think you have to mess around in that first root block? I don't know. Ask the original guy.*/
            
            .spinepyramid{
              position: relative;
              width: 48px;
              height: 278px;
              /* Patterns from: https://projects.verou.me/css3patterns/ */
              background-image: var(--spine-pyramid);
              transform: rotateY(0deg) translateZ(0px);
            }
            
            .spinestairs {
              position: relative;
              width: 48px;
              height: 278px;
              /* Patterns from: https://projects.verou.me/css3patterns/ */
              background-image: var(--spine-stairs);
              transform: rotateY(0deg) translateZ(0px);
            }
            
            .spinetartan {
              position: relative;
              width: 48px;
              height: 278px;
              /* Patterns from: https://projects.verou.me/css3patterns/ */
              background-image: var(--spine-tartan);
              transform: rotateY(0deg) translateZ(0px);
            }
            
            .spineargyle {
              position: relative;
              width: 48px;
              height: 278px;
              /* Patterns from: https://projects.verou.me/css3patterns/ */
              background-image: var(--spine-argyle);
              transform: rotateY(0deg) translateZ(0px);
            }
            
          /*Here are some classes I made for different amounts of characters. The amount you can fit kind of depends on the character size as well as the class... mess around with these, choose whatever looks good for your book.*/
            
          .spine-author2 {
              position: absolute;
              color: #e8e3e3;
              bottom: 0px;
              left: 20%; /* no idea why 20% centers it */
            }
            
          .spine-author3 {
              position: absolute;
              color: #e8e3e3;
              bottom: 0px;
              left: 14%; 
            }
            
          .spine-author4 {
              position: absolute;
              color: #e8e3e3;
              bottom: 0px;
              left: 4%; 
            }
          
          /*This is for the right-hand box. All the fields should be self-explanatory.*/  
            
          .box {
          	position: fixed;
          	border: 2px solid black;
          	border-radius: 3px;
          	height: 87vh;
          	width: 45vw;
          	margin-right: 20px;
          	margin-top: 20px;
          	background-color: #940404;
          	padding: 20px;
          	color: #e8e3e3;
          }
            
          /*SPACING STUFF*/
            
          .column {
            float: left;
            width: 50%;
          }
            
          .columnT {
            float: left;
            width: 30%;
          }
          
          /* Clear floats after the columns */
          .row:after {
            content: "";
            display: table;
            clear: both;
          }
          
          /* GENERAL */
          body {
          	background-color: #635e5e;
          }
          
          a {
          	color: white;
          	font-size: 20px;
          }
          
          #tbTitle {
          	margin-bottom: 0;
          }
          
          .lilguy { /*I think this is for the back button.*/
          	float: right;
          	position: relative;
          	top: 0;
          	border: 2px solid black;
          	border-radius: 3px;
          	height: 22px;
          	width: 80px;
          	background-color: white;
          	color: black;
          	text-align: center;
          	padding: 0px;
          	margin: 0px;
          }
          
          .centertext {
          	text-align: center;
          }
          
          .byemargins {
          	margin: 0 auto;
          }
          
          .floatright {
          	float: right;
          }

//This doesn't need to be commented out, since it's a fully functional function that just never gets called. Put the display info of your books in here!
          
          function bookTemplate () {
          	document.getElementById('tbTitle').innerHTML = "TITLE";
          	document.getElementById('tbFandom').innerHTML = "FANDOM";
          	document.getElementById('tbSeries').innerHTML = "SERIES";
          	document.getElementById('tbPubDate').innerHTML = "DATE PUBLISHED";
          	document.getElementById('tbUpDate').innerHTML = "DATE UPDATED";
          	document.getElementById('tbFinished').innerHTML = "COMPLETION";
          	document.getElementById('tbChapters').innerHTML = "CHAPTER COUNT";
          	document.getElementById('tbWords').innerHTML = "WORD COUNT";
          	document.getElementById('tbDescription').innerHTML = "DESCRIPTION";
          	document.getElementById('tbWarnings').innerHTML = "CONTENT WARNINGS";
          	document.getElementById('tbTags').innerHTML = "TAGS";
          	document.getElementById('tbLINK').href = "https://www.pictureofhotdog.com/about";
          }
          
          /*-----*/
    
          function BookA () {
          	document.getElementById('tbTitle').innerHTML = "Book A";
          	document.getElementById('tbFandom').innerHTML = "Fandom A";
          	document.getElementById('tbSeries').innerHTML = "SERIES";
          	document.getElementById('tbPubDate').innerHTML = "DATE PUBLISHED";
          	document.getElementById('tbUpDate').innerHTML = "DATE UPDATED";
          	document.getElementById('tbFinished').innerHTML = "COMPLETION";
          	document.getElementById('tbChapters').innerHTML = "CHAPTER COUNT";
          	document.getElementById('tbWords').innerHTML = "WORD COUNT";
          	document.getElementById('tbDescription').innerHTML = "DESCRIPTION";
          	document.getElementById('tbWarnings').innerHTML = "CONTENT WARNINGS";
          	document.getElementById('tbTags').innerHTML = "TAGS";
          	document.getElementById('tbLINK').href = "https://www.pictureofhotdog.com/about";
          }
    
          function bookB () {
          	document.getElementById('tbTitle').innerHTML = "Book B";
          	document.getElementById('tbFandom').innerHTML = "Fandom B";
          	document.getElementById('tbSeries').innerHTML = "SERIES";
          	document.getElementById('tbPubDate').innerHTML = "DATE PUBLISHED";
          	document.getElementById('tbUpDate').innerHTML = "DATE UPDATED";
          	document.getElementById('tbFinished').innerHTML = "COMPLETION";
          	document.getElementById('tbChapters').innerHTML = "CHAPTER COUNT";
          	document.getElementById('tbWords').innerHTML = "WORD COUNT";
          	document.getElementById('tbDescription').innerHTML = "DESCRIPTION";
          	document.getElementById('tbWarnings').innerHTML = "CONTENT WARNINGS";
          	document.getElementById('tbTags').innerHTML = "TAGS";
          	document.getElementById('tbLINK').href = "https://www.pictureofhotdog.com/about";
          }
    
          function BookC () {
          	document.getElementById('tbTitle').innerHTML = "Book C";
          	document.getElementById('tbFandom').innerHTML = "Fandom C";
          	document.getElementById('tbSeries').innerHTML = "SERIES";
          	document.getElementById('tbPubDate').innerHTML = "DATE PUBLISHED";
          	document.getElementById('tbUpDate').innerHTML = "DATE UPDATED";
          	document.getElementById('tbFinished').innerHTML = "COMPLETION";
          	document.getElementById('tbChapters').innerHTML = "CHAPTER COUNT";
          	document.getElementById('tbWords').innerHTML = "WORD COUNT";
          	document.getElementById('tbDescription').innerHTML = "DESCRIPTION";
          	document.getElementById('tbWarnings').innerHTML = "CONTENT WARNINGS";
          	document.getElementById('tbTags').innerHTML = "TAGS";
          	document.getElementById('tbLINK').href = "https://www.pictureofhotdog.com/about";
          }

Page Background Toggle

it's on by default. if you want to swap it, change the intial bg to the other one and remove 'checked' from the input

HTML

CSS

3 Column Layout

No javascript, just building and styling. I think I got these wholesale from w3schools, lol. The margins and padding are set to values I think are sensible, so they don't touch each other and the contents don't run up against the edge, but obvs you can change 'em. This method means that the columns on either side will be shorter- if you want three equally-heighted columns, change "margin" in edgecolumn to a margin-left and margin-right setup.

HTML

CSS

Bouncing Images

You can use this as a base through which to do a lot of transforms- the hardest part for me was figuring out how each piece fit together in the whole, and that's done for you here :] This is just a CSS class, no fancy fiddlin' required.

CSS

/*This creates a custom animation. Think of keyframes the same way you would in MMD, except instead of creating an animation of a set duration by chaining frames, this sets frames at percentages of the duration, letting you time it separately. This code specifically makes it bounce twice. Create a different number of keyframes by changing the % balance, or add different movements such as size, rotation, and translatex by editing within the transform command.*/
        @keyframes bouncy {
          0%   {transform: translateY(0px)}
          25%  {transform: translateY(-5px)}
          50%  {transform: translateY(0px)}
          75%  {transform: translateY(-5px)}
          100% {transform: translateY(0px)}
        }
        
        /*This applies the custom animation defined above to any object classed "bouncy" when you roll it over with your mouse. You can make the animation shorter or longer by editing the XX.XXs number (that's the duration in seconds), and you can make it repeat by increasing that end number (although this one doesn't need to, since the animation contains both bounces). You could change when this activates, although the only other usecase I can think of is clicking (no good for elements with links)... I originally wanted to make all the bouncy elements hop at random times, but apparently I need fancy javascript extensions for that >M< maybe someday...*/
        .bouncy:hover {
          animation: bouncy 0.5s 1;
        }

Simple Collapsible

This one comes with no CSS, so style it however you want. I'm proud of the id-search system :>

HTML

HTML STUFF

Directory

External Links

Square Gallery

CSS Bookshelf

Page Background Toggle

3 Column Layout

Bouncing Images

Simple Collapsible

Miscellaneous