作成：2016/11/7 更新：2016/11/07 Web制作 > 404ページやランディングページに今時のおしゃれなエフェクトを付与したい。今回はCSSのみで簡単に実装できる、背景を動かすエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 テキスト部分だけの背景を動かす ストライプなど繰り返しの要素を作るrepeating-linear-gradient関数（repeating-linear-gradient - CSS | MDN）を使い、グラデーションの繰り返しを作ります。さらにmix-blend-mode: screen;で、 要素を混合しています。 mix-blend-mode: screen; background-image: repeating-linear-gradient(-45deg, transparent, tran
TEAM PRO についてはCodePen Plansをご覧ください。 codepen で何ができるのか ざっくりと以下のようなことができます。 スニペット管理 [Pro] プライベートモード / コードの非公開 コードのテンプレート化 コードを zip でダウンロードする インデント幅の編集 ブログなどにコードの埋め込み [Pro] カスタム CSS / 埋め込みのレイアウト編集 ビューの変更 デバッグ コンソール編集 豊富なプリプロセッサ CSS：Normalize/Reset を追加 オートベンダープレフィックス メタタグ（viewport）の差し込み [Pro] リアルタイム同時閲覧・チャット ペアプログラミング（共同編集） オンラインエディタ オートコンプリート ブラウザテスト アセット管理（素材をアップロード） オートセーブ シンタックスハイライトのテーマ変更 codepen
ブラウザ上で、手軽にWebプログラミングを書いて実行できるコードエディタ「CodePen」をご存知の方は多いと思います。 使えば使うほど、このサービスが多機能であることに気付くわけですが、特に便利だと感じるちょっとマニアックな使い方だけをピックアップしてみました。 一応、公式のドキュメントには書いてあるのですが、「翻訳が面倒な人」や「そもそも知らない」…という人に向けて紹介しておきます。 「ソースコード」のホスティング機能！ 「CodePen」では、簡単に「HTML/CSS/JavaScript」を書いて「実行＆保存」できますが、書いたコードはどこからでも参照することができます。 例えば、何かコードを書いて保存すると専用の「プロジェクトURL」が自動的に発行されます。 このURLの末尾に、「.js」「.css」「.html」と追記するだけで参照できるようになります。 JavaScriptフ
CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類・クオリティがとても高く、参考にするには最適なサイトです。 今回はそんなCodePenの中から特に人気のあるコードサンプルをご紹介します。 「こんなのしてみたかった」というサンプルがあると思うので、参考にしてみてください。 また、ここで紹介しているサンプル以外にも、本家のサイトに行けば、新しい発見があると思いますよ。 見ているだけで純粋に楽しいです。 CSS3だけでパララックス効果を表現した Parallax Landscape CSS3だけでパララックス効果を表現しています。 Parallax Landscape ページ遷移がなめらかな CSS-Only Responsive Layout with Smooth Transitions ページ遷移がなめらかなで、しかもレスポンシブ。 CSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
