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

CSS Stock｜Web制作を楽にするCSSコピペサイト

HTML・CSSの知識は不要。全222種類のパーツからお好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。掲載しているコードについて当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。また掲載している

forcutie 2023/05/28

リンク

最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにノイズを加えたグラデーションを生成できるオンラインツール実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する明るさとコントラストを高めるノイズのカラーが均一でない CSSのブレンド機能粒子の粗いグラデーションの使用例さらに詳しくブラウザのサポー

forcutie 2021/09/22

リンク

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方 Izmirの特徴画像をホバーすると多彩なアニメーションを適用します。エフェクトを組み合わせることで、2000通り以上のエフェクトを使用可能。 20種類のボーダーエフェクト、9種類の画像エフェクト、12種類のテキストエフェクト。オーバーレイのスタイル、アニメーションの遅延、テキストのレイアウトなど、classも豊富。アクセシブル（デスクトップはホバー、スマホはフォーカス）。 2Kbの超軽量ライブラリ。実装・カスタマイズ用のドキュメント完備

forcutie 2019/11/11

css
html

リンク

UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう︵参考﹁SVGで始めるマイクロインタラクション入門﹂︶。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法︵コーダー向け︶コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、

forcutie 2017/07/14

リンク

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！目次 Div全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びのdivの高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

forcutie 2017/07/14

css
+todo

リンク

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

今回は見出し︵h1〜h6タグ︶のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

forcutie 2017/03/15

リンク

font-sizeのパーセント表記一覧 - Webtech Walker

font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。注意点これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで

forcutie 2017/02/06

フォントサイズ

css

リンク

CSSになり損ねた言語たち | POSTD

TeXやMicrosoft Word、あるいはその他の汎用的なテキスト処理環境では簡単に実現できるような見た目に自分の文書を似せようと頑張る︵文字どおり︶無数の人たちに対して、 “悪いけど、うまくいかないよ” と繰り返し言い続けるのは、実際のところ、この1年間、私にとっては継続的な楽しみだった。- Marc Andreessen 1994年 Tim Berners-LeeによってHTMLが発表された1991年には、ページのスタイルを設定する方法はありませんでした。HTMLタグがどのように処理されるかはブラウザ次第で、多くの場合、ユーザの恣意的な入力が大きく影響しました。そうした事情から、ページがどのようなスタイルで処理されるかを”提案”するような標準的な方法を求める声が上がるようになりました。しかし、CSSが導入されるのは5年先で、完全に実用化されるには10年の歳月を待たねばなりません。

forcutie 2016/10/25

, [webdesign]

css

リンク

CSSとかJavaScriptとかで、中身が1行になってるファイルを、見やすいように展開することは可能でしょうか。たぶんgruntでコンパイルしているようなのですが、gruntで逆コンパイルはできますか。

● 1 user ● w3q.jp ●テクノロジー

CSSとかJavaScriptとかで、中身が1行になってるファイルを、見やすいように展開することは可能でしょうか。たぶんgruntでコンパイルしているようなのですが、gruntで逆コンパイルはできますか。

forcutie 2016/09/13

css

リンク

2016年で最もダウンロードされたリセットCSSランキングトップ5

リセットCSSとは、Google ChromeやSafariなどブラウザがあらかじめ持っているデフォルトのCSSを、リセットするための手法・設定です。ブラウザ毎に設定されているフォントサイズやマージン、パディング等の設定をまっさらにする役割を持ちます。今回は、2016年で最もダウンロードされたリセットCSSトップ5をご紹介します。各ブラウザのデフォルトCSSの一覧は以下サイトをご参照ください。デフォルトCSS一覧︵たまちゃんHTMLのおうち︶リセットCSSを使うメリットリセットCSSを設定することで、ブラウザによってスタイルが違う点を考慮しなければいけない問題を解決できます。また、もともとデフォルト設定されているCSSを前提に検討する必要も無いのでコーディングが楽になります。リセットCSSの人気度ランキング人気度が高いものから挙げると以下のようになります。 1. Eric

forcutie 2016/08/16

normalize reset

css

リンク

altCSSを捨ててPostCSSで活きよう！ - 弥生開発者ブログ

こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！髪がだいぶもっさりしてきたのでそろそろなんとかしないとなぁと思っています。この写真は先日きたむらさんとこくぼさんで朝明渓谷に行ってきた時の写真です。すごく綺麗で泳いだのですが、まぁまぁ寒かったです。最近はポケモン GOにはまっています。会社の入っているビルがポケストップになっていて、お昼休みに社長がルアーモジュールを置くので、ポケモンも集まるし、社員も集まってきます。どうやら社長が会社にルアーモジュールおいたっぽい— めろたん。れんやたん。 (@renyamizuno_) July 25, 2016 Misocaのはいってるビルはポケストップになっていて、昼休みは社長の仕事としてルアーを指しています。社員に1000円のランチを奢るより感謝されている実感がある。 pic.twitter.com/8

forcutie 2016/08/01

css

リンク

ituore.com - ituore リソースおよび情報

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.

forcutie 2016/05/20

リンク

[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点

例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。否定疑似クラス「:not」の便利な使い方と使う時の注意点（特に優先順位）を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位「:not」を使う時の注意点まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況「:not」の便利な使い方否定疑似クラス「:not」は使い

forcutie 2016/03/26

css

リンク

CSSでInstagramで使われているフィルタ効果を実現する「CSSgram」

どんな写真でも、優秀なフィルターを用いることで、それらしい写真が撮影できるInstagramは国内を始め世界中で利用されていますが、今日紹介するのはCSSでInstagramで使われているフィルタ効果を実現する﹁CSSgram﹂です。 CSSは非常に軽量で、1kb以下のコードで、様々な種類のフィルタ表現がブラウザ上で可能になります。その数は全21種類にも及びます。詳しくは以下実装方法は非常に簡単で、CSSgramのライブラリをダウンロード後、読み込ませ、Class名にフィルタ名を反映するだけで実現可能です。また、Sassでも実装可能になっています。フィルタの名前も、Instagramのフィルタ名称に揃えているようで、いつも利用している方は、名称だけでピンとくるのではないでしょうか？一点注意が必要なのは、対応ブラウザ、CSSFiltersとCSS Blend Modesを利用しており、

forcutie 2016/03/17

リンク

display: noneはtransitionできないので - console.lealog();

参考‥css - Transitions on the display: property - Stack Overflow そのへんで拾ったアコーディオンのライブラリとかでよく見るやつ。もはやマークアップあるあるですよね。 displayじゃダメなので、他のプロパティで攻めましょう、っていう。 transitionできるプロパティ参考‥CSS Transitions色とか長さとか、数値で表現できるっぽいやつはだいたいOKな感じ。代替案を書いてみるクラス名で切り替えるアコーディオンとか、ありがちなケースで。元ネタ Html <section class="accordion"> <h1>Accordion 1</h1> <ul> <li>Sample li 1</li> <li>Sample li 1</li> <li>Sample li 1</li> <li>Sample l

forcutie 2015/10/13

css

リンク

Zen-Codingの次期バージョン、Emmet について - kojika17

Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。そのZen-Codingが、﹁Emmet﹂と、リネームされてプロジェクトが進められているようです。 Emmet(beta) Emmetは、開発中です。正式リリースはまだですが、機能は試すことができます。 Emmetは、2013年2月24日に正式リリースされました。基本的には、今までのZen-Codingと変わりません。 Zen-Codingを使っていた人は、

forcutie 2015/10/07

css

リンク

CSSモジュール ― 明るい未来へようこそ | POSTD

ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、各々のプロジェクトのReadmeファイルでも、そのように言及しています。もし”発明”が、 adjacent possible︵一歩先にある可能性︶を探ることの一例であるのなら、Ch

forcutie 2015/09/24

css

リンク

webcreatornote.com - webcreatornote リソースおよび情報

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.

forcutie 2015/07/28

css

リンク

[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト

シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。イラストは、以前紹介した「Girls Design Materials」です。生き生きとした表情やしぐさが魅力たっぷりなガーリー素材実装 Step 1: HTML 画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。 <div class="tiles"> <a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a> <a href="#" class="tile"><img src="image.j