ThemeKit 3D Card
Default Orientation
Default Box Shadow Direction
No Link
Text Aligned Left
3D Cards
Perspective can be applied in two ways using CSS - by using the perpective property on the parent container or using a perspective value for the transition value of the child element. This widget actually uses a bit of both. Perspective is applied to the child element when viewed on the EverWeb design canvas so that the rotation and horizontal adjust effects can be gauged.
Note that the actual perspective is not apparent on the EverWeb design canvas.
A checkbox removes this before publishing and inserts the perspective property on the parent so that it will work in Safari which is kind of retarded in this application.
NOTE: The box MUST be checked or the perspective will be lost on the published page.
Perspective
Reduction the value for perspective increases the effect and increasing it will reduce the effect.
Rotate Y
Increasing or decreasing the angle of rotation on the Y-axis will also change the effect.
Scale
The scale slider control is used to decrease the scale when the perspective effect is inscreased to prevent the item from overflowing the parent container.
Content
The content consists of a heading, text with an optional link which can open internal or external pages and has a new window option.
Break Point
At screen widths below the break point the perspective setting, the rotation and the scale are all set to zero.
The font sizes of the heading, text and link and the text line height all need to be decreased to compensate for the increase in scale.
Logo Header Nav
A header with logo and navigation centered with a maximum width setting. This setting prevents the logo and the links moving way out to the browser edges when the visitor's browser is set wide. The header can be positioned relatively to scroll with the page content or fixed as in this demo.
The header has a two column grid layout and all three items are set to be vertically centered.
There is an option to indicte the current page link using a different color.
The active tab icon can be reduced/increased in size by adjusting the padding.
The mobile drodown has controls for width, position on the Y-axis, background color and opacity and for separator height and color. The adjustment on the Y-axis is required for the height of the logo image.
The logo is configured as an internal link which would normally be to the home page.