Hi folks,
Working on my campaign I'm getting kinda annoyed with the image border I'm using for the portraits when used in wiki and journal pages. It's too smooth and doesn't fit in with the overall look and feel I'm shooting for. So any thoughts/suggestions that would feel suitable for a medieval setting? Also I want to keep a separate look and feel for the portraits and for the other illustrations.
E.g. https://knights-of-the-realm-1.obsidianportal.com/adventure-log/483-ad-the-ambush-of-rodericks-party
The css for character portraits that I use now is very simple:
.charpic {<br />
border-radius: 8px;<br />
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4), 0 8px 24px 0 rgba(0, 0, 0, 0.39);<br />
}
Thanks!
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
After some experimenting with borders, this is pretty much as far as I got: https://knights-of-the-realm-1.obsidianportal.com/adventure-log/483-ad-the-ambush-of-rodericks-party
There's 2 picture borders in use, one for larger pictures (and thicker border) and one for smaller ones with a thinner border. Any suggestions how to improve further on this would be much appreciated!
.framedpic {<br />
border-style: solid;<br />
border-width: 42px 30px 39px 37px;<br />
-moz-border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame2.png) 60 48 54 stretch;<br />
-webkit-border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame2.png) 60 48 54 stretch;<br />
-o-border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame2.png) 60 48 54 stretch;<br />
border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame2.png) 60 48 54 stretch;
}
.framedpic_small {<br />
border-style: solid;<br />
border-width: 23px 20px 19px 21px;<br />
-moz-border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame_small.png) 23 20 19 21 stretch;<br />
-webkit-border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame_small.png) 23 20 19 21 stretch;<br />
-o-border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame_small.png) 23 20 19 21 stretch;<br />
border-image: url(https://derkgroe.home.xs4all.nl/Pendragon/css/frame_small.png) 23 20 19 21 stretch;<br />
}
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
Looking good, I like them. I've the same struggle, and I haven't figured out how I want to resolve that yet. Good on ya.
-bort
Campaign of the Year - 2018
I'm fairly happy even if they can be refined further. However they're a later medieval look than what I was really shooting for. That said, it'll do ;)
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
Your page is looking great - wonderful stuff. I think the borders at least work well with the overall design.
-Red
Campaigns: Dragon Age: Requiem
I agree, your page looks fantastic! I also believe the borders that you are using work well with the page. Even if you aren't completely satisfied with them, they will work fine until you find something you like better!
Johnprime
Where the west is really wild!
The Valley of Life
Well, thanks for the praise, folks :) The one thing I'd have loved to achieve was a smooth transition on the inside of the frame - I wanted it to partially overlay the photo so that the irregularities in the frame play nicely. However I can't figure out how to do that in CSS (other than overlay it as a seperate picture)
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
There is a z-index property in CSS, not sure if you know about it, but it can be tricky. You usually have to use the position property as well, and that can be tricky.
Johnprime
Where the west is really wild!
The Valley of Life
What you might be looking for is making the brown part of the frame (basically where the picture would sit) transparent, then overlaying it. That would allow the irregularities to show more. I'm assuming you are trying to get the irregularities on the inside of the frame to show up more.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
@cgregory that is what I meant, yes.
I originally had the inside of the frame transparent, but then the background would very noticably peek through between the picture and the frame.
If I go and try to overlay it, is there a way to scale the overlay dynamically based on the picture size? I would need it to be 10% bigger in all directions and then center on the picture....
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
@johnprime I have never worked with z-index. But I believe the biggest issue here would be the scaling and positioning?
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
@DerkG you are right, you could end up with some kind of scaling issue, especially if your images aren't always the same width and height perspective. Plus you could have some positioning issues. Z-index is really cool and I've used it to overlay type on images in the past, but it can be very frustrating too! I only mentioned it because I know you can layer things with it, but it's not for the faint of heart!
Johnprime
Where the west is really wild!
The Valley of Life
No, not perfectly, you can do a best fit of the picture to the frame. That will mean clipping pictures. Either manually or hiding any overflow.
https://dead-men-tell-no-tales.obsidianportal.com/wikis/dec-2016
In that example, I used
In the end, you'd have to decide whether the end result is worth the extra work.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
While I really like the result, I don't think I'll be using this for the portrait frame as they do indeed vary in size and I want something that scales well in order to give me that flexibility.That said, I will certainly look at using the same solution for other applications, thanks!
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius