Os GIFs animados são imagens, mas o senhor não pode realmente manipulá-los como outros tipos de imagens, como PNGs, JPEGs ou até mesmo WebPs. Os GIFs são uma espécie de arquivo de vídeo, pois têm quadros, mas não há controle real sobre como eles são reproduzidos ou em loop. Meu utilitário favorito de manipulação de imagens, o ImageMagick, não parece ser o melhor utilitário para GIFs animados – outro utilitário chamado gifsicle é tão bom quanto possível. Mostrei ao senhor como fazer mesclar e otimizar GIFs animados com o gifsicle, e agora vamos dar uma olhada no redimensionamento de GIFs animados.
Se o senhor tentar usar a funcionalidade básica de redimensionamento do ImageMagick, acabará obtendo a saída do primeiro quadro no tamanho correto. Isso é bom, mas o senhor quer manter o GIF animado, certo? Aqui estão alguns métodos fáceis para redimensionar um GIF com o gifsicle:
# Scaling of an image - 50% gifsicle --scale 0.5 -i animation.gif > animation-smaller.gif # Scale to a given width with unspecified height gifsicle --resize-fit-width 300 -i animation.gif > animation-300px.gif # Scale to a given height with unspecified width gifsicle --resize-fit-height 100 -i animation.gif > animation-100px.gif # Clip to size gifsicle --resize 300x200 -i animation.gif > animation-clipped.gif
O senhor pode usar scale
para dimensionar facilmente uma imagem por um determinado fator, mas o senhor também pode usar --resize-fit-height
ou --resize-fit-width
para dimensionar para os respectivos tamanhos. O senhor também pode recortar com --resize
. A saída permanece animada e o senhor tem seu GIF animado no tamanho desejado!
39 Shirts – Deixando a Mozilla
Em 2001, eu tinha acabado de me formar em uma escola de ensino médio de uma cidade pequena e estava indo para uma faculdade de uma cidade pequena. Encontrei-me no pitoresco laboratório de informática, onde os computadores de baixa qualidade apresentavam dois navegadores: Internet Explorer e Mozilla. Foi nesse laboratório que me apaixonei…
CSS :target
Um pseudo-seletor CSS interessante é
:target
. O pseudo-seletor de destino fornece recursos de estilo para um elemento cujo ID corresponde ao hash do local da janela. Vamos dar uma olhada rápida em como o pseudo-seletor de destino do CSS funciona! O HTML Suponha que haja vários elementos HTML com…