In this tutorial I will introduce you to the XML-based image format SVG (Scalable Vector Graphics). SVG is adviced by the World Wide Web Consortium (W3C) and developed since 1999. To get in touch with this technology, I will show you some basic examples, how to use SVG in your HTML documents. I will explain basic shapes you can create with SVG and give you some links to further dive into this wide topic.
SVG is a wonderful way of implementing Images into your website. It is small in size, delivers sharp Images and is widely supported by browsers. For further reading I advice you the following links:
In this tutorial we will talk about the HTML srcset attribute of the img element. With this attribute you can define specific images for a specific screen width and pixel density. This tutorial focuses on the w-descriptor. It gives the browser informations about the width of an image, so he can choose the proper image out of a list of images. This is saving traffic and always shows the proper image for the clients screen.
In this tutorial I will give you some insights into the future of CSS. With CSS Grid Layout – display: grid you will have more control over your layouts. You can forget the rather confusing float or inline-block systems of CSS. With display: grid design and structure is even better separated.
This tutorial is not a complete guide to this new feature, but will give you the ability, to experiment with the grid layout and explore it on your own.
As always I am using the great JSBin tool to visualize this CSS feature:
In this tutorial we will have a look at CSS gradients. With the gradient functionality you can design colourful web pages with just a few lines of CSS. CSS gradients are generating an image, with gradient effects.
Particularly we will have a look at the linear-gradient and the radial-gradient function. I will introduce the most important use cases, to enable you to start with CSS gradients on your own.
As always I use JSbin (www.jsbin.com).for this tutorial.
If you want to know more about CSS gradients, just have a look at the following web pages:
In this tutorial about creating responsive columns, we will talk about the CSS attribute ‘columns’. With that you can define columns on your contents, to give your users some kind of a newspaper experience.
But with CSS columns you can even setup a responsive column design. The columns are changing its appearance according to the width of the screen, without setting up any media queries.
Finally you can easily create a resposnive HTML list or navigation. But what is best, the cross browser support for this attribute is rather extensive, if you do not use more advanced commands.