動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
イラストやWeb制作に使えるフリー素材を紹介 | 9search
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.
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
Internet Explorer 8を最低限のブラウザとした場合に使ってはいけないCSSや注意を要するCSSのまとめ - memo.yomukaku.net
「Internet Explorer 6, 7, 8, 9におけるCSS 2.1およびCSS 3への準拠・対応状況のまとめ」にある一覧表のとおり、2006年10月公開のInternet Explorer 7はCSS 3に対応していない他、CSS 2.1にも準拠していない部分が少なく有りません。 例えばInternet Explorer 7は、今日多く使われていると思われる以下のようなCSSに対応していないようです。 :focus :after :before list-style-type（部分対応） background-position（部分対応） font-weight（部分対応） border-collapse（部分対応） top（部分対応） right（部分対応） z-index（部分対応） inherit IEのCSS2.1、CSS3対応状況一覧表をみかえ
画面の下部にフッターを表示する
画面の下部にフッターを表示する 動的サイトで画面の下部にフッターを表示する事は非常に困難です。 さまざまなパターンを想定してフッターを設定することになります。 コンテンツ領域がブラウザの高さより高い場合 この場合、通常の方法で問題なく表示できます。 サンプル（コンテンツのheight:1000px） ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します サンプル（コンテンツのheight:100px） コンテンツ領域がブラウザの高さより低い場合 この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。 サンプル ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示
[CSS]CSS3アニメーションを使ったスタイルシートのテクニックのまとめ
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
digitalskill.jp
Buy this domain. digitalskill.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
Flash素材の設置方法
OBJECTタグとEMBEDタグの使用について OBJECTタグを使用した場合の例は次のようになります。 <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="400" HEIGHT="50" id="fi1" ALIGN=""> <PARAM NAME=movie VALUE="fi1.swf"> <PARAM NAME=loop VALUE=true> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#aaaaff> </OBJECT>
はてブやBuzzurlなど日本のブックマークサイトの無料アイコン配布サイト・sbm-garden - かちびと.net
なかなか珍しいなと思ってご紹介。 はてブやLivedoorクリップ、Buzzurl などなど、国産のソーシャルブック マークサイトのアイコンを専門に配布 するsbm-gardenというサイト。個人 でも商用でも利用可能だそうです。 国内でこの手のアイコンを配布するサイトは、殆ど見かけないので覚えておいて損はないかも。これからまだまだ増えてくれそうですしね。 Good Design Webの方のサイトですよ。はてなブックマーク、LivedoorクリップやBuzzurl、Yahoo!、Newsing、Niftyクリップなどのアイコンのセットです。商用も無料で使えるそうですよ。 例えば以下のようなアイコンが配布されています。 Freehand_Cube 手書き風の3Dアイコン。 Wood_Convex 木目アイコン。 OldPaper グランジ。 Square_lightgray シンプル。 O
フリー素材web*citron - シンプルな壁紙,アイコン,テンプレート
シンプル、軽い、ほんのり可愛い。無料で使えるフリー素材とテンプレート。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker
ケータイFlash事始 « |アプリ★ゲット
わかばマークのMacの備忘録 : JPG と GIF と PNG
オープンソースのHTMLエディター「BlueGriffon」v1.1が公開
Resistenza. Graphic Design, Branding and Websites.
スマートフォンサイトを10分で作成