Awesome borders on lens intro modules
How to get an awesome border like this on your intro module
I like lenses where lensmasters have added their personality, creativity and style with sharp (or curvy) looking borders, backgrounds and other HTML tricks.
What annoys me is when their Intro Module's picture overlaps part of their lovely border with an ugly unprofessional look.
Here is how to fix that problem and have an Intro Module that looks like this one with a border around the module AND picture.
No more borders hiding behind images. Make a good first impression with these CSS tricks on the Intro Modules of your lenses.
You have to think outside the box
The "Intro Module Image inside the border" trick
Think outside the box
The trick to getting your Intro Module image inside the border instead of overlapping it is to literally think outside the box.
The CSS trick is to make the box bigger with negative margins.
When the box is bigger the border goes around the image instead of behind.
The CSS to use is to wrap your Intro Module text with this styled paragraph tag:
and close it with:
This is the CSS style used on this Text Module. The Intro Module above uses some extra CSS3 styles for the rounded border effect.
Have you got borders on your lens modules?
Are you using CSS borders on your lenses?
Discover how to style the web with CSS3.
For intermediate level web designers. This book has many sample codes.
Help now my title is too close!
There is another neat trick to solve this.
Putting some space between the Intro Title and Module
After applying the negative margin trick above, the Intro Title might be too close to your Intro Module with the beautiful border.
The trick to fix this is to add some whitespace in the Intro Title.
And we use this CSS to wrap the Intro Title and give it more space:
and close the Intro Title with:
Where are the awesome borders?
I've shown you the basic tricks to get your Intro Module Image inside the border. Remember to use the negative margin CSS style to wrap your Intro Module content and be creative. Below are some great lenses with border ideas and more HTML tips.