横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 （#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/） @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git
[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners
デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <!-- コンテンツ --> </div> </div> Step 2: CSS 「[class*='tucked-corners-']」以下が、4つのコーナーのスタイルです。 .tucked-corners-top { position: relative; width: 500px; min-height: 200px; margin: 100px auto; padding: 20px; background-color: #fff; /* Fallback */ background: linear-gradie
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
可能性を広げる10のスタイルシート | コリス
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に（主に）縮小してフィットさせるため
jQueryとCSS3を使ったPath風の円形メニューサンプル:phpspot開発日誌
Pie Menu (like Path Menu) using jquery and CSS3 by Nikesh Hayaran jQueryとCSS3を使ったPath風の円形メニューサンプル クリックするとアイテムが回転して良い感じに配置されるPathですが、それをjQueryとCSS3で実現できるスクリプトがGithubにて公開されています。 ウェブ上でカスタマイズをすることも可能。 スマートフォン等で使うとオッ、という感じでインパクトを与えられそうですね。 関連エントリ ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 面白いフローティングナビゲーションを実装できる「jQuery Floater」 今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 ページ内スクロールならコレにおま
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ
デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
2011年総まとめ：ウェブ制作に役立つエントリーBest 20
2011年、当サイトでブックマークが多かったエントリーBest 20+αの紹介です。 今年は、HTML5、CSS3、スマートフォン、の3つが目立ったように思います。来年もこの流れは変わらない感じですかね。 コリス [ad#ad-2] 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed また、Twitterではここに掲載していないウェブ関連の話題、クリエイティブなもの、面白いものを数多く紹介しています。 Twitter@colisscom [ad#ad-2] 2011年、ブックマークが多かったエントリー 漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版 美しい日本語を使いたい、ワンランク上のビジネスメールの作法 全653種、商用利用無料、再配布可能な太っ腹のフリーアイコン -Default Icon サイトやブログの運営でよく使いそうな.hta
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
2011年のウェブデザインのトレンドを振り返る
2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 Popular Web Design Trends in 2011: Over 50 Inspiring Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Design Responsive Web Designとは、ユーザーが利用する環境（スクリーンサイズなど）に合わせて最適なレイアウトを提供する方法です。デスクトップ用のブラウザだけでなく、iPhoneなどのスマートフォン、iPadなど、あらゆるデバイスに最適な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
[CSS]CSS3を使うとこんなこともできる！紙を折ったり反らしたするかっこいいエフェクト
知っておくと何かと応用が利くCSS3を使った表現テクニックいろいろ
http://webdesignmatome.com/webdesign/parallax_jp
これは便利！html5・CSS3で作られたGifアニメーション作成サービス ｜https://wp.yat-net.com/name
