Tuli tässä ulkoasua katsellessa mieleen, josko headerina toimivan divin (rivillä 21) taustavärin voisi vaihtaa samaksi mitä jpg-kuvan oikean reunan väri on. Ei sillä muuten merkitystä ole, mutta näyttäisi paremmalta. Otin photarilla kuvan reunasta heksan: #007fa6.
Omassa photarissa kuvan reunassa on heksa #4080A4 ja taustaväri mainitsemassasi divissä #3f80a3 eli periaatteessa liukuväri vaan loppuu tohon mihin kuvakin.
Värisi heittää kyllä niin pahasti omistani, että epäilen että sulla on joku vaihtoehtoinen ulkoasu..
Ettei vain ole jäänyt vuosien takaa se vanha Ohjelmointiputkan logo selaimen välimuistiin? ;)
Metabolix: hehz :D
Tein uuden kuvan 16-bittisenä, ja sen verran muuttui että nyt on #0080a8. Ei se kyllä vieläkään oo sama kun sulla Grez, mutta taisin löytää siihenkin syyn. 1600% zoomilla tarkasteltuna kuvan reunassa on erivärisiä pikseleitä, joita ei kyllä kovin helpolla huomaa muuten.. Vain äärettömän pieni sävyero.
Taitaa olla sulla jotain bugia systeemeissä. Se on ihan bittikarttakuva, kaikki pikselit näkee kyllä 100% tarkkuudellakin. Jos siinä olisi tosiaan #0080a8 väriä, niin sen näkisi sokea hevonenkin.
1 px croppi reunasta ja tallennus PNG:nä -> näyttäs olevan neljää eri väriä: #4080A4, #4080A3, #4181A4, #3F7FA2. Ja mitä alkuperäseen tulee niin hyvin samalta näyttää silmämääräsesti täältä katsottuna.
Kunhan leikin CSS3:lla.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Ohjelmointiputka</title>
<style type="text/css">/*<![CDATA[*/
body {
background: #BDC5C9;
font: 10pt/120% Verdana, Arial, sans-serif;
margin: 0;
padding: 0;
}
#dokumentti {
background: #FFF;
border: 1px solid #000;
margin: 20px 25px;
position: relative;
border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 1px 1px 9px #000;
-khtml-box-shadow: 1px 1px 9px #000;
-moz-box-shadow: 1px 1px 9px #000;
-o-box-shadow: 1px 1px 9px #000;
-webkit-box-shadow: 1px 1px 9px #000;
}
#otsikko {
background: #3F80A3 url('https://www.ohjelmointiputka.net/img/palkki2.jpg') no-repeat;
border-right: 1px solid #B3C5CF;
height: 1px;
line-height: 180px;
margin: 0;
overflow: hidden;
padding: 89px 0 0 0;
position: relative;
z-index: 2;
border-radius: 19px 19px 0 0;
-khtml-border-radius: 19px 19px 0 0;
-moz-border-radius: 19px 19px 0 0;
-o-border-radius: 19px 19px 0 0;
-webkit-border-radius: 19px 19px 0 0;
}
ul.nav {
margin: 0;
padding: 0;
}
ul.nav > li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
ul.nav > li + li:before {
content: '|';
margin: 0 5px 0 1px;
}
#valikko {
background: #464B4E;
border: 1px solid #000;
border-color: #000 #7F888D #000 #000;
border-width: 1px 1px 1px 0;
color: #FFF;
line-height: 21px;
padding: 0 15px;
position: relative;
z-index: 2;
box-shadow: 0 0 3px #000;
-khtml-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
-o-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
}
#valikko a {
color: #FFF;
}
#sisalto {
margin: 10px 15px;
min-height: 700px;
padding: 0 240px 0 0;
}
#palkki {
background: #E4E4E4;
height: 100%;
padding: 0 10px;
position: absolute;
right: 0;
top: 0;
width: 220px;
z-index: 1;
box-shadow: 0 0 3px #000;
-khtml-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
-o-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
border-radius: 0 16px 19px 0;
-khtml-border-radius: 0 16px 19px 0;
-moz-border-radius: 0 16px 19px 0;
-o-border-radius: 0 16px 19px 0;
-webkit-border-radius: 0 16px 19px 0;
}
#palkki > :first-child {
margin-top: 118px;
}
#palkki p {
margin: 0;
padding: 5px 0;
}
#palkki > h2 {
background: #3F80A3;
border: 2px solid #464B4E;
border-color: #5D9FC1 #356A85 #464B4E #356A85;
color: #FFF;
font-size: 100%;
font-weight: normal;
line-height: 200%;
margin: 10px -20px;
padding: 5px;
text-shadow: 1px 1px 1px #000;
border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 1px 3px #000;
-khtml-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
-o-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
}
#palkki > h2:before {
content: '';
display: block;
height: 1px;
line-height: 1px;
margin: -5px -5px 0 -5px;
box-shadow: 0 0 3px #FFF;
-khtml-box-shadow: 0 0 3px #FFF;
-moz-box-shadow: 0 0 3px #FFF;
-o-box-shadow: 0 0 3px #FFF;
-webkit-box-shadow: 0 0 3px #FFF;
}
#palkki > h2:after {
content: '';
display: block;
height: 1px;
line-height: 1px;
margin: 0 -5px -5px -5px;
box-shadow: 0 0 3px #000;
-khtml-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
-o-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
}
p.title:before {
background: #5D9FC1;
border: 1px solid #356A85;
color: #FFF;
content: attr(title);
display: block;
font-size: 7pt;
margin: 2px;
padding: 2px;
text-shadow: 1px 1px 1px #000;
box-shadow: 0 0 3px #000;
-khtml-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
-o-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
}
ul.title {
list-style: none;
margin: 10px 0;
padding: 0;
position: relative;
}
ul.title > li:before {
background: #5D9FC1;
border: 1px solid #356A85;
color: #FFF;
content: attr(title);
font-size: 7pt;
margin-right: 11px;
opacity: .2;
padding: 2px;
right: 100%;
position: absolute;
text-shadow: 1px 1px 1px #000;
box-shadow: 0 0 3px #000;
-khtml-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
-o-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
}
ul.title > li:hover:before {
opacity: 1;
}
ul.title > li {
display: inline;
position: relative;
}
ul.title > li > a:hover {
background: #EEE;
}
ul.title > li > a {
display: block;
font-size: 85%;
line-height: 150%;
margin: 10px 0;
}
/*]]>*/</style>
</head>
<body>
<div id="dokumentti">
<h1 id="otsikko"><kbd xml:lang="en">On Error Goto</kbd> Ohjelmointiputka</h1>
<ul id="valikko" class="nav">
<li><a href="">Etusivu</a></li>
<li><a href="">Oppaat</a></li>
<li><a href="">Koodivinkit</a></li>
<li><a href="">Projektit</a></li>
<li><a href="">Keskustelu</a></li>
<li><a href="">Kilpailu</a></li>
<li><a href="">Ohjeet</a></li>
</ul>
<div id="sisalto">
<h2>Keskustelu</h2>
<p>Täällä voit keskustella ohjelmoinnista ja muistakin asioista. Eri ohjelmointikielet on ryhmitelty alueisiin. Lisäksi Ohjelmointiputkaan liittyville viesteille sekä yleiselle keskustelulle on oma alueensa. Jos olet ensi kertaa keskustelemassa, lue läpi keskustelualueen ohjeet.</p>
<ul class="nav">
<li><a href="">Jäsenet</a></li>
<li><a href="">Haku</a></li>
<li><a href="">Ohjeet</a></li>
</ul>
<p><b>Yhteensä</b>: 151783 viestiä, 19597 aihetta, 8326 jäsentä</p>
</div>
<div id="palkki">
<p>Kirjautuneena: Sinä</p>
<ul class="nav">
<li><a href="">Oma sivu</a></li>
<li><a href="">Kirjaudu ulos</a></li>
</ul>
<h2>Juuri julkaistua</h2>
<ul class="title">
<li title="PHP"><a href="">RSS-syöte Ohjelmointiputkan viesteistä</a></li>
<li title="JavaScript"><a href="">Animaatio kuvaa vaihtamalla</a></li>
<li title="QBasic"><a href="">Säännölliset lausekkeet</a></li>
<li title="PHP"><a href="">PDO - hyvä tapa käsitellä tietokantoja</a></li>
<li title="PHP"><a href="">Koodin väritys (C++-koodille)</a></li>
</ul>
<h2>Putkaposti</h2>
<p>Kuinka monta heittosarjaa sisältää annetun kuvion?</p>
<p>Vastauksia: 21<br />Paras: 22</p>
<p><a href="">Tehtävään...</a></p>
<h2>Keskustelu</h2>
<p class="title" title="Nettisivut ja -ohjelmointi">Jos liikevaihtosi on 25000 ja puhut 80000 projekteista on totuus aina kaukana. Jos taas pyydät <a href="">lisää...</a></p>
<p style="text-align: center;"><img alt="PHP-haaste" src="https://www.ohjelmointiputka.net/phph.php?2909" /></p>
</div>
</div>
</body>
</html>Joopajoo, töissä kokeilin Ubuntu-työkoneella saittia Firefoxia käyttäen ja värit on kyllä jo valmiiksi kunnossa :D OS X:n Firefoxilla ja Safarilla se näkyy väärin.
Jees, no ilmeisesti se macci ei osaa purkaa JPGiä alkuperäisille väreille. Liekö Steve päättänyt, että näyttää paremmalta kun kuvissa on enemmän kontrastia ja vetänyt omat säädöt sinne :D
Kokeilin tossa macbookilla ja näyttää olevan pielessä. Muutenkin kyllä värit oli ihan jostain poikittain..
Kyllähän PC:lläkin saa säädettyä kontrasteja, gammoja tai vaikka kalibroitua värit, mutta PC-puolella ne säädöt onneksi vaikuttaa esim. www-sivulla kaikkiin elementteihin eikä valikoidusti joka toiseen.
Haha :D Yllättävää, en olis uskonu noin suurta eroa löytyvän. Eniveis homma selvitetty ja mun puolesta case closed :)
Enpä ole tuohon aikaisemmin paljoa huomiota kiinnittänyt, mutta kyllä tuossa headerin kuvan reunassa ja oikean laidan palkissa on selkeä väriero minunkin näytöllä. Os on XP, selain Firefox 3.5 ja näyttö kalibroitu Samsung MVA paneelilla. Kuvan reuna näyttäisi sinivioletilta, kun taas se palkki siinä oikealla siniharmaalta. Kynnys on kyllä niin selvä että puolisokeakin sen erottaa. Väriarvoja en ole mittaillut, mutta ei ne kyllä ihan yksiin mene.
Eipä tuo tosiaan minua ole häirinnyt, eikä häiritse vieläkään, mutta oishan se pro:mpi jos värit täsmäisivät.
Jostain syystä yllä esitetyssä kuvakaappauksessa logo on aivan normaali mutta logon tausta ja myös linkkipalkin harmaa tausta ovat huomattavasti todellista vaaleampia. Voiko jokin Macin hieno värinvaalennustoiminto sotkea asian? :D
Itse asiassa jos sen PNG:n lataa esim. photoshoppiin ja sanoo sille että heittää väriprofiilin (LCD jotain) mäkeen, niin tausta on normaalin värinen ja JPG tummempi. Sitten taas jos katselee selaimella sitä, niin väriprofiilin takia ne PNG:n väriarvot näytetään eri sävyillä kuin mitä ihan bittikartan numeroarvoja katsomalla voisi kuvitella.
Sinänsähän tuossa ei mitään muuta ihmeellistä ole, kuin että miksi se äppeli säätää taustavärin eri väriprofiililla kuin JPG:n (kummassakaan ei ole sisällytettyä väriprofiilia, joten luulisi niiden menevän saman mukaan)
lainaus:
Voiko jokin Macin hieno värinvaalennustoiminto sotkea asian?
Veikkaan että sitä kutsutaan LCD profiiliksi. :D
OS X:ssä ja Windowsissa on eri default-gammat,
tsuriga kirjoitti:
OS X:ssä ja Windowsissa on eri default-gammat
No sehän ei sinänsä olisi mikään ongelma, jos Macissa toimiva selain ei soveltaisi sitä valikoivasti. Vaikka säädän gamman Puuceessa samaksi kuin macin oletus, niin siltikin tuo yläpalkki näyttää aivan yhtenäiseltä.
Edit: Tuli juuri mieleen, että olisiko tuossa putkan JPG:ssä sittenkin väriprofiili. Photarihan ei yllättäen ilmoittele siitä, jos se on sama kuin oletus. Siinä tapauksessa voisi auttaa heivata profiili pois ko. kuvasta.
Kyllä siinä taitaa olla profiili. Ajoin sen jpegicc:n läpi, kuva pieneni neljännekseen. Tulos on tässä. Jos tuo nyt toimii, Antti toivottavasti korvaa vanhan logon.
Tässä screenshotti puuceellä (XP): http://sooda.dy.fi/fpaste/index.php?QNf
Kolme eri selainta. Kolme eri tulosta. Väriprofiililla ei ole mitään tekemistä asian kanssa. Profiilin poisto ei tuonut tilanteeseen oleellista muutosta. Kuva on jpegginä, joten värit nyt eivät ole ihan alkuperäiset, mutta pointti sinällään pysyy.
Selaimina ovat (ylhäältä alas) uusimmat versiot Firefoxista, IE:stä ja Safarista.
Edit. Tarkoitan tietysti näytön profiilia. Jpeggiin mahdollisesti liitetty väriprofiili tietty vaikuttaa asiaan.
Metabolix, oikeessa olet. Muutin Firebugilla sorsaan lennosta headerin osoitteen, jonka urlin hain tuolta soodan filupastesta ja sehän toimii sillä täydellisesti.
Metabolix kirjoitti:
Kyllä siinä taitaa olla profiili. Ajoin sen jpegicc:n läpi, kuva pieneni neljännekseen.
No ei sinänsä ihme jos koko pieneni noikin paljon, kun kuvakin on pienempi. Siis tuosta puuttuu oikeanreunimmainen verkkomainen koriste kokonaan.
Sekä kuva on pakattu uudelleen.
Grez kirjoitti:
No ei sinänsä ihme jos koko pieneni noikin paljon, kun kuvakin on pienempi. Siis tuosta puuttuu oikeanreunimmainen verkkomainen koriste kokonaan.
:o Jopas on. Bongasin lähdekoodista epähuomiossa kuvan putka.jpg, joka onkin kommentoitu pois. Tässä on oikea kuva (palkki2.jpg) ilman profiilia, ja nyt pakkauksenkin pitäisi olla sama. Tällä kertaa ohjelmana oli jpegtran.
Tässä vielä edellistä tiedostokooltaan pienempi, luotu ImageMagickia käyttäen, komentona
convert -strip palkki2.jpg palkki2-stripped.jpg
tsuriga: omaa kommenttiasi lainaten: kuva on pakattu uudelleen. Ero näkyy paljain silmin, kunhan zoomaa riittävästi. Pois tuollaiset!
Juu ihan tosi :), en kiireessä tajunnu kahtoa kon ero tiedostokoissa oli niin pieni. Convert todellakin pakkaa kuvan uudelleen myös tuolla -strip -vivulla, vaikkakin varmaankin melko hyvälaatuisena. Optimaalisin lisähäviötön versio lienee siis Metabolixin versio.
Optimoitu 256-värinen PNG (45755 tavua) ja tuo aiempi huvin vuoksi värkätty sivu.
Merri kirjoitti:
Optimoitu 256-värinen PNG (45755 tavua) ja tuo aiempi huvin vuoksi värkätty sivu.
WTF! Tuo on v***n hieno. Tuollaisen teet mullekin :D
Senkun rippaat, monet CSS-tiedostossa nähtävät temput on sellaisenaan kopioitavissa mihin tilanteeseen tahansa. Toki tällä hetkellä CSS3 on vielä sen verran vaiheessa, että jotkut jutut bugittaa eri selaimien välillä (esim. Chromessa ei ole ihan niin paljon pyöristettyjä kulmia eivätkä ne ole kovinkaan pehmeitä). Toki sitten jos rippaat, niin kannattaa huomata että kaikki vaikuttaa kaikkeen, mm. position- ja z-index -määrittelyt ovat tarkasti vuorovaikutuksessa eri elementtien välillä.
Siksitoisekseen, olen huomannut että parhaiten sivuston ulkoasu onnistuu kun pystyy ammentamaan jostakin. Eihän tuo nyt ole muuta kuin Putkan nykyinen ulkoasu vähän eteenpäin kikkailtuna ja tekniseltä puolelta modernisoituna. Mieluummin väkerrän ulkoasuja tutuille asioille.
Aihe on jo aika vanha, joten et voi enää vastata siihen.
