Arquivo da tag: language 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. =)

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]

Imagem com efeito de Zoom com jQuery

Então, hoje eu vou correr pela técnica usada para ampliar as miniaturas das imagens e exibir a sobreposição de texto.

jquery-thumbs Continue lendo Imagem com efeito de Zoom com jQuery

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

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'; }

?>

10+ jQuery galeria de fotos e plugins slider

Uma imagem vale mais que mil palavras. Nenhuma dúvida sobre isso. A maioria dowebsite de informações baseado em como a CNN, ESPN, todos eles estão usandouma apresentação de slides enorme foto na primeira página. É um método muito eficaz para atrair a atenção dos espectadores.

Então, aqui vai. 15 galeria de fotos baseada em jQuery e controles deslizantes.Aproveite. Continue lendo 10+ jQuery galeria de fotos e plugins slider

O que você tem que saber sobre CSS3

Muitos de vocês provavelmente já perceberam toda a agitação em torno do CSS3, mas exatamente quais técnicas podemos usar hoje?

Neste artigo, vou mostrar algumas técnicas diferentes CSS3, que alguns dos principais navegadores (mais especificamente Firefox, Chrome, Safari e Opera) já suportam. Com isso ficará evidente a degradação do layout pela falta de suporte dos outros browsers (como por exemplo o Internet Explorer). Usando as extensões específicas disponíveis para cada navegador, muitos dos estilos que estão sendo especificados no CSS3 já podem ser usados hoje! Continue lendo O que você tem que saber sobre CSS3

3 efeitos de “página enrolada” em jQuery

Provavelmente você já deve ter pensando em “guardar” algum conteúdo do seu website em abas ou em painéis ocultos, ou mostrar alguma propaganda certo? Porque não em páginas que se desenrolam? Vamos agora a 3 belos efeitos de páginas dobradas em jQuery. Continue lendo 3 efeitos de “página enrolada” em jQuery

Hack CSS para IE, FireFox, Opera

Esse post e voltado para quem ainda tem problemas com as versões do IE (Internet Explore), que quando acha que o trabalho está terminado, acaba vendo que o CSS no IE está tudo estourado, torto, com fonte diferente, onde acaba dando ainda mais trabalho.
Aqui vou mostrar hacks de algumas versões do IE.
Hacks CSS são regras que só servem para determinado navegardor. No caso, esse determinado navegador geralmente é o IE, mas podemos encotrar alguns hacks para outros navegadores também.


#element {
color:orange;
}
#element {
*color:white;    /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
_color: red;     /* IE6 */
}

 #element {
_color /***/: red9;     /* IE8 */
}

#element {
color: green&#092;&#048;/IE8+9; /* IE8+9  */
}
:root #element { color:pink &#092;&#048;/IE9; }  /* IE9 */
#element, x:-moz-any-link, x:default { margin-top:50px; } /* Firefox 3.0 para o mais novo */
@media not all and (-webkit-min-device-pixel-ratio:0) {  #element { margin-top:50px; }  }  /* Opera 10 mais novo */