Scootergrisen

Her er de to filer jeg prøvede at oploade. Det er jo en fornøjelse at lave modifikationer for en der laver danske klassenavne.

F***, jeg kan stadig ikke uploade dem

Men her er de vigtigste dele.

CSS3

Kode: Vælg alt

<body id="toppen" style="background: rgb(206,220,231); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=1 ); /* IE6-9 */



">



   <div class="top">

      <div id="overhovedlogoholder" style="padding:6px;border-radius:6px;background-repeat:no-repeat;background: #f2f6f8; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
">

Base64

Det er jo et værre roderi. Jeg mener at Opera accepterer webkit-værdier nu, men jeg kører også 12.50.

Så kom jeg i tanke om inline-image metoden som gør gradients mere kombatibel og gør at den ikke skal finde finde filer et andet sted først. Den må alt andet lige være hurtigere. Med body-baggrunden brugte jeg mit Klippeværktøj og sørgede for at min baggrund var præcis 1280px bred i et billedprogram.

Så puttede jeg billede filen i en base64-converter på nettet og fik noget kode igen som så sådan ud.

Kode: Vælg alt

<body id="toppen" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAADCAYAAADMSKL+AAADPElEQVR42u3Y11KaQRiA4dxmem92pamIBSt2ERRpSseGXVGxgSBg7y0xxSS3scnMf7Czs/vvroeZ+Q6eC3hP30fx9B0Kzh2h7MU92r/9Q9i7+S1t9/qXtPz1Pcpfycld/US5S3nZyx//WsR2Lr4rzsUy59+wM7702Z3iVGz79KviRCx18gU75kse32JHYltHN9ihus3Da9IB38bBFbavbn3/krTHt7Z3QdplS+ye0/Jsq/kzthzbSu6UlqUtZ0/U7dDiO8e0DG0pc8SWZltMH7Jtkxa2D9SlaPOpfXVJ0lxyT90WNru1y7dJmtnMq9vApjdyYuvY1HqWb00RW9uRk1BMJjJiqxk0sZqWt5JG4yvbYsuKseWUWDyFRuNJeUtJFF3akhJZ3HyQ8MKGlNDCOgrNywvOrUkLzCak+WdXkX9Gjm9mBfmmxUaml7EpseGpuCLG540tYZNinslFxYSYe2JBMS7mGp/HxvicY3PYKN/Q6Cwpqs4RnSFF2AYj07SwuoHwFCmkzh6K0YJstuAkLcDWH5hg89Os/nE2H63PN8Y2QusdGWUbpvUMR9m8bN3eCJuH1OUJq3OTOt0hPhfW4QryObF2Z4BvCLMM+fkcWJvDJzaItQ6O8A0oWgaGxexYs90rZvOiJptHTr8HNfa75VjdyGx1yelzoYY+p7xeJ6rvHZJS1+N4kNruQSmm7gFk6pJX02mXYuy0IWOHnOqOfkW7WFW7VWERq7T0KdrkGNp6Fa18+tYerEVM19KtaObTNndhTWKapk6sUV1FYwfJzFdubic1qCtrsJDq2Urr22h16krqWkm1bMW1LTSTuiJTM62GVljTxGZkKzA2slXTPleb2apon6oa2CppHyvr2QykD4Y6Pj3pvb5WnQ57pzOJabG32ho+DfZGY+SrwF5XVPOVY6/Kq/jKsJdllWKlihelBrESA3peopdXrEfPinVyinToaZFWTqEWPSnUyCnQoMcFFUyPYADCAIQBCAMQBiAMQBiAMABhAMIAhAEIAxAGIAxAGIAwAGEAwgCEAQgDEAYgDEAYgDAAYQDCAIQBCAMQBiAMQBiAMABhAMIAhAEIAxAGIAxAGID/4QD8CwqhKesxAEsUAAAAAElFTkSuQmCC);

