css

Oct 24, 2016

指定サイトのCSSを解析してくれるサイトのご紹介

2016-10-24
blog web css 解析

気になるサイトのCSSを解析してくれるサイトCSS Stats GitHubをご紹介したいと思います。

単純にURLを貼り付けるだけで解析してくれるのでとても簡単に解析情報を見ることができます。

⇒公式サイトはこちら

どんなフォントを指定しているとか配色はどんな色にしているとか詳細度のグラフなどあります。曲線がなるべくなだらかなほうがよいそうです。

Read more

Jun 25, 2016

CSSだけでInstagram風のフィルターが使えるcssgramが便利

2016-06-25
blog web css Instagram filter インスタグラム風

インスタグラムはやってますね、私も1年ほど前に登録したもののあまり使っておりません。。。さてそんなインスタグラムの写真フィルターのようなライブラリがありましたのでご紹介します。

簡単に言えば、CSSgramはCSSで画像をInstagramのようなフィルターっぽく編集できるライブラリです。

ここでやっているのは、基本的に画像にグラデーションオーバーレイ、フィルタやブレンド機能を使って似せているような機能です。

簡単にInstagram風のフィルターが使うことができます。

対応ブラウザはIE(インターネットエクスプローラー)は対象外となっております。Google Chrome、Firefox、Opera、Safariが対応しているようです、edgeは対応しているのかな、cssの問題なのでおそらく対応していると思われますが。。

こちらは公式サイトです。⇒CSSgram test sheet

Read more

May 21, 2016

CSShakeの使い方と紹介

2016-05-21
web blog css shake シェイク

今回はブルブル震えて注目してしまう動きCSShakeをご紹介します。

jQueryのプラグイン jRumble とかでもありますが今回は簡単に導入できて実装できるCSSでのご紹介です。

CSSShake公式サイトからダウンロードして使います。こちらの公式サイトにも使い方は載っておりますが、簡単に説明します。

インストールはnpmかbowerよりできます。公式サイトからダウンロードしても良いです。

Read more

May 7, 2016

HOVER.CSSの使い方

2016-05-07
web blog css hover

今回は手軽にhoverアニメーションできるhover.cssのご紹介です。hoverしたら動きが実装できます。

以前 CSS3でのアニメーションライブラリanimate.cssの使い方のご紹介しましたが、今回はhoverに特化していますのでcssを読み込んでクラスを付加するだけでhoverするときに限りますが簡単にアニメーション実装できます。

Hover.css公式サイトにもサンプルがあります。デモページの内容はこちらの公式サイトと同じです。

Read more

Apr 9, 2016

CSS3でのアニメーションライブラリanimate.cssの使い方

2016-04-09
web css animate アニメーション

ウェブ上でも最近は動きのある要素を取り入れているサイトも多くなってきました。アニメーション動作を取り入れる場合はJavaScript(主にjQuery)が多いのですが、実はCSSだけでも動きのある要素を出すことも出来るんです。まずは公式サイトで動きを確認します。いろいろ出来ますね。

CSS3になって出来る要素がだいぶ増えてきました。JavaScriptでしか出来なかったこともCSSだけで出来る要素も増えてきたので下記のようなブログなどをチェックしてみると良いでしょう。

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

CSS3は要素によってはまだ対応していないブラウザもありますので HTML5/CSS3ブラウザ対応状況確認のサイトなどでどのブラウザ対応状況を確認してみると良いです。

Read more

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

最近の投稿

アイキャッチ
速さ・時間・距離の計算

さて、最近は寒くなってきましたね。日本海側は大雪で大変な状態になっています。 外にも出られずちょっとした運動もしずらいですね。室内運動かジムに行くということになりますね。 そんなことを考えて...

14 Jan 2017

アイキャッチ
複数のチャットサービスをまとめてひとつで管理する方法

GmailやOutlook、Slackやチャットワークなどを使っている方も多いかと思います、このサービスを一元管理するアプリがありました。その名もFranz(フランツ)です。⇒公式サイト チャ...

07 Jan 2017

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は天候も良く人も多かった気がしますね。 勝田神社の夜中に行って参りました。大晦日深夜の初詣は何十年ぶりのことでしょ...

04 Jan 2017

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/30〜1/3までお休みでございます。 1/4日から営業開始いたします。 よろしくお願いします。 年末年始の営業時間 12/30-1/3 休日...

29 Dec 2016

アイキャッチ
いざというときのためのバックアップ

皆さん、こんにちは。クリスマスも終わり、あっという間に年末ですね。 データ整理とバックアップしてますか? 私はやっておりますが、先日不幸なことになりました。NASが故障してさらに中に入っている...

25 Dec 2016

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

フッターイメージ