Desenvolvendo Sites

Postagens

Mostrando postagens com o rótulo html 5

Arrastar e Soltar HTML 5

- março 11, 2011

Copie o código abaixo e cole no <body> da sua página de testes. <section id="wrapper"> <header> <h1>Arrastar e Soltar</h1> </header> <style type="text/css"> li { list-style: none; } li a { text-decoration: none; color: #000; margin: 10px; width: 150px; border: 3px dashed #999; background: #eee; padding: 10px; display: block; } *[draggable=true] { -moz-user-select:none; -khtml-user-drag: element; cursor: move; } *:-khtml-drag { background-color: rgba(238,238,238, 0.5); } li a:hover:after { content: ' (drag me)'; } ul { margin-left: 200px; min-height: 300px; } li.over { border-color: #333; background: #ccc; } #bin { background: url(images/bin.jpg) top right no-repeat; height: 250px; width: ...

ContentEditable HTML 5

- março 11, 2011

Todos os elementos com o conjunto de atributos contenteditable terá um contorno cinza quando você passar o mouse sobre ele . Sinta-se livre para editar e alterar seu conteúdo . Estou usando o local de armazenamento para manter as suas alterações. <body> <section id="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section id="editable" contenteditable="true"> <h2>Loren Ipsu</h2> <p>Loren Ipsu</p> <ol> <li>Loren Ipsu</li> <li>Loren Ipsu</li> <li>Loren Ipsu</li> </ol> </section> </article> <script> var editable = document.getElementBy...

Data-* HTML 5

- março 11, 2011

O atributo data-[name] nos elementos agora podem ficar acessíveis diretamente via DOM usando element.dataset.[attr]. Tente abrir o console de edição da web diretamente: element.dataset.foo = 'bar'; "<DIV id=test data-height="short" data-name="via setAttribute">Este elemento...</DIV>"