O seu site mais leve 08.01.17 10:17
Muitas vezes encontramos em um site, várias imagens desnecessárias, que ocasionam em mais downloads do navegador para a exibição da página. É importante que você ao estilizar a sua página, utilize imagens somente quando necessário, o CSS permite várias estilizações já padrões e que são mais leves do que imagens, além de muitas vezes serem melhor utilizados.
Um exemplo que vou dar, é o gradiente. Se você não sabe, com o CSS você pode fazer vários tipos de gradiente, e a sua página fica muito mais leve.
Um site gerador de gradiente CSS: http://www.colorzilla.com/gradient-editor/
Outro exemplo é as bordas personalizadas. Vejo muito isso em sites habbos, eles fazem aquele title box com várias camadas de borda, e por isso acabam tendo que utilizar imagens, e muitas vezes, vários códigos para fazer a title box criar forma. Para você que não sabe, existe:
OUTLINE (clique para saber mais)
BORDER (clique para saber mais)
BOX-SHADOW (clique para saber mais)
Leia atentamente como funciona cada uma dessas sintaxes, e comecem a utilizar em seus sites. Um site mais leve é melhor para o seu visitante, pois, nem no 3G irá demorar muito pra carregar.
Uma outra dica importante, mas fora do conteúdo principal do tópico, é o BOX-SIZING, colocando o código box-sizing:border-box; em seu site, nenhuma sintaxe de espaçamento irá alterar o tamanho do seu elemento, tornando mais fácil trabalhar com padding e porcentagens.
Espero ter ajudado.
Um exemplo que vou dar, é o gradiente. Se você não sabe, com o CSS você pode fazer vários tipos de gradiente, e a sua página fica muito mais leve.
Um site gerador de gradiente CSS: http://www.colorzilla.com/gradient-editor/
Outro exemplo é as bordas personalizadas. Vejo muito isso em sites habbos, eles fazem aquele title box com várias camadas de borda, e por isso acabam tendo que utilizar imagens, e muitas vezes, vários códigos para fazer a title box criar forma. Para você que não sabe, existe:
OUTLINE (clique para saber mais)
BORDER (clique para saber mais)
BOX-SHADOW (clique para saber mais)
Leia atentamente como funciona cada uma dessas sintaxes, e comecem a utilizar em seus sites. Um site mais leve é melhor para o seu visitante, pois, nem no 3G irá demorar muito pra carregar.
Uma outra dica importante, mas fora do conteúdo principal do tópico, é o BOX-SIZING, colocando o código box-sizing:border-box; em seu site, nenhuma sintaxe de espaçamento irá alterar o tamanho do seu elemento, tornando mais fácil trabalhar com padding e porcentagens.
Espero ter ajudado.