フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更
CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。
CSSだけで作る！クールなノイズアニメーション - コハム
Make some hacky noise with CSS gradients 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 偶然見つけたエフェクトで、かなりクールだと思いました。繰り返しの放射状グラデーションのリングのサイズを@propertyを使って非常にゆっくりと0pxにアニメーションさせていたところ、0に近づくと狂い始めることに気づきました。 そこで、私は考え始めました。 セットアップ トリック アニメーション化 最後に セットアップ 最初に作業していたマスクは、適度な5pxと5pxの間隔の放射状の繰り返しマスクです： .noise { --lines: 4px; mask: repeating-radial-gradient( circle at center, #000, var(--lines), #000, 0, /*
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
CSS アニメーションでネオンサインの点灯の雰囲気を出してみる - Qiita
SVGのロゴをネオンサインが点灯するようなイメージのアニメーションにできないかと試行錯誤した結果を記事に残しておく。 最終完成バージョン まずは出来上がりを、Codepen で確認してほしい。Start ボタンを押すと、ロゴが点灯する。 ネオンサインが点灯する雰囲気にみえるとうれしい。 （と言っても、今となってはネオン管っぽいLEDチューブが主流なので、本物のネオン管を見たことがない世代が多いかもしれないが...） See the Pen Neon Sign by hiroatsu (@scqspcfg-the-solid) on CodePen. なお、このアニメーションは、地図共有サイト Toboggar のスプラッシュ画面で使用しているものである。 どうやったらネオンサインの点灯のように見えるか 今回の方法がベストだとは思えないし、ベターですらないような気がするが、とりあえず私はこれ
テキストを1文字ずつアニメーションさせる時の注意点と実装例 – TAKLOG
次の実装例のように、テキストを1文字ずつspan要素で区切ってアニメーションする際の注意点と実装例について纏めたメモ書きです。 実装例テキストアニメーションの実装例（英文）
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
インパクト抜群！CSSで演出するグリッチ効果26選 - コハム
25+ CSS Glitch Effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブやモバイルアプリケーションにテクニカルなひずみのある外観を追加するためのグリッチ効果のコレクションをお探しでしょうか。 今回の記事では、GitHub、CodePenなどの一流サイトから収集した無料のHTML、CSSグリッチ効果のコードサンプルをご紹介します。 ぜひチェックしてみてください！ グリッチ効果はウェブページ上でちらつきや歪んだ外観を表現するのに役立ちます。 テクノロジーのトラブルを模倣するエフェクトで、単純で退屈なサイトにインパクトを与えます。 創造性と目を引くようなアニメーションを持つ、素晴らしいCSSグリッチ効果をご紹介していきましょう。 01. Glitch Effect 02. SVG Glitch 03. glitch
Chrome 124がリリース - Windows版でフォントレンダリングが改善 | ソフトアンテナ
Googleは4月16日(現地時間)、デスクトップ版Chromeブラウザの最新版「Chrome 124」をリリースしました (Chrome Releases、Chrome Developers)。 Chrome 124.0.6367.60/.61(Windows/Mac)、124.0.6367.60(Linux)では、深刻度Highの脆弱性4件を含む合計23件の脆弱性が修正されています。セキュリティ関連の修正の詳細はChromium Security Pageで確認可能です。 Chrome 124ではWindows版でフォントレンダリングの改善が行われています。Windows ClearType Text Tunerの設定からコントラストとガンマ値を取得し、Skiaのテキストレンダリングに適用されるようになる変更です。Windowsの設定が尊重されるようになることで、描画品質の向上が期待さ
CSS だけで、かつ不要な div を使わずに、擬似 Progressive blur - Qiita
この記事の概要 あるときこちらの記事を見ました。 CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。 この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。 この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。 Progressive blur の実現の方向性 usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。 フィルターを小刻みに並べる アルファマスクによる擬似 Progressive blur 1 の フィルターを小刻みに並べる は冒頭の codepen のようなやり方です。 2 の アルファマスクによる擬似 Progressive blur は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
【日本語フォント】Luck Font AFC100-22「無料有り」 - Amari_design - BOOTH
Amari Font Challenge 100-22 仮名実装 📢📢📢特記事項📢📢📢 100日フォントチャレンジ無事完了 この後、この100フォントに仮名を追加することに挑戦します。 英語よりも仮名の理解度が低いので、間違いがあれば遠慮なく教えてください、改善します！ 有料にするか迷ったため、有料か無料かの選択肢を開放しています。 📢デザイン説明 文字の再現性を確保しつつ、画数の間隔に重視、視覚的なバランスを追求しました。 📢利用規約 個人、商用どちらでも利用可能です。 ✨✨✨もしもこのフォントが使用されたら、https://twitter.com/amari_designに教えていただけるとうれしいです！✨✨✨ 本素材を使用した作品については、リツイートなどの形で宣伝させていただく場合があります。 フォントのインストール等の技術的なサポートはいたしません。使用して発生し
メロディライン - アトリエこたつ - BOOTH
「メロディライン」は音符をモチーフにしたインラインフォントです。 ※無料版はカタカナと一部記号のみとなります。 【通常版】収録文字 “”…←↑→↓■□▲△▼▽◆◇○◎●★☆♡♥♪、。〈〉《》「」『』【】〒〔〕〜ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヲンヴヵヶ・ーfifl︑︒︙︷︸︻︼︽︾︿﹀﹁﹂﹃﹄！％（）＋，－．／｛｝～※：；[]^_`［］＝？!"#$%&'()*+,-./0123456789:;=?@ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz０１２
【Free】5×5ドットフォント『5x5 ノスタルジア』【2023.01.14 更新】 - Rwi's Booth - BOOTH
5×5サイズのピクセル風フォント『5x5 ノスタルジア』（5x5 Nostalgia）です。 小さな空間を大きく使ったデザイン。気の抜けた、柔らかい印象が特徴的。 「#5x5ピクセルフォントチャレンジ」という素敵な企画に触発され、制作を行いました。 基本的な文字の字形は5×5サイズ、表示のための余白等を含めると6×12サイズで構成されています。 ライセンス(利用規約) は「M+ FONT LICENCE」と同様の とても自由なライセンスとなります。 ゲーム等への組み込み使用、Webフォント化、改変、再配布等、 煮るなり焼くなりご自由にどうぞ。 もしお気に召しましたら、ご支援（Donate）をいただけますと非常に嬉しいです。 また、当フォントの紹介やご使用報告等をいただけますと飛び上がって喜びます👍 5×5サイズのピクセル風フォント『5x5 ノスタルジア』（5x5 Nostalgia）です
x0y0pxFreeFont
ゼロピクセルフリーフォント 「ドット絵表現から生まれる、魅力ある文字デザインを！」 ゼロピクセルフリーフォントではドットバイドット表示に最適なフォントをつくっています。 主にPixelArtスタイルのゲーム開発者さん向けですが、使用目的は自由です。 License利用規約 フォントから生成されるデータは全て無償で利用できます。表現する内容・媒体も問いません。 .ttfファイルを同梱してのゲームリリースや、商用利用も可能です。 加工・改変・再配布も可能となっていますが、フォントの著作権は放棄しておりません。 当サイトで配布するフォント及び改変データの著作権は、全て患者長ひっくが有します。 加工・改変の有無に関わらず、フォントの著作者であることを主張することはできません。 （よって、フォントそのものを販売したり、それに近い行為は違法性が生じますので、これを禁じます。） フォント利用の際の出典・
コブラフォントアドベンチャーを作りました - WEBAYAN
フリーフォントの利用規約を変更します もう2ヶ月前になりますが、ニコニ・コモンズに大規模アップデートが入りました。今回のアプデで、規約をより細かく設定できるようになったみたいです。以前よりは格段に… フォントについて 自己責任の上で自由にお使い頂けるフリーフォントとなります。詳細については、紹介動画もしくは同封した利用規約を参照のこと。 ウラ話 リメイクしたかったんです！今ならもうちょい良いのができると思って！……って始めたのは良いのですが、気付いたらとんでもないボリュームになってました。漢字126文字ってお前。何とか使い道を探してみてください。 動画内では詳しく触れなかったモダン書体とクラシック書体の設計思想の違いですが、以下の画像を見てもらうのが分かりやすいと思います。 モダン書体は全ての文字が同じサイズに収まるように設計しています。更に可読性を優先しているので、普段使いもしやすいかと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【写真大量】絵描きが習う猫とXで流れてくる猫の違いがこちら「コンピューターで猫の検出率が低い原因です」
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
Raectでsrc以下のsvgをインポートした時に、cssで色を変える方法 - Qiita
Web To Figma
@storybook/cli - Storybook