Streaming live at 10am (PST)

Another Webflow Miracle


#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.


#2

very beautiful. GREAT JOB! =D.....


#3

Nice job! How did you make the hero viewport fit at any sized browser like Medium.com?


#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.


#5

Brilliant work on the sun-masked-thing!


#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.


#7

Thank you for noticing that. I will try to debug and post my solution.


#8

The "trick" here was to divide the space into thirds that equal 100% height. Like so:

  1. Created a div with a set width and centered it
  2. Added 3 divs inside and divided the space in 3
  3. Added content to each third
  4. When you resize everything stays in proportion

Hope that explains it

Cheers


#9

Very smart! Thanks for sharing! smile


#10

Great design. Smart combination of css positioning and png's.
Congrats!!


#11

Another question, Is your "center div" set at like 90% width & height? Again, thanks for sharing your technique of your gorgeous site!


#12

Yes. Width is 47% and height is 98%


#13

#14