ニートに学ぶCSS Animation演出講座 １時間目 - 魔法少女サイト
あいさつ ほんとはミライアカリになりきって、記事書きたかったんですが怒られそうだったんでやめます ↓ ニートに教わっても面白くないと思うので、僕のことを美少女だと思い込んで講座を受けてください。 はい。改めまして。 ハロー、yuki540だよ！ﾋﾟﾛﾘﾝ 結構、需要があったみたいなので今回から僕が今まで作ったcss animation作品の演出パターンを解説していくよ！ ホントにやってることは単純でcssの初歩的な知識で再現できるものなので、みんななら10秒あれば理解できると思います！ この講座では、sassとかpugは使わず、あくまで素のhtml, cssを使っていきます。 それでは、早速やっていきまーしょう！ 今回のアニメーション 「ミライアカリに学ぶCSS Animation演出講座」として最初にこれを解説します pic.twitter.com/rgHKA0TWpy— yuki540
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
CSSとテキストで実装するローディングアニメーションのサンプルコード - NxWorld
CSSとテキストで実装したローディングアニメーションのサンプルです。 サイズ・カラー・フォントといった見栄えについてはもちろん、アニメーションタイプやスピードを調整したい場合もすべてCSSで変更できるようになっていますし、表示させるテキストもHTMLを書き換えるだけで変更可能なので、手っ取り早くローディングを用意したいときなどに便利です。 ここではアニメーションGIFでの見栄えと実装コードを紹介しているので、実際の表示は以下デモで確認してください。 また、デモではSCSSを利用したコードで実装しているので普段からSCSSで用いてる人はこちらでコードを確認してください。 CODE #1 先頭の「L」からひと文字ずつフェードアウトしていき、末尾の「G」までいったら次は先頭からひと文字ずつフェードインしてくるタイプのもので、フェードイン・アウトの見栄えはopacityを利用しています。 実
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
【コピペOK！】めっちゃ秘密にしたかったけどCSSで文字を震えさせる方法を大公開するよ！ - にーとのかがみ。
どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。 実は最近、僕のブログで使用しているとある機能について問い合わせを受けることがちょくちょく出てきました。 まぁ既にタイトルにも記載しているんですが、文字が震える機能のことです。 これとか！ これね！！！ この機能が僕のブログに独自性を持たせていたともいえるため、この方法を周りのブロガーに紹介してしまうと僕の存在が消えてしまうのではないかという恐れがありますが、今回はそこについて気にしない方向で行きたいと思います。 何故なら、一度はIT業界に携わった身ですからアウトプットの大切さを僕は知っているのです。アウトプットがあるから新たなインプットが生まれる、これの繰り返して人間という生き物は成長していくのですよ。 というわけで！！誰でもサクッと簡単に使うための方法を教えちゃうよ―(‘ω‘ ) CSSなどの導入方法はこちらのペー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
簡単な記述で手軽に使えるCSSアニメーション | SONICMOOV LAB
はじめに アニメーションを取り入れることで躍動感のあるサイトになります。 ただし、古いブラウザでは対応していないので下記のリンク先を参考にして利用するようにしてください！ 参考： http://caniuse.com/#search=transform http://caniuse.com/#search=transition http://caniuse.com/#search=animation 書いてみる 使うプロパティはこの3つ。 transition（要素の時間的変化） animation（アニメーションをまとめて指定する） transform（要素の変形） それではひとつひとつ見ていきましょう。 transition – 要素の時間的変化 – html [sourcecode lang="html"] <div class="demo"> <
RiotGear - The open source component library for RiotJS
Fork me on GitHub RiotGear The open source component library for RiotJS Get Started v3.6.0 - View Github Project - Download - Blaze CSS Ready made components RiotGear was built to help. Help you improve your app development speed. If we've built it already why reinvent the wheel? The components should have all the functionality the majority of people need. In just a few lines of code you could hav
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。 マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。 コマ割り風レイアウトの実装 実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p
第7回 追加情報をアニメーションで表示するボタン | gihyo.jp
今回のお題は、アニメーションするボタンだ。マウスポインタを重ねると追加情報が現れる（サンプル1）。「Animated Buttons」の表現を参考にした。例によって、HTMLとCSSの構成はわかりやすく改め、コードも絞り込んである。 サンプル1 CSS3: Animatied buttons ボタンの静的なデザイン <body>要素に書くコードは以下のように構成した。各ボタンを<a>要素（class属性"btn"）として<div>要素（class属性"container"）の中に納めた。ボタンの<a>要素は、それぞれ3つの<span>要素（class属性"btn-text"と"btn-slide-text"および"btn-icon"）をパーツとして含んでいる（図1）。3つめの<span>要素の中には、さらに空の<span>要素が加えてあり、CSSで矢印を背景画像として与える。 図
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
