HTML5 × CSS3 × jQuery – #20 文字をランダムでカシャカシャ動かしながらテキストを表示させるプラグインを作る
フォントのサイズの単位に何を使ってますか? px? em? それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
CSS3を勉強する際に大切なことは2つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。 今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」は プロパティではなく単位になります。単位表示でおなじみの「em:エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。 フォントサイズの指定を考えてみましょう。 「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。 ただし、IE では「em」を利用すると
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
Simple yet amazing CSS3 border transition effects デモ 実装 デモ デモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。 デモは大きく分けて、3種類です。 デモ下段 最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。 実装 HTML HTMLは非常にシンプルでa要素にclassを指定するだけです。 <a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> ... ... CSS まずは、共通のスタイルシートから。 かわいい車の画像はdate:imageです。 a { background-image: url(data:image/gif;base
画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow
The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」
The slow pace of development in Trident means that webkit is our only real option for an up to date implementation of the flexible box specification. How Flexible Boxes Work So I bet now you’re wondering how exactly a flexible box layout works. Flexible boxes allow for divs to align beside each other (previously we used float: left;), and also for divs to fill up the remaining space (instead of us
All CSS shown corresponds to the elements directly above. The ID/class names are the same as used and all CSS3/progressive enhancement snippets are shown in bold. By Harry Roberts—CSS Wizardry. Please Tweet. Columns: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く