[CSS]手間がかかるCSSアニメーションがコピペで簡単に実装できる -ShortSnippets.css
CSSもここ数年でかなり進化し、アニメーションをCSSで実装する機会が増えてきました。しかし、難点は実装に手間がかかること。 気持ちのいい動きのスピナーから、あまり見かけない面白い動きをするものまで、コピペで簡単に実装できるスニペットをまとめたShortSnippets.cssを紹介します。 ShortSnippets.css ShortSnippets.css -GitHub ShortSnippets.cssのデモ ShortSnippets.cssの使い方 ShortSnippets.cssのデモ ShortSnippets.cssではチョウチョのスピナー、ボックスシャドウを使ったアニメーションなど、あまり見かけない面白いものが多いです。 チョウチョは、ひらひら舞っています。
![[CSS]手間がかかるCSSアニメーションがコピペで簡単に実装できる -ShortSnippets.css](https://cdn-ak-scissors.b.st-hatena.com/image/square/126b1e7e35bdc4052d3c0040639da850aeeead48/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016101705.png)
CSSのクラス名を決めるときに使うリストをつくりました
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitH
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
