サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
cssdeck.com
Here's a simple CSS tree menu framework. Based on this tutorial, but here I made it with pure CSS using pseudo element :before and/or :after to make the branches. Hope this will be useful. Update 2015-13-09: Now with em units.
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login This is a SVG made up of individual lines so that the animation starts from multiple places, rather than looking as though its a single line. This utilises stroke-dashoffset and stroke-dasharray to achieve the results. This would be a good load screen or you could have it as an animation when the page lo
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login An exercise in the futile but fun. This is a playable version of Pong complete with working scoring system -- built entirely with CSS. Not a line a Javascript to be seen. All game logic is built using hover state and sibling selectors. PS: It's not quite finished but it's close. ISSUES: I'd love to limit
A Blonde, A brunette, A woman in a red dress. An explaination of how this => http://timelessname.com/sandbox/matrix.html is achieved. Cleaned up and put in some whitespace so the code is readable.
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login Using CSS Filters we can apply some crazy awesome visual effects to almost any DOM element like image, video, body, etc. In this demo we'll go through all the 10 functions that the filter property supports - blur - Value of the blur radius is a CSS length (like you use in box or text shadow) but does not
Based on Eric Meyer’s Reset CSS, the HTML5 Reset Stylesheet by HTML5Doctor.com aims to provide a basis for any websites making use of the new HTML 5 attributes, while improving in some areas and also removing support for deprecated HTML 4 elements. Click to jump straight to the code, or keep reading for some explanations and discussion… What’s New? The HTML5 Reset Stylesheet begins by removing sup
Page is Under Review The lab is awaiting moderator review and approval.
Collection of Awesome CSS and JS Creations to help out frontend developers and designers.
Fork More New Full Screen Share Link Full Screen Result Embed on your webpage (blogs, articles, etc.) Share on Twitter | Share on Facebook ↓ ♥ ∞ ↺ Login Help This is a recreation of Doodle Jump that originally comes for Android and iOS devices. This game is created using awesome HTML5 API and Canvas. It does not have all of the features that the original game has (for now) like Monsters, Power ups
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login This is the classic 8-bit snake game created using HTML5. This game also includes some 8-bit music and sounds while maintaining the old classic fun. Here are some of the features of the game: 8 Bit graphics just like the classic one. Speed of the snake increases as you progress. Classic 8-Bit Retro Music
Html <canvas id="canvas"></canvas> <audio preload="true" id="collide"> <source src="http://dl.dropbox.com/u/26141789/canvas/pingpong/Metal%20Cling%20-%20Hit.mp3" /> <source src="http://dl.dropbox.com/u/26141789/canvas/pingpong/Metal%20Cling%20-%20Hit.wav" /> </audio> Javascript // RequestAnimFrame: a browser API for getting smooth animations window.requestAnimFrame = (function(){ return window.req
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login A very nice collection of checkboxes made purely in CSS3 by me. The checkboxes you see above are nothing but the labels for their respective inputs while the checkbox inputs are hidden because these have a very limited CSS styling support. These checkboxes will work in all the major browsers except Inter
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login A very cool and jumping set of smileys created (and animated) purely in CSS3. This is the work of Joel Warren. He used just one div tag to create one smiley. The expressions are just characters like :) ;) :D that are beautified by using "Comic Sans" as the font. Basically, the characters for the expressi
Blog New Fork Share Full Screen Result Embed on your webpage (blogs, articles, etc.) | | Login Apple is known for its minimal and elegant design. Here, Dustin Cartwright created the Apple Wireless Keyboard with only css and html (no images!). Using some new and old techniques he created the shadows, gradients, depth effects, and the positioning/sizing of the keys. The keys on this keyboard (again,
Crazy Effects with Border Transitions by ksk1015. Pretty basic CSS3 code, but did you ever realize that Border Transitions would produce such effects ?! Update: The effect does not seem to work well in non-webkit based browsers. So view this item in Webkit Based browsers like Google Chrome, Safari, etc.
One of the pioneers of the CSS Reset method, Eric Meyer, created a Reset stylesheet that is still in use on millions of websites today. Most people use it in its unedited form, despite Meyer’s recommendation against this: The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that
<input type="text" placeholder="Start typing to begin searching." /> The only new bit is the placeholder attribute, but it results in this: I love placeholder text because it can help make large, complex forms easier to navigate. What better place to explain the requirements of an input field than right inside the field itself? And on short forms (like a search bar), placeholder text could be used
I recently ran into a bug in Firefox and Opera when I tried to set the line height of text inside a button (which affects input “submit” buttons as well as the HTML button tag). The bug? The line height can’t be changed! input#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bold 12px Arial, Helvetica, sans-serif; line-height: 50px; } In a perfect world, this code would
次のページ
このページを最初にブックマークしてみませんか？
『HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
