• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

Webデザイン

背景画像に変色するグラデーション背景を重ね合わせるサンプル

背景画像に変色するグラデーション背景を重ね合わせるサンプル

今回のTipsでは、Webページの背景(background)にアニメーションしながら色が変化していく「グラデーション背景」とフルサイズの「背景画像」を重ね合わせて表示するサンプルを作ってみたいと思います。CSSのみでできて、とってもシンプルです。 まずは完成イメージを…
CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル

CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル

ギャラリーサイトなどでよく見かける、画像を敷き詰めてタイル状に並べたグリッドレイアウトを実現するには、「Masonry」に代表されるjQuery/Javascriptプラグインを利用することで、表示幅を計算して簡単に自動で配置することができますが、Javascriptを…
コーディング不要、無料で高品位なサイトをすぐに作れるWebサービス : Webydo

コーディング不要、無料で高品位なサイトをすぐに作れるWebサービス : Webydo

HMTL、CSS、Javascriptが読めない、書けなくてもイメージしたデザインでWebサイトを誰でもすぐに作れてしまうちょっとすごいWebサービス「Webydo」。 試しに少しさわってみましたが、WYSIWYG画面でマウス操作だけで完全に直感のみを頼りにWebページ…
【これは便利!】CSSだけでロングシャドウ効果を出せるWebサービス「Long Shadow Generator」

【これは便利!】CSSだけでロングシャドウ効果を出せるWebサービス「Long Shadow Generator」

フラットデザインに続く流行りのWebデザイン、「ロングシャドウ」効果をなんとCSSだけで表現してくれる超便利なオンラインサービス「Long Shadow Generator」。 シャドウのサイズ、透過度、長さなどをスライダーでお好みの値に調整すると、リアルタイムにプレビ…
Return Top