Slice grafik op, til brug i <form>

Valdemar: Det er jeg klar over, det er ikke photoshop delen jeg har problemer med, det er at integrere det til web

Fx: hvis jeg aflevere det her billede til dig :http://nas.bimer.dk/elenaradef/images/nyhedsbrevtest.png


Hvordan vil du så gribe det, i forhold til at du skal implementere det i en <form> ?

Daniele kommer med en god forklaring.

Dog ville jeg ændre en lille smule:

 <form method="" action="" id="form">
      <table><tr>
          <td><img src="billede.jpg" alt="billede" /></td>
          <td><h1>Overskrift her</h1></td>
          <td>&nbsp;</td>
      </tr><tr>
          <td>&nbsp;</td>
          <td><input type="text" name="email" /></td>
          <td><input type="submit" name="" value="SEND" /></td>
      </tr></table>
  </form>

(har fjernet en ligegyldig <div>, og sat id'et i <form> istedet.. En mindre detalje, men placerer man mange af disse ligegyldige <div> så kan koden i sidste ende godt blive lidt uoverskuelig.

 #form input {
      background-image: url("billede.jpg");
  }
  #form td img {
      /* CSS for billede */
  }

Har sat #form foran alt, så css'en kun har indflydelse på denne éne <form>.

Samt fjernet css'en for billedet, da jeg ikke synes der er nogen grund til at sætte særlig meget der, med mindre det ikke passer.

Så ville jeg sige at du skal ligge det op nogenlunde således:

HTML

 <form method="" action="">
 
 <div id="form">
     <table><tr>
         <td><img src="billede.jpg" alt="billede" /></td>
         <td><h1>Overskrift her</h1></td>
         <td>&nbsp;</td>
     </tr><tr>
         <td>&nbsp;</td>
         <td><input type="text" name="email" /></td>
         <td><input type="submit" name="" value="SEND" /></td>
     </tr></table>
 </div>
 
 </form>

CSS

 input {
     background-image: url("billede.jpg");
 }
 
 td img {
     position: relative;
     top: -20px;
 }

Noget i den stil? Husk, ikke testet!

Spændende! Her er hvordan jeg ville gribe det an.

Først ville jeg som du har gjort opdelt billedet i 2 dele - baggrunden med brevet og gradient delen - jeg ville nok ikke bruge 2 png'er men i stedet lave en sprite til det, men mit eksempel er med 2 png'er...tsk tsk

Jeg ville så nok fjerne teksten på billedet, det bruger nemlig samme font som der benyttes i menuen, så hvorfor ikke udnytte det og lave et label - der er foreslået at lave det som en h1'er, men rent semantisk set bør det nok være et label med en for der peger på input feltet.

Ok html'en:

 <form method="post">
         <label for="emailfelt">Tilmeld dig nyhedsbrevet</label>
         <input id="emailfelt" required type="email">
         <input type="submit" value="Send">
     </form>

Det bliver ikke simplere. Jeg har tilføjet lidt HTML5 attributer såsom type="email" og required - prøv det i Google Chrome, den vil kun acceptere valide emails der og give et tooltip hvis feltet ikke er udfyldt...helt gratis - nice!

CSS'en:

 form {
             width: 380px;
             height: 70px;
             padding-top: 15px;
             background: transparent url(nyhedsbrevtest.png) 0 0 no-repeat;
         }
         form input[type=email],
         form input[type=submit] {
             width: 240px;
             height: 35px;
             margin-left: 70px;
             border: none;
             background: transparent url(gradient.png) 0 0 repeat-x;
         }
         form input[type=submit] {
             width: 50px;
             margin-left: 2px;
         }
         label {
             font-family: "SnellRoundhandRegular"; /*Font-size tilføjes også*/
             display: block;
             margin-left: 70px;
         }

Man kan altid diskutere om hvorvidt det er hensigtsmæssigt at bruge tag selectors og ikke class eller id, men jeg kan godt lide ikke at klaske for meget på html'en og hvis siden er simpel er det jo fint nok.

Du kan jo give alle dine input-felter en fælles class, og så i dit stylesheet definere baggrund mv.

f.eks.

 <form>
 <input type="type" class="inputfelt" />
 <input type="type" class="inputfelt" /><br />
 <input type="type" class="inputfelt" /><br />
 <input type="type" class="inputfelt" /><br />
 <input type="submit" value="Submit!" />
 </form>

Og så i css:

 .inputfelt {
 /*Fælles CSS*/
 background-image: url('billede.png');
 background-repeat: repeat-x;
 }

Hej Valdemar.

Det er faktisk også det jeg gør nu, (har dog brugt # lige i denne sammenhæng)

Synes bare at når man laver hele grafikken i photopshop, ala det billede jeg linker til øverst, så er det lidt irriternede at skulle slice input felterne op, fjerne dem fra baggrundsbilledet osv, inden man igen sætter det sammen i CSS.

Jeg tænker at der næsten må være en smartere måde at gøre det på.

Nåh okay -Tror jeg misforstod dit spørgsmål en anelse så.

Har du hørt om lag i photoshop? Det kunne jeg forestille mig var noget du kunne bruge!

Med lag i photoshop kan du have forskellige "billeder" liggende oven på hinanden, og du kan redigere i de enkelte lag, uden at ødelægge de andre.
Og du kan self. flytte om på lagrækkefølgen osv.

Det burde give rimelig meget sig selv.
Du laver et nyt lag sådan her: ctrl+shift+n (hvis jeg husker rigtigt)

Du kan evt. læse en masse tips og tricks omkring brugen af lag her: http://www.pcworld.dk/art/7043/leg-med-lag-i-photoshop
(ikke nødvendigt, men det kan være meget godt at vide hvad man ellers kan bruge sine lag til)

Valdemar: Det er jeg klar over, det er ikke photoshop delen jeg har problemer med, det er at integrere det til web

Fx: hvis jeg aflevere det her billede til dig :http://nas.bimer.dk/elenaradef/images/nyhedsbrevtest.png


Hvordan vil du så gribe det, i forhold til at du skal implementere det i en <form> ?

Lige med input felterne ville jeg gøre det med CSS3.
CSS3 Gradient background

Hej Daniele

Det er også en fint eksempel, men jeg søger mere den overordnede måde at angribe det på.

@Valdemar, jeg kan godt se din pointe i koden. Men jo mindre at han har flere form's på sin hjemmeside ville jeg mene at det er unødvendigt med et ID på sin form. Der kunne han selvfølgelig bare skrive

 form input {
       background-image: url("billede.jpg");
 }
 form td img {
     /* CSS for billede */
 }

Men jeg kan godt se hvad du mener. +2 til dig @Valdemar fra min side af, fordi at du rettede en dum fejl i min kode .