makloon
(Makloon)
May 4, 2015, 10:26pm
1
Just finished another site which explores some of the things possible with webflow especially fixed backgrounds and PNG backgrounds.
Have a look
http://aconterum.webflow.io/
Tip:
The sun effect is done by layering a PNG with a hole in the middle on top of a container with fixed background.
6 Likes
very beautiful. GREAT JOB! =D…
funhyun
(Hyun Lee)
May 4, 2015, 10:57pm
3
Nice job! How did you make the hero viewport fit at any sized browser like Medium.com ?
DFink
(Dave)
May 4, 2015, 11:02pm
4
Nice site! But I found an issue on safari. once you enter and there are the 4 bottles, when you mouse over them and you have the zoom animation, they disappear after the animation finishes. I’m not sure why.
StevenP
(Steven Victor Sigvard Persson)
May 5, 2015, 8:44am
5
Brilliant work on the sun-masked-thing!
vincent
(Vincent Bidaux)
May 5, 2015, 10:33am
6
It’s a long time I want to explore these transparency effects. Your example is so good looking! Good job.
And the whole site is very nice.
makloon
(Makloon)
May 5, 2015, 3:12pm
7
Thank you for noticing that. I will try to debug and post my solution.
makloon
(Makloon)
May 5, 2015, 3:29pm
8
The “trick” here was to divide the space into thirds that equal 100% height. Like so:
Created a div with a set width and centered it
Added 3 divs inside and divided the space in 3
Added content to each third
When you resize everything stays in proportion
Hope that explains it
Cheers
4 Likes
funhyun
(Hyun Lee)
May 5, 2015, 5:00pm
9
Very smart! Thanks for sharing!
Nita
(SĂłnia Alves)
May 5, 2015, 10:40pm
10
Great design. Smart combination of css positioning and png’s.
Congrats!!
1 Like
funhyun
(Hyun Lee)
May 8, 2015, 2:54pm
11
Another question, Is your “center div” set at like 90% width & height? Again, thanks for sharing your technique of your gorgeous site!
makloon
(Makloon)
May 13, 2015, 2:28am
12
Yes. Width is 47% and height is 98%