Aplicando estilos CSS a listas em HTML

Aqui está uma coisa legal, aplicar estilos as listas em em HTML. Se você reparar na imagem a esquerda, é uma lista simples em HTML, formada por: <ul><li>Texto ou Link</li></ul>, e ao lado dela tem umas bolinhas, este é o estilo padrão para listas, mas tem como mudar essas bolinhas e colocar vários outros símbolos e estilos!




1) Lista Ordenada: a lista fica organizada em números. Ex:

• Lorem
• Lorem
• Lorem
• Lorem

Também pode ser:

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é: 

li{list-style:decimal;} ou li{list-style:decimal-leading-zero;} para ficar com o zero na frente do numero


2) Podemos organizar também em ordem alfabética. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:lower-alpha;}


3) Podemos transformar estas bolinhas padrões em quadrados. Ex:

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:square;}


4) também podemos transformar em circulos. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:circle;}


5) Existem outros estilos de listas ordenadas (organizada em números) só que numerais diferentes como o armênio. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:armenian;}
e o Romano

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:lower-roman;}

6) Como há numerais diferentes, existem alfabetos diferentes, como o grego. Ex

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:lower-greek;}


7) Aqui esta mais um truque muito interessante, talvez você queira usar algo diferente, então pode colocar sua própria imagem. Ex:

• Lorem
• Lorem
• Lorem
• Lorem

Para isto o código é li{list-style:url(Link-Imagem);}


Existem vários outros estilos.
Aqui está alguns valores de símbolos diferentes que você pode usar:

georgian
hebrew
hiragana
katakana

Continue

CSS Filters - Efeitos em Imagens

Há algum tempo descobri que tem como colocar efeitos de imagens do Photoshop com CSS, são vários efeitos como sépia, preto e branco, saturação, opacidade e outros. Podemos utilizar estes efeitos ao colocar o mouse em cima de uma imagem e dar efeitos nas imagens do seu blog/site.

Primeiramente devemos usar o código de acordo com o navegador:

 -webkit-
 -webkit-
 -moz-
 -ms-
 -o-

Isto serve para que os efeitos funcionem corretamente nos navegadores (se for usar os efeito no template do blog/site deve usar todos os códigos para todos os navegadores)

Os Códigos

   Grayscale

Efeito grayscale, indica o quanto preto e branco queremos que fique a imagem, vai de 0% a 100%

img { -webkit-filter: grayscale(100%); }

   Blur 

O efeito Blur da o efeito de imagem embaçada, seus valores são definidos em pixels.

img { -webkit-filter: blur(3px); }

Sépia

O efeito Sépia da um estilo envelhecido para a imagem. seus valores vão de 0 a 1

img { -webkit-filter: sepia(1); }

Saturação 

O efeito aturação deixa as cores mais vivas. quanto menor o seu valor mais perto do cinza estarão.

img { -webkit-filter: saturate(4); }

Opacidade 

O efeito Opacidade deixa as imagens transparentes. seus valores vão de 0 a 1.0

img { -webkit-filter: opacity(0.5); }

Brightness

O efeito Brightness altera o brilho da imagem. Seu valor padrão e 100%, diminuindo irá ficar mais escuro (0%)

img { -webkit-filter: brightness(0.5); }

Hue Rotate

O efeito Hue Rotate da um tom azulado a imagem (não sei bem como funciona!). seus valores são de 0deg a 180deg

img { -webkit-filter: hue-rotate(180deg); }

Invert 

O efeito Invert irá inverter todas as cores da imagem. Os valores vão de 0% a 100%.

img { -webkit-filter: invert(100%); }

Contrast 

O efeito Contrast deixará as cores da imagem mais vivas. seus valores podem ser: (1, 2, 3,...) ou (0%, 100%, 150%)

img { -webkit-filter: contrast(4); }

Continue

Fazendo um Site no Dreamweaver

Neste vídeo, estou explicando como fazer um site utilizando o Adobe Dreamweaver CS6, é uma coisa bem simples, a única coisa necessária é ter um conhecimento BÁSICO em HTML e CSS.

Vídeo

Veja o site do Vídeo

Continue

Colocar Ícones nos Marcadores, Autor do post e Comentários

Aqui está mais uma dica para personalizar o seu blog, colocando ícones nos marcadores do post, autor e comentários.

É muito simples e você só vai utilizar CSS

Aplicando os Códigos

1) Vá em modelo ▶ Editar HTML

2) Procure por ]]></b:skin>  e Acima dela cole o seguinte código CSS

