css – Tarkkaamo https://jml.kapsi.fi/jussi Jussi Linkolan blogi ja kotisivusto Wed, 09 Dec 2020 10:45:27 +0000 fi hourly 1 https://wordpress.org/?v=6.9.1 https://jml.kapsi.fi/jussi/wp-content/uploads/2015/11/cropped-Tarkkaamo-favicon-Target2_512-32x32.png css – Tarkkaamo https://jml.kapsi.fi/jussi 32 32 Hero Patterns – SVG-taustakuvia https://jml.kapsi.fi/jussi/2020/03/27/hero-patterns-svg-taustakuvia/ Fri, 27 Mar 2020 13:06:29 +0000 http://jml.kapsi.fi/jussi/?p=4382 Hero Patterns

A collection of repeatable SVG background patterns for you to use on your web projects

Kivoja SVG-kuvioita, jotka sopivat käytettäväksi verkkosivujen taustakuvina. Itselläni on nyt kirjoittamishetkellä yksi näistä kuvioista sivuston taustakuvana.

]]> Full Page Background Video Styles https://jml.kapsi.fi/jussi/2017/05/29/full-page-background-video-styles/ Mon, 29 May 2017 06:09:47 +0000 http://jml.kapsi.fi/jussi/?p=3774 Video verkkosivun taustana voi olla vaikuttava suunnitteluelementti. Chris Coyier on tehnyt aiheesta mainion ohjeen: Full Page Background Video Styles – The Media Temple Blog

]]> Googlen web-fontit https://jml.kapsi.fi/jussi/2011/07/03/googlen-web-fontit/ https://jml.kapsi.fi/jussi/2011/07/03/googlen-web-fontit/#comments Sun, 03 Jul 2011 08:51:09 +0000 http://jml.kapsi.fi/jussi/?p=874 Webdesignereiden perinteinen riesa on www-sivujen ulkoasun ja sivunrakennustekniikoiden ristiriita; HTML ja CSS eivät luonnostaan tarjoa riittäviä mahdollisuuksia sivujen ulkoasujen visiuaaliseen esittämiseen. Myös käytettävissä oleva fonttivalikoima on varsin rajoittunut riippuvainen käyttäjien konelle asennettua oleviin fontteihin. Fonttirajoitusta on pyritty kiertämään erilaisilla tekniikoilla. Nyt Google on julkaissut oman ratkaisunsa fonttiongelmaan.

Google Web Fonts tarjoaa erinomaisen fonttiselaimen, jonka avulla on mahdollista selata lähes kahtasataa vapasti käytettävää fonttia.

Googlen Web-fontit

Fonttikirjastosta voi valita suosikkifontteja omaan kokoelmaansa ja fonttien käyttäminen omilla www-sivuilla on helppoa. Fontti liitetään sivulle yhdellä <head> -osioon määriteltävällä linkillä, CSS-importilla tai Javascriptillä.

Googlen Web-fontti - lisäyslinkki

Kokelin tekniikkaa omalla käyntikorttisivullani ja se tuntuu toimivan oikein mukavasti. Käyttöönotto meni näin:

Googlen Web-fonttien käyttöönotto

Ensiksi etsin fonttiselaimella sopivan fontin, jonka upotuslinkin lisäsin sivun <head> -osioon:

<head> 
<link href='http://fonts.googleapis.com/css?family=Quattrocento&v2' rel='stylesheet' type='text/css'>

Sen jälkeen lisäsin fontin sivun CSS-määrityksiin:

font-family: 'Quattrocento', georgia, serif;

Siinä kaikki :)

]]> https://jml.kapsi.fi/jussi/2011/07/03/googlen-web-fontit/feed/ 1