A propriedade “Border-radius” nos permite criar bordas arredondadas nos elementos do Blogger.
O uso do CSS3, incorpora novas propriedades, e com ele podemos controlar e definir o arredondamento das esquinas dos elementos, definindo o tamanho do raio da curva, sem a necessidade de utilizarmos imagens.
É este efeito que uso aqui no meu blog, e para aqueles que utilizam os navegadores que dão suporte a CSS3, conseguem visualizar o efeito.
O único problema é que esta propriedade não está disponível em todos os navegadores.
Funciona perfeitamente no Firefox, Flock, Safari, Chrome e Opera.
Veja os Browsers que suportam esta propriedade:
● Firefox 3.0 ou superior
● Flock 2.5 ou superior
● Chrome
● Opera
●Safari
Não funcionam nos Browsers:
● Opera versão inferior a 10.
É claro que o Internet Explorer ( maldito IEca) não dá suporte a CSS3, (este navegador é o terror dos desenvolvedores web) portanto quem utiliza este navegador, nunca consegue visualizar os efeitos mais diferentes e interessantes possíveis, como bordas arredondadas, sombras nos textos, entre outros.
Por este motivo que digo e repito: “larguem o IE, pelo amor de Deus”. Já até publiquei uma campanha existente na web que explica melhor sobre esse assunto.
Mas, voltando ás bordas arredondadas,para utilizá-la em seu blog, basta inserir a chamada para a propriedade, no CSS do seu template.
Como esta propriedade, ainda não está totalmente implementada, para alguns navegadores é necessário a aplicação de atributos especias para que cada navegador reconheça a propriedade:
border-radius (padrão) -moz-border-radius (navegadores Flock e Firefox) -webkit-border-radius (navegadores Chrome e Safari)
Desta forma, devemos aplicar os atributos a cada elemento que você pretende incluir bordas arredondadas, como por exemplo, colunas do blogger.
1) Aplicar o efeito redondo diretamente no post do blogger:
Segue alguns exemplos para aplicação de bordas arredondadas em textos e abaixo de cada exemplo o código referente.
1. Bordas arredondadas iguais em todas as esquinas:
Código para aplicar o efeito em algum seletor(elemento) no template:
border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
2. Bordas arredondadas apenas em alguns lados:
2.1. topo direito e rodapé esquerdo:
Código para aplicar o efeito em algum seletor(elemento) no template:
-moz-border-radius:0 20px; -webkit-border-radius:0 20px; border-radius:0 20px;
2.2. topo esquerdo e rodapé direito:
Código para aplicar o efeito em algum seletor(elemento) no template:
-moz-border-radius:20px 0; -webkit-border-radius:20px 0; border-radius:20px 0;
3. Bordas arredondadas somente nas esquinas do topo:
Código para aplicar o efeito em algum seletor(elemento) no template:
border-radius:10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;
4. Bordas arredondadas somente no rodapé:
Código para aplicar o efeito em algum seletor(elemento) no template:
border-radius:0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;
Para aplicar o efeito redondo nas bordas em textos no post basta colar o código referente à propriedade, no corpo da postagem, através da aba “editar html”.
Veja um exemplo para você entender melhor o código:
Lembre-se, este são apenas alguns exemplos, para você conseguir entender o código, pois você deverá editar cores, bordas e definir o tamanho do raio da curva de cada borda.
2) Aplicando este efeito diretamente na folha de estilos do Blogger:
Podemos também acrescentar o efeito à folha de estilo no template, para que seja aplicada a determinados elementos.
Vá no menu “modelo >> Editar HTML”, marque “Expandir modelos de widgets”.
Copie o código abaixo e cole-o ACIMA de ]]>
#borda-arredondada{ -moz-border-radius: 10px; /*-- para Firefox e Flock --*/ -webkit-border-radius: 10px; /* para Chrome e Safari --*/ border-radius: 10px; border: 1px solid #000000; /*--- Edite cor e espessura da borda ---*/ } Sempre que quiser aplicar o efeito redondo em bordas em algum texto no post, no modo “Editar HTML” da postagem, acrescente a seguinte linha:
3) Podemos também, aplicar este efeito em uma coluna no blog, por exemplo, na coluna total da área de postagens (#main-wrapper ou .main-outer – dependendo do modelo do seu template).
Vá no menu “modelo >> Editar HTML” Não precisa clicar em “Expandir modelos de widgets” e procure pelo trecho correspondente ao código referente a coluna central de postagens no seu template. Dependendo do modelo, pode ser #main-wrapper ou .main-outer
e cole abaixo dela o seguinte código:
-moz-border-radius: 10px; /* para Firefox e Flock*/ -webkit-border-radius: 10px; /* para Chrome ou Safari */ border-radius: 10px; Para cada elemento que queira aplicar bordas arredondadas, basta incluir estes atributos (logo abaixo do nome do elemento), da seguinte forma:
Nome do Elemento {/*Pode ser #outer-wrapper, .content-outer, #main-wrapper,.main-outer, .sidebar,#sidebar-wrapper, .footer, #header,etc*/ -moz-border-radius: 10px; /* para Firefox e Flock*/ -webkit-border-radius: 10px; /* para Chrome e Safari */ border-radius: 10px; } 4) Aplicar o efeito nos Títulos dos Posts:
Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.
E acrescente logo abaixo as seguintes linhas:
-moz-border-radius: 10px; /* para Firefox e Flock*/ -webkit-border-radius: 10px; /* para Chrome e Safari */ border-radius: 10px; border:1px solid #000 /*--- Edite ---*/ Leia outros artigos que tratam sobre personalização do título dos posts, talvez você se interesse em conhecer outras maneiras de personalizá-los, podendo, inclusive, inclui-los a este efeito publicado neste tutorial:
5) Aplicar o efeito na área de Posts:
Procure no corpo do HTML do seu blog, o código de comando da área de Post, que geralmente é .post ou .post-outer , dependendo do modelo do seu template.
E acrescente logo abaixo as seguintes linhas:
-moz-border-radius: 10px; /* para Firefox e Flock*/ -webkit-border-radius: 10px; /* para Chrome e Safari */ border-radius: 10px; border:1px solid #000 /*--- Edite ---*/ Basicamente é isso!
Você pode aplicar este efeito em vários elementos no seu template, como por exemplo:
para diferenciar partes de textos em suas postagens destacados pela função Blockquote, ou em partes na Área de comentários, ou até mesmo na sidebar.
Você também pode incluir um efeito sombreado na borda arredondada.