便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
WEBサイトの更新における改行位置について
今日はWEBサイトにおけるテキストの改行位置について書きたいと思います。 サイト上には様々な文字がありますが、形式は二つに分かれます。 「画像文字」と「文字」です。 画像文字 画像文字とは、このサイト左上のロゴや、下の方にあるバナーなどに書かれている文字の事で、Photoshop等のソフトで作成します。 WEBサイトには画像を表示しているだけであり、文字情報ではありません。（※1） 画像文字はデザイン重視の場所で使われ、フォントやサイズ、改行位置などは自由にデザイン出来ます。 プレーンテキスト 画像文字以外の文字は「文字情報」であり、「プレーンテキスト」と呼ばれます。（※以下 「テキスト」とします） テキストは選択してコピー＆ペースト出来るもので、音声ブラウザなら読み上げられます。（※2） WEBサイトの情報のメインになるものであり、今回はこのテキストのお話です。 自然改行と強制改行 WE
[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル
