Transparent Text With CSS3 and SVG

Thank you for purchasing our item. please feel free to connect us on our support forum for your any your questions regarding the item.

Installation

First include the CSS files.
And JS files.

Loader

You can edit loading main text in ergo_loading_wrapper div in html file.ergo_loading_text contain main loading text.

HTML:

Slider/404

Text masking effect on a large background image.

1.How to create SVG text

First we will create our SVG element. The x and y values are the offset positions for the text. The font(s) we wish to use are written in style sheet.Replace the text values with your own

2.How to change transparent text background colour

For this you want to edit style in text-slider.html/404.html file

3.How to change background image

You can customise slider in style.css file.

Video background

1.How to create SVG text

Like SLIDER you can create SVG elements in html page. The x and y values are the offset positions for the text.

2.How to change transparent text background colour

For this you want to edit style in html file

3.How to change video background

Build the HTML5 video tags then link your video source


Then make the video fullscreen using CSS

Older browsers will not recognize the video formats. For those browsers we create a background-image for the element

Note:The video needs to be small, and compressed as effectively as possible. At the same time, it needs to scale across different devices and their associated screens. In advanced cases, you might want to consider using inline media queries or matchmedia to send different quality versions of the video to different screen sizes. Try to keep the video under 5mb; ideally, under 500k.

Contact

1.How to edit contact details

You can edit the contact details inside SVG element in contact section


2.How to change background image

You can change background image in style.css

PLEASE NOTE- FOR IE

IE and versions does not support colour blend mode So we used separate style sheet for IE (ie-only.css). all you have to do is manually do the burn effect on the images with image editing sw and link these images (background-url) to the above mentioned style sheets to get burn effect on IE. if you don't want to use colour blend modes then you can remove all-ie-only.css.