/* Ícones Autor, Marcador e Comentários - tur-quesa.blogspot.com */
.post-author {/* Ícone do Autor do post*/
background:url(http://static.tumblr.com/726xof9/ESImisbtt/user.png) no-repeat left center;
padding-left:20px;
}
.post-labels { /* Ícone das categorias do post*/
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg352nyvhpLJ_LO6XMP5GCNGggkRlcULahQNyZjdkj8IM-gbEKliLhnfIWMdJffXqn0qA62tCbTGHR7ufs2QmBb9cHZhICCONMX0uNd-3pwddSGEfbXteZ2KBTqONSYmE2Jc_mXVJxoYFIj/s0/pink-label.png) no-repeat left center;
padding-left:20px;
}
.comment-link {/* Ícone do numero de comentários do post*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYx5m2XfNS2xFLMtZ_hKVmTJ5bAmHPaZRpJc73xNKdq9B-m5A6lafylo8uVlIah4EXPB4Xgc_gXgkrxDB-utltidFQ2r6AuR09bOnY9lP2AhaHYgxQZzQ4nZoapr0Ejei6quSZB0q3HFF/s0/comment.png) no-repeat center left;
padding-left: 20px;
height: 20px;
float: right;
}

O que está em cinza  é o url das imagens, se quiser alterar alguma, pode encontrar ícones neste site(em inglês), boa sorte!!

Continue

Marcadores Personalizados no Blogger

Encontrei um método de personalizar os Marcadores do blogger, com certeza, você já viu algum blog com esses marcadores que estão na moda. eu também já quis muito um desses, resolvi postar aqui pra você!

Encontrei os códigos em um site em inglês, (este aqui) lá tem 3 tipos de estilos.

É muito simples, iremos usar apenas CSS

Configurando o Gadget

Deixe as configurações do seu gadget igual a imagem acima, somente o nome é uma escolha livre.

Aplicando Modelos

Procure por </head> e cole o seguinte código Acima dela.

<style type="text/css">
/*<![CDATA[*/
.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*]]>*/
</style>
<a href="http://tur-quesa.blogspot.com" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

Onde está em vermelho, é a cor das etiquetas, repare que há dois lugares, você deve colocar as duas cores iguais.

Pronto, Visualize o seu blog e salve, veja que os marcadores já mudaram, isso é bem simples. Aqui tem mais alguns modelos que encontrei no site em inglês, se gostar de algum, é só substituir o código anterior e fazer o mesmo passo.

Código

Código

Obs: este modelo da imagem acima deve conter os números de postagens por marcador.

Continue

CSS - Sombras em Textos e Objetos

Para aplicar mais estilos a um texto e um objeto, vamos aprender sobre a propriedade Shadow   do CSS.
Primeiramente, vamos ver como ela se aplica a textos.

Sombra em Textos

Aqui esta um exemplo de como usar um texto com sombra

<p style="font-size:30px;color:000;text-shadow:2px 2px 5px #000;">Teste</p>

Teste

     
Este é o resultado. Em vermelho é a propriedade que da o sombreado ao texto, se você perceber, há três números (2px 2px 5px) os dois primeiros números ajusta a posição da sombra, Ex:

<p style="font-size:30px;color:000;text-shadow:-3px -3px 5px #000;">Teste</p>

O resultado será:

Teste

repare que ela mudou de posição, como se a luz batesse de outro angulo. Agora, vamos ver o terceiro numero, ele refere-se a intensidade da sombra, Ex:

text-shadow:-3px -3px 9px #000;

 Teste

Onde esta em vermelho é o que mudei, como coloquei um numero maior, a sombra ficou mais borrada, se colocar um numero menor, ele irá ficar diferente.

Você pode testar estes exemplos no editor HTMl aqui

Para usar Sombra em objetos não é muito diferente...

Sombra em Objetos

Vamos usar um exemplo de um cubo.

<div style="background:#6210b0;width:50px;height:50px;border-radius: 5px;box-shadow: 4px 4px 6px #000;">
</div>

Aqui esta o cubo com sombra. Para objetos só ira mudar a regra CSS, antes era text-shadow, Agora é Box-shadow. Para tudo que você quiser aplicar sombra, deve ser esta regra  agora para textos, somente a que ensinei anteriormente.

Pratique estas regras no editor HTML e faça os seus testes!

Continue

Borda personalizada

Para quem gosta de adicionar bordas em vários lugares, principalmente imagens. Trouxe  um efeito bastante interessante. É um efeito de bordas que aprendi aqui.

Pois é, Vamos aprender a colocar imagens nas bordas. vou utilizar o código CSS, sozinho e  “embutido” no HTML da imagem.

Para fazer o efeito da imagem cima, vamos fazer o seguinte;

código CSS:

img{
border: 1px solid #d5d5cb;
background::url(IMAGEM AQUI);
padding:12px;
}

Onde esta em verde, é o tipo, cor e estilo da primeira borda, que é uma bem fininha que se você prestar bastante atenção, conseguira ver

Em vermelho é o URL da imagem do fundo, no exemplo da imagem com a flor, usei esta imagem como fundo:

que também encontrei neste site.

Para usar o CSS embutido no HTML é assim: 

<img style="border:2px solid #d5d5cb; background:url(IMAGEM AQUI);
padding:12px; " src="http://www.significados.com.br/foto/flor-de-lotus_dt.jpg">

Repare que á um URL_{(não destaquei para não ficar muito confuso)}, este é o URL da imagem com a flor, que usei no inicio do post, sempre que você for inserir uma imagem no HTML de algum site é só colocar este código <img…> é a única coisa necessária para formar uma imagem.
então é isso. Vou colocar alguns exemplos de bordas aqui, qualquer dúvida, comente.



 

 
Para usar os exemplos de bordas (como já disse antes, é a fininha que fica na parte de fora) é só colocar o mouse sobre uma das imagem e ver o seu valor citado.

Continue