TiloWR » CSS

CSS Personalizado para mudança de orientação no iPhone e iPad

Tilo — Tue, 14 Jun 2011 19:23:24 +0000

Já fiz um post explicando como via JavaScript pegar essa mudança e colocar uma classe no body da página, além de ter um melhor resultado em performance ainda permite que seja testado no PC, mas se mesmo assim você ainda quer usar o recurso de @media do CSS, vamos lá, ele pode ser feito de algumas formas:

No HTML na tag Link

No CSS no seletor @Media

@media only screen and (max-device-width: 768px) and (orientation:portrait) {
// Seletores para Landscape (Paisagem)
}

@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
// Seletores para Portrait (Retrato)
}

Ficou na Dúvida? Precisa de Ajuda? Comenta ai que eu sempre respondo!

Manipulando a área de seleção do usuário com CSS para iPhone e iPad

Tilo — Thu, 03 Feb 2011 10:31:14 +0000

Sabe quando você toca a tela do iPhone/iPad e ele cria uma área de seleção, pois bem, isso é muito útil em formulários e coisas do tipo, porém quando você está manipulando objetos com ontouchmove ou ongesturechange isso é realmente desagradável, principalmente quando a área toda é selecionada, hoje vou ensinar como desabilitar isso com apenas uma linha de CSS para Webkit

Basta esolher o objeto que você deseja desabilitar (no meu caso vou fazer em todos), e manipule o atributo -webkit-user-select, ele pode receber 3 valores;

none – Para desabilitar.
auto – Para selecionar a caixa inteira.
text – Para selecionar apenas o texto tocado.

No exemplo vou tirar a seleção de todos os objetos:

* {
-webkit-user-select: none;
}

Simples não? Se isso te ajudou, deixe um comentário

Otimizando desenvolvimento HTML com Zen-coding e Notepad++ ( Instalação + Dica )

Tilo — Thu, 13 Jan 2011 17:00:43 +0000

Nunca recebi um projeto acompanhado da seguinte frase, “Projeto tranqüilo, vai fazendo de boa”, eles sempre chegam com data de entrega para ontem, e uma boa é saber como otimizar o seu tempo, ainda mais se seu foco é a qualidade, todos sabemos que projetos simples, não significa projeto fácil. então, ai vai uma dica muito valiosa:

Notepad++ acompanhado do plugin do Zen-condig, vou fazer as honras, o notepad++ é um editor de texto extremamente simples e funcional para quem vai construir código, uso ele para varias linguagens, mas vamos focar no assunto que é html. o notepad++ pode ser baixado aqui

A idéia do Zencoding é bem simples, ao invés de você digitar:

Você poderá digitar apenas html:5 e apertar CTRL+E e pronto ele já expande o código pra você.

Se seu você precisar montar o seguinte código:

Basta digitar div#geral>nav.menu>ul>li*5 e apertar CTRL+E.

Aqui vai um video bem legal de como utilizar o zencoding

Algumas coisas legais pra se testar no Zen-coding:

