Envano recently launched a re-designed version of our site: Envano.com and our main focus in re-designing the site was to make it mobile friendly. Mobile devices typically have slower internet connections than their desktop counterparts, and because of this, the overall size of a page needs to be smaller for mobile users. One of the best ways to reduce the size of a page is to use fewer images and external files.
CSS Border Art
One of the techniques used to reduce the number of images on a page is to use CSS borders. Borders can be used to create shapes such as triangles of varying degrees rather than using small background images.
Calendar Date
Border art was used in the blog section of the site to give the bottom of the calendar dates a bottom-angled look. The top image illustrates the “invisible” borders by using red, orange and yellow borders. The image below it is the result when the borders are set to the same color.
Here is the simplified version of the CSS used to create this effect. By setting the border width and color, many different types of triangles can be created.
.calendar:after
{
border-width: 23px;
border-color: #e5e5e5 #fff #fff #fff;
border-style: solid;
...continued
}
More Button
The “read on” buttons used on the home, services and blog pages also used border art to create their angled effect. The red, orange and yellow colors illustrate the invisible borders that are set to the same matching color in the final rendition.
This effect was created by creating a fake element in CSS and positioning it after the element to the left.
.more:after
{
border-width: 12px;
border-style: solid;
border-color: #fff #fff #fff #5a2d5b;
...continued
}
Ribbon
The ribbons shown on the home page and work section also use CSS border art to accomplish their effect. There is a total of four separate elements positioned to the right and left. The CSS for this was much more complicated than the previous examples.
Folded Corners
The folder corners effect on the home page uses a simple border to achieve this effect. This gives the illusion that the box on the page has a folder-over corner.
Below is the CSS used to do this.
.box-folded .border
{
border-width: 13px 0px 0px 13px;
border-style: solid;
border-color: #fff #fff #fff #2a4b09;
...continued
}
3D Box Effect
All of the social media boxes on the home page use four distinct elements to achieve their look. Depending on what direction the 3d effect should be pointed, different borders are turned on and off.
Below is a simplified version of the CSS used to create this effect.
.top-right .top-right-border
{
border-left: 12px solid #351A38;
border-top: 12px solid #fff;
...continued
}
Advantages To Using Border Art
While reduced page size is one advantage to using CSS and border art there is another advantage. Because the color, size and angle is controlled in the CSS file, should any of these properties need to be modified, a developer can update them without needing the source mockup file (PSD). The makes maintenance easier and faster saving clients money and making end-users happy with the decreased page load time.
Tags: border art, CSS
Categories: All Posts, Corporate Site & eCom, Tech Talk
On April 24th, Google announced the launching of its new Penguin algorithm which targets webspam:
The user interface is intuitive and has adaptable templates
