sunnuntai 28. syyskuuta 2014

Illustrator tutorial

Kuinka tehdä reikä kuvioon Compound Path:llä.

1. Valitse Ellipse Tool työkalu valikosta, ja tee mieleisesi kuvio.



2. Tee samalla työkalulla pienempi kuvio alkuperäisen sisään



3. Valitse/ota aktiiviseksi kumpikin kuvio ja mene Object valikkoon, etsi Compound Path ja klikkaa Make



4. Etsi oikealla olevasta valikosta Symbols ja valitse haluamasi kuva, klikkaa kuvaa hiiren oikealla ja etsi valikosta Arrange, klikkaa sitten Send to Back.





5. Nyt sinulla on kuva kuvion takana, voi jee.



sunnuntai 14. syyskuuta 2014

torstai 11. syyskuuta 2014

CSS parametrit

1. font-family:

Määrittää fontin tai fonttiperheen.

p (font family: "Times New Roman", Georgia Serif;)


2. font size:

Määrittää fontin koon.

h1 (font-size: 250%;)


3. font variant:

Määrittää tekstille small-caps fontin.

p.small (font-variant: small caps;)


4. color:

Määrittää tekstin värin.

h1 (color: #00ff00;)


5. float:

Määrittää kelluuko laatikko vai ei.

img (float: right;)


6. white space:


Määrittää miten välit elementin sisällä käsitellään.

p (white-space: nowrap;)


7. width:

Määrittää elementin leveyden.

p.ex (height: 100px;
         width: 100px;)


8. height:

Sama kuin ylempi, mutta määrittää korkeuden.


9. position:

Määrittää elementtiin käytettävän sijoittelu tyylin.

h2 (position: absolute;
      left: 100px;
      top: 150;)


10. word spacing

Suurentaa tai pienentää sanojen väliä.

p (word-spacing: 30px;)


11. word wrap:

Mahdollistaa pitkien sanojen katkaisun ja siirron seuraavalle riville.

p.test (word-wrap: break-word;)


12. outline:

Määrittää elementille rajauksen tehdäkseen siitä näkyvämmän.

p (outline: #00FF00 dotted thick;)


13. margin:



p (margin: 2cm 4cm 3cm 4cm;)


14. border:

Reunustaa/tekee laatikon tekstin ympärille

p (border: 5px solid red;)


15. background:

Määrittää sivun taustan värin tai kuvan.

body (background: #00ff00 url("smiley.gif") no-repeat fixed center;)


16. text-align:

Määrittää tekstin tai objektin sijoittumisen pystysuunnassa.

h1 (text-align: center;)


17. text shadow:

Tekstin varjostus.

h1 (text-shadow: 2px 2px #ff0000;)


18. opacity:

Tekstin väri.

div (opacity: 0.5;)


19. direction:

Määrittää tekstin kirjoitussuunnan.

div (direction: rtl;)


20. position:

Määrittää tekstin tai objektin asettumistavan.

h2 (position: absolute;
      left: 100px;
      top: 150px;)

sunnuntai 7. syyskuuta 2014

Korjaa koodi

<html>
  <head>
   <meta charset="UTF-8">
     <title>Oma sivu</title>

   </head>

  <body bgcolor="#DB7093">

  <h1>Kokeilu</h1>

   <p>
    <br>
lisää tekstiä
    <br>
vielä lisää tekstiä
   </p>

   <p>
<font face="arial" color="#6B4226"><strong>uusi
kappale</strong></font>
   </p>
<table border="1" width="900" align="center”>

    <tr>
  <th colspan="3">
eka solu
     </th>
    </tr>
    <tr>
  <td width="100">kolmas solu</td>
<td width="500">neljäs solu</td>
  <td width="300">b solu</td>
    </tr>
   </table>
  <br>
   <table border="1" width="900" align="center">
    <tr>
  <td width="100">eka solu</td>
  <th rowspan="2">otsikkosolu</th>
<td width="300">a solu<td>
<td></td>
    </tr>
    <tr>
  <td width="100">kolmas solu</td>
  <td width="300">b solu</td>
    </tr>
   </table>

   <p>
<a href=http://www.kktavastia.fi target="blank">
<img ="kuvia/koulu_valmis.jpg" alt="Koulun sivuille">
   </p>

   <p>
<a href=http://www.kktavastia.fi target="_blank">Koulun sivut</a>
   </p>

   <p>
<a href="toka.html" target="_self">
<img src="kuvia/painike.jpg" alt="Toiselle sivulle">
   </a>
   </p>

   <p>
<a href="kolmas.html" target="_self">
<img src="kuvia/painike2.jpg" alt="Kolmannelle sivulle">
    </a>
   </p>
  </body>
</html>


Ainakaan se ei ole suoraan kopioitu.

maanantai 1. syyskuuta 2014

Datanomi mainos

Tänään työkalut löytyi aika nopeasti, mutta mitään kovin monimutkaista ei viitsinyt lähteä kokeilemaan.