画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
IE8以前でCSS3の表現を使うには
IEの独自拡張filterプロパティでCSS3を再現 前回紹介したCSS3の機能は、Internet Explorer（以下IE）8以下ではサポートされていません。今回は、クロスブラウザなテクニックとして、IEの独自拡張であるfilterプロパティを使ってCSS3の表現を再現する方法を紹介します。 filterプロパティは、テキストや画像を透過させたり、影を付けたり、色を変えたりと、さまざまなフィルタ効果を指定できるIE独自のCSSプロパティです。これらのフィルタ効果を利用すれば、画像やJavaScriptを利用せずに、CSS3のようなドロップシャドウやグラデーションなどの表現ができます。 filterプロパティには、IE 5.5以上で使用できる効果と、IE 4以上で使用できる効果があり、書式がそれぞれ異なりますので注意しましょう。本稿では混同しないように、より広い機能に対応している、IE
CSS3のコーディングに役立つツール8選 – creamu
「8 Best Tools to Make Easy CSS3 Development」という記事で、CSS3のコーディングに役立つツールがまとまっていたのでご紹介します。 CSS3 CSS3ジェネレータ。プレビューしたり対応ブラウザの表示もあります CSS3 Pie IE6,7,8でCSS3のいくつかのプロパティを使用可能にするhtcファイル Layer Styles Photoshopのようなレイヤースタイルをブラウザ上でCSS生成 Cascader HTMLにインラインで書かれたCSSを分割してくれる CSS3 Gradients Generator CSS3のグラデーションジェネレータ CSS3 Cheat Sheet CSS3のチートシート CSS3 Please CSS3をブラウザ上で学習できるサイト CSS3 Button Maker CSS3で作るボタンジェネレータ ref
Webデザイナー向け。CSSを手軽に楽しむ·dabblet, MOONGIFT
dabbletはHTMLとCSSを記述してその結果をリアルタイムで確認できるソフトウェアです。データをGistに保存できます。 dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。 トップページです。上半分が適用されたHTML、下がそのCSSとなっています。 上にマウスを持っていくとメニューが表示されます。 ログインします。GitHubアカウントでログインできます。 色のところにマウスを持っていくとマウスオーバーで色が表示されます。格好いい！ グラデーションだとバルーンもグラデーションがかっています。 HTMLに切り替えて記述もできます。 メニューも色々です。保存しておくこともできます。 表示の配置を変更できます。 重ねて表示もできます。 Gistに保存できます。 dabbletを使うとリアルタイムに記述したスタイルシートがその
基礎知識 | HTML5+CSS3でサイトを作ってみる。
■ はじめに はじめに 只今CSS3の情報を収集中です。 書店などにも、CSS3のみを扱うものがあまりないので、主にネットにて情報を集めています。 誤った記述、優良な情報などがあれば教えて下さい。 このサイトはsafariまたはchromeでご覧下さい。 CSS3とは (いろいろなサイトを見た上での個人的見解なので間違っていれば訂正します。) Webサイトを閲覧するユーザーにとって、情報発信ツールとしてより便利に快適に使用する為に生まれたCSSの進化系だと勝手に解釈しています。 Flashや画像などは、本来はあまりつけない方がよいという考えの元にソースだけで画像に効果を与えたり動かしたりしようというもので、 そういったサイトが重くなる原因のものを極力省くことでより情報をスムーズに伝達できるようにしている。 まだ対応ブラウザが限られているなど弊害があるが、将来的にはほとんどのブラウザはバージ
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
[CSS]これは使ってみたい、繊細で美しいツールチップを実装するチュートリアル
How to create animated tooltips with CSS3 [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーション、擬似要素を使用しているため、Firefox, Chrome, Safariでご覧ください。 Demo 4 最初にぼんやりと大きなツールチップが表示され、縮小とともにはっきりとツールチップを表示します。 実装 HTML ツールチップはリスト要素で、各アイテムはa要素で実装されています。 <ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
-webkit-text-size-adjust｜プロパティ｜CSS HappyLife ZERO
webkit系独自のプロパティで、iPhoneやiPod Touch などで閲覧した際に、横向きにすると縦の時より自動的に文字サイズが大きくなります。 初期値は自動調整になっているので、止めたい場合などに使えます。 プロパティの解説 値 <auto>｜<none>｜<パーセント>｜inherit 初期値 auto 値の解説 <パーセント> 親要素のフォントサイズに対しての割合を%で指定します。 auto OS側でフォントサイズを自動的に調整します。 none 自動調整をしません。 text-size-adjustのサンプル body { -webkit-text-size-adjust: none; }
スマートフォンサイトを考えるときに役立ちそうな情報まとめ | Web Tips Blog
最近、色々とスマートフォンの情報を集めているので、その情報を整理してみました。今後5年でモバイル契約数の過半数に達するという予測もあり、今後急速に対応が進むことと思われます。スマートフォンはＰＣともモバイルとも違うので、また独自のユーザービリティやアクセシビリティを考えないといけないようですね。 私が調べてた中で有用そうな情報をまとめています。スマホサイトの基本からマーケティングデータ、デザイン・構築、その他とカテゴリ別にご紹介します。 スマートフォンサイトの基本に関する情報 そもそもスマートフォンサイトって？という人向けです。最適化ってなんだよ？というところからわかります。ＰＣサイトとはやはり色々違いますね。 Webサイトのスマートフォン対応 7つの基本ルール (2011.1.31 Web担当者Forum) PCサイトや携帯サイトとは異なるノウハウが求められるスマートフォン対応サイトの７
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3の制作をぐっと楽にする厳選20のオンラインツール
[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS
Components · Twitter Bootstrap
CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor
HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン