第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript
コーディングコンテンストについて 4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。 CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。 入賞した作品 応募したのは以下のHTMLになります。 Movable Type 5 他のcssファイル、画像ファイルは0ファイルなので、このindex.htmlだけを応募しました。 ちなみに1枚にする前のファイルはこちらにまとめてあります。 詳細は続きから。 前提みたいなもの ちゃんと手を付けたのが締め切り日の13時付近で、まあ11時間くらいあれば終わるだろうなんて思っていたら… まったく持って終わらない
3D Text Tower | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Have you seen David Desandro’s site? It’s pretty slick. His footer is especially fun: The technique is clever in it’s simplicity. Let’s take a look. Multiple Text Shadows The major empowering concept here is the CSS3 property text-shadow. Typically it’s like this: .shadow { text-shadow: 2px
Opera Logo with CSS · David DeSandro
Opera Logo with CSS The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers. Border Radius In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features
Cross Browser CSS Transforms – even in IE
Updates: (March 7, 2013) The examples on this page were missing due to a migration issue when upgrading my blogging software. Thanks to James Wages for pointing this out. (August 11, 2012) The skew() transform no longer works in Firefox, due to not being in the CSS3 specification anymore. Developers must use the skewX() and skewY() functions instead. The examples in cssSandaper, as well as this do
Simulate Realism with CSS3 - Inspect Element
CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so. However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can crea
The Basics of CSS3 - Web Designer Wall
Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know. RGBA The first three values are RGB color values and the last value is the level of the transparency (0 = transpa
ウィンドウサイズによってスタイルシートを変える - builder by ZDNet Japan
ウェブページを表示するブラウザのウィンドウサイズは、閲覧環境によってさまざまだ。特定のウィンドウサイズを想定してウェブページを作成すると、それ以外の大きさのウィンドウではコンテンツが読みづらくなるなどの問題が発生する。最近ではiPhoneのような携帯端末からのアクセスも考慮する必要性が出てきているが、サイズ別にページを用意するのは制作にも管理にも手間がかかってしまう。 こんなとき、CSS3の「Media Query（メディアクエリ）」の機能を利用すれば、ウィンドウサイズに応じて適用するスタイルシートを切り替えて、ユーザーの環境ごとに最適なデザインでページを表示することができる。 現在、Media Queryの規格はW3Cの勧告候補（Candidate Recommendation）となっており、Firefox 3.5以上、Safari、Google Chrome、Operaが対応している。
CSS3 Gradient Generator
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
CSS3 Examples and Best Practices - Web Designer Wall
The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. Check out my previous post on "CSS3 Animation Demos" to see the things that you can do with it. However, don’t get too excited so soon because it is not fully supported by all browsers yet. But this doesn’t mean you shouldn’t use it at all. So, when should you use CSS3 new features? Well, co
47 Amazing CSS3 Animation Demos - Web Designer Wall
Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy! CSS3 Clock With jQuer
50 Cool Javascript Examples And CSS3 Tricks — Smashing Magazine
CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. Although the browser support of CSS 3 is limited, many designers across the globe experiment with new powerf
CSS3 Cheat Sheet (PDF) — Smashing Magazine
Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card. Just last week we released an extensive printable
CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile | Reticulating Splines
Sean Martell Creative Lead at Mozilla, Transmogrifier of vectors, animator of GIFs, CSS eyebrow waggler, ketchup chip expert, lover of thick cut bacon. Creative Process CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile Working on the Fennec UI has been an amazing experience. Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphic
CSS3 animations and their jQuery equivalents
As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too. At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you
Table of CSS3 border-radius Compliance « Muddled Ramblings and Half-Baked Ideas
Content last updated Aug 17, 2011 – First impression of Firefox 6. NOTE: I’m updating the ol’ blog to honor its 1,000,003-word birthday, and some pages require individual attention. This is one of those pages. Please pardon the mess. border-radius seems to be a hot topic these days, what with CSS3 including it and some broswer vendors already implementing it. I just think it looks nice. I original
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20 Local Web HTML5 Media Video Player jQuery Plugin Free
SitePoint CSS Reference
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集
11 Classic CSS Techniques Made Simple with CSS3
Better Image Preloading with CSS3 • Perishable Press