Image Image Image Image Image
Scroll to Top

Topo

CSS

27

abr
2012

Sem Comentários

Em Blog
CSS
HTML

Por Allison

Sites usando HTML5 e CSS3

Em 27, abr 2012 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

Fonte: James Leme/cssextremo

O uso do HTML5, em combinação com CSS3, está realmente começando a decolar. Safari, Chrome e Mozilla estão dando mais suporte a cada nova versão de seus navegadores.

A melhor maneira de aprender novas técnicas é tentando. Atualmente você já pode começar a usar HTML5 apenas mudando o tipo de documento.

<! DOCTYPE HTML>

Ele vai validar com o seu código atual, mesmo se você estiver usando XHTML ou HTML.

Para você se inspirar e começar a usar HTML5 e CSS3, listei alguns dos melhores sites usando essas tecnologias.

Edgar Leijs

Vaullt

Ella Design

Tags | , , ,

10

abr
2012

Sem Comentários

Em Blog
CSS

Por Allison

CSS3 – Faça elegantes botões com a ferramenta online Css-tricks

Em 10, abr 2012 | Sem Comentários | Em Blog, CSS | Por Allison

Fonte: CriarNet

O CSS3 assim como o HTML5 é uma novidade na internet que promete revolucionar bastante a forma com que formatamos as nossas páginas com as folhas de estilo, ela traz novos recursos que nos abre um leque de novas opções para a formatação de nossas páginas. Se você pretende usar CSS3 em seus sites conheça a ferramenta CSS-Tricks que cria elegantes botões com efeitos arredondados feitos com o CSS3. Conheça a ferramenta.

Você poderá criar os seus botões e usa-los de diversas formas, em um menu, em um botão como link, ou de qualquer forma que você desejar.

Como criar elegantes botões em CSS3 usando o Css-Trick

O primeiro passo é acessar o site do gerador de botões, click aqui, logo depois mecha com os atributos mexendo nas barras para a direita e para a esquerda. E modificando as cores de acordo com a região especificada nas barras abaixo.

Quando o botão estiver sexy, pegue o código fonte do mesmo clickando em um link presente na parte de baixo da página a direita, porem a grande dica que eu dou aqui é que você analise o código fonte e aprenda as novas propriedades do CSS3 e não apenas copie o código e aplique em seu site.

Tags | , ,

10

abr
2012

Sem Comentários

Em Blog
CSS
Rails
Ruby

Por Allison

Como gerar gráficos no Rails com o CSS Graphs

Em 10, abr 2012 | Sem Comentários | Em Blog, CSS, Rails, Ruby | Por Allison

Fonte: Samuel Vinicius/IMasters

Post Original http://nubyonrails.com/pages/css_graphs

O CSS Graphs é um bom plugin para quem deseja gerar gráficos no Ruby on Rails usando apenas CSS. Para quem ainda tem alguma dúvida, veja como utilizá-lo:

Instalação

./script/plugin install http://topfunky.net/svn/plugins/css_graphs

Como usar

Para usá-lo, o seguinte código basta:

<%= bar_graph  [ ['Rails', 24],
                    ['Open', 9],
                    ['Css', 81],
                    ['Gráficos', 57],
                    ['Samuel', 42]] %>

Ou:

<%= complex_bar_graph  [ ['Rails', 24],
                  ['Open', 9],
                  ['Css', 81],
                  ['Gráficos', 57],
                  ['Samuel', 42]]%>

Tags | , , , ,

06

abr
2012

Sem Comentários

Em Blog
CSS
Wordpress

Por Allison

Como criar um template responsivo para WordPress

Em 06, abr 2012 | Sem Comentários | Em Blog, CSS, Wordpress | Por Allison

Fonte: Paulo Faustino/IMasters

Depois de termos escrito e publicado uma série de doze artigos sobre Como criar um template WordPress, e porque as tecnologias estão constantemente avançando e melhorando, é necessário estar sempre na vanguarda da tecnologia para garantir os melhores resultados possíveis e a melhor experiência de utilização possível para o usuário.

A navegabilidade e usabilidade são hoje um aspecto extremamente importante na vida e no sucesso de um site/blog. E por isso não podemos fechar os olhos para as linguagens como o HTML5, CSS3 e também o Webdesign responsivo, que basicamente significa um layout de site/blog que responde automaticamente às diferentes resoluções de uma tela de um computador pessoal, de um smartphone ou de um tablet, ajustando todo o layout e os seus elementos para garantir a melhor experiência de navegação possível para o usuário.

Os colegas do Blissfull Interfaces lançaram recentemente um artigo interessante sobre a criação de um tema responsivo, que juntamente com o nosso guia completo sobre Como criar um template WordPress, poderá ajudá-lo a tornar o seu template wordpress responsivo ou ajudá-lo na criação dos seus temas WordPress futuros de uma forma mais moderna e adaptada às necessidades de hoje em dia.

