Hi guys. I want to add css ‘outline’. so I did copy & paste this syntax on framerjs/docs, but it doesn't work. How can I fix it??
"border" doesn't work?
Like Stephen Crowley said: you can use the "border" property instead.
yes, it works, but I want to add outline not border.
I want to draw outline with radius. I think border can't make it.
I think it's problem with fs viewer. Check it with browser, should be rendered fine. http://share.framerjs.com/gs7j7gt9fj13/
I thought about that after I sent my reply, sorry about that Jun-Hyuk Jang
it's ok, Stephen. I don't want to make border-radius that has square inside. I want to make radius inside.
Hey Jun-Hyuk Jang & Jérémy Jones - ah, yes, this is due to an issue caused by 3D transforms in CSS. To make outlines work, simply add the following line to your layer :) :
layerA.force2d = trueMore on force2d: http://framerjs.com/docs/#layer.force2d
You might be better off just using box-shadow something like box-shadow: 0 0 0 1px red; would give you a 1px outline on the outside of the box. If you want the outline on the inside do box-shadow: inset 0 0 0 1px red; Basically the value you would want to manipulate is the the spread (I set it to 1px) and color. The downside is you can't do dotted lines or dashed lines however.
Here you go... I hope this helps: http://cl.ly/Zujf
The benefit is you can still stay in 3D mode instead of moving to 2D.
Jordan Robert Dobson why does it move you out of 3d mode? It seems weird to use box-shadows since they are not very performant in css.
Josh Rule see Benjamin's comment above. If you want outline you need to force2D.
Box shadows aren't bad with performance. It all depends on how you use them and if the layer is hardware accelerated. All framer layers are... So by forcing 2D you're degrading performance for a specific feature. It's a choice.
I would avoid border cause it messes with your layout. And then you need box sizing etc.
I've been trying to teach this for a long time. Ditch borders unless you put them in pseudo elements or you truly need them for layout.