Arquivo da tag: CSS

-Prefix-my-css

Tem certo momentos na criação de CSS, deparamos que alguns parâmetros que colocamos, que mesmo sendo comum, algum navegador não vai reconhecer (que muitas vezes o Internet Explorer não entende :p ).

Pesquisando encontrei esse site: prefixmycss.com.

Esse site pega todos os parâmetros que você criou e acrescenta outros com a mesma funcionalidade, para funcionar em todos os navegadores, ele vem com a possibilidade de deixar o CSS todo em uma linha só, deixando a leitura mais rápida na hora de carregar o site.

Para ele fazer esse melhoramento, é só pegar o seu código de CSS e colocar no campo “Paste you CSS” e clicar em “Prefix!”.

Qualquer dúvida deixe seu comentário.

Abraço a todos. =)

Como configurar Serviço PageSpeed ​​do Google em seu site

Para deixar sites mais rápida, o Google lançou várias diretrizes e ferramentas que permitem otimizar seu site para carregar mais rápido. Se você seguiu todos os passos, como a criação de CDN, minifying CSS e javascripts etc, e achar que seu site ainda não carrega tão rápido quanto você queria, então é melhor para você é configurar Serviço PageSpeed ​​do Google e deixar o Google otimizar o seu site.

Como mexer no PageSpeed?

O conceito por trás do serviço PageSpeed ​​é simples. Depois que você configurá-lo, o Google vai pegar uma cópia do seu site, otimizá-lo e armazená-lo em seu servidor. Quando um pedido é feito em seu site, a versão otimizada e cache do servidor do Google são servidos no lugar da cópia a partir do seu próprio servidor. Continue lendo Como configurar Serviço PageSpeed ​​do Google em seu site

47 Surpreendentes Demos de Animações em CSS3

Aqui está uma compilação de 47 de cair o queixo CSS3 demos animação. Eles demonstram as possibilidades da transformação CSS3 e propriedade de transição. Alguns são muito úteis e podem ser utilizados como alternativas Javascript. A maioria deles são simplesmente para olhar. A fim de visualizar estes efeitos, você precisa de um navegador WebKit, como Safari e Chrome (desculpa para os usuários do Internet Explorer). Divirta-se!

CSS3 Clock With jQuery

css3 clock

Analogue Clock

analogue clock Continue lendo 47 Surpreendentes Demos de Animações em CSS3

50 Tutoriais CSS3 úteis

English: CSS3 Styling
English: CSS3 Styling (Photo credit: Wikipedia)

Cada dia CSS3 torna-se cada vez mais popular entre os web designers e desenvolvedores web. Hoje muitas funções interessantes e recursos estão sendo feitos para CSS3, que proporcionam menor tempo de conclusão, mais flexibilidade e fácil de manutenção para páginas web. Neste post vamos oferecer-lhe uma grande coleção de 50 úteis CSS3 tutoriais, você sempre pode usar sempre que precisar. Continue lendo 50 Tutoriais CSS3 úteis

CSS3 Repeating Gradients [CSS3 Tips]

Há muitos recursos de CSS3 que mudam a maneira como decorar um site, um dos quais é CSS3 Gradients. Antes de CSS3, definitivamente, precisamos de imagens para criar o efeito de gradiente, agora somos capazes de entregar o mesmo (e melhor) efeitos usando apenas CSS.

Nós discutimos dois tipos de gradientes que podem ser conseguidos com CSS3:

Desta vez, vamos olhar para o seu irmão: repetição de  gradientes.

Continue lendo CSS3 Repeating Gradients [CSS3 Tips]

20 exemplos extraordinários de CSS 3D

UX desenvolvedor Paul Hayes mostra o que você pode fazer com o poder de transformações CSS3 3D. Ele cobre tudo, desde galerias de imagens 3D e transições sutis para experimentais ambientes 3D

Cantos vermelhos, gradientes e sombras são características bem conhecidas do CSS3, mas, além destes, existem mentir transições CSS, transforma e animações. Em combinação eles criam efeitos nunca antes possível.
Transforma CSS 3D são hardware, suave acelerado e simples de implementar, com os navegadores de assumir o que seria cálculos perspectiva muito difíceis.

Eles existem desde 2009 e são suportados no Safari e Chrome, e logo no Firefox e Internet Explorer 10 10. Eles realizar soberbamente em dispositivos iOS, mesmo no iPhone 3G e iPad.

Aqui estão alguns exemplos fantásticos para você começar e para ilustrar novo poder CSS e gracefulness.ound

Continue lendo 20 exemplos extraordinários de CSS 3D

Bonitos botões em CSS3

Eu me deparei com um punhado de sites que explicam como criar flexíveis CSS3 botões, mas eu nunca realmente gastou o tempo para implementar um até que eu achei um pouco grande escrever cortesia dos caras mais no blog Zurb (em inglês) que têm um fantástico postar sobre a criação de CSS3 botões. Então eu tomei o seu exemplo e tweaked-lo para atender às minhas necessidades. É importante notar que se o seu usando o Internet Explorer que você não vai ver todos esses efeitos como o IE ainda não suporta CSS3. Browsers compatíveis CSS3 são, Safari, Chrome e Firefox 3 +. Continue lendo Bonitos botões em CSS3

15 +22 jQuery Slideshow Imagem / Slider Tutoriais e Plugins para seus próximos projetos

Mais um pacotes de Banners, alguns vai se repetir mas muitos são novos

jQuery Slideshow/Slider Tutorials

1. Um Slideshow jQuery Simples

1

Como o primeiro tutorial, você pode dar uma olhada em um presente para criar um slideshow simples utilizando jQuery, JavaScript e um pouco de CSS.

Visite Continue lendo 15 +22 jQuery Slideshow Imagem / Slider Tutoriais e Plugins para seus próximos projetos

Como optimizar o seu site e aumentar a velocidade de carregamento

Como já devem de saber, o Google passou a utilizar a velocidade de carregamento das páginas como factor de rankeamento. Apesar de ser apenas mais um factor no meio de tantos outros nunca é de mais optimizar os nossos sites mesmo que não estejamos interessados nos motores de pesquisa.

O tempo de carregamento das páginas é uma coisa a ter em consideração pois um site lento pode aumentar a taxa de rejeição dos seus visitantes, principalmente os que vêm de sites de pesquisa. Essas pessoas estão a procura de informação e normalmente não têm muita paciência para esperar para a página abrir.

Neste artigo vou abordar alguns pontos que levam os nossos sites a serem lentos e soluções para esses problemas. Continue lendo Como optimizar o seu site e aumentar a velocidade de carregamento

Detectar Browser com PHP

The PHP logo displaying the Handel Gothic font.
The PHP logo displaying the Handel Gothic font. (Photo credit: Wikipedia)

Detectar Browser com PHP é extremamente facil. Aplique o seguinte codigo php onde quer que lhe apareça conteúdo destinado unicamente a um determinado browser. Muito útil para o load de Scripts ou Css.

<?php
$browser_cliente = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ''; if(strpos($browser_cliente, 'Opera') !== false){

   echo 'codigo para o Opera';

}elseif(strpos($browser_cliente, 'Gecko') !== false){

   echo 'codigo para o Mozilla/Firefox e browsers baseados no motor Gecko';

}elseif(strpos($browser_cliente, 'MSIE') !== false){

   echo 'codigo para o IE';

}elseif(strpos($browser_cliente, 'Chrome') !== false){

   echo 'codigo para o Chrome'; }else{ echo 'codigo para outro browser'; }

?>