Para criar um tema WordPress responsivo, você pode utilizar queries de CSS3. Para compreender este artigol, você já deverá saber como criar um template WordPress e ter alguns conhecimentos de CSS.

Hoje vamos aprender a criar uma child theme e usar queries de media em CSS3, para fazer com que o nosso layout se adapte às diferentes resoluções de telas dos vários aparelhos existentes no mercado.

  1. Na pasta ‘themes’ do seu WordPress, crie um novo arquivo chamado ‘multiplescreen’;
  2. Crie uma pasta CSS dentro do seu novo arquivo ‘multiplescreen’ e dê o nome de ‘style.css’.

Um ficheiro de CSS do tipo ‘style.css’ é a única coisa que você necessita para criar uma child theme. Adicione o seguinte código ao seu arquivo ‘style.css’.

Importante: Assumimos que o nome do seu template se chama ‘EscolaWP’.

Substitua o nome ‘EscolaWP‘ pelo nome do seu Template.

/*
Theme Name: EscolaWP Child
Theme URI: http://www.escolawp.com/
Description: Child theme para EscolaWP
Author: Seu Nome
Author URI: http://www.escolawp.com
Template: EscolaWP
Version:0.1.0
*/

Tal como acontece com qualquer tema WordPress, o cabeçalho de informação tem de estar no topo do arquivo CSS. A única diferença entre um arquivo de CSS e uma Child Theme é o campo Template: é obrigatório, para que o WordPress perceba qual é o Template mãe e filho, respectivamente.

Agora iremos necessitar de chamar a nossa folha de estilos parente para dentro da nossa child theme. Adicione o seguinte código ao seu novo arquivo de CSS. A função @import url.. chama a pasta de CSS do seu Template mãe para dentro do seu CSS do Template filho.

@import url(“../twentyten/style.css”);

Para verificarmos se a nossa child theme está funcionando corretamente, vamos mudar os títulos H1 da child theme para cor-de-laranja. Substitua o código anterior que chama o CSS do Template mãe, por este novo:

@import url(“../twentyten/style.css”);
h1
{
color: #ffb400;
}

Importante: Tenha certeza de que não aparece estilos antes do @import url.. Se isso acontecer, o CSS da nossa child theme não consegue carregar os estilos parentes.

Agora faça login no painel de administração do seu WordPress, active o template EscolaWP Child no menu Aparência –> Templates. Agora verifique como se encontra o seu blog WordPress num browser de Internet. Você deverá ver o seu template idêntico, mas apenas com os títulos H1 na cor-de-laranja.

Agora precisamos definir quais as medidas de media que vamos usar no nosso layout. Eis as três mais comuns:

  1. SmartPhones- Menos de 320px;
  2. Tablets – Entre 321px e 768px;
  3. Desktop – 769px e superiores.
@media screen and (max-width:320px)
{
h1 {
color: #ffb400;
}
}
@media screen and (min-width:321px) and (max-width:768px)
{
h1 {
color:#0096ff;
}
}
@media screen and (min-width:769px)
{
h1 {
color: #693573;
}
}

Grave o seu arquivo de CSS. Para testar as diferentes medidas, simplesmente abra o seu site em um browser de Internet e arraste a janela para diferentes dimensões, para verificar se o layout se adapta automaticamente. Você irá verificar uma mudança de cor no H1 color quando a dimensão reduz. Não esqueça de remover as alterações de cor no H1 caso não pretenda mantê-las.

Bom, é isso, pessoal! Até a próxima.

Tags | , , , ,

17

mar
2012

Sem Comentários

Em Blog
CSS

Por Allison

Background adaptável a qualquer resolução de tela com CSS 3

Em 17, mar 2012 | Sem Comentários | Em Blog, CSS | Por Allison

Fonte: Gustavo D. Castro/CriarNet

Definir o background de um site pode parecer tarefa simples, mas não é, o background é uma parte importante de um site e quando mal escolhido pode desvalorizar com qualquer arte que tenha sido desenvolvida para o layout, atualmente vem se utilizando muito backgrounds fixos que geralmente deixam os sites mais botinos e com um tom de modernidade, o grande problema de usar background que não se repetem é que dependendo da resolução de tela a imagem escolhida vai além da resolução de seu visitante cortando as vezes partes importantes da imagem ou as vezes a imagem escolhida é pequena para o tamanho de resolução de tela do visitante.

Para fazer com que uma imagem se adaptasse bem a qualquer resolução de tela existiam várias possibilidades, mas nenhuma que não passasse perto do que chamamos de gambiarra.

Com a chegada do CSS 3 podemos fazer com que uma imagem fique como background se adaptando a qualquer resolução de tela se expandindo por toda a tela e perdendo o mínimo possível de sua proporção. Esse tutorial é destinado a pessoas que desenvolvem sites na internet.

Como colocar uma imagem como background que se adapta a qualquer resolução de tela.

