A vantagem de usarmos as fontes do google é que sempre que alguém abrir a página a formatação conterá as fontes que indicamos, não é nada legal você se esforçar para criar uma página visualmente bonita e o computador do cliente não ter a fonte desejada.
Postei um código no github com um exemplo, você pode baixar o código para sua máquina e visualizar o código ou ainda vê-la rodando neste link: https://voyeg3r.makes.org/thimble/font-face
Segue portanto o código:
Mostrando postagens com marcador css. Mostrar todas as postagens
Mostrando postagens com marcador css. Mostrar todas as postagens
Quem tiver um convite para o typekit me manda
Basta fazer um comentário ou manda um email para voyeg3r no correio do google. Quem estiver com dúvida sobre o que é isto clique aqui.
usando @font-face no firefox 3.5
O firefox 3.5 suporta a propriedade do css @font-face, isto permite indicar no código css uma fonte que não existe na máquina do usuário final e ainda assim ela será exibida. veja detalhes aqui: http://craigmod.com/journal/font-face/
Outro exemplo da própria fundação mozilla
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Tem mais uma dica: Você baixa a fonte que quer disponibilizar para os clientes e coloca no mesmo diretório do html (depende da suar url em @font-face), algo assim:
Um site que tem dezenas de tipos de fontes e permite baixar kits @font-face
completos (incluindo o css) é o: http://www.fontsquirrel.com/ basta clicar aqui.
Baixe um exemplo completo aqui:
http://www.mediafire.com/?mzz1om0mznu
Veja tambem:
Outro exemplo da própria fundação mozilla
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Tem mais uma dica: Você baixa a fonte que quer disponibilizar para os clientes e coloca no mesmo diretório do html (depende da suar url em @font-face), algo assim:
Um site que tem dezenas de tipos de fontes e permite baixar kits @font-face
completos (incluindo o css) é o: http://www.fontsquirrel.com/ basta clicar aqui.
Baixe um exemplo completo aqui:
http://www.mediafire.com/?mzz1om0mznu
Veja tambem:
- 10 fontes legais para usar com @font-face
- fontes disponíveis para usar com @font-face (veja licença)
- 20 belas fontes
- Fontes gratuitas mais usadas em design web
Não use css hacks use css condicional
Veja neste documento
Este outro documento é também uma pérola
Efficient, maintainable CSS
View more presentations from Russ Weakley.
Este outro documento é também uma pérola
Artigo sobre o uso de estilos alternativos "css"
http://www.cssnolanche.com.br/css-alternative-style-sheets/
No próprio site da W3C também tem um site só para demonstrar o uso de estilos alternativos, você abre esta página e clica (firefox) Exibir >> Estilos de página.
No próprio site da W3C também tem um site só para demonstrar o uso de estilos alternativos, você abre esta página e clica (firefox) Exibir >> Estilos de página.
Ótima referência para desenvolvedores web
Se você deseja se aprimorar em técnicas de usabilidade e design este é o lugar certo:
http://www.webdesignerdepot.com
http://www.webdesignerdepot.com
Estilo css para códigos no blogger
Andei pesquisando como alterar o visual dos códigos
postados aqui e cheguei a este resultado...
postados aqui e cheguei a este resultado...
/* estilo do texto pré formatado */
.post code {
white-space:pre;
background-color:#eee;
color:#007;
font-weight: bold;
}
/* estilo do texto pré formatado */
.post pre {
background-color:#eee;
color:#007;
font-weight: bold;
}
Tooltip com css no blogger
Estou pesquisando uma forma eficiente de colocar tooltips (baloes de dicas) nas minhas postagens, e por enquanto ainda estou em testes:
Visite o site indicado para saber maisTooltip 1
Seu link e este: http://www.blogohblog.com/pure-css-tooltips/
Encontrei este outro que espetacular: http://www.walterzorn.com/tooltip/tooltip_e.htm
Visite o site indicado para saber maisTooltip 1
Seu link e este: http://www.blogohblog.com/pure-css-tooltips/
Encontrei este outro que espetacular: http://www.walterzorn.com/tooltip/tooltip_e.htm
CSS no lanche
Que tal um site que trata de estilos css de um modo inovador?
veja por exemplo o slogan do blog:
veja por exemplo o slogan do blog:
"Porque ingerir CSS na hora do Lanche não engorda"O link: http://www.cssnolanche.com.br/
O que são mesmo microformatos?
De uma forma simplista, é uma maneira de informar para robôs que lêem páginas HTML qual o significado de determinado conteúdo, sem interferir na maneira como este mesmo conteúdo é apresentado para entendimento humano. Isso é feito padronizando-se quais tags e atributos de tags devem ser usadas para destacar uma informação dentro do conteúdo total do site.O que são Microformats ou microformatos?
Fonte: http://flaviogranero.com/category/microformats/
Acompanhe esta apresentação e entenda como funciona esta tecnologia.
Fonte: blog do Silveira Neto.
Download da apresentação em PDF e em ODP.
Abaixo você pode ver as especificações dos Microformats:
Fonte: Pinceladas web
- hcard - Pessoas e Organizações
- hCalendar - Calendários e Eventos
- hReview - Opniões, Ratings e Reviews
- XFN - Redes Sociais
- XMDP - XHTML Meta Data Profiles
- rel-license - Licenças
- rel-tag - Tags, Keywords, Categorias
- rel-nofollow - Um hiperlink com esse atributo não deve ser seguido pelos robots de busca
- XOXO - Listas e esboços
- VoteLinks - Sistemas de Votação
Referências:
- http://flaviogranero.com/2008/03/19/microformats-a-caminho-da-web-semantica/
- http://silveiraneto.net/2008/03/25/microformatos-em-10-minutos/
- http://www.slideshare.net/andr3/microformatos-pequenas-peas-do-puzzle/
- http://www.pinceladasdaweb.com.br/blog/2006/05/22/introducao-aos-microformats/
- http://microformats.org/wiki/Main_Page-pt-br
voyeg3r@gmail.com
Rua Francisco Sales 156, Bom Sucesso
FortalezaCeará
60520-500
Brasil
55 85 32906956
This hCard created with the hCard creator.
Um site com design inovador
De quebra você vai baixar alguns livros bem interessantes:
http://www.ebookswide.net
http://www.ebookswide.net
Removendo propagandas do gmail
coloque o código:
Dentro do seu arquivo "userContent.css" para abrir com o vim faça:
Cole o conteúdo
Salve e saia
Reinicie o firefox e pronto.
#rh table[class=”metatable”]{display: none !important;}
#rh div[class=”c”] {display: none !important;}
Dentro do seu arquivo "userContent.css" para abrir com o vim faça:
vim ~/.mozilla/firefox/*.default/chrome/userContent.css
Cole o conteúdo
#rh table[class=”metatable”]{display: none !important;}
#rh div[class=”c”] {display: none !important;}
Salve e saia
:wq
Reinicie o firefox e pronto.
Assinar:
Postagens (Atom)
linux-cookbook
|
| Participe do grupo linux-cookbook |
| Visitar este grupo |