Categoria: CSS

Categorias
CSS Programação Tutoriais

Exemplos de sombras em texto apenas com CSS

sombras em texto apenas com CSS

Neste artigo vamos ver vários exemplos de sombras em texto apenas com CSS, que você pode copiar e colar em seus trabalhos… A propriedade “text-shadow” é uma ferramenta particularmente divertida que o CSS lhe dá para jogar com seu tipo é sombra de texto, o que parece bastante simples no início, mas pode ser usado para criar alguns efeitos notáveis com um pouco de engenhosidade e criatividade. A propriedade “text-shadow” é super fácil de trabalhar e pode ser aplicado a qualquer elemento que tenha texto, lógico, e é aceite pela grande maioria dos browsers modernos. No entanto, o uso de ferramentas como o Modernizr irá ajudá-lo a tirar os efeitos avançados do CSS3, mesmo em navegadores mais antigos, se você… Continuar a ler

Categorias
CSS Programação Tutoriais

Remover o fundo amarelo dos anúncios Google Adsense

fundo amarelo dos anuncios adsense

Você certamente já se deparou com um fundo amarelo antes do carregamento do anúncio Google AdSense, tanto no código antigo como no novo código responsivo? Há duas razões pelas quais um site pode mostrar esse fundo amarelo: 1. Muitos sites em WordPress ou não, na folha de estilo CSS vem definindo a tag html <ins> com amarelo por padrão. A cor hex do amarelo usado é #fff9c0. 2. A tag HTML <ins> está definida em torno de um anúncio Google: <ins>script do anúncio</ins>. A definição do atribuito ins é a seguinte: A tag <ins> define um texto que foi inserido num documento. É comumente usado para marcação de atualizações e modificações feitas em um site. Como o Adsense acaba sendo… Continuar a ler

Categorias
CSS Programação

Vídeo responsivo para funcionar em pc,tablet e telemóvel

video responsivo css wp

Para tornar um vídeo do YouTube responsivo e assim se adaptar em qualquer pc, tablet e/ou dispositivo móvel você pode usar CSS ou Javascript para cumprir essa meta. Este exemplo usa uma solução CSS, você precisa adicionar algum código CSS em seu arquivo CSS principal. Criar o processo A primeira coisa que você precisa obter é o código iframe para incorporar o vídeo YouTube, pegue ele do site YouTube. Depois crie uma “div” com a class “video-container” onde pretende mostrar o vídeo e coloque o código iframe dentro da “div” criada. A partir daqui, precisamos declarar o CSS. <div class=”video-container”><iframe…….></iframe></div> Configurando o CSS .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0;… Continuar a ler

Categorias
CSS PHP Wordpress

Juntar todos os ficheiros CSS com PHP

php css wp

