CSS3 Checkbox Styles
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Simple hover effects with CSS(webkit) filters
Description Simple hover effects created with CSS filters. CSS3 filters are currently supported in WebKit nightlies. Hence the walkthrough only uses the -webkit prefix for applying the filter effects. By default the images have the filter applied. Hovering disables the filter taking the images to the default state in a smooth transition.
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
How to Write an Essay About Happiness: Smart Guide | hellohappy.org
An essay about happiness is among the flexible school tasks that allow you to get creative, making it easy to meet the expected word count. However, with much freedom comes the challenge of gauging what is expected of you in the essay. In a happiness essay, you should highlight your best moments and your definition of happiness. In this article, we have covered the main elements of a happiness ess
画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
Custom Login Form Styling | Codrops
In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness. Hi guys! I’m back with another CSS tutorial! After button switches and drop-down lists, let’s create some forms. In particular, we will be creating login forms. Nowadays, almost every web service, application, game etc. allows (or even requires) user subscription, which me
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
Simple Effects for Drop-Down Lists | Codrops
A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects. Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects. A
CSS 仕様のプロパティ値の構文の読み方 | Unformed Building
値の部分のキーワードは文字通りに記述しなければなりません。また、スラッシュ（/）やコンマ（,）も同様に文字通りに記述しなければなりません。 "<"と">"で囲まれているものはデータ型を表します。基本的にリンクがあるので、その型がどういうものはリンク先の説明を参照すること。 いくつか単語が並置されている場合、その順序通りに全て記述しなければなりません。バー（|）は2つ以上の選択肢の区切りで、それらの中の1つを記述しなければなりません。ダブルバー（||）は2つ以上の選択肢の区切りで、それらの中の1つ以上を記述しなればなりません。これは順不同です。ダブルアンパサンド（&&）は2つ以上の構成要素の区切りで、それらの全てを記述しなければなりません。これは順不同です。ブラケット（[ ]）はグルーピングのために使用されます。優先順は左から順に並置 - ダブルアンパサンド - ダブルバー - バーです。
[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
CSS3の新単位「rem」で文字サイズを分かりやすく指定 [ホームページ作成] All About
CSSで文字サイズを指定する際には、「70%」や「0.7em」のような割合で指定することもできます。これは、「親要素の文字サイズ」を基準にして、表示する文字サイズを指定する方法です。 この方法だと、入れ子構造になっている要素では、構造が深くなればなるほど、文字サイズが意図しない大きさになったり、どれくらいのサイズで表示されるのかが分かりにくくなってしまう問題があります。例えば以下のようにです。 ■リストの項目がどんどん小さくなる？ リストの文字サイズを、以下のようなCSSを使って割合で指定すると、リストの階層が深くなるごとに、文字サイズも変化してしまいます。 ul { font-size: 80%; } /* 0.8emと指定しても同じ */
![CSS3の新単位「rem」で文字サイズを分かりやすく指定 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/f8988ff6da9cb1d0380d85c12d32efa6ad3c1b97/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F4%2F8%2Ftopimg_original.png)
cssPanelMenu
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
border-radius と jQueryプラグイン-jQuery.corner を使って角丸を IE にも簡単に適応させる
border-radius と jQueryプラグイン-jQuery.corner を使って角丸を IE にも簡単に適応させる IE8以下にはjQuery.cornerプラグインを適用するようにして、IE9とその他のブラウザにはborder-radiusで角丸を作れば、実用的にborder-radiusを使っていけそうです。 ！IE9でborder-radiusが適用されない場合 IE9でborder-radiusが適用されない事がありました。調べたら後方互換モードになってしまう事が原因のようです。以下のメタタグをヘッド内へ追加して解決しました。IE9 モードでレンダリングしなさいという指定です。 <meta http-equiv="X-UA-Compatible" content="IE=IE9" /> 以下のように content に IE=edge と指定すると、最新のバージョンで読
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Its snowing!
Show Case | CSS3 Button Generator
IEをHTML5やCSS3に対応させるJSライブラリーまとめ | A!@attrip
CSS3 Form Styling Cheat Sheet | Tiffbits
liffect - effect for lists