Segue abaixo um simples código para se produzir bordas redondas com CSS:
border-radius: 9px; /* CSS 3 */ -o-border-radius: 9px; /* Opera */ -icab-border-radius: 9px; /* iCab */ -khtml-border-radius: 9px; /* Konqueror */ -moz-border-radius: 9px; /* Firefox */ -webkit-border-radius: 9px; /* Safari */
Internet Explorer? Como ele não possui suporte a CSS 3, a solução seria ignorá-lo, ou então utilizar JavaScript ou imagens. Exemplo.
Entender como os elementos HTML são renderizados na página é essencial para aqueles que estão embarcando agora no mundo do desenvolvimento web. Já vi muitas pessoas passarem por problemas por não entenderem isso, aliás, muitos programadores, no decorrer do desenvolvimento acabam tendo problemas com o HTML que foi desenvolvido pois ao tentarem efetuar alguma alteração acabam utilizando tags que não são necessárias, e aí os problemas começam. Então, para evitarmos esses problemas vou mostrar aqui que os elementos HTML são renderizados de 3 formas diferentes: Tags a níveis de bloco, Inline e Invisíveis.
Os elementos de bloco em HTML utilizam toda a sua largura disponível e criam uma linha invisível antes e depois de si próprio. Os elementos a nível de bloco são os seguintes:
address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table, tbody, thead, tfoot, tr, td, th
Eu sou um elemento a nível de bloco
Os elementos HTML a nível inline são aqueles que ocupam somente sua largura necessária e não criam linhas antes e depois de si. Os elementos a nível inline são os seguintes:
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn, em, font, i, iframe, img, input, ins, kbd, label, map, object, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
Eu sou um elemento a nível inline, Eu sou mais um elemento a nível inline
São aqueles elementos que existem na página, mas não são mostrados ao usuário:
base, isindex, link, meta, script, style, title
Uma dica é que em CSS você pode tranformar um elemento de bloco em inline ou vice-versa através da propriedade CSS display.
Criar um CSS hoje Bulletproof (A prova de balas) não é tarefa fácil, existe muito treino e porfundo conhecimento sobre Browsers, principalmente o Internet Explorer e seus milhões de bugs. Portanto, para aqueles que estão iniciando hoje em CSS, eu aconselho a estudar, se dedicar e muito pois a jornada não é fácil, no começo pode ser meio desanimador, mas com o tempo você adquire conhecimento e tudo fica mais fácil. Por isso estou deixando abaixo alguns slides com conceitos básicos de CSS que encontrei no site The Frog Blog. A todos, bons estudos:
Se algum dia você precisar aplicar transparência a objetos em sua página html, você fará o uso da propriedade opacity, e você vai ficar triste em saber que nem todos os browsers suportam essa propriedade. Mas como no desenvolvimento web, sempre acabamos dando um jeitinho, sempre encontramos algumas soluções, que estão todas listadas abaixo:
Se deja aplicar 70% de opacidade a um elemento, deve-se utilizar o seguinte código:
opacity: .7;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
No exemplo vocês podem ver que foi aplicado 50% de trasnparência a uma div com um background preto.
No site Webdesign und Webentwicklung im Webstandard-Blog você pode aprender de uma maneira um tanto quanto diferente algumas propriedades CSS através de imagens do nosso cotidiano. Querem ver um exemplo:
