Making Waves
Waves and curves using SVG and CSS
EverWeb ThemeKit
012-345-6789
ThemeKit Hero Shape Widget
Since the hero image has become the de facto standard for website home pages, it pays to try and make it a little different.
The ThemeKit hero image widgets add items like proper text blocks, animation and overlay items to set the apart.
The one featured here adds functions which are becoming popular. These are rounded bottom edge and a wave shaped bottom edge. The widget can also add a wave to the top too if required.
Waves
The wave shape is created using a very simple inline SVG code. As can be seen from the example above, the hero image can have a wave at the top, the bottom or both.
Styles
The wave has controls for color and shape. The shape control is a slider which varies the percentage width of the SVG between 100% and 200%. This simply moves the right hand part of the SVG off canvas.
Curve Down
This is a simple CSS solution to rounding off the bottom edge of the hero image. The border-bottom-left-radius and the border-bottom-right-radius properties are combined in one control using percentage rather than pixel values.
The control can be adjusted between zero and 50%. The example above is set to 20%
Curve Up
Making the bottom edge of the image concave is slightly more complex. An elliptical pseudo element is added tto the bottom of the container and the overflow on the Y-axis is hidden.
There is a control for adjusting the curve height and another for ssetting the color of the pseudo element.
Skew Angles
Skew Left or Right
Leading web designers are using skew angles to break up the boxiness of large objects like hero images. There are a number of ways to to this using maskcs, SVGs and CSS.
This widget uses one or two CSS pseudo elements with a skew transition to create the effect.
The image is inserted in two sizes - one for browser/screen widths above the break point and a smaller one for those below it.
Overlay
The image has an overlay which can animate in on page load. The overlay has a drid layout with two columns. The text block can be in either column and switches to the center when the device screen width is less than the break point.
Article
The text block is an HTML5 <article> element which has a heading, text and an optional link. The link can open internal or external pages and has a new window option.
Skew
All the code for setting up the skew takes place behind the scenes and the only user controls are a couple of checkboxes and a control for setting the skew angle.
One checkbox changes the skew from left to right and the other sets the skew to the center as shown in the item above. The item below is skewed from the left