CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
【フォトショップ】パターンプレビューで繰り返しパターンを一瞬で作成する方法
この記事では、フォトショップのパターンプレビュー機能をつかった継ぎ目のないパターンテクスチャを素早く作成する方法をご紹介します。 パターンプレビューを使用することで、シームレスに繰り返されるパターンをリアルタイムで視覚化し、作成を手助けしてくれます。 ここでは、パターンプレビュー機能の使い方を詳しくみていきましょう。 パターンプレビューによる継ぎ目のないパターンの作り方 まずはフォトショップを開き、新しいドキュメントを作成しましょう。今回は、1000x1000pxの正方形としていますが、縦横の長さが異なる長方形でも問題ありません。 パターンプレビューを有効にするには、メインメニューより「表示」>「パターンプレビュー」にチェックを入れるだけ。ポップアップが表示されますが、OKで進みましょう。 すると青い枠が表示され、ドキュメント全体がカンバス同様、白に塗りつぶされた状態となりました。 メイン
地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！ holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
商用利用無料！ヴィンテージとメタルのシームレスに使える高品質なパターン素材 -HGGraphicDesigns
ヴィンテージ調のかわいい柄のパターン素材とメタルの小さな柄のパターン素材を紹介します。Photoshop用の.patと.jpgが揃っており、シームレスに使用できます。
Malina Free Seamless Patterns
MALINA free seamless patterns are coming to you in one handy pack. This hand drawn patterns are perfect for cards, flyers, posts or blog elements and also for fabrics and prints. Grab this patterns and be creative! today you can get 20 seamless pattern in EPS, PNG and JPG format with 300 dpi and approx. 3300 x 3300 px dimensions. The vector one can be fully editale Illustrator CS1 and higher. Thes
ユーザーを惹きつけろ！魅力的なヒーローヘッダー作成の黄金ルール10個まとめ
ユーザーがあなたのホームページにたどり着いたとき、ページを開くまでに少しだけ時間があり、あなたが何をしているのか伝え、もっとページを見てもらえるように工夫することができます。しかし多くのサイトでは、訪問ユーザーに好印象を持ってもらう機会を逃しています。 ヒーローヘッダーをどのように他の要素から目立たせるか、詳しく確認していきましょう。 ヒーローヘッダーに必要な要素とは？ ヒーローヘッダーにデザイン要素を取り入れる方法はたくさんあり、新商品を紹介したり、ブランドが何をしているのかシンプルな文で説明する必要があります。多くのヒーローヘッダーに利用されている要素は以下のとおりです。 目を引く見出しタイトル、ヘッドライン Call-To-Action ボタン 印象的な背景イメージや動画 埋込み型の説明ビデオまたはアニメーション 特集コンテンツを紹介するカルーセル ブランディング要素 – ロゴやスロ
無料でウェブサイトに使える繰り返し背景パターンをカスタマイズしてダウンロードできる「Hero Patterns」
ウェブサイトで使いたくなる色んな柄の繰り返し背景パターンを、色の組み合わせや柄の不透明度を自由にカスタマイズ＆無料でダウンロード可能なのが「Hero Patterns」です。SVG形式のファイルをダウンロードできるほか、CSSコードをコピー＆ペーストすることも可能になっています。 Hero Patterns http://www.heropatterns.com/ デフォルト状態のウェブページには薄い青とやや濃い目の青の背景パターンが並んでいます。市松模様や十字模様などシンプルなものもあれば…… 歯車やダイヤ、葉っぱなど、ポップな模様もあります。 画面上部のツールを使って、背景や柄の色を変更可能。柄の色を緑色にしてみました。 さらに、背景色も変更。 柄の不透明度も調整できます。以下は、やや薄めにした様子。 不透明度を上げると柄がくっきりと浮かび上がります。 また、各背景の右下にある「Use
美しい和柄のフリー素材がいっぱい！日本の伝統的な文様がシームレスにつかえるパターン素材 -Japanese Mon
日本の伝統的な幾何学の形をつかったつなぎ文様をはじめ、植物や生物、季節の移ろいを描いた文様まで、美しい和柄がロイヤリティフリーでつかえるパターン素材を紹介します。
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
商用利用無料、紙・布・生地・黒板などのテクスチャをシームレスに使えるパターン素材のまとめ
紙・布・生地・黒板・皮・木目・石こうなど、繊細な質感を表現したテクスチャをシームレスに使えるパターン素材を紹介します。 下記の素材は全て個人でも商用でも無料で利用できます。 詳しくは下記ページをご覧ください。 ライセンスページ ダウンロードできるファイルには小さい画像とPhotoshopのパターンファイル（.pat）があり、シームレスに利用できます。
CSSブレンドモードで画像を彩ろう
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
背景画像のフリー素材サイト10選！デザインで悩んだときに役立ちます | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
1. Subtle Patternsオススメ https://www.toptal.com/designers/subtlepatterns/ 一番よく利用してます。商用利用可の、シンプルで使いやすいシームレスの画像がたくさんあります。 2. Background Labs http://backgroundlabs.com/ 色・タグから検索できます。花柄やイラストがはいった、カラフルで派手なパターンの画像やイラストが多いです。 3. pattern cooler https://www.patterncooler.com/ 選んだデザインの柄の大きさや色をカスタマイズできます。派手派手なデザインがほとんどなので使いどころは難しかもしれません。 4. TextureKing https://www.textureking.com/ テクスチャ画像をお探しのときはこちら。木目・コンクリート
Pattern Design – 27 Seamless Free Vector Patterns
Written by Yasir Jawaid• April 16, 2015• 3:46 am• Pattern and Texture Pattern Design – 27 Seamless Free Vector Patterns Free download vector pattern design available in the formats: AI , PDF, EPS. All patterns are highest quality and seamless created by professionals, can be used for printing onto fabric, paper, scrap booking or website background. This is a beautiful collection of seamless patter
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユニークでシームレスなパターン背景を簡単に作成、SVGやPNG等でダウンロードできる・「Pattern Generator」
[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック![[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/eca9086338399b021f0f7184c9d87872b7931c55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017053101-01.png)
https://dvlden.github.io/
20 Free Seamless Icon Patterns for Designers
SiteOrigin Background Generator
CanvasやSVGによるパターンを作成出来る・「Halftone Patterns」
