sérgio dinis lopes » Design http://sergiolopes.name página pessoal :: sergiolopes.name Thu, 18 Nov 2010 22:12:42 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Calendário 2009 http://sergiolopes.name/calendario-2009 http://sergiolopes.name/calendario-2009#comments Sat, 29 Nov 2008 16:06:54 +0000 SDL http://sergiolopes.name/?p=338 Continuar a ler →]]>

É você que cria os seus próprios cartões de visita para promover o seu negócio? E se pudesse inserir o calendário de 2009 na parte de trás do mesmo? Concerteza teria mais utilidade para quem ficasse com ele :)

Eu decidi criar e oferecer um calendário com os feriados portugueses. Se por acaso desejarem em brasileiro, informem-me quais os feriados nacionais no Brasil, e terei todo o gosto em criá-lo.

Para que possam alterar à vossa maneira, disponibilizo o ficheiro Photoshop CS2. Podem alterá-lo da forma que desejarem, só não o podem redistribuir.

Tamanho de um cartão de crédito (8.5 x 5.4 cm) com a resolução de 300dpi.

]]> http://sergiolopes.name/calendario-2009/feed 4 Ícones de Natal http://sergiolopes.name/icones-de-natal http://sergiolopes.name/icones-de-natal#comments Wed, 12 Nov 2008 09:24:39 +0000 SDL http://sergiolopes.name/?p=296 Continuar a ler →]]> Aproveitando o artigo de Paulo Faustino relativamente aos ícones de Natal, trago-vos alguns desses mesmos, mas os originais.

Divulgo-os como sendo um acréscimo aos ícones do Paulo, estes podem sempre ser-lhe útil para dar um ar natalício ao vosso web site/blogue, não para o RSS, mas num aspecto mais geral.

Os ícones em baixo são da autoria de Philipp Antoni e Michael Gonzalez da Enhanced Labs.

]]> http://sergiolopes.name/icones-de-natal/feed 0 Cantos arredondados com CSS http://sergiolopes.name/cantos-arredondados-com-css http://sergiolopes.name/cantos-arredondados-com-css#comments Mon, 10 Nov 2008 13:00:47 +0000 SDL http://sergiolopes.name/?p=219 Continuar a ler →]]> Todos nós já vimos pela web designs “Web 2.0″, com os cantos arredondados usando CSS para posicionar imagens de forma a dar essa “ilusão”. Embora essas imagens sejam “leves” do ponto de vista de bandwidth, o site sem elas daria menos trabalho ao browser que consequentemente o carregaria mais rapidamente e o visitante agradeceria concerteza.

Parece algo distante do nosso tempo, mas é algo que se encontra a ser trabalhado e estará disponível em CSS 3. Provavelmente estão a pensar: “Mas ainda falta algum tempo para que as especificações finais de CSS 3 fiquem disponíveis, mais tempo para que os browsers as suportem na totalidade…”.
Dou-vos um pouco de razão aí, mas à excepção do IE (para variar um pouco) os frameworks que alimentam os browsers mais conhecidos já começam a suportar – de uma forma nativa porque as especificações de CSS 3 ainda não se encontram muito bem acordadas – algumas das melhores novidades da terceira versão de Cascading Style Sheet.

Uma dessas grandes novidades é a que refiro no título deste artigo, que (felizmente) já se encontra nos frameworks (Gecko, Webkit, KHMTL e Presto) mais conhecidos.

Vamos então ao que interessa. Os próximos exemplos, só não serão visíveis aos internautas que estejam a ver o artigo com o Internet Explorer (lamento fãs do IE).

Heis exemplos de divs com os cantos arredondados

Com um Radius de 7 pixeis

Com um Radius de 14 pixeis:

Com um Radius de 75 pixeis (circulo perfeito, cool hã?):

Agora o código CSS:

Exemplo com Radius de 7 pixeis:

div {
-moz-border-radius:7px; /* Firefox, etc */
-khtml-border-radius:7px; /* Konqueror, etc */
-webkit-border-radius:7px; /* Safari, Google Chrome, etc */
-opera-border-radius:7px; /* Opera */
}

Para os seguintes, basta usar o código anterior e inserir o número do radius que deseja.

No caso do circulo, basta um radius com metade dos pixeis da <div> (no exemplo dado em cima o width e height têm 150 pixeis).

Se desejarmos especificar onde queremos que surja o arredondamento da <div>, aqui é que surgem diferenças relativamente aos vários browsers/frameworks.

Exemplos de divs com cantos especificamente arredondados

Com um Radius de 7 pixeis no topo esquerdo e fundo direito

Com um Radius de 14 pixeis no fundo esquerdo e topo direito

No código CSS seguinte, vão reparar que para os browsers Gecko (Firefox, Flock, etc…) é diferente dos que usam KHTML e Webkit:

div {


-moz-border-radius-bottomright:7px; /* Firefox, etc */

-moz-border-radius-topleft:7px; /* Firefox, etc */


-khtml-border-top-right-radius:7px; /* Konqueror, etc */

-khtml-border-bottom-left-radius:7px; /* Konqueror, etc */


-webkit-border-top-right-radius:7px; /* Safari, Google Chrome, etc */

-webkit-border-bottom-left-radius:7px; /* Safari, Google Chrome, etc */


-opera-border-top-right-radius:7px; /* Opera */

-opera-border-bottom-left-radius:7px; /* Opera */

}

Podem também acrescentar a propriedade “border-radius” ao código, dado que essa será provavelmente a que sairá nas especificações finais de CSS 3.

Volto a lembrar que isto não resulta com o Internet Explorer, sendo necessário recorrer ainda a imagens para a recriar bordas arredondadas neste browser. Espero que tenham apreciado a leitura e que vos seja útil esta dica. :)

Nota: As figuras coloridas que vêem no artigo, são exemplos práticos (são mesmo div’s com a técnica) e não imagens. O artigo não possui qualquer imagem, é tudo código HTML e CSS.

SDL

Actualizado: Acrescentei o Opera. ;)

]]> http://sergiolopes.name/cantos-arredondados-com-css/feed 23