10billionghosts | code: DIFFERENCE

Go ahead, use me as you wish, even stab me in the back if you see fit. Exploitation and treachery are simply tools of the trade. But remember, I don't make deals that don't pay off... So, I hope you don't disappoint me.

text text text text

code

Hello my friends! I wanted to experiment with making some ?advanced? CSS techniques more accessible while playing with the variable values I saw

lucavi using (their codes are amazingly sleek!!!), and I'm very pleased with the initial results, so! Happy Honda Days!

DIFFERENCE is a simple navigation/splash that utilizes a bunch of CSS tricks. In brief, this code:

takes ANY image, static or gif, color or black & white, and desaturates it to grayscale.
applies an overlay layer with a DIFFERENCE filter to create a pop of color over the gray.
utilizes variables to allow for easier color customization.
has optional decorative, text block, and link list sections.

I provided a few different examples at the bottom of this post so you can see how different colors work on the image. So, check those out! As usual, peruse the HOW TO USE section for detailed instructions. You can pick up the code just below.

CODE HERE:

<lj-raw><div style="max-width:300px;width:100%;height:430px;margin:0 auto;display:grid;grid-template-columns:75px .7fr 1.4fr;grid-template-rows:1fr 10px;color:var(--text);
--text:#000;
--imgurl: url(IMG_URL);
--ovr:#A52A2A;
--lnk:#fff;
--lnkbg:#000;
">

<div style="box-sizing:border-box;overflow:hidden;grid-column-start:2;grid-column-end:4;grid-row-start:1;grid-row-end:2;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;">
	
		<div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;background:#ccc var(--imgurl)center;background-size:cover;filter: grayscale(1);"></div>

</div>

<div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;margin-bottom:40px;transform:rotate(0deg);display:flex;justify-content:center;align-items:end;">
	
		<div style="min-width:150px;display:grid;grid-template-columns:auto;grid-template-rows:auto;gap:3px;line-height:1;font-variant:small-caps;">
		
			
			<img src="https://i.ibb.co/bMgZxqfC/bracket.png">
			
			
			<div style="width:100%;text-align:justify;font-size:11px;text-shadow:1px 1px rgba(252,252,252,.7);"></lj-raw>!! a small paragraph or so of text can fit here !!<lj-raw>
			</div>
			
			
		
			<a href="#url_here" style="padding:4px 0;text-decoration:none;text-align:center;background:var(--lnkbg);color:var(--lnk)">text</a>
			
			<a href="#url_here" style="padding:4px 0;text-decoration:none;text-align:center;background:var(--lnkbg);color:var(--lnk)">text</a>
			
			<a href="#url_here" style="padding:4px 0;text-decoration:none;text-align:center;background:var(--lnkbg);color:var(--lnk)">text</a>
			
			<a href="#url_here" style="padding:4px 0;text-decoration:none;text-align:center;background:var(--lnkbg);color:var(--lnk)">text</a>
			
			<a href="#url_here" style="padding:4px 0;text-decoration:none;text-align:center;background:var(--lnkbg);color:var(--lnk)">text</a>
			
			<a href="#url_here" style="padding:4px 0;text-decoration:none;text-align:center;background:var(--lnkbg);color:var(--lnk)">text</a>
			
		
		</div>
	
	</div>
	
	<div style="grid-column-start:3;grid-column-end:4;grid-row-start:2;grid-row-end:3;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div>
		
</div></lj-raw>

HOW TO USE:

❣️ This code is mobile compatible!

❣️ It makes a great mobile compatible splash page! Check out Manx's Guide for instructions on how to do that.

❣️ All "sub-sections" in this code are marked by comments for easy editing and removal.

❣️ This design uses variables declared at the very top of the code to customize all colors. Edit these values to update the code! Here's what you'll want to change:

--text: controls the regular text color. it is set to #000 (black) by default.

--imgurl: url(IMG_URL) be sure to update IMG_URL here to the image you want to use!!

--ovr: controls the overlay pop of color on the image; it is set to #A52A2A by default, which creates a teal + rust effect. The colors listed on this page are generally very effective replacements for the default color on this. by default it's #A52A2A (brown).

--lnk: is the color of text on a link. white by default.

--lnkbg: is the background color for links. black by default.

❣️ All sub-sections under the NAV SECTION are entirely optional. You can delete any of them and still have a functional code! My examples below delete certain sections to show how it looks without them.

❣️ When it comes to picking a primary image for this code, if you are able I recommend creating an image, yourself, that is 225px wide x 420px tall or at least around that ratio. Otherwise, you CAN tweak background positioning/size to achieve a look you like.

❣️ I'm gonna be SO real with you, toying around with the colors for --OVR might be difficult. The default setting (rust red/brown creating a teal/dark red effect) is pretty consistently nice looking, but if you want to customize a bit more, it requires some experimentation. --OVR uses a "difference" blending. If you've made fancy LJ icons, you're probably familiar with what this means. For those who aren't, that means it will tint lighter colors in the OPPOSITE of the color you've chosen and darker colors in the tone of the color you've chosen.

❣️ You can remove the BRACKET, TEXT, or LINK LIST subsections without affecting the code!

❣️ The bracket is hosted remotely and you should be able to use it without editing.

❣️ plz do not forget to change the anchor text and #URL_HERE placeholder for each link!

❣️ You can add as many links as you'd like. The space to add/remove them is indicated in the code.

❣️ The link list comes with 6 links by default but I am being so forreal feel free to delete some of them if you don't need 'em.

❣️ The TEXT subsection is good for a quote or a brief bit of information about the character, like name, title, age, etc.

❣️ The bracket is an image file (hosted at https://i.ibb.co/bMgZxqfC/bracket.png). The width is 150px. You can replace it with a different bracket if you want?

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!

character name . another detail. and another detail. a few more sentences . whee la la la la

text text text text

text text text text text text

code: DIFFERENCE - a nav code

Post a comment in response: