Some basics about SVG

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:

 

A Compendium of SVG Information

MDN SVG Tutorial

Getting Started with SVG for Web Design – Tuts+

I am looking Forward for your comments,

Phillip from web.studio Richter

HTML srcset attribute

 

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.

As always I am using JSBin in this tutorial:
http://www.jsbin.com

For more informations about HTML srcset have a look here:

http://www.webdesignerdepot.com/2015/…

http://blog.kulturbanause.de/2014/09/…

http://www.w3.org/html/wg/drafts/html…

I am looking forward for your comments!

Phillip from webstudio

CSS Grid Layout – display: grid

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:
www.jsbin.com

If You need more info I advice you:

http://gridbyexample.com/examples/
https://css-tricks.com/snippets/css/c… (just partly working in Chrome)
http://www.w3.org/TR/2015/WD-css-grid…

With current Chrome compatible properties:

https://rachelandrew.co.uk/archives/2014/06/27/css-grid-layout-getting-to-grips-with-the-chrome-implementation/

Thanks for watching, I am looking for your comments.

Phillip from webstudio

CSS gradients

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:

https://css-tricks.com/css3-gradients/
https://developer.mozilla.org/de/docs…

Thanks for watching my videos, I am looking forward for your comments!

Your webstudio

CSS responsive columns

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.

Further informations you can find on CSS-tricks:
https://css-tricks.com/guide-responsi…

As always I use the cool JSBin for demonstrating CSS.
http://www.jsbin.com

I am looking forward for your comments!