Removendo o pontilhado dos Links
Postado em June 12th, 2007| Algo sobre CSS, Tutoriais
Esses dias conversando com meu brother José Carlos, ele me mostrou uma solução para um problema que as vezes irrita um pouco, que é aquele pontilhado que o text indent causa nos links. Segue ai a solução dos problemas.
a:focus {
outline: none;
}
Essa alteração é aconselhada apenas quando existe o uso do text ident, para evitar o tracejado exagerado que é exibido, mas por questões de acessibilidade, não recomendo o uso, pois para a navegação com a tecla Tab, o usuário não sabe onde se encontra o cursor.
Fonte: Maujor
Criatividade X Domínio de Softwares
Postado em June 8th, 2007| Algo sobre Designer
De que é feito um bom Designer?
Será que um curriculo com 4 cursos superiores, experiência em 20 empresas e o domínio do “Corel Photo Works” serve para designar um bom profissional, ou apenas um papel, uma caixa de lápis de cor e muita criatividade já daría conta?
Nessa realidade de hoje onde em qualquer esquina tem alguém com uma plaquinha do tipo “Crie aqui sua logomarca a partir de R$5,00″, ou “Criação de Sites a partir de R$299,00, muitos acham que é só aprender a usar “bezier” e “varinha mágica” e sair por ai rotulado de Designer. O domínio de um software (ou vários) é necessário, é difícil sobreviver sem eles, eu mesmo sofreria um pouco com essa ausência, mas sem a danada da criatividade complica um pouco, pois um dia seu repertório de “tutoriais” vai acabar, … e depois? Nem tudo são flores, a questão é: Domínio de software não é sinônimo de um bom profissional . Se você puder escolher, prefira um curso de comunicação visual ou até mesmo publicidade ao invés de apenas o domínio de um Corel Draw ou Photoshop, esse diferencial coloca um profissional a anos-luz do “carinha da esquina”.
Leia, pesquise, observe, analise artes pelas ruas e se pergunte: -Por que ele usou essa cor? Por que ele usou essa fonte? O que esse anúncio tem que ficou tão legal? Isso ajuda e muito na hora da criação e a se manter no mesmo nível do que se passa no mundo do Design.
É isso, se você acabou de decidir em ingressar nessa bela e satisfatória carreira, seja bem vindo. Puxe um banco, traga papel e lápis de cor, coloque a criatividade pra fora e seja feliz, o resto vem com o tempo, pois nem só de PhotoShop vive o homem.
Montando Sites com CSS - Parte III - Conteúdo
Postado em June 8th, 2007| Algo sobre CSS, Tutoriais
Olá Cssmaníacos
Até agora já fizemos a estrutura e o menu do nosso site. Hoje daremos continuidade ao nosso site, acrescentando espaço para o conteúdo. Serão 3 colunas, uma esquerda, uma direita e uma central.
Aconselho a todos que antes de começar, veja o tutorial 1 e o tutorial 2 onde começamos a estrutura do nosso site.
O nosso código entrará no seguinte trecho: <div id=”conteudo”<h1>Conteudo</h1></div>
XHTML
<div id= “conteudo”>
<div id=”col_esquerda” >
<h2>Esquerda</h2>
</div>
<div id=”col_central” >
<h2>Central</h2>
</div>
<div id=”col_direita” >
<h2>Direita</h2>
</div>
</div>
e Agora a formatação
CSS
Basta adicionar isso abaixo do código css já existente .
#col_esquerda{
width:133px;/*Largura da div*/
height:300px;/*Altura da div*/
border-right:dashed 1px #f00;/* Borda tracejada*/
float:left;/*Faz a div flutuar à esquerda*/
padding: 0 10px;/*Acrescenta uma distancia entre a div e o conteudo dela*/
}#col_direita{
width:133px;
height:300px;
float:right;/* Faz a div flutuar à direita*/
padding: 0 10px;/*Acrescenta uma distancia entre a div e o conteudo dela*/
border-left:dashed 1px #f00;
}
#col_central{
float:left;
padding:0 10px;
width:442px;
}
Com esse código acima, temos as 3 colunas posicionadas, com as bordas para delimitar a separação delas.
Veja aqui o resultado final já com um conteúdo.
Até a próxima e bom estudo
Rodrigo Medeiros
Orkut agora com leitor de Feeds
Postado em June 6th, 2007| Algo sobre Geral
Olá povo.
Essa semana em um dos meus momentos de navegação inútil pelo Orkut, achei uma novidade útil . O orkut agora vem equipado com um leitor de feeds. Para você que tem dúvidas de como utilizar, basta ir em “Editar Feeds” e add a url.
Ai vai o meu para quem quizer adicionar http://www.rodrigowebdesign.com/blog/?feed=rss2
Até a próxima.
Montando Sites com CSS - Parte II - Menu
Postado em June 6th, 2007| Algo sobre CSS, Tutoriais
No tutorial anterior criamos a estrutura básica do nosso site. Agora vamos criar a nossa navegação.
Se você ainda não viu, veja aqui, pois precisaremos dele para facilitar a montagem.
O código do menu entrará aqui: <div id=”menu” ><h1>Menu</h1></div> Vamos lá .
Criando uma lista que irá conter o menu
<div id=”menu” >
<ul><li ><a href=”#”>Item 1 </a></li><li ><a href=”#”>Item 2 </a></li><li ><a href=”#”>Item 3 </a></li>
<li ><a href=”#”>Item 4 </a></li>
<li ><a href=”#”>Item 5 </a></li>
</ul>
</div>
Então temos a div #menu, e dentro temos ul,li,a. Essa sequencia será importante na hora de formatar o css.
Do jeito que está, nossa página não está com um menu muito agradável ainda. Vamos lá a parte divertida agora.
CSS
Como noss css ja está em andamento, localize o seguinte trecho, de onde vamos continuar;
#menu{
background:#111;
width:770px;
height:30px;
border-top:solid 3px #000;
border-bottom:solid 3px #000;
}Continuando:
Para deixar o menu horizontal.
#menu ul li{
float:left;
}
Float left, fazendo os itens da lista flutuarem à esquerda .
Formatando os botões
#menu ul li a{background:#222;color:#fff;
display:block;
width:154px;
height:22px;
text-aligner:center;
padding-top:8px
}
No código acima, o display block faz com que toda a area do botão seja clicavel. Sem ele, apenas as letras ficariam sensíveis ao click. E o tamanho do botão ficou 154px, que é os 770px que tempos, dividido por 5, que é a quantidade de botões.
O padding-top foi para descolar o texto do topo do botão,
Mudando de cor (estado hover)
#menu ul li a:hover{background:#fff;color:#111;}
Agora basta colocar uma cor para quando passarmos o mouse em cima. Inverti as cores para exemplificar. Como as unicas coisas que alterei foi o background e o color, não precisei repetir os outros códigos, já que o css mantem a herança.
Pois é, espero que tenha ajudado. Veja aqui o resultado final no nosso menu, e outro exemplo de formatação. Até a próxima.
Rodrigo Medeiros
