[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
これは格好いい。Windows 8のMetro UIをHTML5で再現·Metro UI CSS MOONGIFT
Metro UI CSSはWindows 8のMetro UIをHTML5/CSS3で再現したソフトウェアです。 次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリストです。画像も埋め込めます。 チャットなどで使えそうなリストです。吹き出しもついています。 アプリケーションリストです。 時計などのウィジェットです。 iPadでの表示です。タブレットの方が最適化されています。 左右の移動もできます。 デモ動画です。動きはスムーズです。 動きはかなりスムーズで格好いいです。パネルを押すとちょっとへこんだり、ボタンも多数用意されています。リストをタップして選択し
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
Home
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
How to Make a CSS3 Floating Follow Tab with Rollover Effects
Home / Blog / Web Development / CSS / How to Make a CSS3 Floating Follow Tab with Rollover Effects Recently, a reader asked us how we created our floating orange “follow” tab that appears on the right-hand side of every page on elated.com. It’s quite a nice effect and it also uses some interesting new CSS3 features, so I thought it’d make a good topic for a tutorial! In this tutorial you’ll learn
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
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
blog｜解像度に依存しないモバイルユーザーインターフェース(2010/08/24) | Ext Japan Blog
この記事は8/23に掲載された「Resolution Independent Mobile UI」を訳したものです …または… ピクセルはピクセルじゃないんです。 「SASSとCSS3のメリット（the benefits of SASS and CSS3）」（英語、未訳）という記事の中で、解像度に依存しないユーザーインターフェースを実現するためにSencha Touch内で活用しているテクニックについて簡単に解説しました。今回の記事では、読者がUI開発を行う際に役に立つように、そのテクニックについてもう少し詳しく解説してみたいと思います。 概要 この記事はアダプティブなレイアウトや、レスポンスの良いWebデザインについてのものではありません。この記事は、デザイナーにとって比較的新しい関心事となった、「ピクセル密度」に注目したものです。モバイル環境において、画面の解像度は急速に進化しています
Improve Your CSS Skills With Pure CSS UI Components | W3Avenue
CSS is simple and its very useful. But you will find it even more powerful, if you go beyond its simple use and challenge yourself to do something extra ordinary. JavaScript developers have been doing it for while by dynamically playing with CSS classes, selectors and properties to produce awesome widgets and controls. With increased awareness about some crazy features, CSS3 has in store for us; m
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイデアの宝庫！CSS3を使ったUI表現・テクニック集
CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets | コリス
実用的なスタイルシートのテクニックのまとめ | コリス
Victor Coulon : Mon blog High Tech
Circle Navigation Effect with CSS3
CSS3 Progress Bars | Galen Gidman
https://boxtuffs.com/