Making SVGs Responsive with CSS

An SVG can be embedded on a web page in many ways; one of which is embedding it inline in an HTML5 page using the <svg> tag. The other commonly used techniques include embedding it as an image using the <img> tag, embedding it using the <object> tag, using an iframe, and as a CSS background image. Conceptually, making an SVG scale as its container scales should be as simple as removing any fixed height and/or width, and specifying a viewBox attribute value. However, due to different browser implementations and inconsistencies, the web isn’t all ponies and rainbows, and making SVGs fluid isn’t quite that straightforward, because the way browsers determine the dimensions of an SVG when embedded in different ways isn’t consistent across all of them. That said, there are certain “fixes” and hacks that we can use to get the expected behavior in all browsers. In this article, we’re going to explore these techniques, going over when to use each one, in order to make SVGs fluid and/or adaptive. Making SVGs Fluid Using CSS In order to make an SVG fluid, the first logical thing to do is to remove the height and width attributes. When a fixed height and/or width is specified, the SVG is going to maintain that height/or width, thus restricting it from being fully responsive. You should, however, leave the viewBox attribute present. After removing the height and width, you can embed the SVG in one of several ways on the page. We’ll be using the following SVG nautical logo in the demos. It’s from a freebie designed by Freepik. SVG embedded using...

Techniques for Creating Textured Text

View demo Download source In this article we’re going to explore several techniques that can be used to create textured text or apply a background to text. Please remember that some of the techniques covered in the article are experimental with very low browser support, and may not be the best technique to use when you’re building real projects that need wide browser support. I’ve included a screenshot for each demo, the link to the demo in the end of each technique. You can also click the screenshot to see the respective demo. Applying an Image Background to Text Using -webkit-background-clip: text We’re going to start with the CSS background-clip property and use it to get the following result: The CSS background-clip property determines an element’s background painting area, which is the area within which the background is painted. By default, the background extends all the way to the border of an element with a default value of border-box, and it can take other values like padding-box and content-box, which are self-explanatory. Different effects, such as giving an element transparent borders, can be created using this property, and it is pretty well supported in all modern browsers. The background-clip property was extended in Webkit with a fourth value, text, which causes the background image to clip to foreground text (including decorations and shadows). Then, by giving the text a transparent color using the Webkit-only property -webkit-text-fill-color, the background image will show through the text, thus completing the clipping effect. The text value of the background-clip property is, at the time of writing of this article, not part of any...

Building a Circular Navigation with CSS Transforms

View demo Download source In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. But don’t worry, the math is really very simple and I’ll be going through it step by step. I also want to mention that credit for the original technique goes to Ana Tudor. I tweaked it to achieve the results that I wanted, which is also what I’m hoping you’ll be able to do by the end of this tutorial: have a deep and clear understanding of the technique so you can start fiddling around and creating your own styles. So, without further ado, let’s get started! The Markup We’re going to be building a navigation, so we’ll start with a regular navigation structure. We’ll need a div to contain our unordered list of items, a button to trigger the opening and closing of the navigation, the list of items, and for the first demo we’ll need an extra overlay to cover the page when the navigation is open. + The icons we’re using in this demo are from Font Awesome. The Math Behind the CSS Transforms The best way to explain the math is to use a visual explanation instead of a written one. So I’ll start with the logic and we’ll apply the math...