グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP

2021/01/12 14 users Glassmorphism ジェネレーター コピペ 話題 基本

Glassmorphism（グラスモーフィズム）は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。 この記事では、グラスモーフィズムの基本や作成上の注意点、コピペで実装できるジェネレーター、参考HTML/CSSスニペットまでまとめてご紹介します。 グラスモーフィズムって何？ 2020... 続きを読む

2018年大本命！HTML/CSSコピペできる、参考にしたいスニペット78個まとめ - PhotoshopVIP

2018/10/18 94 users SVG PhotoshopVIP うえ アニメーション 参考

ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットを、定期的にまとめてご紹介しています。SVGを使ったアッと驚くアニメーションから、普段使いがしやすくなる小技テクニック、現在利用するデザイナーが増えているCSS Gridの可能性を探る実践向けスニペットまで、今後のウェ... 続きを読む

【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション - オークニズム

2018/03/04 244 users オークニズム ゴルァ アニメーション 秘蔵 オークニ

2018 - 03 - 04 【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション カスタマイズ どうも、 オークニ です。 この記事を発見したあなた、おめでとうございます。今回は、あえて今まで黙っていた、 秘蔵のCSSテクニック を1つご紹介しよう。 今まで、1人でシメシメとひた隠しにしていたこのテクニックだが、あまりにも「やり方教えんかい！ゴルァ！」というお問い合... 続きを読む

【CSSコピペ】シンプル系でおしゃれな見出しデザインを26連発！ - オークニズム

2018/02/24 62 users オークニ カスタマイズ オークニズム アレンジ オシャレ

2018 - 02 - 24 【CSSコピペ】シンプル系でおしゃれな見出しデザインを26連発！ カスタマイズ 見出しがオシャレなブログは、ブログ全体もだいたいオシャレ。 どうも オークニ です。 ブログカスタマイズにおいて、もっとも手軽で簡単なアレンジが見出しです。そのため、ネット上にも100万個くらいの見出しカスタマイズが転がっていますね！ 今回は、そんな中でもオークニがおすすめする” シンプル... 続きを読む

【CSSコピペ】画像の”横に”吹き出しを付けるサルワカ風カスタマイズ - オークニズム

2018/02/10 23 users サルワカ オークニズム カスタマイズ ブロガー ツイート

2018 - 02 - 10 【CSSコピペ】画像の”横に”吹き出しを付けるサルワカ風カスタマイズ カスタマイズ ツイート シェア はてブ Pocket LINE みんな大好き「 サルワカ 」。 webデザイナーやブロガーであれば、おそらく知らない人はいないんじゃないかってくらい有名なブログですね！ どんだけSEO強いねんってくらい、検索上位にバンバン出てきますw 今回は、そんなサルワカでよく使わ... 続きを読む

【CSSコピペ】カーソルを合わせるとふわっと浮かぶアニメーションカスタマイズ - オークニズム

2018/02/07 18 users オークニズム 空前絶後 カーソル スーツ アニメーション

2018 - 02 - 07 【CSSコピペ】カーソルを合わせるとふわっと浮かぶアニメーションカスタマイズ カスタマイズ ツイート シェア はてブ Pocket LINE 前回の 【CSSコピペ】カーソルを合わせると下線がスーッて伸びるアニメーションカスタマイズ が空前絶後の好評だったので、またしても”カーソルを合わせると”シリーズｗ しかもCSSコピペ。しかもアニメーション。だったらまとめて「 ... 続きを読む

【CSSコピペ】カーソルを合わせると下線がスーッて伸びるアニメーションカスタマイズ - オークニズム

2018/02/06 14 users オークニズム スーツ カーソル sango STORK

2018 - 02 - 06 【CSSコピペ】カーソルを合わせると下線がスーッて伸びるアニメーションカスタマイズ カスタマイズ ツイート シェア はてブ Pocket LINE WordPressテーマで言うとSTORKとかSANGOとかDigipress系とか、それ以外にもイケてる系のデザインでは最近よく見かけるやつです。 主にグローバルメニュー で使われており、このオークニズムでも実装している... 続きを読む

ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事 | Flips Blog Web担の小技

2016/03/17 414 users コピペ 見出し Web担 HTML Flips Blog

Webサイトを作っている時に、ここ便利だなというところをご紹介。 なるべくさくっとやりたいことをコードにする。そんなCSS作成のサポートにピッタリな記事、サイトをご紹介します。 シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50  とりあえず見出しの作成に悩んだら一回見ておけばいいよっていうやつ。 コピペも大量。すごい便利。 コピペするだけで使えるCSSボタンジ... 続きを読む

CSSコピペで利用！話題のボタンデザイン用スニペット、サンプル30個まとめ - PhotoshopVIP

2015/11/17 137 users CodePen PhotoshopVIP CSS ウェブ制作

CSSをコピペしてウェブ制作に活用できる、ボタン用スニペットサンプルを、WEBデザイナーのためのコードコミュニティサイト、Codepenよりピックアップしてまとめています。 その場でコードを確認、編集することができるので、幅広いデザインプロジェクトに応用でき、アニメーションをうまく活かした新しいスタイルを、今後のウェブサイト制作に活用してみてはいかがでしょう。 詳細は以下から。 CSSコピペで利用... 続きを読む

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

2015/10/07 1048 users CSS 見栄え NxWorld 手間 複数行

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになって... 続きを読む