">


   <div class="top">

      <div id="overhovedlogoholder" style="padding:6px;border-radius:6px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAvCAYAAADXTSt/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD5SURBVEhLldbLTsJQAITheXx9AtnqOxhjjDHGeL8hiFhKU0vp7bQ9vdAWdiO+gMksvtWf2Q8ORyf8czA6/t/Rvu+hGXZUoO63VKDqBipgNz0VKNueChRNRwVMvaECWdVSgdQ2VCApGyoQFzUVWOcVFQiNpQKrzFKBIC2pwE9SUAE/zqmAFxkqsFwbKuCGGRVYrFIq4AQJFTi9G1OBs4cJFTh/+qQCFy9fVODy7ZsKXI0XVOB6sqQCN1OPCtzOfCpwPw+owKMTUoFnN6ICr15CBd79jAp8BDkVmIYlFZhFFRWYxzUVcNKWCrimowJeMVAB3+6ogHxO1MEvuifj3MY006AAAAAASUVORK5CYII=);
">

Jeg har fået det til at virke nu.
Man kan se det øverst på de sider man lang title : http://scootergrisen.org/scooterhjemmes ... mandre.php

Ja nu ser det røvgodt ud. Nu er det der der skal være over menuen med lidt lyseffekt.

Jeg har ikke selv brugt text-overflow men min fornuft sagde mig den fandtes.

Hvis det er man(jeg) er usikker på hvilke farver der passer bruger jeg altid sådan noget som colourmatch. Det er ikke flovt - det er ren æstetik. Den grå baggrund er ikke holdbar. a:hover-farven skal måske være lidt lysere men det er en smagssag. Godt gået, gris

!!!

Hvad baggrund skulle der så være i stedet for ?

scootergrisen skrev:Hvad baggrund skulle der så være i stedet for ?

Når man ser på den øverste bjælke er den jo mere blå end grå. Hvis man toner den lidt over i det blå så har du igen en god kontrast til den grå menu og den blå hover-farve matcher godt.

Min baggrundsfarve her hedder: #CBD8E2

: Med baggrundsfarve #CBD8E2; baggrund.PNG (104.64 KiB) Vist 7018 gange

Hvad er en tramsmission iøvrigt?

Jeg ved ikke helt. Jeg er ikke til at farvede baggrunden. Vil hellere have den er neutral, helst hvid egentlig.

Nej det er rigtigt - på et eller andet tidspunkt er det øjnene som ser som bestemmer hvad der er godt.

Youtube som jeg synes dit site ligner meget godt rent stilmæssigt bruger jo nærmest nuancer i hvidt og også gradients...men det var slet ikke nødvendigt. De bruger stadig primært en streng styring af typografien til at skabe den lukkethed og lighed( jvnf. gestaltlovene f.eks. http://www.nielsgamborg.dk/?p=gestaltlovene), der gør at folk kan skelne videoerne og informationerne fra hinanden og så ganske få designelementer (ikoner, knapper o.lign).
Det er kun deres forside som p.t. er en katastrofe.

Nej det er noget sjusk. Det forvirrer mere end det skaber overblik. Lige efter hinanden har du tre tekst områder i samme farve...hvor det ikke er overskriften som er først. Så skal du ifølge førnævnte gestaltlove lave luft til indholdet, så man kan se at det ikke hører sammen og f.eks ændre farve.

Er det bedre sådan her med overskriften øverst ?

: screenshot.png (129.77 KiB) Vist 6999 gange

Det der kaldes "at tilte" i pokersproget. Man tror man laver siden bedre ved at ændre lidt på typografien hist og her. Facebook havde det på samme måde på et tidspunkt og det var ved at drive folk til vanvid fordi man følte sig som fanger i et laboratorium. Efter min overbevisning laver man designændringer højst hver halve år m.m. de er specielt motiverede og så laver man det fra bunden af.

Den designmæssige argument. Nej Nyheder er en underoverskrift så ordenen på de forskellige overskrifter bliver forkert. Hvis du endelig vil have en god ide til en modificering så ville det være at flytte punkterne fra hovedmenu hen andetsteds sådan så du havde en menu for hjemmesiden og en menu for scooterviden. Det er meget almindeligt at man har den opdeling.

Scootergrisen

Nye menu farver

Re: Nye menu farver

Re: Nye menu farver

Re: Nye menu farver

Re: Nye menu farver

Re: Nye menu farver

Re: Nye menu farver

Re: Nye menu farver

Overskrift

Re: Nye menu farver

Re: Nye menu farver