Join Chris Converse for an in-depth discussion in this video Beginning the project, part of Design the Web: CSS-Controlled SVG with PHP.
- Now in addition to being able to use this technique on standart PHP pages, you can also use this for PHP-based content management systems, which includes platforms like WordPress, Joomla, ModX, ExpressionEngine, and so forth. Now this is a technique that we use at our studio so that we can design and develop both corporate and product-based websites that allow us to design a series of assets that we can reuse across different products and platforms and allow us the ability to customize those individual graphics for each project.
So to begin our project, let's go to the Desktop. Let's create a new folder. We'll just call this myWebsite. I'll open this up. Next, go to Exercise files. Let's open up the CH-01 folder. Let's grab the Images directory and the Index.html file. Let's option-drag or copy and paste a copy of these files into that new folder we just created. And then once your files are copied, let's open the Index.html file up in a browser. So here I just have a really simple layout.
We just have a header area at the top with a background graphic. At the bottom right of the header, I've positioned three individual graphics that are the SVG graphics inside of the Images folder. And then we have just some sample content down here. So now to see what's constructed in the HTML file so far, let's go over and open the Index.html file up in a code editor. So in the HTML file I have a style area here inside of the header area of the HTML up here. I basically have a few rules here for body, article, header, and social.
This positions the div element. If I come down here and look inside the header, I have a development with a class of social. This will position this item to the lower right, and then I have simply three anchor tags, each with a custom class and some information about share on Twitter, LinkedIn and Instagram. Up here, under social space a we're setting a display of inline-block, setting our background properties. Down here, we're hiding this span inside of the anchor tag. This way, the links can be seen by Google, but we don't actually have to show those to the user.
And then down here are our three classes, social space a.tw, .li, .ig, which reference those three SVG graphics as the background to those anchor links. And now in my particular code editor, there is a built in preview, so I'm going to turn on the preview and use that while I'm working throughout the course. And then I'll just size this down a little bit so I have more room for my code. Now once we start creating our PHP files, I will have to change the URL up here from pointing to a local file, which is what we see here, to pointing to a particular folder where my local web serving software is running so we can process the PHP, and we'll talk about that next.