jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2021-02-09 03:40 pm
10billionghosts) wrote2021-02-09 03:40 pm
Entry tags:
code: blip, a flex grid cast list / directory
CAST LIST
JUPITER QUIGLEY
medalion rahimi
Invading alien overlord momentarily distracted from task by existence of dogs, donuts.
➥gasgiant @ peckenpaugh
!!FIRST NAME!!
!!SURNAME!!
!!SURNAME!!
!!pb here!!
room for some words
UPDATE 9/27/2021: Did a quick tweak to make this slightly more mobile-friendly. May revisit this code later.
Boy I sure do love the teardrop shape. This is a flex grid code meant to be used for cast lists or character rosters. Because it's flex grid, you can add as many of the "cards" as you want, and with the default width they will settle into 2 across at the widest browser window setting.
Above I've provided three different examples of what you can do with the text and styling as well as the base code. I will provide code for both a card that has a solid color border around the icon and a gradient border around the icon below.
Here is the base code. You will need to put cast list cards in it yourself using the codes beneath it:
Here is the basic solid color card. You can paste as many of these as you'd like in between the PUT ALL ITEMS BELOW/ABOVE markers in the base code:
And here's the code with a (pleasant blue) gradient border around the icon:
HOW TO USE
❣️ Keep the lj-raw tags!!
❣️ The image space is intended for an icon, 100x100 in size, but will autosize anything you use to 100x100.
❣️ When selecting an image for the icon spot, images that favor the center of their canvas will work best.
❣️ Changing hex code #aaa on the solid color card will adjust the background color of the border around the image and the text color of the !!NAME!! items.
❣️ Changing the hex code #127893 on the gradient card will alter the font color only.
❣️ If you'd like to futz with the gradient on the gradient card, you'll want to alter this only: "background: linear-gradient(90deg, rgba(18,120,147,1) 0%, rgba(111,183,237,1) 100%)". You can find a CSS gradient generator here.
❣️ Anything else you need to edit has been marked off with !!EXCLAMATION POINTS!!
❣️ This may be delving a bit too deep into code but you may need to futz with line-height values and stuff if you want to squish a lot of text into the cards. You can see an example of this on the red card for Jupiter Quigley above. I added line-height:1 to it so that all those words would fit nicely.
As always, I do not require credit, but it is appreciated. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!
This code is MOSTLY compatible with insanejournal! Just don't overburden it with text. :)
Boy I sure do love the teardrop shape. This is a flex grid code meant to be used for cast lists or character rosters. Because it's flex grid, you can add as many of the "cards" as you want, and with the default width they will settle into 2 across at the widest browser window setting.
Above I've provided three different examples of what you can do with the text and styling as well as the base code. I will provide code for both a card that has a solid color border around the icon and a gradient border around the icon below.
Here is the base code. You will need to put cast list cards in it yourself using the codes beneath it:
Here is the basic solid color card. You can paste as many of these as you'd like in between the PUT ALL ITEMS BELOW/ABOVE markers in the base code:
And here's the code with a (pleasant blue) gradient border around the icon:
HOW TO USE
❣️ Keep the lj-raw tags!!
❣️ The image space is intended for an icon, 100x100 in size, but will autosize anything you use to 100x100.
❣️ When selecting an image for the icon spot, images that favor the center of their canvas will work best.
❣️ Changing hex code #aaa on the solid color card will adjust the background color of the border around the image and the text color of the !!NAME!! items.
❣️ Changing the hex code #127893 on the gradient card will alter the font color only.
❣️ If you'd like to futz with the gradient on the gradient card, you'll want to alter this only: "background: linear-gradient(90deg, rgba(18,120,147,1) 0%, rgba(111,183,237,1) 100%)". You can find a CSS gradient generator here.
❣️ Anything else you need to edit has been marked off with !!EXCLAMATION POINTS!!
❣️ This may be delving a bit too deep into code but you may need to futz with line-height values and stuff if you want to squish a lot of text into the cards. You can see an example of this on the red card for Jupiter Quigley above. I added line-height:1 to it so that all those words would fit nicely.
As always, I do not require credit, but it is appreciated. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!
This code is MOSTLY compatible with insanejournal! Just don't overburden it with text. :)