Mostrando postagens com marcador CSS. Mostrar todas as postagens
Mostrando postagens com marcador CSS. Mostrar todas as postagens

Como centralizar uma div com css em modos relative, static, absolute, fixed.

Este artigo está com 4 comentários


Muitas dúvidas suergem quando começamos a aprender CSS, principalmente em relação às DIV's. Como centralizar uma div com CSS para que funcione corretamente em todos os navegadores sem dor de cabeça??

Essa perguntinha fica martelando na cabeça de quem está começando com HTML/CSS, mas temos a solução!!
Veja abaixo, é tiro e queda e funciona em todos os nabegadores atuais, até no temido IE6...
Dúvidas? Posem nos comentários.... abraço a todos!

Já havia feito um post sobre esse assunto:

  • Como centralizar uma div com CSS   


     Mas nesse post vou mostrar as diferenças de centralização utilizado modos diferentes de position, bons estudos.

  •  


    <!-- Centralição nos modos "relative" e "static" -->
 
<style type="text/css">
/* diferente do modo "absolute" centralização só ocorre na horizontal "X" pois no modo "relative" e "static" a div acompanham o fluxo da pagina faça um teste desabilitando o comentário da tag "p" abaixo */
#divQuadrada 
{
position:relative;
width:200px;
height:200px;
background-color: #333333;
/* margin com o valor de auto é a responsável pela centralização somente nos modos relative e static */
margin: auto;
}
body
{
background-color: #CCC;
margin: 0px 0px 0px 0px;
}
</style>
 
 
<!-- Centralição nos modos "absolute" e "fixed" -->
 
<style type="text/css">
/* Nos modos "absolute" e "fixed" centralização ocorre na horizontal "X" e vertical "Y" ignorando o fluxo da página, teste removendo os comentários da tag "p" abaixo. */
#divQuadrada 
{
position:fixed;
/* left em 50% posiciona a div pelo canto esquerdo no meio da página */
left:50%;
/* top em 50% posiciona a div pelo topo no meio da página */
top:50%;
width:200px;
height:200px;
background-color: #333333;
/* como a div fica alinhada pelo canto superior esquerdo no centro da página devemos subtrair através da propriedade margin metade do seu tamanho como realizado abaixo. */
margin-left: -100px;
margin-top: -100px;
}
body 
{
background-color: #CCC;
margin: 0px 0px 0px 0px;
}
</style>
 
<!-- tag&#039;s em html utilizada nos exemplos acima -->
 
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<!-- <p>conteudo do seu site</p> -->
<div id="divQuadrada"></div>

MintShare – Pure CSS & HTML Based Social Share Widget

Este artigo está com 1 commentário


Existem centenas de plugins de social bookmarking (widget para compartilhar em redes sociais) espalhados pela internet. Então surge a pergunta: "Porque mais um?".

Mas vou mostrar para vocês um widget muito legal que encontrei no site BloggerMint, um blog, em inglês, muito interessante sobre web design e desenvolvimento. Dando uma olhada em seus tutoriais, encontrei esse plugin que é muito fácil de implementar tanto no Blogger, Wordpress  ou mesmo em um site pessoal HTML.

Desenvolvido com base em CSS e HTML sem usar qualquer Javascripts, estes botões são realmente rápidos em seu carregamento e pequeno em tamanho.
Efeitos de CSS3 como border-radius e box-shadow foram usados na criação desse widget e também os ícones das redes sociais...




Como instalar

Para o Blogger

1. Entrar no Blogger> Design> Editar HTML.Marque a opção "Expandir modelos de widgets" no canto superior direito do editor.

2. Clique no link "CSS" abaixo para obter o código CSS do botão que você deseja usar. Copie o código CSS e cole pouco antes da tag </ b: skin>  de fechamento no seu Template Blogger.

Segue o código CSS do widget:

/* ================================================================ 
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare 
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides 
credit to its author.
=================================================================== */

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS-xN4QTtt5tDjIwCN01_d9Z82RWGVfGIQLb8I5IQdyZEq-r0Zw0ZqlgKsKm34CQkNtfN-dalLrskbneH76YLlXQMhZ35HB4HrFX1idQFBwagwt6-d4lcO1TWtV-dGjt8ZYnjC36viZ_M/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4inZ6f3Sr7KrHxFeI3bE6fPPdcbNZ9lVtb-Tk34Q650iX5ixoKIplqaIfaC_jPp0kfKOhuiQ3nm8Qr1-Ixb57ngnA-ToyrJTZ3TZM7vPT75t0uGpVNf50l4pF-e3CEn2ybfilzYm9zbso/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_mini a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}


