Category: Dicas Web

Dicas Web

6000 modelos de carros em vetor

Jonas 3 Comments

Excelente coleção de carros, caminhões e pickups de diversas marcas como: Ford, Bmw, Citroen, Fiat, Renault, daewoo, audi, gmc, lexus, mazda, mercedes, etc. Todas em formato .ai (Adobe Ilustrator).

Não estão assim em uma qualidade espetacular, mas com alguns retoques, pode-se utilizar como apoio em alguma imagem principal, como fundo, ou outros fins…

O arquivo esta no formato .rar, e pesa 190Mb.

Fonte: http://garcya.us/

Arquivos de imagens da NASA

Jonas 9 Comments

A NASA abriu seu banco de dados de imagens ao público pela Internet, através de seu site: NASA Images é possível ter acesso à uma gigantesca coleção de imagens, sons e vídeos atuais e históricos da NASA, cobrindo diversas atividades dos programas espaciais da agência, e oferecendo um material riquíssimo para pesquisadores e historiadores.

Fonte: SlashDot

Checklist para um projeto Web Profissional

Jonas Leave a comment

Você costuma fazer um checklist de seus projetos antes de começar?

O Walmar Andrade publicou uma extensa lista do que é necessário fazer na hora de colocar por exemplo um Blog profissional no ar.

Sei que o meu não esta atendendo muitos dos requisitos, mas estou me esforçando para criar coragem e atualizar tudo por aqui.

No mais segue a compilação das dicas do Walmar, que facilmente podem ser aplicadas a quaqluer projeto, seja ele um blog, um site institucional, um portal, etc…

Read More

Como embelezar uma pessoa no Photoshop?

Jonas 2 Comments

Veja neste review, mais de 70 tutoriais de como embelezar pessoas utilizando o Photoshop.

Depois de você ficar expert com todos esses tutoriais, veja ai o que você vai conseguir fazer também:

Da feiura à beleza:

Parte 1
[youtube]http://www.youtube.com/watch?v=p6cDALlgCOg&feature=related[/youtube]

Parte 2:
[youtube]http://www.youtube.com/watch?v=3af2VJEbw7c&feature=related[/youtube]

Link: http://www.smashingmagazine.com/

Guia de Referência

Jonas 1 Comment

Cheatsheets são pequenos guias de referências para desenvolvedores, com dicas e macetes em diversas tecnologias, onde você pode aprender ou tirar dúvidas rapidamente.

  • Escritos pelos melhores autores em cada uma das tecnologias;
  • Informações confiáveis sobre os grandes temas de desenvolvimento da atualidade;
  • Dicas úteis e exemplos de código fonte aberto.
  • PDF preparado para impressão.

Dentre as tecnologias, disponíveis você vai encontrar:

Fonte: http://www.dzone.com

Howto: Efeitos interessantes em CSS

Jonas 4 Comments

Voltando a série HowTo, gostaria de dedicar este post ao ótimo artigo que li no excelente site StylizedWeb. Com certeza uma visita mais que recomendada para todos que trabalham com desenvolvimento web, ainda mais se você for a pessoa responsável pelo “FrontEnd – essa é velha” da aplicação.

01. Bordas arredondadas sem imagens

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>

<!– aqui vai o conteúdo –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

02. Lista ordenada estilizada

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

03. Formulários sem tabelas

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

04. Citação dupla

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

05. Texto com efeito gradient

<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

06. Centralizar verticalmente usando line-height

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<p>Content here</p>

07. Bordas arredondadas com imagens

<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>

TEXTO

<div class=”roundbottom”>
<img src=”bl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>
</div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

08. Múltiplas classes para um elemento

<img src=”image.gif” class=”class1 class2″ alt=”” />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

09. Centralizar horizontalmente

<div id=”container”></div>

#container {
margin:0px auto;
}

10. Letras capitulares

<p class=”introduction”> Este parágrafo tem a classe “introduction”. Se o seu navegador suporta a pseudo-classe “first-letter”, a primeira letra estará em estilo capitular. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

11. Prevenir quebras de linha em links

a{
white-space:nowrap;
}

12. Mostrar barras de rolagem do Firefox, removê-las de áreas de texto no IE

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

13. Div Centralizada

Para posicionar uma div no centro da tela basta usar este código:

#centro {
position:absolute;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
}

Referência:Most used CSS tricks.