Embedding Google Fonts – CSS Quick Tip

This is a quick tip, showing you, how to embed google fonts into your website. We will have a look at the official google fonts website and then integrate this service into your HTML document.
As always, we are using the wonderful JSBin as an editor, which you can find here:
JSBin
I am looking forward for your comments!

Your web.studio Richter

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