#mintshare_mini .flyout {
    background: none repeat scroll 0 0 #AAAAAA;
    height: 113px;
    left: 40px;
    position: relative;
    top: -4px;
    width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}

#mintshare_mini .flyout ul {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS-xN4QTtt5tDjIwCN01_d9Z82RWGVfGIQLb8I5IQdyZEq-r0Zw0ZqlgKsKm34CQkNtfN-dalLrskbneH76YLlXQMhZ35HB4HrFX1idQFBwagwt6-d4lcO1TWtV-dGjt8ZYnjC36viZ_M/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute; 
left:-1000px; 
top:-27px; 
width:365px; 
height:30px; 
border:1px solid #888; 
border-left:0; 
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#mintshare_mini .flyout ul li {
float: left;
}

#mintshare_mini .flyout ul li a{

}

#mintshare_mini .flyout ul a img {

}

#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}


#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}

#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}


/* For IE6 */

#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

Existem vários modelos desse plugin, aqui vou mostrar o MintShare Mini:


3. Copie o código HTML do botão que você deseja usar clicando em um dos links HTML abaixo.





<! - Mini MintShare ->
<div id='mintshare_mini'>
<a class='sharetext'> <b> Share This </ b ><!--[ if gte IE 7 ]><!--></ um ><!--<![ endif] ->

<!--[ If lte IE 6]> <table> <tr> <td> <[endif] ->
<div class='flyout'>
<ul class='icons'>
<li class="drop-li"> <a expr: href = "" http://www.facebook.com/sharer.php?u = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://twitter.com/share?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://www.stumbleupon.com/refer.php?url = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://digg.com/submit?phase=2&url = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://reddit.com/submit?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://myweb2.search.yahoo.com/myresults/bookmarklet?t = "+ data: post.url +" & title = "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://delicious.com/post?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>

<span class="get_mintshare"> <http://www.bloggermint.com/2011/01/mintshare-social-bookmarking a href = "
-Compartilhamento de botão widget / "> Get MintShare! </ A> </ span>

</ Ul>
</ Div>
</ Div>
<! - End Mini MintShare ->

4. Agora, procure <data:post.body/> usando CTRL + F. Cole o código HTML imediatamente após a tag <data:post.body/> e clique em "Salvar".

Para outros modelos desse widget, visite o site oficial aqui.

Muito legal não é??
Eu usarei esse widget em meu próximo blog!! Aguardem...

Abraços

@junim_ramos

Como estilizar barra de rolagem com CSS

Este artigo está com 1 commentário


Bom pessoal, primeiramente, deixo o recado para vocês que esta técnica só funciona no IE, ou seja, na hora de fazer um site com barra de rolagem estilizada, tente convencer seu cliente a não usar dessa técnica. Eu particularmente não vejo tanta razão para colocar esse código no site mas, mesmo assim é um aprendizado a mais concordam??


Aí vai o código:

<style type="text/css">
*{
scrollbar-3d light-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-dark-shadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highight-color:#000000;
scrollbar-shadow-color:#000000;
}
</style>

Beleza?? Então tá...até mais
Veja mais sobre CSS no site do Maujor onde aprendi muito do que sei...e tenho certeza que você também aprenderá...Abraços

Siga-me no Twitter: @junim_ramos

CSS - Propriedade 'transition'

Este artigo está com 2 comentários


Fala galera. Eu como um amante de CSS, onde tudo que sei sobre esta fantástica linguagem de estruturação de páginas web foi "autodidaticamente" rsrs...
Venho por este tutorial apresentar-lhes a propriedade transition. Primeiro vamos conhecer um pouco da história:

Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o
pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desenvolvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não
houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos
e medidas de distância e posição.

A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a função que
o CSS tem perante o HTML acrescentando maneiras de produzirmos animações e transições. Não
estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para
esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza farão
um trabalho melhor com menos esforço. Mas é fato que as animações via CSS nos ajudará a levar a
experiência do usuário para outro patamar.

