Streaming live at 10am (PST)

How can I create these designs?


#1

Hello, I wanted to know if it's possible to create designs such as the pictures I attach here.


On image 1 I want to be able to create the diagonal effect of the image on one side and the text on the other.

On image #2 I want to know how to create the hexagonal forms in that way. They are on top of other sections.

So if this is possible how can it be done?

Thanks!


#2

1 - Yes. It's possible. I've done my one here:
http://teslamotors.webflow.com/designer-tool-v2

2 - Yes. It's possible. But you'll need to add it to the custom code area of your project:
http://csshexagon.com/


#3

Wow, I hadn't seen the CSS hexagon - crazy cool @PixelGeek! @aerismel, you could also use a .png image (as an alternative) for any shaped image with a transparent background. Just in case you want to create something that isn't doable with a CSS method.


#4

For the exagon, as you want to make plenty of them, I would use a CSS mask delcared in custom code and then use the class on divs in Webflow.

The code is like this :

.mask-exagon     {-webkit-mask-image: url(http://url-to-your-file/exagon-mask.png); }

One the code added, simply add the class mask-exagon to any of your divs.


#5

That diagonal thing with the image..is that made by code or simply Photoshop?


#6

I located the example site in @aerismel post. It looks like it is using a .png mask for the diagonal (I am guessing like @vincent posted) :
http://acolytes.ca

Alexandre Desjardins (designers portfolio) on Behance:
https://www.behance.net/gallery/Acolytes/2752367

@PixelGeek is that a brilliantly simple native solution in webflow? Nested masks and transforms? (the tesla site is really beautiful BTW!)

Thanks @vincent & @PixelGeek - I have wondered many times how to approach that type of masking.


#7

I also want to know how to create the diagonal effect on the image. Thanks!


#8

How to create No-Code hexagons in the Webflow Designer:

https://jtauber.github.io/articles/css-hexagon.html


#9

Your tesla motors link is invalid when I press on it, it redirects me to a 404 page. :wink:


#10

oh, I like such desigs. One year ago I was working as a freelance and I tried to make some designs like you have.

I used different programs and the result was cool.


#11

Here is my two cents.

For the diagonal layered element, I would use the skew property on the Webflow designer:

Then it would consist on two main elements with height:100% the image aligned to the left and the skewed element to the right probably with float:left/right. To the skewed element I would either make it position:absolute or/and play with a negative margin-left until it would covered enough part of the image.
I would apply a gradient to the skewed element all using Webflow without images nor external code.

The tool mentioned earlier would be very useful to create the hexagons.


#12