20 Fresh CSS3 Tutorials - Web Design Ledger
The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Designers are using these technologies to express more creativity in design production and make user experience richer. In this post today, I would like to share with you so
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
[CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック
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
[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect
デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 2枚目の画像 [ad#ad-2] 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div class="cn-nav"> <a href="#" class="cn-nav-prev"> <span>Previous</span> <div style="background-image:url(../images/thumbs/1.jpg);"></div> </a> <a href="#" class="cn-nav-next"> <span>Next</
[CSS]CSS3アニメーションでブラー効果をかっこよく使ったナビゲーションを実装するチュートリアル
アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。 Blur Menu with CSS3 Transitions [ad#ad-2] 7つのデモ 7つのデモの実装 7つのデモ デモは7種類あり、共通するアイデアはホバーしている時に他のアイテムをブラーでぼんやりとさせ、そのアイテム自体を強調することです。 デモページ 対応ブラウザは、Chrome, Safari, Firefox, Operaです。 IEは、IE9でまだテキストシャドウやアニメーションはサポートされていません。 7つのデモの実装 HTML メニューはすべてリスト要素で実装しており、固定幅を指定します。 <ul class="bmenu"> <li><a href="#">About</a></li> <li><a href="#
Opera News
AI, Gaming, Opera GX Aria gets Buffed in Opera GX July 1st, 2024 Aria gets buffed in Opera GX. New features are being added to improve Aria's capabilities. Desktop Opera unveils Opera One R2 in Developer June 26th, 2024 Opera unveils Opera One R2 for early testing. This is a new version of the Opera One browser released in... Desktop Opera One now available for Windows on Arm June 13th, 2024 Opera
JSNote - IEをCSS3に対応させるCSS3 PIEのJavaScript版を使う
JSNote 読んですぐに使えるJavaScript・HTML・CSSのタイプを書いています。 HomeLatest Entries左、中、右クリックのカスタムイベントを追加するjQueryプラグイン配列の任意の位置に値を代入したり削除したりするJavaScriptだけでローカルの画像をBase64エンコードするIEをCSS3に対応させるCSS3 PIEのJavaScript版を使うリストをページ分けしてページャーを付けるjQueryプラグインArchives2012-012011-122011-112011-02すべての記事一覧CategoriesJavaScriptjQueryブログその他CSSRSS IEをCSS3に対応させるのにCSS3 PIE使いたいけど、htcファイルってFC2ブログにアップロードできないし、htcって何か気持ち悪いのであんまり使いたくないって人のためのタイプで
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
明日を生きるマークアップエンジニアのためのHTML5フレームワーク色々 | バンクーバーのうぇぶ屋
HTML5で書かれたサイトも多くなってきましたねー。僕はまだまだ勉強段階ですが、やっぱりHTML5のフレームワークなんかもたくさん出るんだろうなぁと思ってたら、まさに僕の理想を見つけたので、おすすめのフレームワーク含めていくつかご紹介（DLフォルダの中身も軽く紹介）。中にはフレームワークとしてではなく、勉強教材としても使えそうな物もあって楽しいですよ。 G5 Framework 個人サイトなんかから使えそうな使いやすいフレームワーク。ＤＬしてフォルダ開くと下のようなフォルダ構造。うーん。シンプルだし、分かりやすい。なかなか好印象っす。しかし、なぜindexがphpなんですか？ あ、でもCSS3 Pie（IE6-8対応のCSS3デコレーションキット的な奴）を使ってるんですね。デフォで使ってあるのはうれしーっす先輩。 52 framework こいつもクロスブラウザ対応をうたってるＨＴＭＬ5と
Creative CSS3 Animation Menus | Codrops
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements. Being in the mood for experimenting with CSS3
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Learn CSS Layout
This site teaches the CSS fundamentals that are used in any website's layout. I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out this tutorial. Otherwise, let's see if we can save you some fury on
もうチュートリアル記事には -webkit-gradient() 書かなくてもいいんじゃないかな - {u:b}
Webkit 系の主要ブラウザがサポートする CSS グラデーションの構文の話です。 -webkit-gradient(linear[radial], ...) Google Chrome 4.0〜9.0 Safari 4.0〜5.0 iOS Safari 4.0.4〜5.0 (iOS 3.2〜4.2.1) Android 2.1〜3.0 -webkit-linear[radial]-gradient(...) Google Chrome 10.0〜 Safari 5.1〜 iOS Safari 5.1〜 (iOS 5.0〜) Android 4.0〜 http://caniuse.com/css-gradients Chrome 10 が出たのは2011年3月9日 Safari 5.1 が出たのは2011年7月20日 iOS 5 が出たのは2011年10月12日 最初の Android
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-lab.jp
not found
Stylie
Experiment 500 by Google Data Arts Team - Experiments with Google
