Designer Project | Designer Gráfico : Tutoriais CSS

Slide No Blogger

Me desculpa não ter postado esse tutorial antes. Eu acabei me distraindo e me esqueci de postar, Vamos ver como por Slides no blog? Os slides que me refiro são aqueles que tem uma setinha pra mudar o slide e com efeitos hovers diferentes.

Vamos ver como faze-lo? Então clique no Leia Mais.

Primeiro, você vai em Design/Modelo > Editar HTML > Ctrl + F e procure por </head> e acima cole:

Agora procure por ]]> e acima cole:

/* The Nivo Slider styles */
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px;
display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 356px;}
.nivoSlider img {position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute; top:0px;
left:0px; width:100%; height:100%; border:0;
padding:0;margin:0; z-index:6; display:none;}
/* The slices and boxes in the Slider */
.nivo-slice
{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px; bottom:0px;
background:#000; color:#fff; text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a
{position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
.slider {width:100%;}
.slider img
{position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a
{display:block;width:31px;height:34px;background:url(http://twizonebr.com/Novidades/wp-content/themes/twizonebrvrs1/arrowswleft.png)
no-repeat;text-indent:-9999px;border:0;
}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav { left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial,
Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}

Você não precisa mudar NADA. Agora vamos adicionar o slide em algum Lugar do blog. Vá em Design/Modelo > Elementos da página > Adicinar um gadget HTML/JavaScript > Cole esse código:

Primeiro você vai ter saber a largura das imagens, e ter o link. Saiba o que cada parte significa:
LINK DA IMAGEM: Link da imagem.
width/height: Largura e altura da imagem (height: altura & widht: largura).
LINK: O link.
Bem mais fácil do que se parece né? Espero que tenham gostado do tutorial. Obrigado e até.

Bordas Arredondadas

As bordas arredondadas estão sendo utilizadas cada vez mais pelos designers.É um efeito bem legal que deixa as bordas dos elementos arredondadas. Exemplo:

Elemento Sem Borda Arredondada!

Elemento Com Borda Arredondada!

Viram que legal! Pra usar este recurso é simples! basta adicionar "border-radius: 0px;" em seus códigos CSS. "0" corresponde ao valor!

Efeito arredondado nos Parceiros

Yo galera, hoje eu venho trazer um efeito que todos estão usando que é colocar o efeito arredondado no banner. Então vamos lá.

Leia Mais »

Usando bordas nos templates do Blogger

Yo galera hoje vou postar um tutorial bem bacana do site mundo blogger que é adicionar bordas no seu template, espero que gostem. Então vamos lá.

Leia Mais »

Propriedade Margin!

Olá,eu sou o Daniel e hoje estarei ensinando um tutorial básico para iniciantes em web design,certo!Vamos lá!

Entendendo o que é Margin

A propriedade Margin é usada para movimentar elementos em uma página e para alinhar Templates e Skins!

Leia Mais »

Box Shadow em Outer-wrapper no Template!

Olá,pessoal aqui é o Daniel e hoje vou ensinar um tutorial bem básico que tem um efeito bem legal!Caso,não conheça o efeito é só testa-lo!

Leia Mais »

Efeito - Texto Shadow

Yo galera, venho trazer o efeito shadow nos textos espero que gostem. Então vamos lá.

Leia Mais »

Efeito CSS 3 nas imagens de postagens

Olá pessoal! eu sou o mais novo membro do Design Project e já venho trazer para vocês
um tutorial muito bom que é o efeito CSS 3 nas imagens de postagens.

Vá em design >> Editar HTML >>, e procure por: ]]></b:skin>

E acima cole:

Efeito zoom nas Imagens

Yo galera, venho trazer esse efeito muito bom pra dar um toque legal no seu blog/site. Espero que gostem. ^^

1. Abra “Design” e clique em “Editar HTML”do seu blog e clique em "Expandir modelos de widgets".

2. Depois da um Ctrl+f e procure por:

]]></b:skin>

3. Cole em cima dessa tag esse código a baixo:

/*--Zoom-Imagens-- */

a:hover img {

transform: translate(0px, -4px);

-moz-transform: scale(1.1) translate(0px, -4px);

-webkit-transform: scale(1.1) translate(0px, -4px);

-ms-zoom: 1.1;

opacity: 1 !important;

-moz-opacity: 1 !important;

-webkit-transition: all 0.2s ease-in;

-moz-transition: all 0.2s ease-in;

transition: all 0.2s ease;

}

4º Clique em "Salvar modelo" e pronto!

Menu Fast (Aprimorado)

Yo galera como vão? Hoje estou trazendo o tão comentado menu Fast, porém eu uso um código aprimorado que eu aperfeiçoei do menu hover ele é mais fácil e melhor pra ser editado. Então aproveitem.

Primeiro passo.

Vai, no blogger, vá em Design, Editar HTML, procure pela tag:

]]></b:skin>

Acima dela cole este código CSS:

/* MENU2

----------------------------------------------- */

#menu2 {

font:14px Verdana, Arial, Helvetica, sans-serif;

}

#menu2 li {

list-style: none;