E - Nome do elemento (div, p);
E#id - Elemento com identificador (div#content, p#intro, span#error);
E.class - Elemento com classes (div.header, p.error.critial). Você pode combinar classes e IDs, também: div#content.column.width;
E>N - Elemento filho (div>p, div#footer>p>span);
E+N - Elemento em sequência (h1+p, div#header+div#content+div#footer);
E*N - Multiplicação de elementos (ul#nav>li*5>a);
E$*N - Numeração de itens (ul#nav>li.item-$*5);

A instalação do Zencoding pode ser feita de 2 formas via Plugin manager do notepad++ ou da forma roots de ser uhauhauh

Vamos fazer primeira pelo Plugin manager:

Abra o Notepad > Plugins > Plugins Manager > Show Plugin Manager

Selecione a aba Available e marque a opção Zen Coding

Depois da Instalação é só aceitar a solicitação de reinicializar o Notepad e pronto

Agora vamos a forma Root de ser:

Acesse o repositório do Zen-coding e decopacte o conteudo do zip dentro da pasta plugin do notepad

Livro: Use a Cabeça! Web Design

Tilo — Sun, 02 Jan 2011 21:49:01 +0000

Titulo: Use a Cabeça! Web Design ( Head First )

Autor: Ethan Watrall & Jeff Siarto

Editora: O’Reilly – Alta Books

Idioma: Português

Páginas: 472

Para quem é esse livro: Você se sente confortável com o XHTML e o CSS, mas não tem nenhuma experiência com Web Design, se considera um desenvolvedor WEB, mas deseja aperfeiçoar seus conhecimentos em Web Designer.

Clique e Compre o livro pelo nosso link do submarino

Usando Seletores Avançados no IE6 – JavaScript + CSS

Tilo — Tue, 30 Mar 2010 16:06:35 +0000

Hoje foi a prova final desse javascript, já estamos usando ele há algum tempo aqui na agência e ele vem tendo um ótimo desempenho, chegou a um ponto que meu IE6 lê seletores que o IE8 não lê, você poderá usar coisas como:

Seletores Avançados
Selector type	Pattern	Description
Seletor para sub string de atributo	E[att^="val"]	Casa com qualquer elemento E cujo valor do atributo att começa com “val”.
Seletor para sub string de atributo	E[att$="val"]	Casa com qualquer elemento E cujo valor do atributo att termina com “val”.
Seletor para sub string de atributo	E[att*="val"]	Casa com qualquer elemento E cujo valor do atributo att contenha a sub string “val”.
Pseudo classe estrutural	E:root	Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML.
Pseudo classe estrutural	E:nth-child(n)	Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai.
Pseudo classe estrutural	E:nth-last-child(n)	Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho.
Pseudo classe estrutural	E:nth-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo.
Pseudo classe estrutural	E:nth-last-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho
Pseudo classe estrutural	E:last-child	Casa com qualquer elemento E que seja o último filho do elemento pai.
Pseudo classe estrutural	E:first-of-type	Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo.
Pseudo classe estrutural	E:last-of-type	Casa com qualquer elemento E que seja o último elemento irmão do seu tipo.
Pseudo classe estrutural	E:only-child	Casa com qualquer elemento E que seja o único filho do elemento pai.
Pseudo classe estrutural	E:only-of-type	Casa com qualquer elemento E que seja o único elemento irmão do seu tipo.
Pseudo classe estrutural	E:empty	Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto).
Pseudo classe :target	E:target	Casa com um elemento E que seja o destino da URL.
Pseudo classe estado de elemento de UI	E:enabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que esteja habilitado (enabled).
Pseudo classe estado de elemento de UI	E:disabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja desabilitado (disabled).
Pseudo classe estado de elemento de UI	E:checked	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja marcado (checked).
Pseudo-elemento fragmentos de elemento de UI	E::selection	Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário.
Pseudo classe negação	E:not(s)	Casa com qualquer elemento E que não case com o seletor simples s.
Elemento de combinação irmão em geral	E ~ F	Casa com qualquer elemento F que seja precedido pelo elemento E.

Baixe o arquivo aqui!

para que funcione corretamente, limite no html que apenas os IE’s abaixo do 8 leiam esse arquivo com o seguinte código:

CSS Reset – iguale todos os navegadores com css

Tilo — Tue, 30 Mar 2010 15:33:20 +0000

Um CSS Reset bem estruturado é fundamental para evitar diferenças no html que será renderizado pelo navegador, desligando medidas e espaçamentos que os navegadores não tem como padrão, segue o CSS Reset que eu uso atualmente:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
    content: '';
    content: none;
}

a {
    text-decoration: none;
    color: #171717;
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}


del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr
{
    display: none;
}

para ficar melhor organizado, crie um arquivo Reset.css para esse código dessa forma, quando for começar um projeto novo apenas importe esse arquivo!

Curso para Iniciação em XHTML/CSS UniItalo

Tilo — Thu, 25 Mar 2010 18:06:58 +0000

Há um tempo fiz um curso de XHTML/CSS pra dar uma reciclada e saí triste, afinal, a professora é que precisava de uma reciclada, notei que muita gente quer entrar pro font-end da internet, mas não sabe como, pois bem, daí veio a idéia, por que não dar um curso de XHTML/CSS que seja condizente com a realidade do mercado de trabalho? Entrei em contato com o DEAC da UniItalo e o curso foi aprovado, a faculdade disponibiliza sua estrutura para o curso (Salas, Computadores e Etc…) e fornece o diploma de conclusão de curso. O mais legal é que não precisa ser aluno, o curso é aberto para todos. Seguem informações do curso:

XHTML – CSS (DESENVOLVIMENTO DE WEB SITES)

Profº. Wítalo Rebouças

Datas: 10/04 à 19/06 (sábados)

Horário: 9h às 12h

Investimento: R$ 50,00 mensais

PROGRAMA:
Introdução à Web (história e fundamentos) e os navegadores.
Padrões W3C, WebStandard e Tableless
Elementos em bloco e Elementos em linha
Imagens e Hiperlinks
Formulários
Folha de estilos em cascata
Herança e Hierarquia

Para participar, procure o DEAC da UniItalo!

Adele Silva Pedrão
DEAC
Tel.: 55 11 5051-0127
adele.silva@italo.br

localização da UniItalo:
Avenida João Dias, 2046 – 04724-003‎
Santo Amaro – São Paulo – SP
11 5645-0099‎

Google Maps

Qualquer dúvida sobre o curso me pergunte nos comentários!

Abraços!

Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS

Tilo — Thu, 03 Sep 2009 01:01:41 +0000

Que o IE6 é um lixo, todo mundo sabe, agora, o que você faz quando os browsers que você confia te deixam na mão? Pois é, na ultima semana descobrimos que FF 3.5, Safari 4 e Chrome 3 estão renderizando de forma diferente, ai o que fazer? Bem, minha sugestão era ir ao banheiro, e chorar por 2 minutos sozinho no escuro, porem hoje o Alister chegou com a solução milagrosa um JS muito simples que faz uma coisa bem bacana.

A idéia é colocar uma classe na tag com o nome do navegador utilizado, o JS dá suporte aos seguintes Browsers:

.ie – Internet Explorer (All versions)
.ie8 – Internet Explorer 8.x
.ie7 – Internet Explorer 7.x
.ie6 – Internet Explorer 6.x
.ie5 – Internet Explorer 5.x
.gecko – Mozilla, Firefox (all versions), Camino
.ff2 – Firefox 2
.ff3 – Firefox 3
.opera – Opera (All versions)
.opera8 – Opera 8.x
.opera9 – Opera 9.x
.konqueror – Konqueror
.webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome – Google Chrome

Imagina que agora na herança você tem uma classe com o nome do browser, basta agora você colocar uma classe antes do seletor que você deseja fazer o hack.

Exemplo:

 .ie  .example {
  background-color:  yellow;
  }
  .ie7  .example {
  background-color:  Orange;
  }
  .gecko  .example {
  background-color:  Gray;                              
  }
  .win.gecko  .example {
  background-color:  Red;
  }
  .linux.gecko  .example {
  background-color:  Pink;
  }
  .opera  .example {
  background-color:  Green;
  }
  .konqueror  .example {
  background-color:  Blue;
  }
  .safari  .example {
  background-color:  Black;
  }
  .chrome  .example {
  background-color:  Cyan;
  }
  .example  {
  width:  100px;
  height:  100px;
  border:  1px solid black;
}

Teste

Uma forma simples de fazer, e que evita o uso de hack’s que poluem o código, e atrapalham na validação.

Para baixar o JS
Para ver um exemplo funcionando
Para seguir o Alister no Twitter

Troca de Classe com JavaScript

Tilo — Wed, 10 Jun 2009 16:36:31 +0000

A ideia é que uma div receba um efeito “Hover”, que só é aceito nos browsers superiores ao IE6:

Vamos usar esse HTML como Exemplo:

 Salvar
 Cancelar

Agora crie o CSS:

.bt {
width: 150px;
font: normal 12px/15px 'arial';
text-align: center;
text-decoration: none;
border: solid 1px black;
padding: 5px;
margin: 5px;
color: #fff;
}

.on { background-color: #006600; }
.off { background-color: #990000; }

pra garantir que ele tenho uma aparencia de botão, vou colocar a propriedade “cursor: pointer;” apenas para essa DIV que usaremos como Botão:

div.bt { cursor: pointer; }

o JavaScript entra agora para dar o efeito “Hover”

function LigaDesligaBotoes(botao) {
botao.className = botao.className == "bt off" ? "bt on" : "bt off";
}

pra finalizar basta chamar no Evento onmouseover=”" para quando o maouse está sobre a DIV e onmouseout=”" para quando o mouse sai da DIV:

Salvar
Cancelar

espero ter ajudado.

Exemplo Funcionando

min-height para IE6

Tilo — Thu, 14 May 2009 19:41:56 +0000

Todo Desenvolvedor Front-End já precisou de uma div com uma altura minima (min-height) mais não funcionava no lixo do IE6, pois é agente teve problema com um site de cliente que se naum tivese um minimo ele ficava muito estranho, depois de bater a cabeça na parede e tentar se jogar da janela do prédio sem sucesso , pois estavam todas trancadas depois da crise de 29 (não entendeu a piada? Ouve esse podcast!), fui obrigado a procurar uma solução, e cheguei a essa:


.alturaminima100 {
min-height: 100px;
height:auto !important;
height:100px;
}

o segredo é colocar o min-height para o Firefox e todos os outros Browsers e pro IE6 colocar as duas linhas da sequência:

height:auto !important;
height:100px;

o IE 6 vai desenhar o tamanho minimo e almentar quando receber conteudo, lembrando que sempre a melhor opção é Matar o IE6!

TiloWR » CSS

CSS Personalizado para mudança de orientação no iPhone e iPad

Leia Também:

Manipulando a área de seleção do usuário com CSS para iPhone e iPad

Leia Também:

Otimizando desenvolvimento HTML com Zen-coding e Notepad++ ( Instalação + Dica )

Leia Também:

Livro: Use a Cabeça! Web Design

Leia Também:

Usando Seletores Avançados no IE6 – JavaScript + CSS

Leia Também:

CSS Reset – iguale todos os navegadores com css

Leia Também:

Curso para Iniciação em XHTML/CSS UniItalo

Leia Também:

Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS

Leia Também:

Troca de Classe com JavaScript

Leia Também:

min-height para IE6

Leia Também: