jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2023-01-30 12:12 am
10billionghosts) wrote2023-01-30 12:12 am
Entry tags:
code: PYRAMID SCHEME - one triangle, three mood boards
HELLO. Have a code that came to me really abruptly at like 9PM and that I absolutely had to churn out in just a few hours. PYRAMID SCHEME is a mood board/navigation code appropriate for splash pages or as the single code at the top of a contact/dropbox/whatever entry.
To achieve the triangle shapes, this code uses clip path, which can make fitting an image a little bit of a pain and I'd call this an intermediate code for that reason. Outside of that, this code is pretty straightforward. Please check out the HOW TO USE section for some tips.
CODE HERE:
You can get a copy of the code upside down (upside down triangle) down here in the comments of the post
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code comes in three versions! Check the comments to get the upside down triangle and diamond mood boards.
❣️ This code is mobile compatible and insanejournal friendly!
❣️ The single triangle codes are both completely comment compatible!
❣️ Want to use this code as a splash page? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ Positioning images in the topmost triangle in this code can be a little bit difficult and you may have to play around with pictures or with the positioning, itself, to find something that fits.
❣️ This code comes with five small triangles that function as links.
❣️ hex code #fff is white. It is declared at the top of the code and for each individual triangle, and is used for the font color. Be sure to find-replace every instance of #fff if you'd like to change this color in the code.
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ 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.
To achieve the triangle shapes, this code uses clip path, which can make fitting an image a little bit of a pain and I'd call this an intermediate code for that reason. Outside of that, this code is pretty straightforward. Please check out the HOW TO USE section for some tips.
You can get a copy of the code upside down (upside down triangle) down here in the comments of the post
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code comes in three versions! Check the comments to get the upside down triangle and diamond mood boards.
❣️ This code is mobile compatible and insanejournal friendly!
❣️ The single triangle codes are both completely comment compatible!
❣️ Want to use this code as a splash page? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ Positioning images in the topmost triangle in this code can be a little bit difficult and you may have to play around with pictures or with the positioning, itself, to find something that fits.
- By default, the topmost image in this code (the big triangle) is positioned as 'center top'. You may have better luck positioning the image with JUST 'center' (delete the word top), with 'center bottom' or by getting precise with the exact positioning.
- If you need to get precise, Mozilla's documentation and W3SChools are great learning resources.
❣️ This code comes with five small triangles that function as links.
- Be sure to change #URL_HERE to an appropriate link text.
- To stop these triangles from being links, simply remove the text 'href="#URL_HERE"' entirely.
- You do not need to have anchor text for the links. The triangles themselves will act as links even without anchor text (see the example at the bottom of this page). So, if you just want to use images for each of the five lower triangles, just delete the !!link!! placeholder text.
- By default, each of the triangles is a solid color. You can change each instance of the placeholder text BG_URL to the URL of an image you'd like to use for the smaller triangles. I'd recommend using a transparent basckground like those found at transparent textures because you can still easily see any anchor text you use with those. The example code at the top of this page uses the binding dark background from Transparent Textures.
- Be sure to change the LINK DESC placeholder text to a brief description of each link whether or not you're using anchor text!
❣️ hex code #fff is white. It is declared at the top of the code and for each individual triangle, and is used for the font color. Be sure to find-replace every instance of #fff if you'd like to change this color in the code.
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ 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.