margin: 13px 0px 0px 5px;

padding: 0;

border: none;

font-size: 14px;

}

#menu2 li a {

color: #ffffff;

padding-bottom: 5px;

padding-top: 5px;

padding-left: 10px;

padding-right: 10px;

margin-left:2px;

margin-right:2px;

background: #000;

text-shadow: 0px 0px 7px #CD5C5C;

border: 1px solid #dcdcdc;

-moz-border-radius-bottomleft: 6px;

-moz-border-radius-bottomright: 8px;

-moz-border-radius-topleft: 8px;

-moz-border-radius-topright: 8px;

-webkit-border-top-left-radius: 8px;

-webkit-border-top-right-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

-webkit-border-bottom-left-radius: 8px;

background: url(LINK_DA_IMAGEM_NORMAL) repeat;

}

#menu2 li a:hover {

color: #ffffff;

padding-bottom: 5px;

padding-top: 5px;

padding-left: 10px;

padding-right: 10px;

margin-left:2px;

margin-right:2px;

background: #000;

text-shadow: 0px 0px 7px #CD5C5C;

border: 1px solid #dcdcdc;

-moz-border-radius-bottomleft: 6px;

-moz-border-radius-bottomright: 8px;

-moz-border-radius-topleft: 8px;

-moz-border-radius-topright: 8px;

-webkit-border-top-left-radius: 8px;

-webkit-border-top-right-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

-webkit-border-bottom-left-radius: 8px;

background: url(LINK_DA_IMAGEM_HOVER) repeat;

}

Bom, em color é a cor do texto, fonte é o tamanho da letra, text-shadow é o efeito que se dá ao fundo da letra.

Bem essa parte é a mais fácil, você vai em Design, adicionar um gadget, HTML/JavaScript. E cole o código logo abaixo.

<ul>

<li> <a href=" LINK_DO_POST " style="font-size: 100%;">Titulo 01</a> <a href=" LINK_DO_POST " style="font-size: 100%;"> Titulo 02</a>

</li>

</ul>

</div>

Para adcionar mais um link basta duplicar o código abaixo:

Quando forem duplicarem o código deixe um espaço entre os códigos para ele ficar em linha reta.

Comentem avaliando. Valeu.

Efeito Marquee

Yo, me pediram um tutorial de como colocar o texto passando, é uma ótima ferramenta para colocar um aviso, então vamos lá.

Código normal:

<marquee>texto aqui</marquee>

Código que para com o mouse:

<marquee onmouseover="this.stop()" onmouseout="this.start()">Texto Aqui </marquee>

Determinar largura:

<marquee width="264px" onmouseover="this.stop()" onmouseout="this.start()">Texto Aqui </marquee>

Mais suave, para com o mouse e largura desejada.

<marquee width="264px" scrolldelay="50" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">Texto Aqui </marquee>

Sistema de afiliados

Yo, vou postar um tutorial bem bacana pra quem quer aperfeiçoar os afiliados,
vamos lá.
Agora é simples, para adicionar vai em  Designer, clica em adicionar um gadget e clica em HTML/JavaScript , e pronto. lembrando em subtituir as partes que pedem.

<center><img src="URL DO SEU BUTTON" name="button" width="88" height="31" border="0" id="button" /></center><br />
<a onmouseover=button.src="URL DO BUTTON DO AFILIADO"; onmouseout=button.src="URL DO SEU BUTTON"; href="URL DO SITE DO AFILIADO" target="_blank" style="text-decoration: none">NOME DO AFILIADO</a><br />

URL DO SEU BUTTON: Coloque o endereço da imagem do seu button;


 URL DO SITE DO AFILIADO: Coloque o endereço do seu afiliado;

URL DO BUTTON DO AFILIADO: Coloque o endereço da imagem do button seu afiliado;
-NOME DO AFILIADO: Coloque o nome do seu afiliado;

Menu Hover

Yo, me pediram pra ensinar o menu hover é um efeito bem legal vamos lá.

O Menu Hover é uma coisa muito legal do CSS, ao passar o mouse ele troca a imagem do background, por exemplo: O menu vertical daqui do site é usado com essa mesma técnica.

Primeiro passo.

Bom, no blogger, vá em Design, Editar HTML, procure pela tag:

]]></b:skin>

Acima dela cole este código CSS:

#menux ul {

list-style: none;

margin: 0px 0px 0px 0px;;

padding: 0;

border: none;

}

#menux li a {

height: 18px;

display: block;

padding: 4px 5px 5px 18px;

background: url(LINK_DA_IMAGEM_NORMAL) no-repeat;

color: #ffffff;

text-shadow: #000 0 1px 0;

font-weight: normal;

text-decoration: none;

width: 186px;

}

#menux li a:hover {

background: url(LINK_DA_IMAGEM_HOVER) no-repeat;

color: #000;

text-shadow: #666666 0 1px 0;

}

Bom, em color é a cor do texto, em height a altura em píxels, em width a largura em píxels, em padding você posiciona o texto.

Agora vamos aos links, definiremos uma div para aplicar as configurações da folha de estilos CSS, criamos-a com o nome menux então o id da div terá de ser menux.

