Creating the HTML
Here we will create all the HTML code needed to create the graphic.
Our HTML file is going to contain two main parts, the SVG background element and text elements. As of now our lower-third.1.html file looks like this.
To begin with, let's add a main element inside the body with a class of lt-style-one. This main element will contain and position our graphic. Along with the main element, we will add a div element that will contain the graphic's elements. We will also give the diva class of graphic.
Creating the SVG Element
The outer bounding box of our graphic is going to be an SVG element so we can use properties like stroke-dasharray to animate the border around the text. To begin, lets create the basic svg element.
This SVG element will give us a viewbox with a width of 100 and a height of 100. We will add one addition property, preserveAspectRatio, that is going to allow our SVG element to scale freely with our inner text.
Next, we will need the two path elements that will make up our border for our graphic.
The property vector-effect defines how a vector element, path in this case, scales when the SVG element changes size. We want the border to remain a constant size no matter the width or height so we will set the value to non-scaling-stroke.
Resources
SVG Element on MDN's website.
View Box on MDN's website.
Path Element on MDN's website.
Preserve Aspect Ratio on MDN's website.
Vector Effect on MDN's website.
Creating the Text
Now that we have created our border, let's add in the text. We will only need a total of three elements to make this happen. A h1, div, and p element.
Our div element will act as the background for our subtitle element. Here is one last look at our final lower-third.1.html file.
That is all we will need for HTML! Next we will style the graphic with SCSS.
Last updated
Was this helpful?