Page 2 of 3
Re: What's your fallback layout style?
Posted: Fri Aug 15, 2014 5:26 pm
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.
Re: What's your fallback layout style?
Posted: Sat Aug 16, 2014 6:10 pm
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
Re: What's your fallback layout style?
Posted: Sun Aug 17, 2014 8:15 am
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
Re: What's your fallback layout style?
Posted: Sun Aug 17, 2014 1:31 pm
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.
Re: What's your fallback layout style?
Posted: Sun Aug 17, 2014 4:34 pm
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!
Re: What's your fallback layout style?
Posted: Sun Aug 17, 2014 7:44 pm
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.
Re: What's your fallback layout style?
Posted: Sat Aug 23, 2014 8:33 pm
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
Re: What's your fallback layout style?
Posted: Sun Aug 24, 2014 11:22 pm
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
Re: What's your fallback layout style?
Posted: Mon Aug 25, 2014 7:54 am
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
Re: What's your fallback layout style?
Posted: Mon Aug 25, 2014 2:05 pm
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?