Editar postagemComentar essa postagemLink para esta postagem Criar um aplicativo para o Google Chrome

Não podemos negar que o Google Chrome é escolha preferia muita gente quando o assunto é navegadores da web. E talvez você já notou que a maioria de seus leitores/usuários usam o Chrome. Bom e que tal cria um aplicativo do seu blog/site para seus usuários usarem em seu navegador? A boa notícia e que da sim e é bem fácil.

Bom, para começar crie uma pasta em qualquer parte do seu computador (recomendamos de fácil localização) e em seguida abra o Notepad++ (se não tiver baixe) e cole o seguinte código abaixo.

{ "name": "Nome do aplicativo", "description": "uma descrição.", "version": "1.0", "manifest_version": 2, "icons": { "128": "128.jpg" }, "app": { "urls": [ "URL do seu site" ], "launch": { "web_url": "denovo o URL do seu site" } }, "permissions": [ "unlimitedStorage", "notifications" ] }

Bom não preciso explicar muito, o código é auto explicativo.

1. Em name você coloca o nome seu seu aplicativo.
2. Em description você coloca uma descrição (sem acentos, pontuação e caracteres especiais).
3. No version é para caso você crie novas versões.
4. Em icons você pode deixar do jeito que está.
5. Em URL e web_url você vai colocar o link do seu blog/site ou o link do aplicativo do seu site (que você terá que criar ou colocar um já existente).

Tudo feito agora clique em salvar (no menu arquivo) e uma caixa ira aparecer. Procure a pasta que você criou no início deste artigo e abra ela. Em tipo de arquivo você seleciona o primeiro (All types *.*) e depois no nome você coloca "manifest.json" (sem as aspas) e salve (dentro da pasta que você criou!). Agora você vai criar ou procurar uma imagem PNG de 128px por 128px e vai salvar essa imagem com o nome de "128" dentro da pasta que você criou. Deve ficar como na imagem abaixo.

Agora você vai testar seu aplicativo e para isso abra seu Google Chrome e clique nos trés palitinhos no canto superior direito, depois procure por "Ferramentas" e depois Extensões. (como mostrado abaixo).

Clique para ver ampliado

Agora na página que se abriu, deve haver uma caixa (Modo do desenvolvedor) desmarcada, marque ela e um menu aparecerá, clique "Carregar extensão expandida..." e uma caixa ira se abrir, nessa caixa você vai procurar a pasta que você criou lá no início e vai clicar em ok, se de certo um novo aplicativo vai aparecer na lista de extensões e na página de aplicativos.

Para publicar seu aplicativo na Chrome Web Store, basta compactar a pasta no padrão Zip e acessar https://chrome.google.com/extensions/developer/dashboard. Será preciso enviar o arquivo e preencher informações como texto, link e imagem. Também será cobrada uma taxa de 5 dólares americanos para publicar seu app (somente a primeira vez).

Que tal, gostou? Bem fácil né. Em outro artigo vou ensinar a como criar extensões para o Chrome, por que é um pouco mais complicado. Qualquer dúvida, comente!

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Rolagem infinita no Blogger

Depois de visitar muitos blogs, percebi que muita gente que colocar o efeito de rolagem infinita no seu blog (Blogger). Então resolvi escrever este artigo explicando como usar o Scroll infinite. Esse efeito, carrega mais postagens sempre que o usuários chega ao final da página e assim, não é preciso clicar várias vezes em "mais postagens". Então vamos lá?

Primeiramente vá no seu blog (no Blogger) e clique na sessão editar HTML. Depois procure (clicando em Ctrl+F) pela tag </head>, e colole antes dela o seguinte código abaixo.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script> <script src='//sites.google.com/site/fileswb/bloggerInfiniteScrolling-WB-1.2.js?' type='text/javascript'></script>

Se você não é muito familiarizado com HTML, clique abaixo e adicione como gadget.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> <script src='//sites.google.com/site/fileswb/bloggerInfiniteScrolling-WB-1.2.js?attredirects=0&d=1' type='text/javascript'/>

Salve e pronto, visite o seu blog e veja se esta tudo correto e vá até o final da página para verificar se o efeito funcionou.