então nosso código fica assim:

<ul>

</ul>

</div>

Para adcionar mais um link basta duplicar o código abaixo e colocar ele embaixo do outro:

Pronto, agora você ja tem um menu legal com efeito hover.

Barra de rolagem colorida

Yo, pediram no xat esse efeito que eu uso, que é simplesmente mudar a cor da barra da rolagem. Vamos lá:

Vai em edição HTML do seu template, e acrescente a linha abaixo, logo ACIMA da tag

]]></b:skin>

::-webkit-scrollbar {

width: 9px;

height: 5px;

}

::-webkit-scrollbar-track-piece {

background: # XXXXXX ;

}

::-webkit-scrollbar-thumb:vertical {

height: 5px;

background-color: # XXXXXX ;

}

::-webkit-scrollbar-thumb:horizontal {

width: 5px;

background-color: #XXXXXX;

}

.post p {

margin:0 0 0;

}

Agora é só mudar as cores. Quem não sabe,vai na Tabela de cores.

Bem é isso, se tiver dificuldades deixe um comentário nesta pagina. Valeu.

Colocar efeito zoom nas imagens

Yo, vou ensinar a como colocar aquele efeito de zoom na imagem, quando você passa o mouse a imagem fica com um efeito zoom é bem legal, vamos lá.

Vá em design >> Editar HTML >>, e procure por: ]]></b:skin>

E logo acima da tag procurada, cole o código abaixo:

/*--Zoom-Imagens-- */
a:hover img {
transform: translate(0px, -4px);
-moz-transform: scale(1.1) translate(0px, -4px);
-webkit-transform: scale(1.1) translate(0px, -4px);
-ms-zoom: 1.1;
opacity: 1 !important;
-moz-opacity: 1 !important;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;
}

É isso,espero que tenha ajudado. Valeu.

Colocando efeito em banner

Yo, trago um efeito bem legal pra dar um visual bem bacana na parceria, olhe o exemplo:

Para Adcionar os códigos CSS procure pela tag:

]]></b:skin> 

Agora adcione os códigos acima da tag

.parceiros img{opacity: .3;

filter:alpha(opacity=30);

x 0px black; -moz-box-shadow: 0px 0px

-webkit-box-shadow: 0px 0
p0px black; -o-box-shadow: 0px 0px 0px black;

op: 0px; -webkit-tr

position: relative; border: 0px solid black;
tansition: all 0.15s linear; -moz-transition: all 0.15s linear;

-o-transition: all 0.15s linear;

transition: all 0.15s linear;

}

.parceiros img:hover{opacity:5.0;

filter:alpha(opacity=500);

5px black; -moz-box-shadow: 3px 3px 5

-webkit-box-shadow: 3px 3p
xpx black; -o-box-shadow: 3px 3px 5px black; position: relative;

linear; -

top: -5px; border: 0px solid black; -webkit-transition: all 0.15
smoz-transition: all 0.15s linear; -o-transition: all 0.15s linear;

transition: all 0.15s linear;

}

Agora você deve colocar esse código para o banner e lembrando em substituir pelo que pede.

Agora é simples, para adicionar vai em Designer, clica em adicionar um gadget e clica em HTML/JavaScript , e pronto. Espero que tenham gostado. Valeu.

Como colocar banner rolando

Faça login no blogger > Painel >Design >Adicionar Gadget >HTML >

<center><marquee behavior="scroll" direction="down" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="2" style="background-color: snow; border: 2px solid ffffff8; height: 150px; text-align: center; width: 190px;">
<a href="http://animessoul.blogspot.com/" target="_blank"><img border="0" src=" 
Codigo do banner" /></a>
</marquee></center>

MUDANDO DE DIREÇÃO

<center><marquee scrolldelay="2" behavior="scroll" direction="A DIREÇÃO" style=

"border: 2px solid #000; background-color:#ffffff;text-align: center;height: 150px;width: 190px" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
CODIGO DO BANNER AKI
</marquee></center>

Direções
DOWN - PARA BAIXO
LEFT - PARA ESQUERDA
RIGHT - PARA DIREITA

TIirando Borda
Procure por "border: 2px solid #000;"
em vez de "2px" coloque 0px
Mudando cor da borda
Procure por "border: 2px solid #000;"
Em #000 coloque o código da sua cor de preferência
CODIGO DAS CORES
Aumentando e diminuindo o tamanho
Procure por height para alterar a altura e width para largura
altere os numeros e não se esqueça de coloca a sigla "px" no final do numero

Menu

UP DESIGNER

Marcadores

Status

Slide No Blogger

Bordas Arredondadas

Efeito arredondado nos Parceiros

Usando bordas nos templates do Blogger

Propriedade Margin!

Box Shadow em Outer-wrapper no Template!

Efeito - Texto Shadow

Efeito CSS 3 nas imagens de postagens

Efeito zoom nas Imagens

Menu Fast (Aprimorado)

Efeito Marquee

Sistema de afiliados

Menu Hover

Barra de rolagem colorida

Colocar efeito zoom nas imagens

Colocando efeito em banner

Como colocar banner rolando