code: DIFFERENCE - a nav code

[10billionghosts]

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; "> <!-- PORTRAIT: difference --> <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 style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;width:250%;height:75%;margin-top:75px;opacity:.8;transform:rotate(45deg);background:var(--ovr);mix-blend-mode:difference;border:10px solid #000;outline:10px solid var(--ovr);"></div> </div> <!-- LINK LIST --> <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;"> <!-- bracket image, delete if unwanted --> <img src="https://i.ibb.co/bMgZxqfC/bracket.png"> <!-- optional text block, delete if unwated --> <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> <!-- links below here --> <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> <!-- links above here --> </div> </div> <!-- CREDIT --> <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> <!-- CREDIT; end --> </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

Comments

too lazy to log out but same person as wingedvoices on plurk

[tedandroses]

Ooh, I didn't even parse last night that you were using layers the way you are (and it finally works on firefox! reading css news is like "but did firefox...not yet" and then i forget about the cool thing) ...and more to the point, that you can use declared variables?? IN AN ENTRY??? holy gamechanger, batman

these are very, very cool.
also eugene as a pb ftw

Re: too lazy to log out but same person as wingedvoices on plurk

[10billionghosts]

THANK YOU! YEAH! You can use divs as layers and then mix-blend-mode to do various overlays/color dodging/soft light/etc. the way you would when making icons or graphics in photoshop. I've used it before for small things in codes, but I wanted to do something that specifically featured it. I will probably do more codes like this because it is fun to mess with.

Game changer for SURE being able to declare variables at the top of the code. I hope it increases usability/customizability.

LOVE EUGENE YANG ALSO. Made a 350 icon set of him that I never actually used. lmao

[tedandroses]

I'd seen that! Because my eyes are bigger than my...actual skill so I get the Codepen newsletter etc. Someday I will actually sit down and practice a little more (I had a plan to redo all my layouts before the holidays and I should do that), haha. But I love the ability to do this and I think you did a great job with it!

I think it definitely does already, being able to only change things in one spot is a GREAT feature!

(Just knowing that you can declare on DW is so nice, I see snippets all the time that I've just ignored because I assumed only `<[whatever] style="[stuff]";>` or similar was going to work. I think there are probably still things I want to do that you really need to be able to get at least into the head if not the stylesheet for, but variables are huge.)

He's so fantastic. I still love the [ahem, remaining — and new!] guys [gender neutral] but I very much hope he's off doing amazing things if I can't watch him on YT all the time. (350 o_O! MAN. Now I really want to find a reason to use him as a faceclaim >_>)

[thisisalex]

bro this is so freaking cool and clever

[10billionghosts]

THENK U!!