Drukuj stronę - Dobre nawyki podczas kodowania stron

Przedstawię wam kilka ważnych nawyków ,które ułatwią pracę programiście jak i poprawią nieco wygląd waszej strony :
[lp] Hover'y
Podczas pracy z grafikiem często podsyłał mi grafiki - 1 grafika była normalna ,a 2 to była grafika jaka miała być hover'em.
Odradzam wam robienie czegoś takiego ;).
Zazwyczaj można stworzyć 1 grafikę ,która ma w sobie 2 grafiki :
Normalną i Hover czyli coś takiego :
(http://screenshu.com/static/uploads/temporary/v9/47/64/cf08om.jpg)
Dzięki temu nie trzeba wczytywać 2 różnych graficzek :) i łatwiej jest pisać.Kod CSS wtedy wygląda mniej więcej tak :

Kod:

.blabla {
background-image: url('plik.png');
width: 100px; /* Szerokość na 100px */
height: 50px; /* Wysokość na 50 px. Jest to połowa obrazka :) */
}
.blabla:hover {
background-position: bottom; /* Pokazujemy dół obrazka ,a nie jego górę ;) */
}

[lp] Ramki
Dzięki CSS3 można używać atrybutu border-image - dzięki temu można robić obramowania z obrazka. Przykładem może być takie coś :
(http://screenshu.com/static/uploads/temporary/cq/0b/kl/j7ru38.jpg)
Widzicie to drewienko ? To drewienko w orginale wygląda tak :
(http://ninja.exone-web.pl/game/images/border.png)
Jest to spowodowane użyciem border-image ,a jej funkcjonalność można zobaczyć chociażby w jej generatorze ,który bardzo się przydaje : http://border-image.com/ (http://border-image.com/)
[lp] Kodowanie strony
Pracując z grafikiem otrzymywałem od niego stronę ,która często była zakodowana pod jego rozdzielczość czyli po 1024x768 - proszę nie róbcie tego bo tylko przysparzacie sporo niepotrzebnej roboty programiście ;)

Chyba tyle ;)

Polskie Forum Użytkowników GIMP-a

Tutoriale => Pozostałe => Wątek zaczęty przez: Kongo on 23.12.2012, 17:27:24