Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい
明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！ フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えます。CSSフィルターを使えば、画像のぼかし、明るさ・彩度の調整などのほかにもいろいろなことができます。CSSフィルターは単独で使っても、組み合わせて使ってもOKです。次の構文を使ってCSSにフィルターを追加できます。 filter: <filter-function> [<filter-function>]* | none では、CSSフィルターを簡単に説明します。 明るさ 明るさ（Brightn
CSSまたはjQueryを使って、ホバー時に一瞬だけ点滅するエフェクトを実装する方法 - NxWorld
実際の動きは以下デモで確認できます。 CSSで実装する CSSで実装したい場合はopacityを使った透過処理をanimation, @keyframesを使ったアニメーションと組み合わせる形で実装できます。 a:hover { opacity: 1; -webkit-animation-duration: 1s; -webkit-animation-name: flash; animation-duration: 1s; animation-name: flash; } @-webkit-keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } 上記を記述することで、a要素にホバーした時に一瞬だけ点滅す
CSS3による強調表示（テキスト上部にマークを表示） | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website
none filled dot filled circle filled double-circle filled triangle filled sesame open dot open circle open double-circle open triangle open sesame original p.sample { -webkit-text-emphasis:none; -moz-text-emphasis:none; text-emphasis:none; } p.sample { -webkit-text-emphasis:filled dot #f00; -moz-text-emphasis:filled dot #f00; text-emphasis:filled dot #f00; } p.sample { -webkit-text-emphasis:filled
コピペでできる！cssとhtmlのみで画像のホバー時のいい感じのエフェクト10選 - copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
cssとhtmlのみで画像のホバー時のいい感じのエフェクトを集めました。 画像の雰囲気に合わせてエフェクトを組み合わせると、よりいい感じになります。 ベンダープレフィックスについては適宜外してください。 また、アニメーションは「transition-timing-function」を設定することで、時間ごとの変化量を変更することができます。 カスタム値の「cubic-bezier()」を作るのに参考になるサイト Ceaser – CSS Easing Animation Tool – Matthew Lein Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equa
マウスオーバーエフェクト
ボタンや画像にカーソルを乗せた時の反応って大事ですよね。リンクするエリアにカーソルを合わせた時に、カーソルが指のアイコンに変わったり、テキストの色が変わったりすれば、カーソルが乗ったという事が認識しやすくなります:)。 それに加えて、ちょっとしたエフェクトがあれば、温度や感触や、世界観まで伝えられるかも。 ふわっとする 下のサンプルみたく、:hoverを使ってスタイルを指定しておけば、カーソルが乗った時に、そのスタイルが適用されます。 けどそれだけだと、カチッと切り替わるだけ。 a:hover { color: #dc6688; text-decoration: inherit; } サイトの雰囲気にもよるけれど、もちょっとだけ柔らかい印象にしたいなって時には、ふわっとするとよいかもです。文字色の変わり方と、下線の消え方を滑らかにすることで、ふわっとした感じになります:)。 この切り替わり
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
[CSS]アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation
classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。 ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。 Font Awesome Animation 左はアニメーションのトリガーをページのロード時、右はホバー時にしたものです。 Font Awesome Animationの使い方 Step 1: 外部ファイル Font Awesomeと当スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css"> Step 2: HTML まずは、Font
CSSでマウスホバー時に文字列を表示するエフェクト – いつか誰かの役に立つかもしれないweb制作屋の備忘録
html <div class="sample1"> <img src="./fruit.jpg" alt="フルーツ寄せ集め" /> <div class="mask"> <div class="caption">It's fresh !</div> </div> </div> css .sample1 { width: 280px; height: 188px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; /* 相対位置指定 */ } .sample1 .caption { font-size: 130%; text-align: center; padding-top: 80px; color: #fff; } .sample1 .mask { width: 100%; height: 100%;
FontAwesome 5が表示されない！その時に考えられる原因とは？ | ギガログ
アイコンフォントの中で1番人気のある、FontAwesome 5が表示されないときに試してみることをいくつかご紹介します。 アイコンフォントを使用するにはもちろん導入が必要ですが、導入と聞くと、初心者の方からすれば少し避けてしまいがちですよね。 導入をして表示しようと試みても、うまく表示されないことはざらです。 今回は自分のサイトにFontAwesomeを保存して表示するパターンではなく、CDNを利用して表示できない場合について書いていきます。 なお、そもそもFontAwesomeがよくわからない方、詳細を下記の記事にまとめていますので、ご参考にしてください。 そもそもコードに誤りがないか 根本的にですが、CDNのコードに誤りがないか念のため確認してください。 基本コピーするので大丈夫だと思いますが・・・笑 本記事を書いた時点では、バージョン5.0.10までリリースされていましたので、下記
SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]
多くのホームページが活用している「SVG（エスブイジー）ファイル」。具体的にどの様なフォーマットなのかご存知でしょうか。 SVGファイルのメリットは、拡大縮小しやすく編集性・汎用性が高いこと。でも「何となく使っている」「実はあんまりどのようなものか知らない」「なぜSVGなの？」と感じている方も少なくないでしょう。 そこで本記事では、SVGの特徴やその他のフォーマットとの違い、作成方法などについて詳しく解説します。 SVG（エスブイジー）ファイルとはなにか？ 「SVGファイル（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）」はの歴史は意外にも古く、2001年頃に勧告された技術です。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。 引用元：今こそ取り組むS
![SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1044997c38f72020170dae282a443ce6cd7864c/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F8445%2Fog_image%2Fdefault-d8edf2f9b5b2b651d90216773c15980f.png)
『スタイルシート H1、P タグの後、改行させない』
WEBエンジニア社長 小山内裕 のブログ。IT(情報技術)、Management(経営)、Human(人)のバランスを尊重させ、全てを戦略的に成長させるべく日々奮闘中。 電子書籍 販売支援 ウリゾウ http://apps.osanai.co.jp/ H1などのHタグや、Pタグの後、改行させないようにするには、inline を使います。 display:inline; 【例】 <h3 style="display:inline;">タイトル</h3> Hタグの後でも、<p style="display:inline;"> Pタグの後でも、改行されない。 ↓ タイトル Hタグの後でも、 Pタグの後でも、改行されない。 （もっと読みたいなら「電子書籍 販売支援 ウリゾウ」で検索！）
上付き文字（sup）、下付き文字（sub）をcssで整える - Web関連あれこれ
上付き文字タグ（sup）をそのまま使うとブラウザによってずれるようです。 （ブラウザのデフォルト設定があるので） 対応方法なので、cssで調整します。 ↓こんな感じに整えます。 html <p>30m<span class="supText">2</span></p> <p>D<span class="subText">3</span></p> ＊上付き文字、下付き文字にクラスを付けます。 css span.supText { font-size: 75.5%; vertical-align: top; position: relative; top: -0.1em; } span.subText { font-size: 75.5%; vertical-align: bottom; position: relative; top: 0.1em; } ＊font-sizeは好きなサイズ、「
皆既月食では、なぜ月は赤く染まるのか 月食の原理と赤く見える理由
順番に考えてみましょう。 皆既月食で月が赤くなる理由と光の屈折の関係月が赤く見えるのは夕焼けと同じ原理。 光が大気を通過するうちに波長の（相対的に短い）青や緑成分が拡散するため、赤い色が長く生き残って月に到達すると説明されています。 さて、赤が残るのは分かった、屈折するのも分かった。けれど、なぜ赤色の範囲が広がるのではなく狭まるのでしょう。 また、本影と半影ってどういうことでしょうか。 ひかりの性質を把握する夕焼けが赤く見えるのは、青や緑が拡散しやすく、赤がもっとも遠くまで届くからと説明されます。 逆に昼間の空が青いのは、波長の短い青ほど多く拡散するためと言われます。 その原理を考えてみます。 光の三原色すべてを合わせると白になる３種の色を「光の三原色」といいます。 太陽の光は3つの原色をすべて含んでいるために白に見えます。 ■ 赤（波長: 625 – 740 nm） ■ 緑（波長: 50
Font Awesome：スタンダードアイコンWebフォント | (3) Font Awesomeの応用 | Web技術指南書
Web制作現場においてはスタンダードと言える程広がっているアイコンWebフォント。バージョン4.6.3現在で634アイコンが提供されています。 このページでは、Font AwesomeをWebサイトで使用するための導入から基本的な使い方を紹介しています。 Font Awesomeの応用例です。 アイコンサイズを大きくする Font Awesomeのアイコンサイズはfa-lg、fa-2x、fa-3x、fa-4x、fa-5xのクラスを追加することで大きくすることが出来ます。HTMLマークアップ 大きさを変更したいアイコン要素に、拡大率に応じてfa-lg、fa-2x、fa-3x、fa-4x、fa-5xクラスを追加します。 <i class="fa fa-camera-retro fa-lg"></i> <!--拡大率 133.3%--> <i class="fa fa-camera-retro
divタグの前後で改行が入ってしまう: ブロック要素とインライン要素 - Qiita
問題 [ 1 ]というカッコ囲みの表記を動的にしたいとき [ <div id="hoge"></div> ] などとして、$('div#hoge’)に値を入れて動的に出力したいときがあるが、 実際は などとなってしまう。 原因 divタグはブロック要素なので、改行が入る。 解決策 divタグの代わりにspanタグを使う spanタグはインライン要素なので改行が入らず、1行の中で扱うことができる。 divとspanの2つが存在することからこちらのほうが自然な書き方である。 CSSでインライン要素にしてしまう どーーーーしてもdivにする必要がある場合、 CSSでdisplay:inline;などと指定してやるとdivだけどインライン要素という設定ができる。(参考 2.参照のこと) 参考ページ < DIV > と < SPAN > html css divタグが改行されるのを改行させない Re
Font Awesome 5自動作成ツール！アイコンを一覧表示しカスタマイズも楽々！ | ギガログ
2017年末にFont Awesome 5が公開されました。無料版と有料版が公開されましたが、無料版だけでも以前のバージョンからさらに増え、その種類はなんと900以上に！！ 無料版をカテゴリー毎に分けていますので、ご自身のサイトに合うアイコンを探してみてください。 Font Awesome 5ではさらにアニメーション機能も追加され、幅広いカスタマイズが可能に！！ アイコンを選択しカスタマイズ項目を選択すると、画面下のプレビュー領域に即座に反映されますので、ご活用ください。 Font Awesome自動作成ツールの使い方 head要素内に下記2つのコードを入れて下さい。 Font Awesome 5に対応するコードです。 <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.okuni.me/entry/2017/12/29/192721
【CSS】text-shadowを使ったテキストの装飾パターンを色々作ってみた | KuzLog
画像の上におしゃれに文字やボタンをのせる方法（CSS）
Loading...