Eeva Haataja

Koko: px

Aloita esitys sivulta:

Download "Eeva Haataja"

Juho Salonen
7 vuotta sitten
Katselukertoja:

1 Eeva Haataja Kotitehtävä 1 Graafiset käyttöliittymät HW1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"/> <link href=' rel='stylesheet' type='text/css'> <title>gkl 1</title> </head> <body> <header> <h1 class="ribbon">esimerkkisivu </h1> </header> <nav> <h2>navigaatio</h2> <ul> <li><a href=" <li><a href=" <li><a href=" </ul> </nav> <article> <h2>viisi uutta tekniikkaa (itseasiassa vahingossa 6)</h2> <b>käänsin</b> kuvan, jolloin minun piti kertoa yleisimmille selaimille oma käsky kuinka toimia. Eli loppujen lopuksi jouduin kertomaan sen viiteen kertaan. Sama käsky käy myös tekstille. Jos joku käyttää jotain eksoottista selainta, hän ei välttämättä näe käänöstä :( <b>blurraus</b> oliki yllättävän simppeli. Tuli vain määrittää että väri on transparent ja tekstin varjo. Näyttää uskottavalta blurrilta. Tätä käytetään toisinaan pelien apufoorumeilla, niin että ensin tarjotaan apu ja spoileri on piilotettu blurrilla ja sen näkee kun maalaa tekstin. <b>ribbonissa</b> määritellään ensin keskiosa, joka on helppoa peruskauraa, mutta sitten määritellään vielä ribbon ennen(before) ja jälkeen(after).

2 Tällä sivulla otsikkoripponin liehukset on hyvin pitkät ja keskiosa on ikkunaan mukautuva. Wrapperissä on <b>box shadow</b> mikä pitää määritellä safarille/chromelle ja mozillalle erikseen, sekä vielä yleisesti. Lisäksi uutta tässä oli minulle <b>border-radius</b>, joka siis pyöristää kulmat. muuta erikoista wrapperissa ei ollut. Wrapperin kaverina tässä on vielä toisenlainen ribbon, jossa se on käännettynä 45 asteen kulmaa (samalla tyylillä kuin kuva), sekä before ja after ovat erilaiset. Uusi juttu on myös <b>gradientti</b> mitä on käytetty vihreässä ribbonissa. Siinä gradientti määritellää backgroundimagena ja on määritelty selaimille erikseen. <h2>lähteet</h2> <ul> <li>1.<a href=" rotation</a></li><li> 2.<a href=" text</a></li><li> 3.<a href=" ribbon</a></li><li> 4-6.<a href=" and ribbon</a> </li> <img class="rotate" src=" alt="homer" > <h2>tekstiotsikko</h2> <p class="blur"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget sapien. Vestibulum ut velit. Fusce non magna. Sed at eros. Nam imperdiet interdum nunc. Nulla facilisi. Nam tincidunt. Pellentesque urna. Quisque vitae ipsum vel sem tristique ornare. Curabitur eget mi pellentesque dui porttitor placerat. Proin imperdiet dolor eu odio. <div class="wrapper"> <div class="ribbon-wrapper-green"> <div class="ribbongreen">väliotsikko</div></div> Donec eu nulla vitae massa suscipit suscipit. Phasellus pellentesque purus vel risus. Morbi diam tortor, placerat nec, facilisis vel, nonummy a, sapien. In at mauris. Morbi mollis accumsan est. Suspendisse vel risus. Aliquam odio neque, suscipit vel, tincidunt in, mattis vitae, ante. Nunc convallis egestas sem. Nullam vitae dui at metus mattis pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla in neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam et est non odio eleifend ornare. Integer pharetra, massa interdum interdum gravida, lorem metus fermentum leo, a adipiscing metus nulla eget augue. </div>nullam neque. Donec gravida lacinia diam. Donec ullamcorper sapien hendrerit ipsum. Proin lobortis sollicitudin sapien. Sed est. Morbi eros. Duis tincidunt condimentum quam. Etiam ut magna. Suspendisse luctus tristique dolor. Mauris convallis faucibus velit. Donec vitae purus. Morbi bibendum convallis eros. <footer > Alatunniste </footer> </article> </body> </html>

3 style.css /* uudet opitut asiat viimeisimpinä */ /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: Author: Richard Clark - */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; body { line-height:1; article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; nav ul { list-style:none; blockquote, q { quotes:none; blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;

4 /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; del { text-decoration: line-through; abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; table { border-collapse:collapse; border-spacing:0; /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; input, select { vertical-align:middle; /*reset päätty ja oma koodi alkaa*/ body{ background-color: #f0f0f0; max-width:60em; margin: auto; font-family: 'Averia Sans Libre', cursive; p, h1, h2, h3{ padding: 0.5em 0em 0.5em 0em; header{

5 nav{ background-color: #C50; float:left; min-width: 18em; padding-left: 1em; padding-bottom: 1em; article{ background-color: #C60; float:left; max-width: 38em; padding: 1em; img{ position:relative; left:6em footer{ background-color: #C80; margin:0em -1em -1em -1em; padding: 1em; ul{ list-style:none; /* 1. uusi opittu asia: rotating*/.rotate { /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:dximagetransform.microsoft.basicimage(rotation=3); /*2. uusi opittu asia: blur text */.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);

6 /* 3. uusi opittu asia: RIBBON */.ribbon { font-size: 20px!important; /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ width: 50%; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; /* Adjust to suit */ margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */.ribbon:before,.ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1;.ribbon:before { left: -22em; /* tää on sit kivan pitkä liehus!!*/ border-right-width: 22em; border-left-color: transparent;.ribbon:after { right: -22em; border-left-width: 22em; border-right-color: transparent;.ribbon.ribbon-content:before,.ribbon.ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em;.ribbon.ribbon-content:before { left: 0; border-width: 1em 0 0 1em;.ribbon.ribbon-content:after { right: 0; border-width: 1em 1em 0 0; /* 4-6. opittu asia wrapperista :box shadow border radius ja gradient */.wrapper { margin: 1em auto; width: 380px; height: 200px; background: white; border-radius: 10px; /* border-radius*/ padding:3em; -webkit-box-shadow: 0px 0px 80px rgba(0,0,0,0.9); /* box shadow*/ -moz-box-shadow: 0px 0px 80px rgba(0,0,0,0.9);/* box shadow*/ box-shadow: 0px 0px 80px rgba(0,0,0,0.9);/* box shadow*/ position: relative; z-index: 90;.ribbon-wrapper-green {

7 width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px;.ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#bfdc7a), to(#8ebf45));/* gradient*/ background-image: -webkit-linear-gradient(top, #BFDC7A, #62852E); /* gradient*/ background-image: -moz-linear-gradient(top, #BFDC7A, #62852E); /* gradient*/ background-image: -ms-linear-gradient(top, #BFDC7A, #62852E); /* gradient*/ background-image: -o-linear-gradient(top, #BFDC7A, #62852E); /* gradient*/ color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);/* box shadow*/ -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);/* box shadow*/ box-shadow: 0px 0px 3px rgba(0,0,0,0.3);/* box shadow*/.ribbon-green:before,.ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px;.ribbon-green:before { left: 0;.ribbon-green:after { right: 0;

Samankaltaiset tiedostot

Tiera Kokouskutsu 1 (8) Rel lautakunta Aika , klo 15:00. Käsiteltävät asiat. 1 Kokouksen laillisuus ja päätösvaltaisuus

Tiera Kokouskutsu 1 (8) Rel lautakunta Aika , klo 15:00. Käsiteltävät asiat. 1 Kokouksen laillisuus ja päätösvaltaisuus Tiera Kokouskutsu 1 (8) Aika 31.08.2016, klo 15:00 Paikka Auditorio Käsiteltävät asiat 1 Kokouksen laillisuus ja päätösvaltaisuus 2 Pöytäkirjan tarkastus 3 Viranhaltijoiden päätösten otto-oikeus 4 DP 5