iItems
Price/Date
Each item has an image with optional info tab link, heading, price or date and text.
EverWeb Widgets
Slide Up In Viewport [4]
Image Info Links
Image links are not very suitable for using on responsive pages since visitors using touch devices don't have a hover function where the cursor shows as a pointer to indicate a link.
This widget uses an info icon at the top right of the image to not only indicate a link but to be the link itself. The icon has controls for adjusting the color, hover color and the background color and its opacity. There is no adjustment for size as the icon is set to the smallest recommended size for a touch device link which is 32px.
Font Awesome
Info
Font Awesome icons are used on millions of web site so they should be familiar to visitors. The downside is that they tend to make a web page look like all these others.
Slide Up [1]Icon Controls
The icon container and the icon font size can be adjusted. There is a control for adjusting the icon position so that it is centered in its container.
Slide Up [2]Icon Styles
The icon can be square or round with controls for adjusting the icon color, border width, color and radius and box shadow radius and color.
There is a checkbox for changing the icon from round to square.
Font Awesome Links
The Font Awesome icons shouldn't need any introduction as they are used everywhere. There is a huge selection to choose from although the actual icons themselves are not the best around.
A better quality icon which is less common and therefore creates a more unique look is the Ionicon range of icons shown on the previous page.
Grid
This grid shows how text can wrap a round image.
The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
The grid layout has a "align-self" property. This can have a value of start, center, end or auto. Auto is the default setting if the selector is not present and this is what makes all the heights equal by stretching each item to the same height as the tallest one in any row.
Curves
Text can be made to follow the curve of a round image.
The image is floated left in a container which is defined as a block element. The image itself is inserted in another <div> which is given the required width and height. This container turns square images round as its border radius is set to 50% and the overflow selector is set to "hidden".
The magic happens by adding the "shape-outside" selector with a value of "circle" and a right margin to space the text away from the image.
Links
Links can be added below the text if required.
The link is positioned absolutely in relation to the bottom and center using a CSS transform.
The container has extra padding at the bottom. to accommodate the link. This keeps all the links in line and creates a more uniform appearance to the layout.
The link can be configured to open internal or external pages using relative or absolute file paths. There is a checkbox to turn on the function to open the link in a new window.
Round Wrapping
CSS shapes allow web designers to wrap content around custom paths - like circles, ellipses and polygons - to break free from the constraints of the rectangle and creating more unique web page designs.
This type of wrap using a round image is perhaps the simplest introduction to this technique. The <div> containing the round image uses the "shape-outside" selector set to a value of "circle()" to create the effect.