Para adicionar qualquer imagem como background e fazer com que ela se adapte a resolução de tela do visitante é fácil, veja o código abaixo:

body {
background-image: url(caminho/sua/img/bg.jpg);
background-repeat: no-repeat;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;}

Modifique a url para o endereço correto de sua imagem que deve estar em uma boa resolução, costumo criar minhas imagens nos tamanhos 1300px x 700

Tudo pronto, agora o seu site já possui um background que se adapta a qualquer resolução de tela.

Curta nossa Fan-Page

Tags | , , ,

16

mar
2012

Sem Comentários

Em Blog
CSS

Por Allison

LESS CSS: Início, Meio e Fim – Conceitos iniciais

Em 16, mar 2012 | Sem Comentários | Em Blog, CSS | Por Allison

Fonte: Fabrício Sanchez!

A internet evolui diariamente, isso é um fato. Tal evolução demanda cada vez mais recursos (tanto para quem utiliza aplicações e serviços web, quanto para quem os implementa).

No sentido de incrementar produtividade e adicionar melhores práticas ao processo de desenvolvimento de aplicações para a internet, a comunidade técnica de desenvolvedores ao redor do mundo constantemente implementa, disponibiliza e mantém novos recursos ativos. Alguns exemplos são:

  • PDF Sharp: um complemento para processar programaticamente arquivos PDF.
  • JSON .NET: um framework de alta performance para o trabalho com JSON.
  • MVC Contribut: framework escrito para desenvolvedores que desejam testar elementos de UI em suas aplicações MVC.

Nesta série apresentaremos os conceitos fundamentais relacionados a um novo framework escrito nos padrões mencionados anteriormente, isto é, desenvolvido e mantido pela comunidade técnica que tem por objetivo permitir a escrita de código CSS de forma otimizada: LESS CSS.

Observação: esta série não ensinará CSS. Aqui, partimos do princípio de que os conceitos relacionados a esta linguagem já são conhecidos por você e nos concentramos apenas em apresentar uma nova forma de trabalhar com eles.

O que é LESS CSS?

LESS é um termo da lingua inglesa que designa “menos – menor quantidade”. A framework alvo de nosso estudo nesta série tem este nome (LESS CSS) não por acaso. LESS CSS é uma framework escrita com o ojetivo de otimizar a escrita de códigos na linguagem CSS, fato este que necessariamente implica na diminuição da quantidade de código escrito. Menos código escrito significa mais performance na renderização das páginas, o que implica em maior velocidade na exibição da informação para o usuário final.

Além das características recém mencionadas, há um aspecto proporcionado por esta framework que é determinante para sua adoção: o desenvolvedor pode escrever códigos mais limpos e elegantes, conforme veremos com a evolução da série.

CSS dinâmico?

Se existe uma palavra que chama atenção de qualquer desenvolvedor que inicia seus estudos em uma linguagem, framework, whatever, está palavra é “dinamismo”. De forma geral, bons devs buscam encontrar melhores formas de escrever seus códigos e, tecnologias que apresentam aspectos dinâmicos, sempre se apresentam como opções interessantes.

Conforme apresenta a imagem do início deste texto, LESS CSS apresenta uma forma dinâmica de escrever folhas de estilos (It’s the dynamic stylesheet language). O “dinamismo” é proporcionado por recursos como: variáveis, mixins, operações, funções, etc. (falaremos individualmente sobre cada recurso nos próximos posts).

Onde funciona?

Uma característica interessante do LESS CSS é que este funciona tanto do lado do cliente quanto do lado do servidor (neste último utilizando Node.js e Rhino). Assim, podemos “escolher” o ambiente para renderização do código LESS. Em post futuro, falaremos especificamente sobre como utilizar em ambos os cenários.

Criando o mind set

Agora que os conceitos estão “saltando a vista”, basta realizarmos uma análise simples em no modelo tradicional de escrita de códigos CSS para obtermos uma auto-justificação do LESS. Assim, considere o código apresentado pela Listagem 1.

#BoxTexto { color: #000; background: #EFEFEF; }
#BoxTexto a { text-decoration: underline; }
#BoxTexto p { font-family: Arial; }
#BoxTexto x {...} #BoxTexto y {...}
#BoxTexto z {...}

Listagem 1. Forma tradicional de escrever código CSS

O problema é evidente, certo? Para que possamos utilizar o mecanismo de herança, precisamos reecrever o mesmo código seis vezes. Em um tempo onde produtividade é fator chave no processo de desenvolvimento de software, este tipo de notação tende a cada vez mais, cair em desuso.

Em contra partida, observe o código apresentado pela Listagem 2.

#BoxTexto {
color: #000;
background: #EFEFEF;
a { text-decoration: underline; }
p { font-family: Arial; }
}

Listagem 2. CSS reduzido

