Boteco Digital

CSS Web

Animate.css é uma biblioteca CSS de pequenas animações com vários efeitos interessante para dar destaques em elementos da nossa página. Você pode conferir os efeitos na própria página do projeto. Vamos ao da biblioteca então, primeiramente devemos incluir a biblioteca no nossos head>o que pode ser feito direto pelo CDN: Baixando pelo bower: ou ainda baixando direto do Git do projeto Após a biblioteca estar carregada, para executar uma animação basta adicionar ao elemento desejado, via javascript, as classes “animated” […]

mais
CSS Web

Em muitos casos é necessário criar um input radio ou checkbox com aparecia diferente do padrão, normalmente utilizando uma imagem como botão. Este objetivo pode ser alcançado através de CSS. Então vamos aos exemplos. Para começar vamos ao clássico input radio de seleção de sexo, como visto abaixo: Começamos com o HTML, devemos colocar tanto o input radio quanto a imagem dentro do elemento label. Este label deve estar associado ao input através da propriedade “for”, propriedade que deve conter […]

mais
CSS

Estamos acostumados a dar algum destaque em elementos da página que usuário pode interagir como links e campos de texto. Geralmente apenas trocamos a cor da letra, background ou o sublinhado do texto. Para isso simplesmente alteramos a propriedade em questão no seletor da pseudo classe :hover e com isso o alteração da propriedade é instantânea. Mas muitas vezes queremos que esta alteração seja mais suave, levando mais tempo para ocorrer e para isso podemos utiliza a propriedade transition. Para […]

mais
CSS

Sempre houve uma grande dificuldade em trabalhar com fontes na web, o problema? Ficamos limitados a utilizar somente as fontes instaladas no computador do usuário, ou seja somente as fontes instaladas por padrão do sistema operacional. É claro existem algumas técnicas que podemos utilizar, mas sinceramente só não chamamos elas de gambiarras porque não existia outro modo! Agora com CSS3 temos a propriedade font-face que permite carregar um fonte externa e utilizá-la no navegador. Na linha 2 declaramos o nome […]

mais
CSS

Por muito tempo para utilizarmos bordas arredondadas tinhamos que utilizar imagens, o que nunca foi uma boa saida. Com CSS 3 chegou uma solução bem mais robusta, o border-radius que funciona em praticamente todos os browsers, utilizando diferentes declarações. O IE não possui nenhum suporte a bordas arrendondadas, mas a Microsoft já declarou que o IE9 terá suporte. Como ainda não existe compatibilidade é recomendada a utilização da prorpiedade somente para fins estéticos onde não irá afetar a usabilidade do […]

mais
CSS Web

O CSS3 está vindo ai certo, alguns browser já estão implementando algumas coisas legais que irão nos livrar de muitos “POGs” que somos obrigados a fazer e poupar bastante trabalho. Hoje gostaria de apresentar a propriedade text-shadow que é simplesmente a sombra do texto, e já esta disponível para a maior parte dos navegadores. Onde: Medida 1: é o deslocamento a direita(com valores negativos a sobra irá para esquerda). Medida 2: é o deslocamento para baixo(com valores negativos a sombra […]

mais
CSS Dicas Vídeo

Para mim, uma das coisas mais chatas é ter que escrever HTML, pois é um código repetitivo e isso é extremamente cansativo e entediante. E a edição continua “chata” até mesmo utilizando as melhores IDE’s do mercado. Claro que podemos recorrer ainda para os famosos editores WYSIWYG, mas convenhamos, um bom desenvolvedor que se prese não as utilizaria. Bom, ai que entra o zen-coding que não se trata de uma nova IDE, mas sim de um plugin, ou melhor, uma […]

mais
Tags
JQuery

Um menu sanfona(Accordion Menu) é um menu divido por categorias que quando está mostrando os links de uma categoria esconde os links das outras(ele estica e comprime como uma sanfona). Esta funcionalidade pode também ser aplicada a um texto com vários tópicos ficando disponível os titulos e quando clicado mostra somente o texto do tópico. Este recurso é muito interessante quando temos um texto grande dividido em tópicos, pois não deixa a página muito longa. Nesta implementação vamos utilizar uma […]

mais