CSS 3 com font-face compatível, saiba como usar e converter suas fontes

Há muito tempo nós Web Designers sonhamos em poder utilizar qualquer tipo de fonte em nossos sites, a funcionalidade @font-face do CSS 3 veio para cumprir esse maravilhoso recurso com classe, de forma simples e compatível.

Veja como utilizar a propriedade @font-face de forma compatível com os principais navegadores do mercado.

De forma simples podemos generalizar o uso dessa função da seguinte maneira:

1.@font-face {

2.font-family: 'BankGothicMdBTMedium';

3.src: url('bankgthd-webfont.ttf') ;

4.}

5..elemento { font-family: 'BankGothicMdBTMedium'; }

Com isso você estará utilizando a fonte Bank Gothic no elementado de classe "elemento".

Agora vamos vamos mais a fundo nesse propriedade deixando mais compatível.

Essa fonte utilizada tem como extensão .ttf, ou seja, é uma fonte do tipo truetype. Esse tipo de fonte é compatível com alguns navegadores no mercado, porém navegadores como o IE não consegue ler essa terminação. Para o IE utilizamos fontes do tipo .EOT.

E caso o usuário já tenha essa fonte no computador, é preciso baixar novamente? Não, vamos ver agora como seria o código completo para termos total flexibilidade e compatibilidade com essa função:

1.@font-face {

2.font-family: 'BankGothicMdBTMedium';

3.src: url('bankgthd-webfont.eot');

4.src: local('BankGothicMdBTMedium'), url('bankgthd-webfont.woff')format('woff'), url('bankgthd-webfont.ttf') format('truetype'),url('bankgthd-webfont.svg#webfontMYjN7z0O') format('svg');

5.}

6..elemento { font-family: 'BankGothicMdBTMedium'; }

Dessa forma temos total compatibilidade com os navegadores mais populares do mercado. Não se assuste com o código apenas vá nesse site e envie sua fonte que ele converte para .EOT e gera todo o código necessário automaticamente!

Converter fontes para .EOT e gerar código @font-face compatível

Conheça o @font-face Generator e converta suas fontes.

fonte : http://www.leomiranda.com/dicas-css/css-3-com-font-face-compativel-saiba-como-usar-e-converter-suas-fontes.html

CSS - Título com reticencias.

Tenho um espaço com o tamanho de 200px e quando o titulo de um artigo Joomla é maior, faz uma quebra de linha automática e coloca o resto por baixo.
--------------------------------------------------
| Titulo está aqui mas se for maior |
| vem para aqui                            |
--------------------------------------------------

O que pretendia fazer era independentemente do tamanho do titulo ele fica-se em uma linha só e acrescentar os 3 pontinhos, como exemplo:
--------------------------------------------------
| Titulo está aqui mas se for...       |
--------------------------------------------------


O código CSS é:

text-overflow: ellipsis-word;

clip - Quebra o texto quando necessário (não coloca a reticências).
ellipsis - Inclui a reticências caso o texto seja maior que o espaço reservado (cuidado com a tradução de ellipsis do inglês, que pode ser "elipse" ou "reticências").
ellipsis-word - Também inclui a reticências caso o texto seja maior que o espaço reservado, mas só coloca o símbolo após a última palavra completa (para garantir que a reticências não quebre uma palavra ao meio).

Ivory Framework HTML, CSS e JavaScript

Criar um site é muito complexo e as vezes não temos prazo suficiente para desenvolver tudo do zero. É neste cenário que a utilização de algum framework para agilizar o desenvolvimento torna-se essencial e crucial para o sucesso do projeto.

Hoje você irá conhecer uma nova solução para a criação de sites compatíveis comsmartphones, tablets e desktops com qualquer resolução ou tamanho de tela.

Ivory Framework – Sites Responsivos

Framework Responsivo

Ivory é um framework HTML, CSS e JavaScript para desenvolvimento de sites responsivos, ou seja, que se adaptam a qualquer tamanho de tela.

Com apenas um código seu projeto poderá ser visualizado em Smartphones, Tabletse computadores. Você não precisará mais se preocupar em codificar várias vezes a mesma página para que ela seja compatível com os mais variados dispositivos.

O Framework Ivory possui classes prontas para criação de formulários, listas,menus e botões. Criar novas páginas será simples e exigirá apenas algumas horas de estudo para dominar todos os recursos disponíveis.

Download e Informações

O download do Ivory pode ser feito por qualquer pessoa e sua utilização é livre. Após baixar o zip é recomendado que você veja o arquivo “index.html” para entender melhor o funcionamento do framework. Mas não se preocupe, tudo é muito fácil e simples.

• Demonstração Ivory
• Download Ivory

O Ivory ainda não pode ser comparado ao Bootstrap, mesmo assim é uma ótima solução para quem busca por um framework especializado na criação de sites responsivos. O mais interessante é que a curva de aprendizado é pequena. Você levará apenas algumas horas para compreender tudo.

Com certeza mais uma ótima ferramenta para agilizar o desenvolvimento de sites compatíveis com as mais diversas resoluções de tela. Nunca foi tão fácil criar um projeto para ser acessado pelo celular, tablet e até mesmo por TVs Inteligentes.

Gostou? Comente, compartilhe e curta nosso conteúdo para continuarmos no ar. Até!