divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
フォントサイズをremで指定する。（emとの比較） | バシャログ。
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
二本線からバツ印へ
Appleの新ウェブサイト(2014年9月)では狭い画面の時にグローバル・ナビゲーションを出す二本線のアイコンが表示される。それをタッチするとナビゲーションが表示されると同時に回転しながらバツ印に変化する。同じようなアニメーションをCSSでやってみると意外に面倒くさかった。 Demo: Sandwich 二本線は以下のように擬似要素を2つ使って作った。コンテナーに対して幅を半分のサイズ、高さを6%とした。サイズと位置は全て%で統一したので、コンテナーの幅と高さを指定すれば以下のCSSは変えることなくスケールする。 .sandwich::before, .sandwich::after { box-sizing: border-box; display: block; position: absolute; left: 25%; width: 50%; height: 6%; content
Timesheet.js - ガントチャートにも使えそうなHTML5/CSS3製のタイムシートグラフ MOONGIFT
世の中の大抵の物事は時間軸に沿って進められます。歴史はもちろんのこと、プロジェクト管理においてもガントチャートのような時間軸のグラフを使って表現されます。過去の振り返りも未来の予測も時間がキーになってきます。 そういったデータを表現できるライブラリがTimesheet.jsです。特徴的なのはCSS3で作成されている点にあるでしょう。 Timesheet.jsの使い方 こちらが表示例になります。細いバーでスタイリッシュですよね。 JavaScriptは次のようになります。 new Timesheet('timesheet', 2002, 2013, [ ['2002', '09/2002', 'A freaking awesome time', 'lorem'], ['06/2002', '09/2003', 'Some great memories', 'ipsum'], : ['09/2
IE9でCSS3が効かない!?
また問題児のIEのお話 先日、カラーミーショップというASPサービスでショッピングサイト制作の注文があってカスタマイズをしていました。構築中にブラウザチェックをしていたら、Internet Explorer 9で一部表示されていない表現がありました。 CSS3を使用した部分だったのですが、そもそもInternet Explorer 9ではCSS3の主なプロパティは対応しています。 カラーミーショップの構築中に何かミスがあったのかと思い、ソースを丸ごとコピーしてローカルに複製したものをチェックしてみたら、正しく表示されました。 ソースは全てフルパスで書いているので全く同じ。 両者の違いはカラーミーのサーバーにあるかローカルにあるか、の違いのみです。 それでcssの一部に問題が出る事は通常考えられません。 どういう事でしょうか。 ドキュメントモードについて 調べてみると、どうもサーバーのものを
webnonotes.com - webnonotes リソースおよび情報
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の美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック
ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。 スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。 Alternate Fixed & Scroll Backgrounds デモ 実装 ファイルのダウンロード デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。 エフェクトにスクリプトを使用していないので、スクロールも快適です！ 少しスクロールしたところ 写真画像の背景は固定表示で、コンテンツとベタ塗りだけがスクロールします。 実装 HTML HTMLはシンプルで、main要素をラッパーに、div要素で写真画像と
ボーダーに画像を指定する CSS3 プロパティ「border-image」を試してみる | バシャログ。
もういくつ寝るとワールドカップですね。こんにちはLatinです。 さて、スマホサイト制作では CSS3プロパティが特に威力を発揮し、非常に便利ですよね。 そんな CSS3プロパティですが、今回は使った事のない「border-image」プロパティについて色々と調べてみました。 border-imageプロパティとは border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatの各プロパティの値を、まとめて指定することができます。省略された値はそれらの初期の値に設定されます。 画像は上下左右それぞれのボーダー用に４枚必要となるわけ
Sassmatic - CSS3を使ってダイナミックに画像へフィルタ適用
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像の加工処理をやろうとすると、サーバサイドでもJavaScriptでも面倒といった印象がありますよね。特にユーザに選ばせたり、その場でダイナミックにフィルタを適用するなんてのは相当大変です。 そこで使ってみたいのがSassmaticです。SCSSを使ってCSS3だけでフィルタリングを実現するライブラリです。 Sassmaticの使い方 使い方は簡単で、例えば以下のようにHTMLがあったとします。 <div> <img src="img/example.jpg"/> </div> そしてSCSSは以下のように定義します。 @import "compass"; @import "sassmatic.scss"; div { @extend %filter-sanfran; } img
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
[CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic
Slide, Math, Tin, Bomb Magicの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="yourpath/magic.css"> </head> Step 2: 要素にアニメーションを指定 アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。 まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。 $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); 特定の時間、ループでアニメーションさせる時はこんな感じ。 setInt
画像を使わずCSSだけで任意の間隔の破線を描く | 12px.com
cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。 しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。 手順やり方は下記の4つの指定をすれば良いだけです。 破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し
SpinKit - 凄いテクニック。CSS3を使った各種スピナー MOONGIFT
CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 一例。四角いパネルが回転します。 円が次々に大きさを変えていくパターン。 棒の長さが変わっていくパターン。 スクリーンショットでは分かりづらいので動画を撮影しました。 例えば棒の長さが変わるウェーブの場合、次のようなスタイルシート設定になります。 .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; fon
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
擬似要素とCSS3を使ってリストメニューを楽しくデザイン
画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する ネタ元：[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス これを読んでちょっとトリッキーだな。CSS3のFlexboxを利用すれば簡単にできるのにとおもったので紹介しておきます。 次のようなHTMLがあったとして、 <div id="outer"> <div id="inner"></div> </div> 次のようにCSSを指定すると天地左右中央配置が可能です。 #outer{ height:100%; display:-webkit-box; -webkit-box-pack : center; -webkit-box-align : center; } #inner{ width:50%; height:40%; background
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Stopwatch in CSS