Przedstawię wam kilka ważnych nawyków ,które ułatwią pracę programiście jak i poprawią nieco wygląd waszej strony :
Hover'yPodczas 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 :
Dzięki temu nie trzeba wczytywać 2 różnych graficzek
i łatwiej jest pisać.Kod CSS wtedy wygląda mniej więcej tak :
.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ę ;) */
}
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ś :
Widzicie to drewienko ? To drewienko w orginale wygląda tak :
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/ 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
Tutoriale