Aviso: Se seu templante for personalizado, pode ocorre alguns erros.

1. Em paginação numerada é bem provável que não funcione.
2. Para quem usa postagens resumidas automaticamente não fica muito legal. A partir do primeiro carregamento de posts eles não ficam mais resumidos, aparecem completos. Porem se você usar o <----more---> padrão do blogger, não tem problema algum.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Ícones para seu site

Uma das maneiras que está muito sendo usada por sites como: Myspace, Microsoft, DropBox e outros, é usar ícones com Web fonts. Bom é assim, para impedir que os usuários baixem ícones de sites, agora todos estão usando a fonte 'Pictos', para criar símbolos com letras do próprio teclado. Então vamos lá, primeiro crie um elemento que você que usar. Por exemplo, aqui eu vou fazer com uma DIV:

<div class="s-b-a" data-icon="">Adicionado</div>

Agora vamos criar uma regra @font-face no seu site: <style type="text/css"> @font-face { font-family: 'Pictos'; src: url(https://sites.google.com/site/iagob26/pictos-icons.ttf);} *[data-icon]::before { font-family: 'Pictos',sans-serif;font-size: 13px;line-height: 0;content: attr(data-icon);margin-right: 5px;} </style>

Modifique do jeito que quiser (recomendo mudar o tamanho da fonte) e salve!

Agora veja a imagem abaixo e escolha um ícone e veja o seu respectivo símbolo.

Agora cole o simbolo dentro das aspas de data-icon da DIV que criamos lá no começo. Exemplo:

<div class="s-b-a" data-icon="3">Adicionado</div>

Pronto, agora salve essa div em qualquer lugar onde você queira usar o tal ícone que você escolheu.

Important: Isso foi só um exemplo, claro que você pode criar vários outros modelos a partir deste.

Bom esse data-icon não é novo, mais ta ganhando um bom destaque por causa de suas utilidade e o jeito de impedir downloads que vc não quer que aconteça. Essa fonte (Pictos) criar ícones interessantes com as letras do alfabeto.

Exemplo:

Adicionado

Código do exemplo: <div role="button" class="button-red y-u-i" style="display: inline-block;padding: 2px 8px;" data-icon="3" tabindex="0">Adicionado</div>

Qualquer dúvida, já sabe.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Deslocar o background com animação

No tutorial anterior, eu ensinei a vocês a mexerem com Animations e keyframes, agora vou mostrar mais ultilidades destas duas propriedades. Talvez você já tenho ido no novo site do Disqus, e reparou que tem uma animação na parte de cima do site, bom, eu vou ensinar você a fazerem esse efeito.

Talvez você queira saber mais sobre animations e keyframes.

Bom, primeiro vá no Google Imagens e ache um background (plano de fundo) para usar (de preferência que se repita como esse e tenha as mesmas prorporções tanto em altura quanto de largura). Agora vá no seu site ou blog e antes da tag </style> no head, cole o código abaixo. Se estiver no Blogger, cole antes de ]]></b:skin> no HTML.

.hYs { -webkit-animation: bgMove 9.9s linear infinite; -moz-animation: bgMove 9.9s linear infinite; -o-animation: bgMove 9.9s linear infinite; -ms-animation: bgMove 9.9s linear infinite; animation: bgMove 9.9s linear infinite; background: url(http://i.istockimg.com/file_thumbview_approve/3781501/2/stock-illustration-3781501-seamless-floral-background-repeat-many-times-vector-illustration.jpg); background-position: 0 0;} @-webkit-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @-moz-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @-o-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @-ms-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @keyframes bgMove { 100% {background-position: 100000px -10000px;}} Entendendo o código:

1. Aonde está "hYs" você coloca a classe que vai receber a animação.
2. Aonde tem "9.9s" é a velocidade da animação (não apague o 's'). obs: troque em todos eles se você quiser mudar.
3. Esse @keyframes é o que faz a animação acontecer. Aprenda mais sobre ele clicando aqui.
4. No background-position, fica os valores do deslocamento do background. Você pode mudar para a largura e a altura da img (Exemplo: 380px -376px - o primeiro é a largura e o segundo é a altura).
5. Você pode adicionar mais styles.

Agora basta salvar e ver como ficou, fácil assim.

Exemplo:

Caso tenha alguma dúvida ou se eu tiver errado alguma coisa, é só comentar.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Animation e keyframes (Avançado)

Depois de muito procurar na internet, não achei um tutorial bom que ensinasse a mexer com "-webkit-animation", então decidi fazer um eu mesmo para ensinar melhor aos alheios com esse tipo de propriedade.

Este tutorial se destina a web designers que tenham um conhecimento um pouco avançado ou que queiram aprender sobre animations. Mais qualquer pessoa pode aprender mais sobre esse atributo.

Descrição

Com o "-webkit-animation", podemos criar animações, que podem substituir imagens animadas, animações em Flash, e JavaScripts em muitas páginas da web.

Para criar animações em CSS3, você vai ter que aprender sobre a regra @ keyframes.

A regra @ keyframes é onde a animação é criada. Especifique um estilo CSS dentro da regra @ keyframes e a animação irá mudar gradualmente a partir do estilo atual para o novo estilo.

Prefixo

Para começar, primeiramente claro que temos que colocar um prefixo de animation. No Firefox é prefixo o "-moz-", Chrome e Safari usam o prefixo "-webkit-", Opera requer o prefixo "-o-" e ainda existe um outro que é "-ms-", mais eu não sei de qual é o navegador.

Exemplo: @-webkit-keyframes roll /* Safari e Chrome */ { 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes roll /* Firefox */ { 100% {-moz-transform: rotate(360deg);} } @-o-keyframes roll /* Opera */ { 100% {-o-transform: rotate(360deg);} } @-ms-keyframes roll { 100% {-ms-transform: rotate(360deg);} } @keyframes roll { 100% {transform: rotate(360deg);} }

No exemplo eu coloquei um uma animação de rotação.

Agora nós criamos uma classe que irá receber a animação, e na classe especificamos o nome do que demos no @ keyframes (no caso "roll") e também colocamos o duração da animação.

Exemplo: div { -webkit-animation: roll 5s; /* Safari e Chrome */ -moz-animation: roll 5s; /* Firefox */ -o-animation: roll 5s; /* Opera */ -ms-animation: roll 5s; animation: roll 5s; }

Nota: Você deve definir o nome e a duração da animação. Se a duração for omitida, a animação não vai funcionar, porque o valor padrão é 0.

Avançado

Ainda existe outras propriedades que podem ajudar na hora de especificar a animação.

div { /* Chrome e Safari: */ -webkit-animation-name: roll; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; /* Firefox: */ -moz-animation-name: roll; -moz-animation-duration: 5s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; /* Opera: */ -o-animation-name: roll; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; /* Opera: */ -o-animation-name: roll; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; -ms-animation-name: roll; -ms-animation-duration: 5s; -ms-animation-timing-function: linear; -ms-animation-delay: 2s; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; -ms-animation-play-state: running; animation-name: roll; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } A mesma animação que a de acima, utilizando a propriedade de animação abreviada: -webkit-animation: roll 5s linear 2s infinite alternate; -moz-animation: roll 5s linear 2s infinite alternate; -o-animation: roll 5s linear 2s infinite alternate; -ms-animation: roll 5s linear 2s infinite alternate; animation: roll 5s linear 2s infinite alternate;

Propriedade	Descrição	Padrão
animation	Uma propriedade abreviação para todas as propriedades de animação, com exceção da propriedade de animation-play-state
animation-name	Especifica o nome da animação @ keyframes	0
animation-duration	Especifica quantos segundos ou milissegundos uma animação leva para completar um ciclo.	0
animation-timing-function	Descreve como a animação vai avançar mais um ciclo de sua duração.	ease
animation-delay	Especifica quando a animação vai começar.	0
animation-iteration-count	Especifica o número de vezes que uma animação é reproduzida.	1
animation-direction	Especifica se ou não a animação deve jogar no reverso em ciclos alternados.
animation-play-state	Especifica se a animação está em execução ou em pausa.

Exemplo: <!DOCTYPE html> <html> <head> <title>Demo: animation - Wikiblogs</title> <style type="text/css"> .Ftc { width: 100px;height: 100px;background: red;-webkit-animation: roll 5s linear 1s infinite alternate;-moz-animation: roll 5s linear 1s infinite alternate;-o-animation: roll 5s linear 1s infinite alternate;-ms-animation: roll 5s linear 2s infinite alternate;animation: roll 5s linear 2s infinite alternate;} @-webkit-keyframes roll { 100% {-webkit-transform: rotate(360deg);}} @-moz-keyframes roll { 100% {-moz-transform: rotate(360deg);}} @-o-keyframes roll { 100% {-o-transform: rotate(360deg);}} @-ms-keyframes roll { 100% {-ms-transform: rotate(360deg);}} @keyframes roll{ 100% {transform: rotate(360deg);}} </style> </head> <body> <div class="Ftc"></div> </body> </html>

Bom, é isso. Alguma dúvida ou pergunta, deixe em um comentário.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Botão voltar ao topo do site com animação

O botão 'Voltar ao topo do site' pode ser interessante, pois em alguns sites geralmente tem um conteudo muito grande, é gera uma barra de rolagem pequena e de difícil manuseação, é para facilitar a navegação do usuário pela página, é legal colocar um botão para voltar ao topo. Mas que tal adicionar um animação?
Uma forma fácil é criar um link (sem animação), veja baixo: <a href="#top"><img src="URL DA IMAGEM" /></a> Mais vamos ao que interessa. Vá em seu site ou blog, e coloque antes da Tag </head> o seguinte código Jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" /></a> Agora coloque este link aonde você quiser. <a href="" onclick="$('html,body').animate({scrollTop: 0}, 200);"><img src="URL DA IMAGEM" /></a>

Nota: Aonde esta '2000' é a velocidade da animação (Diminua o valor para acelerar a animação).

Se você quiser que a imagem fique fixa no canto da tela, utilize o seguinte código. <a href="#top"><img src="URL DA IMAGEM" style="position: fixed;right: 6px;bottom: 6px;z-index: 100;" /></a>

position: fixed; (posição em relação a tela)
bottom: 6px; (Distância da parte da baixo da tela)
right: 6px; (Distância da lateral da tela)

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Personalizar as barras de rolagem da página

Certamente você já deve ter visto em algum site uma barra de rolagem personalizada (Como no Facebook, Google+, etc), bom neste tutorial vou ensinar a fazer esse mesmo efeito. Primeiramente abra o bloco de notas no seu windows e cole o código abaixo (ou edite na caixa mesmo). ::-webkit-scrollbar {width: 11px;height: 11px;} ::-webkit-scrollbar-track-piece:vertical {background: white;border-left:1px solid #444} ::-webkit-scrollbar-track-piece:horizontal {background: white;border-top:1px solid #444} ::-webkit-scrollbar-thumb:vertical {height: 20px;background: #545454;border: 1px solid #333;border-radius: 8px;} ::-webkit-scrollbar-thumb:horizontal {height: 20px;background: #545454;border: 1px solid #333;border-radius: 8px;} Alter os valores como desejar.

Nota: Altere somente os valores que estão dentro dos parenteses {}

• Na primeira linha você define a largura (width) e a altura (height).
• Na segunda linha você personaliza a parte da barra que não se mexe (a parte branca).
• Na terceira linha você colocar o mesmo código da segunda (a terceira linha é para personalizar a parte branca da barra de rolagem de baixo da página).
• Na quarta linha você personsonaliza a barra que o usuário vai puxar para descer no site. (coloque o mesmo código na quinta linha).

background: #545454; (cor do plano de fundo)
border: 1px solid #333; (bordas)
border-radius: 8px; (arredondar as bordas)

Para achar as cores certas, use uma tabela de cores. Depois coloque esse código na tag style do seu site ou se estiver no blogger coloque antes de ]]>
.
Avançado

Em alguns sites, não fica legal usar barra de rolagem em tudo, e um jeito de personalizar somente em alguns elementos é colocar uma classe para para a scrollbar. Para isso basta colocar na frente de cada linha a classe que deseja usar a scrollbar personalizada. Exemplo: .dsw::-webkit-scrollbar-thumb:vertical {height: 20px;background-color: rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.2)} Ou usar com uma ID: #dsw::-webkit-scrollbar-thumb:vertical {height: 20px;background-color: rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.2)} Ou em uma Tag especifíca: div::-webkit-scrollbar-thumb:vertical {height: 20px;background-color: rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.2)} Pronto agora o seu site tem barras de rolagem personalizadas.

Aviso: Este código só funciona no navegador Google Chrome.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Personalize os links do site

Se você que dar um destaque especial para os links de suas páginas, siga essa postagem. Imagine como vai ser a cor, os detalhes e abra o bloco de notas e cole o seguinte código:

<style type="text/css">.a:link {color: #15C;text-decoration: none;cursor: pointer;} .a:hover {color: #15C;text-decoration: underline;} .a:active {color: red;} .a:visited {color: #551A8B;}</style>

Mude os valores conforme desejar. Em ".a:link{}" edite conforme que fique os link ( em "color: #15c" mude a cor do link). Em ".a:hover" edite como que que fique o link ao passar o mouse sobre ele. Em ".a:active" edite como que que fique quando o usuário clicar no link e em ".a:visited" edite para mudar o visual depois de clicar no link.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Personalizar a fonte da página

Páginas bem editadas tem sempre uma fonte especial para melhorar o visual ao usuário/leitor, nesta postagem você vai aprender a mudar a fonte de seu site. Primeiramente escolha como quer que seja e abra o bloco de notas de seu computador e cole o código abaixo:

<style type="text/css">
body {color: #222;font-family: Arial;font-size: 16px;line-height: 27px;}
</style>

Altere os valores de acordo como quer que seja a fonte de seu site. Em "color" mude a cor das letras (Veja mais cores), em "font-family" mude a font que pode ser Arial, Verdana, Tahoma, Segoe UI, etc ([link para mais fonts]). Em "font-size" mude o tamanho da letra e em "line-height" modifique o espaço entre uma linha e outra.
Depois de ter terminado de editar, cole o código que ficou no bloco de notas antes de </head>  no seu site (Se for no Blogger, coloque antes de ]]></b:skin> no html).

Avançado

Em alguns trechos de frases você vai prescisar destacar uma palavra ou ditado para isso existem tags que ajudam a destacar plavras. Use "b" para colocar um efeito negrito (EX: Hoje eu vou sair com meus amigos.). Use "i" para colocar a font como itálico. Use "u" para sublinhar (EX: Eu não gosto de azeitona.). Use "s" para riscar palavras (EX: Coisas para fazer: Sair, malhar, ir para a casa do amigo(a).). Depois vou ensinar a vocês o código desses efeitos para não ter que usar "<span>, <b>, <s> e <u>" etc toda hora, mas isso e assunto para outro post.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Mudar o plano de fundo de um elemento

As vezes cria um efeito legal adicionar um background diferente em um elemento do seu site. Para isso existe vários códigos para perzonalizar como quizer. Imagine como vai ser a cor ou a imagem do background deste elemento, abra o bloco de notas e coloque o código abaixo:

style="background-color: #777;background-image: url();background-position: 0 0;background-repeat: no-repeat;background-attachment: fixed;"

Cada sesão da para ser personalizada conforme desejar e para isso siga com cuidado para não fazer errado. Em "background-color" você pode mudar a cor do plano de fundo. Em "background-image" serve pata adicionar uma imagem (sites como Facebook e Google+ usam esse código para protejer suas imagens, para usuários não fazerem o dowload delas). Em "background-position" você altera as coordenadas da imagem (se você que ocultar uma parte do background, use esse código para criar uma margem de topo e de esquerda da imagem). Em "background-repeat" como ja diz o código, serve para repetir a imagem, se que que repita, troque por "repeat" se quer que não repita, troque por "no-repeat". E finalmente "background-attachment" para mudar a forma como a imagem vai ficar visivel, se que que fique fixa ( no caso de ser o plano de fundo do site) mude para "fixed" e se não que esse efeito retire esse seção. As edições podem ser adicionado tanto por meio de style como de CSS.

Avançado

Uma forma interessante que achei ao vasculhar os códigos da Google para criar um efeit gradient (saiba o que o efeito gradient) e adicionar um código mais avançado, que pode demorar mais para editar por cada seção so funciona em um navegador. Para criar esse efeito adicione os ódigos abaixo ao bloco de notas:

background-color: #444;background-image: -webkit-linear-gradient(top,white,#444);background-image: -moz-linear-gradient(top,white,#444);background-image: -o-linear-gradient(top,white,#444);background-image: -ms-linear-gradient(top,white,#444);background-image: linear-gradient(top,white,#444);

Edite os valores das cores para melhorar o visual. OBS: cada código tem que ser igual para que usuários de diferentes navegadores posam ter uma mesma experiência. Observe que cada navegador tem seu código (webkit do Chrome, moz do Mozilla, o do Opera, ms eu não sei qual é e linear para outros navegadores não citados e se mesmo assim o navegador não entender exite o "backgroud-color" para ter uma cor). Outra dica bem legal para usar um background um pouco transparent, é usar o RGBA (red, green, blue, a...) certamente você ja viu isso no paint, Power point, Google docs que consiste em usar uma conbinação de treis cores para cirar uma nova, mais ou menso como acontece com a tinta guache. Para isso use:

backgroun-color: rgba(0,0,0,.4);

No primeiro "0" você muda o vermelho, no segundo você muda o verde e no terceiro o azul e no ".4" você muda a transparencia da cor. Os códigos podem ser adicionados por meio de style em DIV, SPAN, IMG, etc ou por meio de CSS.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Como adicionar sombra a um objeto da página

Colocar sombra em um objeto é muito simple e sempre da um toque especial no visual do usuário/leitor. Adicione este código no bloco de notas do seu computador:

style="box-shadow: 1px 1px 1px black;"

Edite os valores conforme desejar. No primeiro "px" altere a distância da sombra para baixo, no segundo "px" altere a distância da sombra a esquerda, no terceiro "px" altere a opacidade da sombra e em "black" mude a cor da sombra. Depos de ter terminado cole o código que ficou no bloco de notas em um elemento como DIV, SPAN, IMG, A, BODY, etc.


Avançado


Em certos elementos fica legal adicionar sombra as letras, para isso adicione o código ao bloco de notas:

style="text-shadow: 1px 1px 1px black"

Conforme foi mostrado no primeiro exemplo, as mudanças são as mesmas.

Continue lendo »

Editar postagemComentar essa postagemLink para esta postagem Como usar bordas em um elemento da página

Sem dúvida você já viu em algum site, uma imgem ou um gadget com bordas coloridas, bom, hoje nós vamos aprender isso, como colocar bordas em elemtos da página.
Primeiramente vamos escolher o que ver ter bordas que pode ser desde DIV, IMG, SPAN ou outros, depos adicionamos o style de bordas:

style="border: 1px solid #000;"

Depois configuramos o tamanho em "px" o estilo da borda que pode ser solida (solid), pontilhada (dotted), tracejada (dashed) e dupla (double) e pos fim a cor em #***. Veja mais cores.

Avançado

Certos elementos merecem uma personalização mais avanda que pode ser desde arredondar os cantos das bordas, um estilo de borda em cada lado do objeto ou colocar uma imagem. Para arredondar os cantos das bordas você adiciona "border-radius" ao código anterior e assim temos:

style="border: 1px solid #000;border-radius: 6px;"

Para aumentar o valor radial da borda você altera o valor definido por "px".

Se você preferir ultilizar uma cor, uma espessura ou um estilo diferente para cado lado do objeto você ultiliza o código:

style="border-top: 1px solid
black;border-left: 1px solid black;border-right: 1px solid black;border-bottom: 1px solid black;"

E depois e só configurar cada valor.

Caso você queira colocar uma imgem na borda, ultilize o código:

style="border-image: url(URL DA IMAGEM);border-image-repeat: repeat;"

Subistitua pelo link da imagem e altere em "border-image-repeat" por "repeat" para repetir a imgem ou "no-repeat" para aparecer só uma vez.

Continue lendo »