CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generatorBrowser Compatibility 3.0+ 9+ 3.1+ 10.5+ 4.0+ Mobile Compatibility BlackBerry 6 + iOS 1.0 +
Rotating color cube box with CSS3 animation, transforms and gradients
Spinning spiraling cube using CSS3 3D animation and 3D transforms. Note: Hover the black box or cube to pause the animation. Please view in Safari, iPhone or iPad. If the animation freezes while viewing in wide-screen and at the same time hovering the viewport with the mouse, simply refresh the browser to restart the animation. All images used come from WISE - Multimedia Gallery and are used in th
スマートフォン向けサイトのラジオボタンを良さ気な感じに。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
CSS Gradientにおける"transparent"
1つ前のエントリで「transparentだと完全に透明な黒として扱われるみたい」と書いたが、気になるのでちゃんと調べた。といってもCSS3 Colorの仕様を参照して、現行のブラウザではどうかテスト・ケースを書いて確認しただけだけど。結論としてはChrome (WebKit)とFirefoxでは仕様通りtransparentをrgba(0, 0, 0, 0)と扱っているので、CSSグラデーションでもそれに従った、つまり、グラデーションの途中が黒とブレンドされた色になってしまうので注意が必要になるという話。 Demo: "transparent" keyword in *-gradient() デモでは左から順に、 rgb(153, 204, 255) => rgba(153, 204, 255, 0) rgb(153, 204, 255) => transparent rgb(153,
CSS3 Wizardry - Putting CSS3 and HTML5 to Work
Portable makeup mirrors are essential for those who need to look their best while on the move. Here’s a guide to choosing the best portable makeup mirrors, featuring top picks and insights from LED Mirror World. 1. Compact and Lightweight Design Easy to Carry: Portable makeup mirrors should be compact and lightweight, making them easy to carry in your purse or travel bag. Look for mirrors that off
Pure CSS folded-corner effect – Notes by Nicolas Gallagher
Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds. Demo: Pure CSS folded-corner effect Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+ This post is going to expand on the technique used to create the folded-corner effect that is part of the demo page for Mult
Golden Spirals
As building blocks go, the rectangle is not one to overwhelm the designer with decisions. On the face of it, you have two options: you can set the width, and the height. But despite this apparent simplicity, there are combinations of width and height that can look unbalanced. If a rectangle is too tall and slim, it might appear precarious. If it is not tall enough, it may simply look flat. But lik
The 1140px CSS Grid System - Fluid down to mobil
A 1140px wide, 12 column grid. Fluid all the way down to a mobile version. The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024! Des
How to Create a CSS Progress Bar: In-Depth Guide for 2024
The newest additions to both the HTML and CSS specifications allow web developers to craft beautiful and user-friendly components. Amongst those components, progress/loading bars can contribute to making your website more enjoyable to use for your visitors. This complete front-end web development tutorial will show you how you can learn to create a fancy CSS/HTML5 progress bar. Please note: The or
umbrUI - CSS3 checkbox
Pictos enabled CSS3 checkboxes There was a request, so I tried. The outcome.. no JavaScript, no images and just minimal markup - but a ton of messy CSS3. And only Safari will render it properly. Chrome looks ok, but just with a fake 3D perspective. iOS has some issues with the icons and Firefox, Opera and IE.. well, I haven't tried yet. Read more details or see a screenshot. PS: If you're curious
Loading spinner animation using CSS and WebKit
It’s hard to stifle a smile any time I get a glimpse of the future thanks to WebKit-based browsers like Safari and Chrome (and their mobile counterparts on iOS and Android devices). That happened today when I discovered a way to make an iPhone-style spinner without any images, just CSS. First attempt I have been working on a project that targets mobile WebKit browsers so it was natural to explore
CSS3 Menu. Free CSS Menu Maker
Fancy Drop Down Menus with Pure CSS! Create responsive, mobile-friendly web menus with CSS only. Light, fast, gorgeous menus - completely code-free. FREE download More demos Overview CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amaz
Cubic Bezier Timing Function
Cubic Bezier timing function compatible with -webkit-transition-timing-function In addition to the -webkit-transition-timing-function cubic-bezier(), support for a 100% compatible easing defined by a cubic bezier function as a public domain javascript would be welcome. 0.25, 0.1, 0.25, 1.0 The timing function is specified using a cubic Bezier curve, which is defined by four control points. The fir
IE6〜IE8でもCSS3の機能を使う·CSS3 PIE MOONGIFT
CSS3 PIEはCSS/JavaScript製のオープンソース・ソフトウェア。技術は日々進化しており、新しい機能が追加されている。だが、過去の資産から対応しなければならない場合そうした新しい試みは取り入れることができない。CSS3を使いたくともIE6から対応となれば利用できないだろう。 IEでもCSS3の恩恵を そんな辛い思いを解決してくれるライブラリがCSS3 PIEだ。CSS3自体には多数の機能があるが、一部の処理においてIE6〜IE8でも利用できるようにしてくれる。先進的な取り組みを行っていきたいならば試してみよう。 CSS3 PIEはHTCファイルであり、CSSファイルながらにJScriptを実行できる機能を使っている。対応しているCSS3プロパティはborder-radius、box-shadow、border-image、-pie-background、-pie-watch-
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3 Border Radius Code Generator | Toptal®
HTML5の勉強に役立つチートシートやリファレンスのまとめ
Cross Browser Pure CSS3 Vertical Accordion | W3Avenue
Red Team Design
Sencha Platform: Build & Test Cross-Platform Apps - Sencha | Sencha.com