web-taiton historia

Taulukot

Aluksi taulukot olivat ainoa tapa taittaa sivujen leiskaa. Css:ää ei vielä ollutkaan. Taulukoiden kanssa tuli kyllä toimeen, mutta oli se aika sekavaa koodia.

Kellutus

Vuoden 2004 paikkeilla alettiin käyttää CSS:ää ja sen mukana kellutusta (float). Kellutetun elementin isäntäelementti ei normaalisti huomioi kellutusta omassa korkeudessaan. Toisin sanoen kelluttamisen käyttö taittoon on aikamoista nysväämistä ja vaatii kikkailua. Sen kanssa on opittu elämään ja se on ollut suosituin tapa tehdä taittoa vajaan kymmenen vuoden ajan.

Positionti

Elementtejä saatiin omiin tasoihinsa eli kerroksittain.

Flexbox

Flexboxin avulla pystytään ratkaisemaan paljon aiempien web-taittojen ongelmia. Näihin lukeutuvat muun muassa sisältöelementtien järjestäminen, elementtien keskittäminen, keskinäisten suhteiden ja sijainnin määrittäminen sekä sisällön rivittäminen responsiivisesti.

CSS-tricksin kaikenkattava ja paras flexbox-sivu:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

 

Tekniikat elementtien asemointiin

Float -- kelluta

Kellutusten käyttö taitossa perustuu siihen, että sillä elementit saadaan rivittymään vierekkäin. Kellutus poistaa elementin sivun normaalista virtauksesta (flow), jolloin seuraavan elementin pystysuuntainen sijoitus ei huomioi kellutettua elementtiä.

Kellutusta käytetään nykyyn esim. navin muotoilussa tai vaikkapa kuvan sijoittemisessa tekstikappaleen rinnalle. Mutta Flexbox on korvannut floatin monessa muussa.

esim.

#nav li
{      float: left;      }

Elementtejä voidaan kelluttaa rinnakkain useampiakin, jos emoelementissä on tilaa riittävästi vaakasuunnassa. Kun tila tulee täyteen, putoaa jäljelle jääneet elementit alaspäin.

ss

 

Absoluuttinen Positiointi

Position-ominaisuudella voidaan sijoittaa elementti näytölle ikaäänkuin uuteen tasoon. Elementin paikka määritellään pikseleinä joko salainikkunan tai emoelementin reunasta.

1. absoluuttinen positiointi: absolute-määrittää sijoittumisen absoluuttisesti sivulle. Sijoittuminen lasketaan asemoidun emo-elementin suhteen (emoelementti täytyy olla jokosuhteellisesti-, absoluuttisesti- tai kiinteästi asemoitu). Absoluuttisesti asemoitu elementti poistetaan elementtivirrasta ja se voi sijoittua päällekkäin jonkin toisen elementin kanssa. Sitä, mikä elementeistä on ylimpänä voidaan hallitaz-index-ominaisuudella.


   #video {  
position: absolute;   
top: 400px;   
right: 40px;   
width: 240px;   
height: 180px; } 


 

2. kiinteä asemointi: fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä ja positiointi tapahtuu aina koko näytön suhteen eikä äiti-elementin suhteen.

Positioinnin yhteydessä määritelläänmyös seuraavat ominaisuudet:

* top-ominaisuudella määritellään elementin etäisyys yläreunasta.

* bottom-ominaisuudella määritellään elementin etäisyys alareunasta.

* left-ominaisuudella määritellään elementin etäisyys vasemmasta reunasta.

* right-ominaisuudella määritellään elementin etäisyys oikeasta reunasta.

* z-index-ominaisuudella määritellään elementin taso ruudulla.
Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.


 

 

 

CSS3-ominaisuuksia

CSS3 on uusin versio, joka tuo lisää ulkoasun muokkausmahdollisuuksia kurssilla muuten käytettyyn CSS2-kieleen verrattuna. CSS3-merkintöjä voidaan käyttää yhdessä CSS2-merkintöjen kanssa.

Kaikki CSS3-ominaisuudet eivät toimi vielä kaikissa selaimissa.

Osa selaimista ja selainversioista saattaa tarvita myös erillisen etuliitteen, jotta ominaisuus toimisi, esim. -moz-border-image.

Selain Etuliite
Mozilla Firefox -moz-
Chrome -webkit-
Safari -webkit-
Opera -o-

Yleisimpiä ominaisuuksia

  1. Reunaviivan kulman pyöristys - border-radius
  2. Teksti- ja laatikkovarjot - box-shadow + text-shadow
  3. Läpinäkyvyys RGBA:n avulla - box_opacity
  4. Kuvareunukset - border-image
  5. Gradientit ilman kuvia
  6. Animaatiota CSS:n avulla
  7. Media Queryt
  8. Taustakuvan koko - background-size

 

http://css3please.com/

Esim.

.textbox1 {
margin: 50px;
padding: 20px;
height: 150px;
width: 150px;
border: 3px solid #03C;
float: left;
background-color: #9F0;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
-webkit-box-shadow: 5px 5px 11px 2px #999;
-moz-box-shadow: 5px 5px 11px 2px #999;
box-shadow: 5px 5px 11px 2px #999;
}

Nämä ovat melko kryptisiä ulkoa opittaviksi ja niitä voi koodailla webissä olevilla monilla generaattoreilla esim.

css3generator.com/

CSS3-ominaisuuksia

Esimerkki Navin muotoilusta

Navilinkit laitetaan listan sisälle html-koodissa

 

ss

 

Navin muotoilussa tarvitaan ainakin seuraavia sääntöjä:

ss

 

Ja tässä sitten sääntöjä, jotka antavat ominaisuuksille arvoja:

 

nav {
	height: 65px;
	text-align: center;
	background-image: url(kuvat/navitausta.gif);
	background-repeat: no-repeat;
}
nav  ul{
	list-style: none;	
	
}
nav li {
	float: left;
	list-style: none;	
}

nav a {
	font-family: 'Stint Ultra Expanded', Helvetica;
	font-size: 16px;
	color: #FFF;
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 216px;
	text-decoration: none;
}
nav a:hover {
	color: #888;
	text-decoration: underline;
	background-image: url(kuvat/navi_hover.gif);
	background-repeat: no-repeat;
}

ja lopputulos on kaunista katseltavaa....

ss

 

 

 

Google Fonttien lisääminen

1.Mene osoitteeseen :

http://www.google.com/fonts

2. Valitse sieltä fontti ja lisää collectioniin painamalla plus-painiketta

3. Avattavasta ikkunasta voit kopioida linkin google fonttiin; liitä se html-sivun headeriin


4. Samasta löydät myös fontin tiedot css-tiedostoon