Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
Illustratorで画像を埋め込む方法！埋め込み配置とリンク配置の違い | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのカイトです！ 僕はLIGに入社する前、アルバイトでグラフィックデザインを少しだけ作ったことがあるのですが、そのときに入稿データの作成で悩んだことがあります。 印刷会社のサイトからIllustratorデータ（以下Aiデータとします）を入稿しようと思ったところ、注意書きで「リンク切れにご注意ください」とサイトに書かれており、リンク切れのリの字も知らず頭を抱えたことです。 チラシやポスターのように写真の入ったデザインを印刷依頼する場合、画像の配置方法を「埋め込み配置」と「リンク配置」のどちらかで作成しなければなりません。 これらをそれぞれ正しい方法で配置をしないと印刷の際に「リンク切れ」という不具合が発生し、正しく写真が印刷されません。 今回はグラフィックデザインの入稿前に確認しておきたい画像の「埋め込み配置」と「リンク配置」の違いと方法について説明しようと思います。
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
Firefox29でリロードボタン・停止ボタンの位置を移動させる方法
Firefox29でリロードボタン・停止ボタンの位置を移動させる方法を紹介します。 １．はじめに Firefox29になってレイアウトが変わりました。 それによりカスタマイズできる内容も変更されたようです。 Firefox29のリロードボタンは、アドレスバーの右側に表示されています（停止ボタンはリロード中に同じ位置に表示）。 Firefox29のリロードボタン Firefox28のリロードボタンもアドレスバーの右側に表示されています。 Firefox28のリロードボタン が、Firefox28までは「ツールバー」→「カスタマイズ」でリロードボタンを移動することができました。 Firefox28：「ツールバー」→「カスタマイズ」でボタンの移動が可能な状態 Firefox28：リロードボタン・停止ボタンを移動したところ が、Firefox29以前ではカスタマイズ画面を表示しても、リロード・停止
応答メッセージボックスを好きな位置に設置する | Contact Form 7 [日本語]
This page is also available in English. ブログの訪問者がコンタクトフォームで送信すると、その訪問者は「あなたのメッセージを送信しました」とか「入力内容に不備があります」といった Contact Form 7 からの応答メッセージを目にすることになります。これは時々ユーザーから指摘を受けることですが、この応答メッセージを表示する位置がよくないために、訪問者がたびたびこのメッセージを見落としてしまうのだそうです。 この応答メッセージはデフォルトではフォームの最下部に表示されます。この場所を、応答メッセージのためのプレースホルダー [response] を設置することで変更が可能です。この [response] タグをフォーム内の好きな位置に置いてください。複数設置することもできます。これで応答メッセージはフォーム送信後にこのプレースホルダーの位置に表示さ
![応答メッセージボックスを好きな位置に設置する | Contact Form 7 [日本語]](https://cdn-ak-scissors.b.st-hatena.com/image/square/446e1bccef6284edf6dbeb0a2daf13487fcbe5de/height=288;version=1;width=512/https%3A%2F%2Fcontactform7.com%2Fwp-content%2Fplugins%2Fcf7com-utils%2Fimages%2Ficon-128x128.png)
[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
クライアントに納品するWordPressの管理画面カスタマイズ vol.1
こんにちは。gqevu6bsiz です。 このページでは、クライアントにwordpressをCMSとして納品する際に、管理画面をカスタマイズして納品したい人で、あまりfunctions.phpに色々と書きたくない人や、何かを非表示にする際にしょっちゅうgoogleで検索してコピペするのが面倒な人向けに、gqevu6bsiz が作成したプラグインを利用して、おすすめのカスタマイズ法を紹介します。 Ｗｅｂの知識があまり無いクライアント様向けに、余計なものを触れないようにカスタマイズしたいWeb制作者を想定しています。 クライアントに納品するwordpressの管理画面カスタマイズ vol.1 クライアントに納品するwordpressの管理画面カスタマイズ vol.2 クライアントに納品するwordpressの管理画面カスタマイズ vol.3 クライアントに納品するwordpressの管理画面カ
アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート
グリッドベースに配置されたパネルをダイナミックなアニメーションで配置変更するポートフォリオ用のテンプレートを紹介します。 Expanding Fullscreen Grid Portfolio オンラインデモ [ad#ad-2] Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけで、そのまま利用できると思います。 HTML 最初に表示されるパネルのHTMLです。 <div class="item block" data-bgimage="imag
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress を専用ディレクトリに配置する - WordPress Codex 日本語版