What's your fallback layout style?

Everything related to the visual and coding aspects of websites.
User avatar
Emma
Time Traveler
Posts: 845
Joined: Tue Jul 17, 2012 3:39 am
Contact:

Re: What's your fallback layout style?

Post by Emma »

I think something like this? When Larissa joined this fanlisting, she did say it was "very Emma" haha. While I don't particularly LIKE that layout too much (it was very much a rush job and kinda cobbled together from another layout I hadn't used yet), it is definitely my fallback style - centred like that, although usually with a footer to match. Also, I like using circles and polka dot patterns.
a spoony bard
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: What's your fallback layout style?

Post by Robin »

Oooo very pretty! I like the verses of poetry which space out the header and footer from the rest of the content--actually, the entire layout uses white space really well, and the contrast of color between background and content area draws the user's eye well. For being a "rush job," it looks great! :D
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: What's your fallback layout style?

Post by dubiousdisc »

Huge page with huge text and things happening when you scroll. :P Or, in a broader sense, pages of THINGS HAPPENING WOAH THIS ANIMATES AND THIS ANIMATES TOO! The entire page is a game! Everything moves! What does this even do! and so on
neo
Posts: 200
Joined: Tue Jun 04, 2013 12:30 am
Location: USA
Contact:

Re: What's your fallback layout style?

Post by neo »

dubiousdisc wrote:Huge page with huge text and things happening when you scroll. :P Or, in a broader sense, pages of THINGS HAPPENING WOAH THIS ANIMATES AND THIS ANIMATES TOO! The entire page is a game! Everything moves! What does this even do! and so on

Seriously, DD I love your style. But that one scrolling element on your Ai shrine is my favorite thing of all things. I just want to know how it's even done, omg XD.
VICTORY WITH EVERYTHING WE HAVE
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: What's your fallback layout style?

Post by dubiousdisc »

neo wrote:
dubiousdisc wrote:Huge page with huge text and things happening when you scroll. :P Or, in a broader sense, pages of THINGS HAPPENING WOAH THIS ANIMATES AND THIS ANIMATES TOO! The entire page is a game! Everything moves! What does this even do! and so on

Seriously, DD I love your style. But that one scrolling element on your Ai shrine is my favorite thing of all things. I just want to know how it's even done, omg XD.
Thank you! That layout is at this point fairly old so there now might be more efficient ways to achieve the same result, but this is the tutorial I started from for the basic technique, then I also used multiple background images layered and aligned just so that it would do that.

In my case, for example, here's the CSS for the first <div> with just Ai:

Code: Select all

#intro
{
background: url(ai-bg.png) no-repeat fixed bottom right;
}
Then the second one:

Code: Select all

#fuji
{
background:
url(ai-bg.png) no-repeat fixed bottom right,
url(fade-in.png) top right repeat-x scroll,
url(fade-out.png) bottom right repeat-x scroll,
url(fuji-bg.png) bottom right no-repeat fixed transparent;
}
The top layer is just Ai as it was in the first <div>, the second layer is a gradient from transparent to black, the third is a gradient from black to transparent, the last is the picture of Fuji that appears on the left. So when you scroll in, Ai always stays up top so she's not affected by all the fading stuff, but the black that covers Fuji becomes transparent as you scroll, revealing Fuji, and then the fade-out starts so he gets covered again at the bottom of the <div>, and the next one starts.

I hope the explanation helps!
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: What's your fallback layout style?

Post by Robin »

WOWWWW. Cue gif of Wayne and Garth from "Wayne's World" saying "WE ARE NOT WORTHY!"

That pure-CSS image changing = mad skillz. Also, the moving background on the Quake III: Arena collective is win.
~ a dream is a wish your heart makes ~
withinmyworld.org
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: What's your fallback layout style?

Post by Mikari »

CuriousLittleBird wrote:
Mikari wrote:For me it's either a picture on top and the content under it, or a picture on the left and the content on the right. I use divs too. I usually put the navigation on the picture or on the main page depending on how many sections and subsections there are.
Cool! Yeah, I usually do "picture left, content right" if I'm going to do a side picture layout--reversing it just feels really weird for some reason. :)
I actually reversed it once just to make something different XD
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: What's your fallback layout style?

Post by Robin »

Mikari wrote:
CuriousLittleBird wrote:
Mikari wrote:For me it's either a picture on top and the content under it, or a picture on the left and the content on the right. I use divs too. I usually put the navigation on the picture or on the main page depending on how many sections and subsections there are.
Cool! Yeah, I usually do "picture left, content right" if I'm going to do a side picture layout--reversing it just feels really weird for some reason. :)
I actually reversed it once just to make something different XD
Awesome! Innovation FTW :D
~ a dream is a wish your heart makes ~
withinmyworld.org
Destinie
Posts: 3357
Joined: Mon Aug 15, 2011 5:27 pm
Location: Columbia, MD
Contact:

Re: What's your fallback layout style?

Post by Destinie »

I generally do a single column design. Navigation at the top, header image, then content. It makes it easy to read lots of text that way.

I want to try a different style for a new site I'm working on but having a hard time coming up with a design. :S
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: What's your fallback layout style?

Post by Robin »

I've actually wanted to try a small vertical menu on the side of a layout that scrolls with the reader...the last time I attempted it, though, I had issues with various window widths playing heck with it, which I haven't figured out how to fix. Maybe something like that would be a neat change-up?
~ a dream is a wish your heart makes ~
withinmyworld.org
Post Reply