Bem melhor não? Esta é a proposta do framework LESS. O mesmo código escrito de forma mais elegante e inteligente resultando no mesmo aspecto visual entretanto, com mais performance.

Tags | , , , , , ,

29

fev
2012

Sem Comentários

Em Blog
CSS
HTML

Por Allison

Caixa de Feed Simples com CSS3

Em 29, fev 2012 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

Fonte: Iago Melanias/BlogandocomFacilidade

No artigo de hoje, aprenderemos como inserir uma caixa de feed simples no Blogger. Precisamos sempre achar formas de conseguir mais leitores fidelizados, os feeds ligam muito os leitores aos blogs, e as caixas de assinar feed são táticas para conseguir mais assinantes. A caixa possui gradientes com CSS3 e tem um Design bem interessante. Temos abaixo a imagem que demonstra bem o que vamos inserir.


Vamos ao Tutorial:

1º – Acesse o painel do seu blog e clique na guia modelo.

2º – Clique no botão Editar HTML e segure as teclas CTRL+F e procure por:

]]></b:skin>

3º – E, acima dele, cole o seguinte código:

#input-rss {
width: 185px;
padding: 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
-moz-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
border: 1px solid #CCC;
font-size: 12px;
height: 15px;
border-image: initial;
float: left;
margin-right: 6px;
}
#input-rss:focus {
border: 1px solid gray;
outline: none;
}
#btn-assinar {
cursor: pointer;
margin-top: -7px;
height: 31px;
color: white!important;
background: #1F9CD8;
background: -moz-linear-gradient(top, rgba(31, 156, 216, 1) 0%, rgba(14, 131, 201, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31, 156, 216, 1)), color-stop(100%,rgba(14, 131, 201, 1)));
background: -webkit-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -o-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -ms-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f9cd8', endColorstr='#0e83c9',GradientType=0 );
border: 1px solid #085988;
font-size: 17px;
color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px;
cursor: pointer;
float: left;
line-height: 12px;
text-shadow: 1px 1px 1px #117AAB;
filter: dropshadow(color=#117aab, offx=1, offy=1);
border-image: initial;
}
#btn-assinar:hover {
background: #1F9CD8;
}

4º – Depois, clique em Salvar Modelo.

5º – Agora, vá até a guia Layout e clique em Adicionar Gadget.

6º – Selecione o Gadget HTML/Javascript e no conteúdo dele cole o seguinte código:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input style="display: initial;" id="input-rss" class="input-rss" type="text" name="email" />
<input type="hidden" value="NOME DO SEU FEED" name="uri" /><input type="hidden" name="loc" value="pt_BR" />
<input id="btn-assinar" class="mais" style="width: 90px;margin-top: 1px;font-size: 15px;" type="submit" value=" ASSINAR " />
</form>

Lembre-se de substituir as duas partes que tem “Nome do seu Feed”.

7º – Depois, clique em Salvar.

Tags | , , ,

03

fev
2012

Sem Comentários

Em Blog
CSS

Por Allison

Qualquer fonte no seu site com @fontface

Em 03, fev 2012 | Sem Comentários | Em Blog, CSS | Por Allison

Fonte: Rafael Cirolini/NeardHead

Em geral sempre que vem um layout novo temos que colocar uma fonte diferente para a produção do site. Existem varias técnicas para isto, image replacement, sIFR, cufón e @fontface que é o que vamos falar aqui.

A grande vantagem do uso do @fontface é por ser um recurso do próprio CSS e carregar muito rápido no navegador em comparado com as outras técnicas. Nos meus testes esta técnica funcionou em todos os navegadores modernos, inclusive no IE6 (que não é moderno).

Usei esta técnica em meu mais recente site, Dicas de Livros e Filmes. Como segue a imagem abaixo:

Font Face Generator

Antigamente era um pouco complicado usar o fontface pois cada navegador trabalhava com um tipo de fonte diferente. Hoje a solução que temos é o FontFaceGenerator, que através de uma interface bem intuitiva gera todos os tipos de fonte para vc e ainda um código de exemplo de como utilizar.

No meu caso, eu coloquei as fontes geradas em uma pasta chamada fonts dentro da pasta do meu tema em wp-content -> themas -> dicasdelivros -> fonts.

E o meu css ficou assim:

@font-face {
    font-family: 'SketchetikLight';
    src: url('fonts/sketchetik.eot');
    src: url('fonts/sketchetik.eot?iefix') format('eot'),
         url('fonts/sketchetik.woff') format('woff'),
         url('fonts/sketchetik.ttf') format('truetype'),
         url('fonts/sketchetik.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

E quando preciso usar ela fica assim:

h1 {
    font-family: 'SketchetikLight';
}

Em outro artigo escrevi como usar o Cufón.

Tags | , , ,

10

jan
2012

Sem Comentários

Em Blog
CSS
PHP

Por Allison

Paginação com jQuery

Em 10, jan 2012 | Sem Comentários | Em Blog, CSS, PHP | Por Allison

Vou tentar explicar como fazer uma paginação com jQuery, ou seja, sem precisar dar o tal do refresh no navegador. Vamos usar um pouco de um outro tutorial que mostrei aqui, que é sobre conectar-se ao banco usando PHP. O resto é um pouco de CSS, algumas consultas ao banco com PHP e nada mais.

Vamos fazer um exemplo de uma listagem de feed de noticias, ou seja, listar todas as noticias cadastrada no banco.

Criando a tabela:

CREATE TABLE IF NOT EXISTS `noticias` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `noticias` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Vamos lá ..

Primeiro vamos criar o arquivo index.php

<!DOCTYPE HTML>
<?php
// Contem as informações para se conectar ao banco
include ('conectar_banco.php');
 
// Chamar a classe para conectar o banco
$sql = new conectar_banco();
// Conecta-se ao banco de dados usando os valores padrões
$sql->conecta();
?>
<html>
<head>
<meta charset="utf-8">
 
<title>Paginação com jQuery</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="paginacao.js"></script>
</head>
 
<body>
<?php
$por_pagina = 7; // NUMERO DE VEZES QUE VAI APARECER ANTES DE CRIAR OUTRA PAGINA
 
// Define e executa uma query SQL
$busca = "SELECT * FROM noticias ";
$sql->consulta($busca);
 
$contar = $sql->contar();
 
$paginas = ceil($contar/$por_pagina)
?>
<div id="conteudo">
    <div>
        <label><img src="loader.gif" alt=""></label>
    </div>
 
    <div id="resultado"></div>
</div>
 
<div id="botao" align="center">
    <ul>
     <?php
      // Mostrar os links da paginação.
      for($i=1; $i<=$paginas; $i++)
      {
        echo '<li id="'.$i.'">'.$i.'</li>';
      }
     ?>
    </ul>
</div>
</body>
</html>

Agora precisamos do arquivo paginacao.js para fazer a mágica acontecer

$(document).ready(function(){
    function showLoader(){
        $('.fundo_pag').fadeIn(200);
    }
    function hideLoader(){
        $('.fundo_pag').fadeOut(200);
    };
 
    $("#botao li").click(function(){
        showLoader();
 
        $("#botao li").css({'background-color' : ''});
        $(this).css({'background-color' : '#D8543A'});
 
        $("#resultado").load("informacao-paginacao.php?page=" + this.id, hideLoader);
 
        return false;
    });
 
    $("#1").css({'background-color' : '#D8543A'});
    showLoader();
    $("#resultado").load("informacao-paginacao.php?page=1", hideLoader);
});

E para que seja feita novas consultas quando solicitado o arquivo paginacao.js, vamos precisar fazer uma nova consulta, com o arquivo informacao-paginacao.php

<?php
include ('conectar_banco.php');
 
// Chamar a classe para conectar o banco
$sql = new conectar_banco();
// Conecta-se ao banco de dados usando os valores padrões
$sql->conecta();
 
// Quantidade por paginda
$por_pagina = 3;
 
// Pegar qual é a numeração da pagina atual
$pagina = $_REQUEST['page'];
 
$inicio = ($pagina-1)*$por_pagina;
$buscar = "SELECT * FROM noticias ORDER BY id LIMIT $inicio,$por_pagina";
$sql->consulta($buscar);
 
while ($paginacao = $sql->resultado())
{
    ?>   <div><?php echo $paginacao['noticias'];?></div><?php
}
?>

E para deixar tudo muito bonito, vamos usar um css.

*{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif
    font-size:0.75em;
}
#conteudo {
    min-height:455px;
    padding:12px;
    margin:0 auto;
    text-decoration: none;
    width: 700px;
}
 
#conteudo .separacao{
    color:#000066;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding:5px 5px 12px 5px;
    border-bottom:solid #D8543A 3px;
    text-align:justify;
    margin-bottom:11px;
}
 
.fundo_pag{
    display: none;
    font-size: 13px;
    font-weight: bold;
    height:160px;
    position: absolute;
    padding-top:140px;
    text-align: center;
    opacity:0.5;filter: alpha(opacity=50) ;
    text-decoration: none;
    width: 700px;
}
 
.fundo_pag{
    color:#FFFFFF;
    text-shadow: #fff 0px 0px 20px;
}
 
.fundo_pag label{
    border:solid #66FF00 1px;
}
 
#botao ul{ width: 700px; padding:0px; margin:8px;}
 
#botao ul li {
    -moz-border-radius: 3px 3px 3px 3px;
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    float: left;
    font-family: helvetica,arial,sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin: 0 2px 0px;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    list-style-type:none;
    width: 30px;cursor:pointer;
}
 
#botao ul li:hover{background:#D8543A;}
li:hover{ color: #CC0000; cursor: pointer; }

Bom, estou pegando o jeito com esse negocio de tutorial, mas com o tempo vou melhorando, se você quiser fazer o download desse exemplo é só clicar aqui

Fonte: Renan M. Pimentel/Algoritmizando

Tags | , ,

07

jan
2012

Sem Comentários

Em Blog
CSS
HTML

Por Allison

Formulário para Captação de Email para Newsletter com CSS

Em 07, jan 2012 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

Com o CSS é possível remover toda a formatação visual do HTML, fazendo com que aumente a velocidade de carregamento das páginas entre outras tantas possibilidades. Com CSS é possível fazer coisas impressionantes, como transformar um simples formulário de captação de email em um formulário mais “convidativo” e combinando com seu Layout.

Definindo as marcações do HTML

Abra o Dreamweaver (ou o bloco de notas), e adicione os seguintes códigos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<section id="wrapper">
<div id="news">
<h1>Newsletter</h1>
<hr />
<h3>Receba nossas atualizações em seu e-mail! É grátis.</h3>
<form  action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('URL do seu feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>
<input type="text"  name="email" id="e-mail"/></p>
<input type="submit" class="solid" value="Assinar" />
<input type="hidden" value="Nome do seu Feed" name="uri"/>
<input type="hidden" name="loc" value="pt_BR"/>
</form>
</div>
</section>
</body>
</html>

O código acima irá adicionar à página um campo de texto, um botão e o texto do formulário, neste momento esta é a aparência dele.

Formatação com CSS:

Agora as mudanças começam a aparecer, antes da marcação HTML adicione o seguinte código:

<style type="text/css">
#news {
width: 260px;
height: 270px;
background: #f2f2f2;
padding: 6px 10px;
border: 1px solid #b5b5b5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
</style>

O código acima ira dar o formato e cor do formulário, este código só se aplica ao background do formulário, veja o resultado:


Estilizando a caixa de texto:

Para a caixa de texto digite o seguinte código, abaixo da ultima chave ”}” do CSS.

#e-mail {
float: left;
width: 230px;
padding: 15px 5px 5px 5px;
margin-top: 30px;
margin-left: 10px;
border: 1px solid #999999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

Este código dará a caixa de texto sombra e aparência de profundidade.

Estilizando o botão Enviar:

O código do botão enviar dará a ele cantos arredondados e sombra, para isso utilize o código a seguir:

input[type="submit"].solid {
float: left;
cursor: pointer;
width: 130px;
padding: 8px 6px;
margin-top:20px;
margin-left: 60px;
background-color: #d5d5d5;
color:#2c2c2c;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #adadad;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
input[type="submit"].solid:active {
background: #d5d5d5;
position:relative;
top: 5px;
border: 1px solid #adadad;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;}

Estilizando o texto:


Para as tags H1 e H3 utilizaremos este código:

 
h1 {
font:26px Verdana, Arial, Helvetica, sans-serif; color:#999999;
font-weight:bold;
margin-left:50px;
margin-top:15px;
}
h3 {
font:15px Verdana, Arial, Helvetica, sans-serif; color:#999999;
margin-left:5px;
margin-top:3px
}

Modificando os dados do formulário:

Substitua o “URL do seu feed” pelo seu endereço de feed.

EX.:

“uri=Url do seu feed” troque por

http://feedburner.google.com/fb/a/mailverify?uri=RcTutoriais&loc=pt_BR

Procure por “URI=”Nome do seu feed”” e substitua pelo nome do seu feed.

EX.:

uri=”nome do seu feed” troque por “RcTutoriais”

Teste o código no seu navegador, caso esteja funcionando copie o código que está entre as tags “<body> e </body>” e adicione como um widget no seu blog.

Este formulário foi testado no WordPress.org, Blogger e Webnode utilizando os navegadores Google Chrome, Firefox e Safari.

Lembre-se de realizar o backup do seu blog e tema antes de adicionar qualquer código.

Por que só utilizamos o conteúdo da tag “<body>” ?

Só utilizamos as outras tags para que você possa visualizar todas as etapas da construção do formulário no navegador antes de adicionar no blog. Assim ficará mais fácil de corrigir algum erro ou fazer alguma modificação.

Créditos: Escola Criatividade – Como criar um campo de pesquisa estilizado com CSS3!

Este é um guest post escrito por Rhenan Cardozo que escreve no RC Tutoriais

Fonte: CriarSites

Tags |

23

dez
2011

Sem Comentários

Em Blog
CSS

Por Allison

OOCSS ou CSS do jeito certo

Em 23, dez 2011 | Sem Comentários | Em Blog, CSS | Por Allison

O CSS é algo muito simples de ser escrito mas com apenas um deslize todo o código pode transformar o projeto em um inferno. Saiba como podemos evitar isso.

O conceito

Escrever CSS é fácil. Isto não deveria ser um problema, mas é. Por ser fácil os desenvolvedores acabam se esquecendo de princípios básicos, técnicas e metodologias que nos ajudam a manter o controle durante a produção. Entenda que algumas dessas metodologias não precisam ser aplicadas em sites pequenos. Por exemplo, aqui no Tableless eu não modularizo o CSS em vários arquivos por um ou dois motivos: 1) Somente eu tenho acesso ao código. 2) O site não é grande. Ele tem meia dúzia de páginas e funcionalidades.

Mas quando falamos de sites grandes (em visitação e quantidade de páginas) existem algumas restrições: velocidade de carregamento, compatibilidade entre browsers, manutenção, flexibilidade para mudanças etc. Tudo isso deve ser pensado e planejado antes de colocarmos a mão na massa. É no planejamento que iremos estruturar como serão feitas as manutenções posteriores, como iremos mudar elementos principais sem interferir no layout como um todo.

O CSS Orientado a Objeto (em inglês OOCSS – Object Oriented CSS – Sendo sincero, esse nome é muito ruim) tem como conceito técnicas que já falamos durante muito tempo, mas que como o Responsive Web Design, está ganhando força somente agora.

Princípios

O OOCSS está baseado em dois pontos cruciais que são a separação da estrutura e do visual e a independência do container em relação ao conteúdo.

Separação da estrutura e do visual

A maioria dos elementos estilizados em uma página web tem diferentes características visuais que são repetidas em diferentes contextos e situações. Algumas características são fáceis de identificar como cores, títulos, gradientes, bordas etc. Essas são características visuais. Contudo, existem também as características de estrutura, que é onde nós “montamos” os elementos, definindo tamanhos, distâncias, medidas etc. Essas características também são repetidas em diversos elementos no decorrer do site.

A ideia é que nós separemos as características visuais das características estruturais, tornando-os modulares de forma que possamos reutilizá-los em diferentes elementos tendo resultados iguais.

Imagine 3 elementos diferentes, como um botão, uma caixa de chamada e um destaque que normalmente fica na lateral do site. Eles tem características estruturais diferentes, como width, height, paddings, margins etc. Mas as características visuais são iguais, como por exemplo o border-radius, background e o box-shadow. O CSS normal ficaria assim:

.botao {
width:100px;
height:50px;
text-align:center;
font:bold 13px verdana, arial, tahoma, sans-serif;
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 
.chamada {
width:250px;
float:left;
font:bold 23px verdana, arial, tahoma, sans-serif;
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 
.destaque {
width:300px;
height:250px;
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Para reutilizar de forma inteligente as características iguais destes elementos e prevendo que talvez seria criado outros elementos com as mesmas características – já que o designer mantém sempre (quase sempre, né?) um padrão visual estético – é interessante que criemos uma classe que componha estas características e apliquemos essa classe nos elementos necessários. Assim:

.botao {
width:100px;
height:50px;
text-align:center;
font:bold 13px verdana, arial, tahoma, sans-serif;
}
 
.chamada {
width:250px;
float:left;
font:bold 23px verdana, arial, tahoma, sans-serif;
}
 
.destaque {
width:300px;
height:250px;
}
 
.boxEffects {
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 

Em cada elemento que necessitasse destas características visuais, basta inserir a classe .boxEffects ao elemento.

Entenda que o abuso dessa técnica pode trazer complicações. Você não vai criar uma classe para cada característica visuais e sair aplicando essas classes em tudo quanto é elemento. Você estaria voltando a 1999 onde tínhamos aquele velho problema de misturar as camadas de formatação e informação.

Independência dos containers e do conteúdo

Imagine que você crie algum estilo para a formatação de algum elemento como por exemplo um parágrafo e atrela este estilo para os parágrafos localizados no article principal:

article p {
font:bold 13px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}

Mas então surge a necessidade de ter um parágrafo com as mesmas características no rodapé, por exemplo, mas com o tamanho da fonte maior! Você pode fazer assim:


article p, footer p {
font: 13px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}

footer p {font-size:20px;}
O que é ainda é ruim, mas é muito melhor do que fazer assim:

article p, footer p {
font: 13px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}
 
footer p {
font: 20px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}
 

Onde duplicamos desnecessariamente vários estilos.

Com o OOCSS nós devemos transformas estes estilos em módulos para serem reutilizados e não atrelando os estilos a um elemento específico.

Isso acontece também quando já fizemos uma classe onde carrega os estilos comuns. Se voltarmos ao exemplo anterior, alguém pode fazer assim:

footer .boxEffects {...}

Estamos aqui atrelando a classe que antes era para ser algo genérico ao elemento footer. Cuidado ao fazer isso. Tenha um bom motivo antes de ir adiante.

Outras boas práticas

Existem algumas boas práticas que fazem parte do OOCSS e que melhoram muito o planejamento e a prática do desenvolvimento web:

Modularização de código CSS

Não estou falando aqui sobre a modularização de arquivos CSS, mas sim do Código. Essa modularização é feita sob medida para cada um dos projetos. O objetivo é que o código CSS seja reutilizado em várias partes da produção evitando que você crie mais código. É aconselhável que se defina padrões de código para os principais elementos do layout. A equipe pode fazer isso ou delegar esse importante trabalho para um desenvolvedor, que será responsável em criar os métodos e os padrões estruturais dos elementos.

Minimizar usos de seletores muito específicos

Encontre o meio termo. Não faça seletores muito específicos ou seletores muito genéricos. O CSS trabalha com especificidade: quanto mais específico, mais certeiro você é ao capturar um elemento, mas seu CSS fica mais engessado e consequentemente você usa mais código. Quanto mais genérico, mais elementos do mesmo tipo você formata, mas o risco de conflito de estilos aumenta. O ideal é encontrar o meio termo, onde você é tão específico e nem tão genérico.

Dependendo da forma que você utiliza os seletores os browsers podem ser ou não mais rápidos ao renderizar seu site. Já falamos disso aqui.

Formate elementos com classes modulares

A ideia é que ao criar uma nova página, você não tenha que criar novo código CSS. Se a página tiver a estrutura diferente mas os elementos tem características visuais iguais, aí está uma boa oportunidade para modularizar o código visual dos objetos.

Um exemplo para demonstrar essa prática é ao fazer botões para diferentes ações. Normalmente utilizamos os mesmos botões com cores diferentes para definirmos visualmente ações diferentes que o usuário pode tomar. O botão de SALVAR tem o mesmo formato de CANCELAR, mas a cor dos dois é diferente, sendo que o primeiro é verde o segundo vermelho. O código seria assim:

.botao {
display:inline-block;
padding:10px 20px;
font:13px verdana, arial, tahoma;
color:white;
text-decoration: none;
}

Este código cria toda a estrutura do botão. Agora falta definir as cores de fundo. Eu farei isso criando duas classes: btVerde e btVermelho. Essas classes serão utilizadas em pareceria com a classe botao

.btVermelho {background: red;}
.btVerde {background: green;}

Agora, o HTML ficaria assim:

<a href="#" class="botao btVermelho">Cancelar</a>
<a href="#" class="botao btVerde">Salvar</a>

Porque criei os nomes das classes btVermelho e btVerde em vez de btCancelar e btSalvar? Porque pode ser que exista algum botão que também seja verde, mas não tenha a ação de salvar. Assim deixo meu leque aberto para novas atribuições.

Concluindo

Seguir esses pequenos detalhes evitam uma série de problemas comuns no desenvolvimento client-side. A reutilização de código CSS se torna real, a velocidade do carregamento melhora e os problemas de manutenção são solucionados. A flexibilidade que teremos ao modificar o CSS será muito grande e não aumentaremos nosso código a cada modificação feita. A ideia é que seu código CSS fique sob controle. A utilização de frameworks e bibliotecas podem ajudar em muitos momentos.

Fonte: Diogo Eis/Tabless

Tags | , , , ,

20

dez
2011

Sem Comentários

Em Blog
CSS
JavaScript

Por Allison

Javascript para fazer degrade/gradiente

Em 20, dez 2011 | Sem Comentários | Em Blog, CSS, JavaScript | Por Allison

Cada vez que eu vejo um layout com algum tipo de degrade chega a me dar coceira, me vejo recordando um png em milhares de pequenos pedacinhos para poder fazer os gradientes pq os navegadores ainda não implementaram o código de gradiente do css3, como a minha vida seria mais fácil.

Se funcionasse via css seria somente fazer algo assim:

.div_qualquer {
background: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#f3f3f3));
background: -moz-linear-gradient(top,  #dfdfdf,  #f3f3f3);
}

Mas isto exclui o IE, e é bem difícil explicar aos clientes.

Outra forma é recortar uma imagem em 1px de largura ou altura, deixar ela bem comprida ou larga e usar ela como bg e replicar ela um montão de vezes, assim:

.div_qualquer {
background: url(images/background.png) top repeat-x;
}

Então pesquisando um pouco me surgiu uma opção usando jQuery muito simples que faz isto extremamente bem. Escrito pelo grande Brandon Aaron (contribuidor do jQuery) e fez o jquery-gradient, que de uma forma bem simples pode criar os gradientes para vc, mas ou menos desta forma:

<script type="text/javascript">
// <![CDATA[
    $(document).ready(function(){
         $('.div_qualquer').gradient({ from: 'dfdfdf', to: 'f3f3f3' });
    });
// ]]>
</script>

O que o script faz é criar um bando de divs de 1px diminuindo as cores aos pouquinhos para fazer o degrade linear. Realmente funciona bem para pequenos objetos, mas para objetos muito grandes pode ficar muito pesado e até travar o browser.

Fonte: Rafael Cirolini/NerdHead

Tags | , , , , ,