Vamos ver um pequeno script onde usando um pouco de PHP permite compilar diversos documentos de CSS, em um único arquivo CSS. Isto não só reduz o tamanho total do arquivo, mas também faz com que sejam efectuados menos pedidos HTTP ao servidor quando são carregadas as páginas. Um site rápido equivale a uma boa experiência do usuário e também agrada aos mecanismos de pesquisa. Assim cria um documento .php e insere o seguinte código: <?php header(‘Content-type: text/css’); ob_start(“compress”); function compress( $minify ) { /* remove comments */ $minify = preg_replace( ‘!/*[^*]**+([^/][^*]**+)*/!’, ”, $minify ); /* remove tabs, spaces, newlines, etc. */ $minify = str_replace( array(“rn”, “r”, “n”, “t”, ‘ ‘, ‘ ‘, ‘ ‘), ”, $minify ); return $minify;… Continuar a ler

Categorias
CSS Design HTML Programação

Menu slide para mobile – JQuery

menu slide

No artigo de hoje vamos ver como é possível, de maneira bastante fácil e rápida, criar um menu estilo slide, utilizado muito nos meio mobile. Muitos já devem ter reparado que os sistemas para telemóveis usam, ou usaram, muito o menu que vamos exemplificar agora, alem de ficar esteticamente bonito e agradável é bastante fácil de ser feito. Estes menus, nativos, ficam na sua maioria (iOS7) escondidos na esquerda e após algum opção eles aparecem ‘empurrando’ o conteúdo para o lado esquerdo. Para este exemplo vamos usar CSS, HTML e claro o nosso companheiro de efeito JQuery. Resultado pretendido Como referido anteriormente o resultado que queremos é um menu escondido que ira ficar visível após alguma opção seja activo, no… Continuar a ler

Categorias
CSS HTML Programação

Checklist amigável em JQuery

checklist

Hoje, neste artigo, vamos ver como é possível transformar uma simples lista com checkboxs (checklist) numa lista mais amigável e visualmente atrativa usando apenas HTML, CSS e JQuery. Todos os que trabalham ou gostam da área de webdesign sabem que os olhos é mais de metade dá força para o utilizador dizer que o website é ou não bom, então seguindo esta lógica, podemos transformar coisas simples, em coisas mais elaboradas e visualmente mais atraentes para o utilizador. Para este artigo escolhi um exemplo simples, uma lista com checkboxs (checklist) mas tentando torna-la o mais atrativa possível, sem que fosse demorada de fazer por parte do programador ou designer. O resultado a que chegamos foi, na nossa opinião, excelente… Simples,… Continuar a ler

Categorias
CSS Programação

Hover Fade simples em JQuery

jquery

Neste artigo vamos ver com é fácil a criação de um simples plugin Hover Fade para JQuery. Desde o lançamento do jQuery em 2006, jQuery rapidamente se tornou a mais popular biblioteca JavaScript e de escolha para todos os profissionais web. Atualmente existem centenas de plugins disponíveis para quase qualquer coisa possamos querer fazer, com jQuery, pode apenas fazer download e começar a usar os plugins maravilhosos no seu projeto, de imediato. Mas há momentos em que queremos criar o nosso próprio plugin jQuery, vamos descobrir o quão fácil é criar um plugin jQuery. Vamos ver o básico para a criação de um plugin para jQuery. Vamos criar um plugin chamado hoverfade. Este plugin terá apenas a tarefa de fade-in… Continuar a ler

Categorias
CSS HTML Programação

Menu drop-down responsivo

menu drop down responsivo

Como criar um menu drop-down responsivo é uma das perguntas mais comuns que fazemos quando não encontramos nada adequados ao nosso site/blog. Muitos de nós até percebemos de html e css, mas quando chega a hora de fazer alterações ou de criar um, surge a dúvida, como deve ficar o menu drop-down em um celular ou tablet? Resolvemos assim mostrar como criar um Menu drop-down responsivo. Vamos fornecer a informação necessária e explicar como tudo deve de ser feito, usando sempre uma linguagem simples para que todos possam entender. Eu preparei uma só “Media Queries”, penso ser o suficiente para funcionar em quase todas as resoluções disponíveis para telemóveis, tablets, notebooks e desktops. /* ————————————————————– 2. MEDIA QUERIES ————————————————————– */… Continuar a ler

Categorias
CSS Tutoriais

CSS: Conheça o “box-sizing:border-box”

Neste artigo iremos ver a diferença ao usar o box model padrão do CSS e do “box-sizing” do CSS3, ambos no mesmo elemento… Todo elemento no HTML é como uma caixa, nós controlamos o seu tamanho com “width“, sua borda com “border” e ainda temos as margens externas e internas com “margin” e “padding“. O box model tradicional da especificação tem uma regra bastante confusa: a propriedade width trata do tamanho do conteúdo do elemento, não considerando seu padding e border, o mesmo coisa se passa com a altura (height). Com o box model padrão do CSS por vezes éramos surpreendidos com resultados não esperados. Agora com o “box-sizing” que quando configurado com o valor “border-box” num elemento, o espaçamento… Continuar a ler