CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro
div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui
Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされたさまざまなデザインが実装できます。 augmented-ui augmented-ui -GitHub augmented-uiは、Webページやアプリのdiv要素をはじめとするあらゆるUI要素にサイバーパンク風のスタイルを与えることができます。 ライセンスはBSD 2-Clause Licenseで、個人でも商用でも無料で利用できます。
textFit - 枠に合わせてテキストを最大表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webの表現力は高く、ウィンドウの幅によってテキストの行数が変わってしまったりします。その結果、デザイナーの意図した表示にならないことも多く、かといって固定サイズにすると閲覧者にストレスを与えることにもなりかねません。 そこで使ってみたいのがtextFitです。テキストを枠の中に収まる形で最適化してくれるライブラリです。 textFitの使い方 利用例です。徐々にサイズが変わって、最終的に枠いっぱいに表示されているのが分かります。 文字のスペース、行の高さ、フォントなどもカスタマイズできます。 textFitを使うことで、枠の大きさに合わせた最大サイズの表示を簡単に実現できます。textFitは分かりやすいように段階的になっていますが、通常使う限りは一瞬で調整されるでしょう。ウィン
Webでも紙でも商用無料！かわいいデザインにぴったり、フローラルの飾り罫のデザイン素材 -Floral Ornaments
お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回はかわいいフローラルの飾り罫、素材はAI, EPSのベクター完備です。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でも利用できます。アイコンに特化したflaticon.comも運営しており、ついにそのアイコン素材は700,000個を越えました！ freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初、今回でいよいよ第38弾となりました！ 第31弾〜37弾まではこちら（※長いので、1〜30は省略）。 飾り
deviceframe - 画像やWebサイトにiPhoneの枠を追加
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました iOSでスクリーンショットを撮ると、デバイスの枠がないので若干寂しいです。雰囲気を把握するためには、やはりデバイスの枠があったほうが分かりやすいでしょう。Xcodeをインストールしてシミュレータがあったとしても任意の画像に枠が追加できる訳ではありません。 そこで使ってみたいのがdeviceframeです。ごく簡単に、好きなデバイスの枠が追加できます。 deviceframeの使い方 deviceframeは画像を引数に渡すだけで使えます。 その際、デバイスをインタラクティブに指定できます。これは複数指定できます。 $ dframe IMG_3328.PNG ? Add the frames you want to use (ESC to complete) (Use arrow k
Webでも紙でも商用利用無料！女子向けのデザインにぴったりな美しい飾り罫のai, epsが揃ったフリー素材
お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回は女子向けのデザインにぴったりな繊細で、美しい飾り罫のベクター素材です。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でも利用できます。アイコンに特化したflaticon.comも運営しており、ついにそのアイコン素材は470,000個を越えました！ 50万個が、目前です。 freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初、今回でいよいよ第36弾となりました！ 第21弾〜35弾まではこちら（※長いので
Webでも紙でも商用利用無料！ai, epsが揃った飾り罫のフリー素材 -Decorative Ornaments Collection
お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回は、緻密に描かれた美しい飾り罫のベクター素材です。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でも利用できます。アイコンに特化したflaticon.comも運営しており、そのアイコン素材はついに161,000個になりました。 ものすごい勢いで増えています！ freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初、今回でいよいよ第27弾となりました！ 第21弾〜26弾まではこちら。 ※長いので、1〜20は
デザイナー顔負け！写真加工がうまくなる、10個の簡単テクニックまとめ
海外デザインブログ Canva Design School で公開された「10 Simple Ways To Enhance Your Images」より許可をもらい、日本語抄訳しています。 「百聞は一見にしかず（英: A picture is worth a thousand words.）」と言われるのには、きちんとした理由があります。 古くからよく知られているフレーズかもしれませんが、オーディエンスに向けてデザインを制作するときには、適切なアドバイスと言えるでしょう。デザインのコンセプトに、エクスペリエンス体験やリサーチを加えることで、イメージ画像はうまく注目を集めることができます。 Hubspot では、ビジュアル・コンテンツ（英: Visual Content）がいかに強力なコミュニケーションツールであるか、いくつかの統計がまとめられています。 関連する画像のあるコンテンツは、画
商用利用無料、アール・デコ調のかわいいエレメント・飾り・イラストをベクター化したデザイン素材 -Art Deco Vector
1920年代の建築物・美術品・工芸品・ファッションなど、実在のリソースを参考にハンドメイドでベクター化されたアール・デコ調のデザイン素材を紹介します。 アール・デコの幾何学な図形はいろいろ組み合わせても楽しめます。 Free Art Deco Vector 素材は無料版と有料版があり、無料版は個人でも商用でも利用できます。 その無料版の中身を紹介します。 まずは、フレームのエレメント素材。 組み合わせて使用することで、さまざまなフレームを作成できます。
簡単にウェブ画面をキャプチャして文字・枠乗せなど編集も可能な「Nimbus Screen Capture」
インターネットをしていると思わず表示中の画面をキャプチャして保存したくなることもありますが、そんな時に役立つ機能が「Nimbus Screen Capture」です。Nimbus Screen CaptureはブラウザソフトのGoogle ChromeとFirefoxで使えるブラウザ拡張機能で、画面の一部を切り取ったり、ウェブページ全体を簡単な操作だけで行うことができます。 Nimbus - Nimbus Screen Capture http://nimbus.everhelper.me/screenshot.php ◆ブラウザに拡張機能をインストール Nimbus Screen Captureを利用するためには、まずは各ブラウザに拡張機能をインストールする必要があります。以下ではブラウザ別のインストール手順を記載していますが、なぜかGoogle Chrome版とFirefox版で名称が
[CSS]実装のアイデアが面白い！枠線から背景をずらして配置するスタイルシート
枠線から背景をずらして、ゆる〜い感じにデザインされたスタイルシートを紹介します。 HTMLはbutton要素一つで実装されており、二つの要素をマイナスマージンで強引に重ねるとかの荒技ではないです。 デモページ 実装は、こんな感じです。 HTML button要素一つで実装します。divなど他の要素に変更してもOKです。 色の違いはclass指定で。 <button class="yellow"> View More </button> <button class="blue"> View More </button> CSS 枠線は通常通りbutton要素にスタイルし、ずらした背景は疑似要素の:afterを使います。 ちょっとだけ傾けるのがポイントです。 body {width:70%;text-align:center;margin:40px auto;} button { positi
A Collection Of 25 Free and Attractive Vector Frames - Designbeep
This is our weekly free vector graphics collection.Vector graphics are scalable images which means you can easily resize without losing the quality.Vector graphics are widely used design elements in both web and graphic design. Vectors graphics can be used in any kind of graphic design but especially in illustrations,print design,logo design,t-shirt design. etc.The benefit of working with vector e
25 Lovely Looking Corner Brushes for Free Download | Naldz Graphics
Among the most valuable tools to obtain magnificent web and graphic print designs are Photoshop brushes. Photoshop brushes add spice to the overall appearance of any design. This type of design resource has a capability to attract the attention of your projected viewers because it provides your creations an artistic look and feel. If you are going to intelligently apply these Photoshop brushes in
複数の画像に枠・ロゴ・ウォーターマークなどを簡単に追加できるフリーソフト「GoodFrame」
フォルダに入っている複数の画像にカスタマイズした枠・ロゴ・ウォーターマーク・サインを入れることができ、画像のトリミングやリサイズも可能なフリーソフトが「GoodFrame」です。Windows上で起動可能となっています。 ダウンロード、インストール、操作方法などについては以下から。 Download | FDSoftware http://fdsoftware.frandevs.fr/?page_id=52 上記サイトの「DOWNLOAD」をクリック。 ダウンロードしたインストーラーを実行。 「Next」をクリック。 「Next」をクリック。 「Next」をクリック。 「Install」をクリック。 「Finish」をクリック。 操作画面が表示されます。 今回は、フォルダに入っている全ての画像をまとめて処理します。 「Directory」にチェックを入れて、画像が入っているフォルダを選択。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BrowserFrame | Wrap screenshots in browser frames
Screenzy - Beautify your Pictures and Screenshots Online
ガーリーやゴシック系のデザインに使える！1,500種類以上のレース素材が無料でダウンロードできる -ダ・レース
IE10をはじめ、Firefox, Chrome, Safari, Operaなど各ブラウザの枠のPSD素材のまとめ
デスクトップ・タブレット・スマフォなど、最近のデバイスが全て揃ってる手書き用のモックアップのPDF素材 -INTERFACE SKETCH
デザイン枠専門サイトFRAME Design – 1000以上の飾り枠のある素材サイト