MND Header #03 Documentation

• Images
• Site Title
• Styling
• Last Steps
• Browsers

ImagesBack to top

• The header images can be changed by simply replacing the header1.jpg, header2.jpg, and header3.jpg with your own in the images folder.
• The images sizes are 400px wide by 450px high.

Site TitleBack to top

• To add your site title in the header: Open index.html in your favourite editor → Search and edit <h1 class="site-title">.
• Use the <span> tag for the special effect of blending the text with the background.

StylingBack to top

• The color blended over header2 can be changed in style.css - locate the class header2. RGB value must be used, in order to make opacity work. The RGB value of a color can be found using sites like ColorHexa - replace the first 3 values in the background-color. The forth value is the opacity, you can also change it to suit your header.
• The 2 colors blended over header1 and header3 can be changed in style.css - locate the classes mask1 and mask3. RGB values must be used, in order to make opacity work. The RGB value of a color can be found using sites like ColorHexa - replace the first 3 values in the background-color for mask1 and mask3. The forth value is the opacity, you can also change it to suit your header.

Last StepsBack to top

• Make a screenshot of the page.
• Open/copy the screenshot in an image editor like XnView.
• Crop the header at the dimensions you want, then save it as .jpg or .png.

BrowsersBack to top

The background-blend-mode used for the color filters over the header images is supported by the latest versions of Firefox and Chrome.
A full display of browsers supporting this CSS effect can be found at CanIUse.com.

The mix-blend-mode used to blend the site title span with the background is supported by the latest versions of Firefox and Chrome.
A full display of browsers supporting this CSS effect can be found at CanIUse.com.