Better Interface Design: Logins, Menus, Toggles And Other Fancy Modules — Smashing Magazine
In this article, Cosima Mielke has done some digging around and found some interesting UI demos and concepts for you to indulge in and build upon: dialog and modal windows, signup and login screens, navigation and menus, sliders and toggles. Small bits of delight that make the user’s interaction with a website or app more pleasant. Enjoy! CodePen has become the playground for developers. The sandb
Webフォントを使ってみる(2016年版) ｜ Tips Note by TAM
ここ最近、古い IE のサポートが公式に終了するなど、 対応ブラウザに大きな変化がありましたので調べなおしてみました。 ［参照］2012.03.15「Webフォントを使ってみる」Tips Note https://www.tam-tam.co.jp/tipsnote/html_css/post59.html ［目次］ ■まずは、Webフォントについておさらい ■かんたん！らくらく設定版 ■ダウンロード版 ■おまけ（フォント周りの調整） まずは、Webフォントについておさらい 【メリット】 ・ユーザーの環境に依存せず、インストールされていないフォントも表示できる。 ・画像ではなくテキストなので、検索エンジンのクローラーに情報を拾ってもらえる。（SEO的に有利） ・修正、更新が簡単。（いちいちPhotoshopなどを起動しなくていい！） 【デメリット】 ・Webフォントのデータを読み込むための
input[type=file]をCSSで加工する – ハック｜オープンソース高速化AMI「kousoku AWS」
表示サンプルはこちら。 http://jsdo.it/goto_jp/rWcL HTMLはこちら。 <div class="uploadButton"> ファイルを選択 <input type="file" onchange="uv.style.display='inline-block'; uv.value = this.value;" /> <input type="text" id="uv" class="uploadValue" disabled /> </div> CSSはこちら。 .uploadButton { display:inline-block; position:relative; overflow:hidden; border-radius:3px; background:#099; color:#fff; text-align:center; padding:10
![input[type=file]をCSSで加工する – ハック｜オープンソース高速化AMI「kousoku AWS」](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c4eb317df94471d281467b73d160f3f0f481f5b/height=288;version=1;width=512/http%3A%2F%2Faws.aipo.com%2Fcommon%2Fsource%2Fimg%2Fog_image.png)
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
Firefoxでopacityした要素をhoverすると、1pxずれるバグの対処法 - Qiita
題名のとおりなんですけど、ちょっとハマったのでメモ。 どういうこと？ a要素で囲んだimg要素を、ロールオーバーをopacityで操作することってあると思うんですが、他のブラウザでは問題ないけど、Firefoxだけhoverすると何故か1pxずれる問題があります。
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
テキストハイライト（選択）時の背景色を変える｜LabPad （ラボパッド）
demo この箇所のテキスト部分を選択してみてください。通常このサイトではグレー背景に黒文字のハイライトとなりますが、赤色背景に白文字のハイライトになっているかと思います。 memo 作業内容 CSS3から定義された"selection"という擬似要素を使っています。なお、"selection"自体は突然CSS3のセレクタから削除されたそうですが、とりあえず下記の記述で適用はされます。 --- CSSはこんな感じ --- ::selection{ /* Safari and Opera */ background:#ff0000; color:#000; } ::-moz-selection{ /* Firefox */ background:#ff0000; color:#fff; } ちなみにこんなのもありました。以下の英文をハイライトすると画像が浮かんできます。Text + Imag
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
[CSS]バーはブラウザ幅いっぱいに、テキストは読みやすい幅にするスタイルシート
バーはブラウザの幅いっぱい（左右・左のみ・右のみ）に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。 ブラウザの幅を狭くしたキャプチャ 以下は各ポイントを意訳したものです。 まず、ブロックレベルのエレメントの幅は当然、親エレメントと同じ幅になります。単純に<body>直下に<h1>を配置すれば、自動的にブラウザの幅いっぱいになるのではないか、と思うでしょう。 しかし、それはテキスト部分もブラウザの幅いっぱいになってしまい、それは読みやすいものではありません。下記のように、バーはブラウザ幅いっぱいで、テキストは読みやすい幅になっているのが理想です。
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート
画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。 CSS play - F.a.S.T - Fit and Shrink Technique デモ サイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。 上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。 対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。 IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
CSSをすっきりきれいに整形してくれる『ProCSSor』 | 100SHIKI
Loading...
[CSS]サイズが不明なボックスいっぱいに背景画像を表示するスタイルシート
CSS Gallery Submission Made easy