[B! css] aoasagiのブックマーク

JS＆Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」:phpspot開発日誌

GitHub - tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) JS＆Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」背景をファンシーかつポップに。Flash時代を思い出します関連エントリ CSS3のグラデーションで背景アニメーションできるjQueryプラグイン「Gradientify」 WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」

aoasagi 2018/07/13

css
*JS

リンク

CSSの作業をもっと楽に！無料で使える便利なWebツール40選

CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ

aoasagi 2018/06/28

css

リンク

[JS]数字をくるくる回転させて、指定した数字を表示させるスクリプト -odometer

数字をくるくる回転させて、指定した数字を表示させるスクリプトを紹介します。サポートするブラウザはIE8+を含むモダンブラウザすべてで、古いブラウザでは自動的にフォールバックされ、非常にパフォーマンスの高いCSSアニメーションで表示されます。 odometer odometer -GitHub odometerのデモ odometerの使い方 odometerのデモ odometerではテーマが用意されており、さまざまなデザインで数字を表示できます。もちろん、シンプルなのも用意されています。

aoasagi 2018/06/25

リンク

DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com

Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。はじまりコードスニペット版。これはこれで手軽でよろしいね。ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追

aoasagi 2018/06/22

リンク

[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法

スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。 The 100% correct way to do CSS breakpoints 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ブレイクポイントで混乱する原因 Tips 1: ブレイクポイントを的確に取得する Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける Tips 3: ブレイクポイントを定義するコードブレ

aoasagi 2017/02/23

リンク

CSS Gradient Animator

@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

aoasagi 2016/03/04

リンク

【第2弾】少しのコードで実装可能な20のCSS小技集

2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！目次画像を丸く表示 1本線のテーブル 1本線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズ Webフォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット線のオフセット設定 HTML・CSSの全

aoasagi 2016/02/02

css

リンク

PostCSSとcssnextで最新CSS仕様を先取り！

どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transf orming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,

aoasagi 2015/12/21

リンク

CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス

floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。 How Floating Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 floatのルール 1. フロート要素を親要素から見るとどうなるか 2. 左や右にフロートさせる 3. フロート要素が押し下げられてしまう原因 4. フロート要素の配置の順番 5. フロート要素の配置の優先順位 6. フロート要素で親要素を広げないフロートのクリア clearfix floatのルール floatプロパティには、4つの値があります。 .foo { float: left | right | inherit | none } この4つの値はそれぞれ、要素を親要素の中でどの

aoasagi 2015/08/28

css
*css

リンク

jQueryを使わずCSSのみで画像をキラッとさせる

.reflection-img{ width :510px; height :350px; position :relative; overflow :hidden; } .reflection { height :100%; width :30px; position :absolute; top :-180px; left :0; background-color: #fff; opacity :0; transf orm: rotate(45deg); animation: reflection 2s ease-in-out infinite; -webkit-transf orm: rotate(45deg); -webkit-animation: reflection 2s ease-in-out infinite; -moz-transf orm: rotate(45deg); -m

aoasagi 2015/08/24

css

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

aoasagi 2015/08/19

リンク

あまり知られていないCSSの12の事実(続編) | POSTD

1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実）を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。注釈 SitePoint/ Natalia Balska によるイラストそれでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実このプロパティについてはSitePointに4年以上前に書いたのですが、この機能が存在することを、未

aoasagi 2015/08/18

css

リンク

[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack

デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co

aoasagi 2015/06/09

リンク

2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ

制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。リセット用のCSSはこの3種類レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワークさまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー使いやすいアイコンフォント・Pure CSSのアイコンリセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd

aoasagi 2015/04/22

リンク

6-cases-of-unwanted-spaces-in-page-layout-by-demosthenes.html#h202

Mind The Gap: Six Causes of Unwanted Spaces In Page Layouts 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。デフォルトのスタイルが原因となる隙間ボックスモデルが原因となる隙間ブロック要素内のインライン要素にできる隙間 inline-blockが保持している隙間 DreamWeaverなどWYSIWYGエディタでできてしまう隙間マージンとマージンの相殺が原因となる隙間デフォルトのスタイルが原因となる隙間 HTMLを作成する際、スタイルシート無しでも読みやすいようにすることをWeb制作者は忘れがちです。これはすべての要素にブラウザがもつデフォルトのスタイルを上書きして、サイト用のスタイルを適用することを意味します。ブラウザがもつデフォルトのスタイルとは例えば、パラグラフ

aoasagi 2015/04/16

リンク

CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ

素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか！という驚きのテクニックまで、今年もCSSに注目です。

aoasagi 2015/03/10

リンク

CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート | ライフハッカー・ジャパン

ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」

aoasagi 2014/12/03

リンク

[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js

demo 5 一行ごとにさまざまなアニメーションで表示します。「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも

aoasagi 2014/11/25

便利そう

リンク

スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig

表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。マージンが期待通りにならない、カラーの指定がおかしくないかなど、CSSのチェックに大活躍する機能拡張です。