3 efeitos hover incríveis em CSS para imagens

22 de novembro de 2015 / Programação / 0 Comments

3 efeitos hover incríveis em CSS para imagens

 

Na web atual, há centenas (se não houver milhares) de técnicas que podemos usar para criar as mais diversas e interessantes interações. As opções mais fáceis e elegantes, geralmente, são efeitos hover criados com CSS, mais especificamente com CSS3. Os efeitos hover são aqueles criados a partir do posicionamento do mouse “em cima” de alguma coisa.

 

Há algum tempo atrás, precisávamos recorrer ao JavaScript para criar esse tipo de efeito, porém, devido ao crescente suporte ao CSS3 que os navegadores vem apresentando, tornou-se viável criar efeitos hover sem a necessidade de scripts.

 

Infelizmente, ainda há navegadores (Internet Explorer 9 e versões anteriores) que não suportam o CSS3, mas essas limitações estão com os dias contados.

 

Hoje, vamos mostrar como criar 3 efeitos hover incríveis em CSS para imagens que revelam títulos e legendas.

 

efeitos hover css artigos de programação

 

Efeitos hover para imagens #1: voando para a direita

 

Esse é o efeito mais simples que ensinaremos hoje. Basicamente, a imagem “voará” para o lado direito para revelar o texto pretendido.

 

O markup

 

Para o HTML desse primeiro efeito, vamos utilizar uma lista desordenada e, depois, colocar a legenda e a imagem dentro dessa lista. Note que nós também adicionaremos uma classe chamada demo-1 e outra chamada effect dentro da tag da lista desordenada.

 

O CSS

 

No CSS, definiremos o posicionamento relativo da classe demo-1 e depois configuraremos a largura e a altura. Nós também esconderemos os elementos overflow. Colocaremos também estilos básicos para o h2 e para o p bem como para a tag de imagem também. Na classe effect definiremos o posicionamento como absoluto e uma margem de -15px em top e bottom. Por fim, utilizaremos a transição de CSS3 para criarmos um efeito suave.

 

Código HTML + CSS + Demo do Efeito 1: http://jsfiddle.net/giovannacoppola/pr8pjcst

 

Efeitos hover para imagens #2: deslizando para baixo

 

A nossa segunda demo fará com que a imagem deslize para baixo quando você passar o mouse, revelando a legenda acima dela.

 

O markup

 

O HTML desse efeito é bem parecido com o que usamos anteriormente, mas agora usaremos uma classe chamada demo-2 e adicionaremos uma classe chamada zero.

 

O CSS

 

O CSS será quase igual ao que utilizamos na primeira demo, mas agora deslizaremos a imagem definindo a propriedade bottom como -96px.

 

Código HTML + CSS + Demo do Efeito 2: http://jsfiddle.net/giovannacoppola/0u8nsud3

 

Efeitos hover para imagens #3: girando sobre o próprio eixo

 

Nessa última demo, a ideia é criar um efeito de carta girando, fazendo com que a imagem gire sobre o próprio eixo quando passarmos o mouse e revele o texto escondido logo em seguida.

 

O markup

 

Essa estrutura será um pouco diferente das anteriores. Utilizaremos os elementos do HTML5 figure e figure caption. Dessa vez, a classe demo-3 será adicionada em nossa lista desordenada.

 

O CSS

 

No CSS, definiremos posição relative para a figura e também esconderemos o backface-visibility. Além disso, definiremos o rotateY como -180deg para o figcaption e, em seguida, para 180deg no hover tanto da legenda quanto da imagem.

 

Código HTML + CSS + Demo do Efeito 3: http://jsfiddle.net/giovannacoppola/25qr76qb

 

O pessoal do Supernova Websites Criação de sites personalizados e Otimização de sites SEO cria sites com incríveis efeitos CSS !


Vantagens e desvantagens da linguagem PHP

22 de agosto de 2015 / Programação / 0 Comments

Linguagem PHP

A linguagem PHP é uma linguagem de programação open source (de código aberto) usada principalmente para desenvolver aplicações que atuam server side (no lado do servidor) e que são capazes de gerar conteúdo dinâmico na web. Se você não sabe o que é uma linguagem de programação, você pode aprender o conceito lendo esse artigo que postamos onde falamos sobre as 10 linguagens de programação mais utilizadas atualmente. Uma delas, claro, é a linguagem PHP.

 

Desde seu surgimento em 1995, a linguagem PHP passou por muitas mudanças e evoluiu consideravelmente. Alguns estudos recentes mostraram que o número de sites que utilizam a linguagem PHP cresce cerca de 2.500% ao ano. Além disso, praticamente 95% dos servidores suportam a linguagem PHP.

 

Depois de 20 anos e tanto crescimento, alguns pontos podem ser apontados como vantagens e outros como desvantagens. Se você está na dúvida para escolher qual linguagem de programação aprender ou qual aplicar em seu próximo projeto, é uma boa ideia conferir os tópicos a seguir.

linguagem php artigos de programação

 

A linguagem PHP e suas vantagens

 

O PHP é livre

 

Totalmente livre. Isso significa muitas coisas, por exemplo:

 

  • Não há licenças que detalham o que você pode ou não fazer com a linguagem, o que significa, na prática, que você pode fazer praticamente o que quiser
  • Se comparado a linguagens como JAVA e .NET, por exemplo, o contrato de uso do PHP é muito mais flexível, já que a linguagem pode ser usada em qualquer país, independente de suas leis ou da aplicação
  • A linguagem PHP é permissiva a ponto de você poder, inclusive, criar outras linguagens derivadas dela e distribuí-las da forma como quiser

 

O aprendizado não é difícil

 

Se você já é um programador web, provavelmente conhece pelo menos uma dessas linguagens: Java, C ou Perl. A boa notícia é que a linguagem PHP possui elementos dessas três linguagens, tornando o aprendizado mais fácil.

 

Ao mesmo tempo, quem ainda não programa também encontrará uma curva de aprendizagem bastante favorável. A linguagem PHP não é um bicho de sete cabeças nem mesmo para aqueles que estão chegando agora, já que seus conceitos básicos são bastante simples.

 

O PHP é uma linguagem multiplataforma

 

Na prática, isso significa que o PHP é uma linguagem capaz de rodar em uma infinidade de servidores: Windows, Linux, Unix, Solaris, FreeBSD e muitos outros.

 

linguagem php artigos de programação 2

 

A linguagem PHP e suas desvantagens

 

A segurança deixa um pouco a desejar

 

Uma vez que a linguagem PHP é open source, todos podem ver seu código-fonte. Assim, se houver erros no mesmo, pessoas mal intencionadas podem se aproveitar para explorar as fraquezas e brechas do PHP.

 

O PHP não é adequado para aplicações de grande porte

 

É difícil manter uma aplicação de grande porte rodando em PHP já que a linguagem não é muito modular.

 

A documentação costuma ser escassa ou incompleta

 

Como acontece com a maioria das linguagens open source, frequentemente novos recursos surgem antes mesmo que possam ser documentados. Isso significa que é comum encontrar recursos sem instruções, sem detalhamento ou sem exemplos que facilitem o aprendizado. Embora o site da organização ajude bastante, muitas vezes é necessário “quebrar muito a cabeça” para entender ou fazer funcionar um novo recurso.


Conheça as 10 linguagens de programação mais utilizadas atualmente

5 de agosto de 2015 / Programação / 0 Comments

A 10 linguagens de programação mais utilizadas:

 

Atualmente, existem diversas linguagens de programação disponíveis para programadores profissionais e até mesmo curiosos que se interessam pela arte de programar. Se você tem interesse na área, já deve ter se questionado sobre quais são as melhores linguagens de programação para aprender. A resposta é simples: depende.

 

Quer saber do que depende? Do seu objetivo. Você pode querer ser um programador mobile, um programador para web ou um programador de sistemas para desktop. Para cada caso, haverá linguagens de programação mais indicadas.

 

linguagens de programação artigos de programação

 

Mas, afinal, você sabe o que são linguagens de programação? O conceito é bastante simples.

 

De forma resumida, uma linguagem de programação é um método de comunicar orientações para um computador. Através de instruções passadas pelo programador usando uma linguagem de programação, o computador entende sobre quais dados deve atuar, como armazená-los, transmiti-los e quais ações tomar. O computador, nesse caso, é a máquina, podendo ser um notebook, um tablet ou um smartphone, por exemplo.

 

Agora que você já sabe o que são linguagens de programação, está na hora de conhecer quais são as 10 mais utilizadas atualmente (em ordem alfabética, não em ordem de popularidade) para decidir qual vai ao encontro de seu objetivo.

 

TOP 10 linguagens de programação

 

  1. C

C é uma linguagem muito poderosa e rápida e vem sendo utilizada em massa para criar softwares para sistemas embarcados. Sistemas operacionais, games, integração com hardwares e aplicativos também são programados em C.

 

  1. C++

Considerada por muitos especialistas como a melhor linguagem voltada a desenvolvimento de jogos que exigem um grande desempenho do hardware e softwares para desktop, C++ é um aprimoramento da linguagem C: nela se encontram componentes da orientação a objetos, coisa que não está presente na linguagem C.

 

  1. C#

A Microsoft e a linguagem C# andam de mãos dadas. Com essa linguagem, já foram desenvolvidos serviços, plataformas web e dispositivos móveis com o sistema operacional Windows.

 

  1. JAVA

Sem dúvida, uma das linguagens de programação mais utilizadas no mundo. Ela é orientada a objetos e amplamente utilizada para desenvolver aplicativos para dispositivos móveis com sistema operacional Android. Também é utilizada no desenvolvimento web.

 

  1. JAVASCRIPT

Podemos dizer que praticamente todas as páginas da web possuem pelo menos um código javascript. Basicamente, é ele que faz a página “funcionar”. Essa linguagem é capaz de executar scripts client side (ou seja, do lado do cliente) sem ser necessária a interpretação do servidor.

 

linguagens de programação artigos de programação 2

 

  1. OBJECTIVE-C

Trata-se de uma linguagem flexível orientada a objetos e a principal de dispositivos com iOS e OS X.

 

  1. PHP

Ame-o ou deixe-o: seja qual for o lado que você está, o PHP é a linguagem mais utilizada no backend de sites e vale a pena aprender se você quer trabalhar com WordPress, Joomla ou Drupal, por exemplo.

 

  1. PYTHON

Considerada uma das melhores linguagens de programação para quem está começando, Python é de código aberto, orientada a objetos e multiplataforma. Netflix, Google e YouTube utilizam essa linguagem de alto nível para diversas tarefas críticas.

 

  1. RUBY

Essa é uma linguagem fácil de aprender, livre, elegante e com foco na produtividade. A linguagem Ruby pode ser usada para muitas coisas além do famoso framework Ruby On Rails. Sua popularidade vem aumentado bastante nos últimos anos.

 

  1. VISUAL BASIC

Muitas pessoas que trabalham com desenvolvimento para desktop ainda utilizam o bom e velho Visual Basic. Não se trata de uma linguagem ultrapassada, como muitos pensam, já que muitos sistemas desenvolvidos em VB ainda necessitam de manutenção.


Hardware, Overclock e Tecnologia

22 de abril de 2015 / Programação / 0 Comments

NickIT Hardware, Overclock e Tecnologia

NickIT Como fazer um pendrive Bootável