動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Creative Button Styles | Codrops
Some creative and modern button styles and effects for your inspiration. Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of Ja
新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css
Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。 ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
3 Cool Techniques For Your Next Web Design Project
2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか？」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います！ ↑私が10年以上利用している会計ソフト！ 準備：分析＆実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLやCSSが確
CSS3＆jQueryでサイトサムネイルをDock風にするチュートリアル:phpspot開発日誌
Growing Thumbnails Portfolio | Tutorialzine CSS3＆jQueryでサイトサムネイルをDock風にするチュートリアル。 サイトサムネイルにカーソルを合わせるとサムネイルが拡大されるようなパーツを作れます。 なんだ、これまでのDockスクリプトと同じじゃないかと思うかもしれませんが、サイトサムネイルの下にあるトレイっぽいものがCSSでデザインされており、これも同時に拡大されるところがテクってます。 Chromeで試したところ、びよーんと、動きもなめらか スクリプトのDLも可能なのでそのまま利用できます 関連エントリ CSSだけで実現したMac OS X風ドック「CSS Dock (V2)」 Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
IE6～IE8でCSS3が使える「CSS3 PIE 1.0.0」登場
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. 15日(米国時間)、「CSS3 PIE」初のメジャーバージョンとなる「CSS3 PIE 1.0.0」が公開された。CSS3 PIEは、CSSレベル3に対応していないIE 6/IE 7/IE 8に対して、いくつかのCSS3プロパティをレンダリングする機能を提供するプログラム。Apache License v2およびGPL v2のデュアルライセンスのもとオープンソースで公開されている。 CSS3 PIEは、既存のCSSスタイルシートに「behavior: url(PIE.htc);」の1行を追加するだけでCSS3が利用できるようになるユーティリティツール。現在サポートされているCSS3
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
howtohp.com - howtohp リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
howtohp.com - howtohp リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3の制作をぐっと楽にする厳選20のオンラインツール
html5-memo.com
csspop.com
CSSで三角を作る方法 - Qiita
これからのWeb制作に使える、HTML5,CSS3の対応表や各種リソース
タブやフォームなどのUIもレスポンシブWebデザインに対応させた960グリッドシステム搭載のCSSフレームワーク・Gumby Framework
Archive — Acko.net
CSS3で追加された新機能一覧と応用サンプル | サイブリッジラボブログ
http://japan.internet.com/webtech/20111130/1.html?rss