Posts da categoria CSS

qtip - Tooltip com CSS

Mais uma ferramenta de tooltip com CSS e javascript.

qtip tooltip

http://solardreamstudios.com/learn/css/qtip

jqModal - Modal window

Modal window é uma janela que você pode mostrar notícias, textos, etc no navegador.

Não como uma nova janela; e sim através de um div (veja imagem abaixo).

Utiliza HTML, CSS e jQuery.

Modal Window

http://dev.iceburg.net/jquery/jqModal/

Supernote - Tooltip

Aplicação de tooltip focada na melhora da acessibilidade. Utiliza CSS e javascript, tem eventos onmousehover e onclick, permite definir tempo e efeitos, código rápido e pequeno.

Tooltip Acessibilidade

http://www.twinhelix.com/dhtml/supernote/

Checklists - Formulários

Deixa os formulários mais acessíveis e melhora sua usabilidade.

Checklists

http://c82.net/samples/checklist-samples.html

Formulário com Ajuda através de Popup em div

Você clica num botão e aparece um div abaixo do input explicando como preencher aquele campo.

Form Ajuda

http://juicystudio.com/article/form-help-without-popups.html

Formulários adaptados com imagens

Niceforms é um javascript que permite customizar formulários web.

O resultado é um formulário diferente em termos visuais, onde utilizamos imagens para substituir radio buttons, checkbox, textarea e campos texto.

niceforms

Site: http://www.emblematiq.com/projects/niceforms/

Demo: http://www.emblematiq.com/niceforms/v10/niceforms.html

Licença: Creative Commons Attribution-Share Alike 3.0 Unported License.

Formulários Formatados com CSS

Apesar de meio pesado, é uma interessante solução. Utiliza imagens para textarea, inputs, checkbox e radio.

finalproduct

Site: http://www.agavegroup.com/?p=35

Demo: http://www.agavegroup.com/agWork/prettyForms/

Licença: Não especificada.

Formulários na Horizontal

Formulários na horizontal. Nesse exemplo, utiliza-se etapas (1, 2 e 3). Semanticamente corretos com fieldsets, legends, label e estilos CSS.

Form Horizontal

Site: http://www.skyrocket.be/2006/01/09/semantic-horizontal-forms/

Demo: http://www.skyrocket.be/lab/semantic_horizontal_form.html

Licença: Não especificada.

Formulários Acessíveis com CSS

Formulários sempre consomem um bom tempo com formatação. Essa iniciativa deixa label e input na horizontal. Não utiliza tabelas, só CSS.

Form Horizontal

Site: http://www.alistapart.com/articles/prettyaccessibleforms

Demo: http://www.alistapart.com/d/prettyaccessibleforms/example_3/

Licença: Não especificada.

Bubble Tooltip com CSS

Tooltips simples utilizando somente CSS. Pouco código e muita funcionalidade.

css-bubble

Site: http://trentrichardson.com/examples/csstooltips/

Demo: http://trentrichardson.com/examples/csstooltips/

Licença: Não especificada.