Lembrando que o nível de suporte de algumas dessas técnicas ainda é muito baixo. A propriedade
transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite controlar as fases de uma animação ainda é muito restrito. Para uma tabela mais atual e detalhada de
suporte e compatibilidade, faça uma procura no Google. Onde for possível demonstrarei o código
com o prefixo dos browsers que suportam as propriedades.

O básico

A propriedade transition é super simples em sua sintaxe, nem precisa muito de explicações:

a{
    color:white;
    background: gray;
}

No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do
branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz
exatamente isso:

a{
    color:white;
    background: gray;
}
a:hover{
    color: black;
    background: red;
}


O problema é que a transição é muito brusca. O browser apenas modifica as características entre os
dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.

Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha
que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria
colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as
características do link com uma pequena transição de meio segundo. O código seria como se segue:

a:hover{
    color: black;
    background: red;
    -webkit-transition: 0.5s;
}

Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o
mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inserir também a propriedade transition no estado inicial.

a {
    color: white;
    background: gray;
    -webkit-transition: 0.5s;
}
a:hover {
    color: black;
    background: red;
    -webkit-transition: 0.5s;
} 

O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois
estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando
há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições bá-
sicas como cor, tamanho, posição etc.

Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há, como no código abaixo:


a {
    border:1px solid orange;
    color: white;
    background: gray;
    -webkit-transition: 0.5s;
}
a:hover {
    color: black;
    background: red;
    -webkit-transition: 0.5s;
}

Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo,
por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.

Veja um código completo em HTML, copie em um arquivo e veja o resultado:

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>CSS Transition</title>
<style type=”text/css” media=”screen”>
a {
   color:white;
background:gray;
-webkit-transition: 0.5s linear;
}
a:hover {
   color:black;
background:red;
-webkit-transition: 0.5s linear;
}
</style>
</head>
<body>
<a href=”#”>Link! Hello World!</a>
</body>
</html> 


Espero ter tirado algumas dúvidas ok??

Abraço a todos, siga-me no Twitter: @junim_ramos

Este tutorial foi baseado no curso de CSS do W3C

Formulário de contato HTML estilizado com CSS

Este artigo está com 9 comentários


Olá pessoal!
Neste tutorial mostrarei um formulário simples de contato em HTML feito pelo blogueiro Diego Alex, que pode ser muito útil para vocês colocarem em seus sites.

Um formulário de boa aparência, onde você pode mudar de acordo com seu gosto:


Aí vai o código:

Crie um arquivo "contato.html" e cole o código:

<!– Div principal do site –>
<div id=“principal”>
  
    <hr />
  
 <!– titulo da página –>
    <h1>Formulário Estilizado</h1>
  
    <form action=“enviar.php”>
     <fieldset>
         <legend>Fale Conosco</legend>
            <ol>
             <li>
                 <label for=“nome”>Nome</label>
                    <input type=“text” id=“nome” />
                </li>
                <li>
                 <label for=“email”>E-mail</label>
                    <input type=“text” id=“email” />
                </li>
                <li>
                 <label for=“mensagem”>Mensagem</label>
                    <textarea id=“mensagem” rows=“7″ cols=“30“></textarea>
                </li>
            </ol>
            <button type=“submit” id=“enviar”><img src=“imgs/enviar.gif” /><br>Enviar</button>
        </fieldset>
    </form>
</div>

Depois disso crie um novo documento CSS com o nome de "estilo.css" ou o nome que você preferir:

@charset “utf-8″;
/* CSS Document */
form { width: 20em; font-size: 1.6em; }
form fieldset { border: 1px solid #666; padding: 0 0.5em; }
form legend { padding: 0 0.5em; border: 1px solid #333; }
form fieldset ol { list-style: none; margin: 0; padding: 0; }
form label { display: block; }
form ol li { margin: 0.8em 0; }
form input { width: 20em; }
form input#enviar { margin-bottom: 1em; width: auto; }
form textarea { width: 20em; }

Esse é o código de formatação de nosso formulário.

Até a próxima!!

Siga-me no Twitter: @junim_ramos

Adicionando fontes externas em sites com CSS

Este artigo está com 6 comentários


Seu site tem aquela fonte bacana?? Mas voçê sabe se o usuário do seu site tem essa fonte instalada no pc?
Aqui está a solução dos seus problemas, e do usuário também!!

A propriedade @font-face permite que usemos famílias de fontes que não estão instaladas no computador do usuário.

O @font-face faz com que o browser baixe, instale e renderize uma font na página.
Nem preciso falar que isso pode deixar o site um pouco mais lerdo. Outro ponto é que nenhum dos browsers tem suporte para isso hoje.

Veja um exemplo de como usar essa técnica:

@font-face {
font-family: Nome da Fonte, Verdana, Arial, Tahoma, Sans-Serif;
src: url(enderecodafonte);
}
 Agora sim!! Coloque fontes sem moderação, lembrando que, cuidado com a fonte, pois pode não combinar com o seu layout em questão ok??

Siga o autor do blog no Twitter :
 
@junim_ramos

Posicionamento de div em CSS

Este artigo está com 8 comentários

As propriedades de posicionamento CSS permitem a posição de um elemento. Também podemos colocar um elemento atrás do outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande.

Os elementos podem ser posicionados com as propriedades top, bottom, left e right. No entanto, essas propriedades não funcionaram a menos que a propriedade position seja definida em primeiro lugar. Eles também funcionam de forma diferente dependendo do método de posicionamento.

Há quatro diferentes métodos de posicionamento:

Static Position

Elementos HTML são estáticos posicionados por padrão. Um elemento estático posicionado sempre é posicionado de acordo com o fluxo normal da página.
Elementos estáticos posicionados não são afetados por cima (top), em baixo (bottom), esquerda(left), direita (right). 

Fixed Position 
Um elemento com posição fixa é posicionado em relação à janela do navegador.
Não vai mudar, mesmo que a janela seja rolada:

p.pos_fixed{ 
position:fixed;
top:30px;
right:5px;
}   
 Nota: O Internet Explorer suporta o valor fixo somente se um DOCTYPE é especificado!
Elementos com posicionamento fixo são removidos do fluxo normal. Os documentos e outros elementos se comportam como se o elemento fixo posicionado não exista. E podem sobrepor-se outros elementos.

Relative position 

Um elemento posicionado com relative é posicionado em relação à sua posição normal.
 
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
 O conteúdo de elementos relativamente posicionados pode ser movido e se sobrepõe a outros elementos, mas o espaço reservado para o elemento ainda é preservada no fluxo normal.
h2.pos_top
{
position:relative;
top:-50px;
}

Absolute Position 

Um elemento de posição absoluta é posicionado em relação ao primeiro elemento pai que tem uma posição que não seja estática. Se nenhum elemento for encontrado, o bloco é <html>:

h2
{
position:absolute;
left:100px;
top:150px;
} 
 Elementos posicionados absolutamente são removidos do fluxo normal. Os documentos e outros elementos comportam-se como o elemento posicionado absolutamente não existe.

Elementos Sobrepostos (z-index)

Quando os elementos estão posicionados fora do fluxo normal, eles podem se sobrepor outros elementos.
A propriedade z-index especifica a ordem da pilha de um elemento (elemento que deve ser colocado na frente ou de trás, os outros).
 
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
Um elemento com maior ordem de pilha está sempre na frente de um elemento com uma ordem inferior.
 
Nota: Se dois elementos posicionados sobreposição, sem um z-index especificado, o último elemento posicionado no código HTML será mostrado no topo.

Inspiração: W3schools

Como centralizar uma DIV com CSS

Este artigo está com 7 comentários


Ainda surgem dúvidas quanto a essa questão: "Como centralizo minha div com css para que dê certo em todos os navagadores??"
Essa perguntinha fica martelando na cabeça de quem está começando com HTML/CSS, mas temos a solução!!
Veja abaixo, é tiro e queda e funciona em todos os nabegadores atuais, até no temido IE6...
Dúvidas? Posem nos comentários.... abraço a todos!


Bom, primeiramente vamos entender a teoria:

Afaste o objeto 50% do topo e da lateral esquerda. Feito isso recue a margem (topo e lateral esquerda) em metade de seu tamanho.
Confuso? Vamos à prática:
Supondo que você tenha uma div principal nesse exemplo denominada de geral, onde todos os objetos estarão dentro dela:

#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
O comprimento (width) e a altura (height) são variáveis, depende do tamanho da sua página. Deve-se ficar atento que em margin-left e margin-top é metade do valor negativo.
IMPORTANTE: Recebi vários e-mails de pessoas dizendo que o código margin:0 auto realiza a mesma função do que o código que descrevemos a cima. Mas lembrando que o margin:0 auto centraliza a página apenas horizontalmente. Já o código que vimos à cima centraliza tanto horizontalmente como verticalmente.

Aplicação:

<html>
<head>
<style>
#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
</style>
<body>
<div id="geral">TESTE</div>
</body>
</html>

Fonte: Sonaweb.com.br 

Piecemaker 3D Flash Slide: Como funciona?

Este artigo está com 7 comentários


Vimos por aí na internet muitos slides de imagens bem legais em jquery e outros...
Mas um slide em especial me chamou muito a atenção: O slide The Piecemaker2, um slide open source em Flash e xml que tem plugin até para Wordpress...

Andei estudando o código-fonte desse slide e gostei muito do seu funcionamento.

No site modularweb.net você confere o demo do slide além da documentação e tutorial de como usá-lo no seu código HTML, até mesmo no wordpress...

Para dar água na boca, confira o que o Piecemaker Flash 3D Slide nos oferece:

     * Ilimitados efeitos de transição
     * A capacidade de incluir arquivos SWF e vídeos
     * Melhor navegação (usando as dicas)
     * Sombras animadas

Também é inteiramente baseado em XML, HTML e o CSS foi melhorado em relação ao primeiro, permitindo que os caracteres especiais possam ser utilizados. Além disso, as imagens agora podem conter links para outros websites.
 
E no WordPress?

Muitos leitores queriam usar a galeria Piecemaker original em seus blogs WordPress - tanto que o site NETTUTS + publicou um tutorial (em inglês) explicando como fazer exatamente isso.

O Piecemaker 2 é open source, fique à vontade para baixá-lo, usá-lo em qualquer projeto que você gosta, aprender com ele, modificá-lo e melhorá-lo se você puder. Gostaríamos de ver o que você faz com ele.



Aqui vai um exemplo de arquivo HTML com o slide, tirado do site oficial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>The Piecemaker by Modularweb</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.cssSource = "piecemaker.css";
flashvars.xmlSource = "piecemaker.xml";
var params = {};
params.play = "true";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.allownetworking = "all";
swfobject.embedSWF('piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,
params, null);
</script>
</head>
<body>
<center>
<div id="piecemaker">
<p>Put your alternative Non Flash content here.</p>
</div>
</center>
</body>
</html>

Acesse o site oficial e faça o download...e divirta-se...



Efeito rollover com imagens para menu com CSS

Este artigo está com Nenhum comentário: seja o primeiro!

Boa tarde galera ligada no blogao!!
Tá aí uma dica bem legal e fácil para você criar os menus do seu site ou do seu cliente...
É o efeiton de rolloverr com imagens, onde a imagem fica no seu estado normal e quando passado o mouse ela muda de cor etc...

Tutorial bem legal retirado do site Criar Web.

O rollover (iluminação ou mudança de cor ao passar o mouse por cima) é um feito muito simples, porém, pode dar idéias para dar maior dinamismo ao nosso site, sem que isto afete a complexidade do código.

Ademais, de passo, vamos responder uma pergunta habitual: como fazer para que os links ocupem todo o espaço da célula ou camada onde estão situados? Ou dito de outra forma: como fazer para que o link se mostre com todo o espaço disponível dentro do container no que está?

O que desejamos é que o lugar onde colocamos o link se comporte como o próprio link, assim, ao passar o mouse pelo container onde estiver situado o link (não necessariamente sobre o texto do link), se realize o efeito de iluminação.

O melhor que podemos fazer é ver o exemplo em funcionamento. Vale a pena prestar atenção a que o link muda de cor ao passar o mouse encima, porém, não faz falta se situar sobre o texto do link para que mude, e sim que serve ao posiciona-lo sobre a camada onde foi colocado o link.

O código HTML

Para realizar este efeito foi criado um código HTML como o seguinte:

<div class=navegador>
<p class=navlink><a href="#">Link 1</a></p>
<p class=navlink><a href="#">Link legal</a></p>
<p class=navlink><a href="#">Outras coisas</a></p>
</div>
Temos uma camada com estilo "class=navegador" e dentro desta, três parágrafos com estilo "class=navlink". A classe navegador conterá estilos gerais para toda a barra de navegação e os parágrafos, com classe navlink, conterão os estilos de cada linha do navegador.

Vimos que o HTML é bastante simples. Agora só temos que aplicar uns estilos bonitos para realizar o efeito buscado.

Estilos CSS

Comecemos pela camada geral, com classe "navegador", onde vamos utilizar uma declaração de estilos como esta:

.navegador{
   margin-left: 39%;
   margin-right: 42%;
}

Simplesmente, estamos lhe indicando umas margens, para que se situe onde nós quisermos, que é mais ou menos no centro da janela do navegador.

Agora vejamos a declaração do estilo da classe navlink, que é o estilo que damos a cada linha de link da barra de navegação.

.navlink {
   font-weight: bold;
   border: 1px solid #999999;
   margin:3 0 3 0px;
   padding: 2px;
}

Simplesmente indicamos em negrito, uma borda de 1 pixel, assim como uma margem e um padding.

Agora, para cada link definimos dois estilos. Um para os links em geral e outro para os links "hover", que são os que têm o mouse encima deles. Deste modo, os links sempre serão vistos de um mesmo modo e quando se colocar o mouse encima de um deles se ativará o estilo definido em hover.

.navlink a {
   background-image: url("nav-fundo2.gif");
   color: #666666;
   text-decoration: none;
   display: block;
   width: 100%;
}

.navlink a:hover {
   background-image: url("nav-fundo.gif");
   color: #ffffcc;
}

No primeiro caso (.navlink a) se indica o estilo para os links em geral. Simplesmente definimos uma imagem de fundo "nav-fundo2.gif" para os links, uma cor para o texto do link, que não apareçam sublinhados e, o mais importante, que se comportem como um bloco, que se indica com o atributo display: block;

Os links, ao se comportarem como um bloco se produzirá o efeito que estávamos buscando: que não precisa se posicionar sobre o texto do link para que mude o estilo, simplesmente o fará ao posicionar-se no container onde estão situados. Com isso, também conseguimos que o estilo dos links se transfira a todo o container. Além disso, também definimos a largura dos links a 100%, para certificarmos que ocupem todo o espaço do container onde estão situados.

No segundo caso (.navlink a:hover) simplesmente definimos um estilo distinto, utilizando uma imagem de fundo e uma cor diferente para os links. A imagem chamada "nav-fundo.gif" se mostrará como fundo do espaço onde está colocado o link. Só se modificará o estilo do link sobre o que tivermos colocado o mouse e não o dos outros links da barra de navegação.

Com isto já está feito tudo. É realmente simples. Foi provado no Internet Explorer e no Mozilla Firefox.

Agora queria comentar que também pode-se dar uma largura definida à camada onde estão todos os links, <div class=navegador>, utilizando o atributo width. Isto dá problemas no Internet Explorer na hora dos links se comportarem como um bloco, com o qual só se ativará se colocarmos o mouse no texto do link. A solução para Internet Explorer, é justamente atribuir o atributo width: 100% aos links, na classe "navlink". Este atributo width: 100% para Firefox é indiferente, com o qual o problema fica resolvido para os navegadores mais comuns.

Para finalizar, podemos ver o exemplo em uma página a parte.

A Propriedade 'background' no CSS3

Este artigo está com 1 commentário


Vamos dando continuidade aos tutoriais de CSS! Vamos falar um pouco sobre a propriedade "background" que sem dúvida é uma das mais usadas na folha de estilo em cascata. Essa propriedade tem suporte a cores e a várias imagens múltiplas, sendo que você pode colocar várias imagens de background em um elemento.

Outra nova propriedade que surge é a background-origin. Ela determina como o background-position será calculado.

Você pode também determinar no código CSS uma dimensão para sua iamgem de fundo. 

Por exemplo:

div {
  background-image: url (titulo da imagem.png);
  background-size: 15px 30px;
}

Aqui, definimos o background para ficar com 15 pixels de largura por 30 pixels de altura...

Dica básica, espero que tenham gostado...

mais informações acessem o W3C, onde falam mais sobre esta propriedade...
Abraços

Melhorias na implementação de CSS para Firefox 3

Este artigo está com Nenhum comentário: seja o primeiro!


O firefox 3 oferece uma grande melhoria na implementação de CSS. Se você ainda não viu todas, dê uma olhadinha abaixo onde relacionei as mudanças feitas:


Outras mudanças

Legal né? Agora é só aproveitar e inserir no código do seu site!!


Informações: Mozilla
Assinar: Postagens (Atom)