CSS3で遊ぼう！縦書きにルビを振ってみたり〜！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お早うございます！デザイナーの王です。 直感ですが、本を読む時、僕は縦書のほうが読みやすいのです。実際、人間の視野って、上下のほうが狭いそうなので、それだけ集中して文字を追いやすいと思います。何より、指でなぞりやすいのがいいｗｗ アルファベット表記が混在する場合は別ですが、基本的に縦書が好きです。 今回はタイトルの通り、ルビ付きの縦書の実装方法を紹介したいと思います。 以下は実際にWeb上で表示されたもののスクリーンショットです。 驚愕の事実！実はIEはバージョン5.5から実装されてました！ 縦書を指定する際に用いるCSS3「writing-mode」というモジュールは、な‥なんと！IE5.5から実装されてました！今はすっかり嫌われ者とされているあのIEは当時では最先端ですね！ 長い間、IE独自実装のため、新参のWeb屋にはあまり知られていない機能ではないでしょうか。 勿論、CSS3の「w
【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ
問題 あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？ 答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。 こちらのスクリプトを使うと、何とかなるでしょう。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> HTML5も！というときは、こちら。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecod
CSS3 Patterns Gallery
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー
最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプルを用意していますのでこちら見ていただければと思います。 ではHTMLから解説していきます。 HTML まずはHTMLから。リンク先のURLは省略しています。 <div id="box"> <div class="boxin"> <a href="#" id="circle1">CSS</a> </div> <div class="boxin"> <a href="#" id="circle2">C
CSSキーフレームアニメーションを使ったバナーの作りかた
広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。 animationプロパティと@keyframes CSS3には【animation】というプロパティがあってこれを使うと【@keyframes】で指定したキーフレームに沿って時間的に他のプロパティを変化させることができます。これによりアニメーション的なものやコマ送り動画（パラパラアニメ）みたいなものが作れます。 …というのを言葉で説明してもイマイチよくわからないと思うのでまずはサンプル成果品をご覧下さい。 ちなみにこのプロパティ、当記事作成段階ではChrome,FireFox,Safariでのみ対応してますのでOperaやIEの方は対応ブラウザでご覧いただきたいと思
CSSahaムービー 花に囲まれた洋館
出題編 以下の画像のどこかが30秒かけて徐々に変化します。さてどこが変わってるでしょうか。IE9以下非対応です、モダンブラウザでご覧ください。 30秒で変化しきってそのあと30秒で逆再生…を無限ループしてますのでじっくり何度も見てればわかるかも。 答えは以下の通り。黒枠にマウスのっけると解答が表示されます。 解答編 前回のが思いのほか気づきにくかった？みたいなのでものっすごくわかりやすいとこ変化させてみました…がさすがにこれは目立ちすぎですね。 ちなみにこれはCSSのキーフレームアニメーション使って作ってます。 問題の画像加工も丁寧にやんないと面白みも半減なのでその辺も頑張んなくちゃ。 んじゃまた。
もうCSS3で悩まない チートシート/リファレンス系サイトまとめ
先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
27 Fresh CSS3 Tutorials
Since the advent of CSS3, designing has become a lot easier and quick. This style sheet language had made designing a lot more fun too and is usually used in combination with JavaScript or jQuery. It allows you to create amazing designs in a hassle free way and efficiently. It is used for stylizing and controlling the layout of your web pages. The possibilities of what you can create using CSS3 ar
jQuery Animations with automatic CSS3 transitions when possible
jquery.animate-enhanced plugin Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ Properties supported: (more to come) left/right : using translate(x, y) or translate3d(x, y, z) top/bottom : using translate(x, y) or translate3d(x, y, z) opacity width height New features in v1.0: Animation 'queue' support (including
モダンなサイトを作成するためのCSS3チュートリアル集:phpspot開発日誌
Latest CSS3 Tutorials For You To Create Modern Websites モダンなサイトを作成するためのCSS3チュートリアル集。 CSS3のテクニックがあつまったチュートリアル集のご紹介。自分に無い知識を取り入れるために参考にできそう。 いつも進んでる感を感じますが、もうずっと進化し続けるんでしょうね。 関連エントリ CSS3でChrome風ウィンドウを作成するチュートリアル 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://ameblo.jp/ca-1pixel/entry-11497184837.html
動作を確認しながらCSS3のkeyframeを使ったアニメーションを作成・「Stylie」 - かちびと.net
CSS3を使った演出テクニックがすごいと話題に | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
cmmntr.com
Lea Verou, "More CSS Secrets: Another 10 things you may not know about CSS" at W3Conf 2013
Loading...
http://www.cmmntr.com/t/ce71317401c3772d6b9acca32c4704c7