Using CSS to Control Text Selection
CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in! Select AllSometimes it’s nice to have all the text in an element automatically selected when you click on it. This is particularly handy for text that is copied/pasted in full (code snippets, one-time passwords, pr
@property | CSS-Tricks
The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about! There is a draft spec and an “intent to ship” document. The code from that document shows: @property --my-property { syntax: "<color>"; initial-value: green; inherits: false; } We’ve got more information on all this now in our Complete Guide to Custom Properties. That is the CSS exact-equival
Gradient Borders in CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Let’s say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this.I’ll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of
Dark modes with CSS | CSS-Tricks
With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query. Safari Technology Preview 71 also has supported-color-schemes, which… well, I couldn’t exactly tell you what that does. The media query is like this: @media (prefers-color-scheme: dark) { } I
CSS and Network Performance – CSS Wizardry
9 November, 2018 CSS and Network Performance Written by Harry Roberts on CSS Wizardry. Table of Contents What’s the Big Problem? Employ Critical CSS Split Your Media Types Avoid @import in CSS Files Beware @import in HTML Firefox and IE/Edge: Place @import before JS and CSS in HTML Blink and WebKit: Wrap @import URLs in Quotes in HTML Don’t Place <link rel="stylesheet" /> Before Async Snippets Pla
CSSアニメでiPhoneのブラウザが落ちる「フォンカイロ スマホ発熱中」で実際にブラウザを落としてみた＋カイロとして暖をとってみた
あるCSSアニメーションを実行させるとiPhoneに負荷がかかり、iPhoneが落ちる「リスプリング」が発生したり、端末が温まったりする現象が明らかになりました。実際に編集部にあるiPhoneで試してみたところ、本当に一瞬でリスプリングがかかってしまうことがわかりました。 フォンカイロ スマホ発熱中 https://phone-kairo.set0gut1.com/ この現象は、「東京の野良プログラマー」というset0gut1さんが発見したもの。詳細は以下のページに書かれているのですが、仕組みとしてはオブジェクトがグルグル回るCSSアニメーションの部分にCSSフィルタで200pxのdrop-shadowをつけたものをブラウザ「Safari」で表示させると、画面をピンチしてズームした瞬間にリスプリングがかかるというもの。iPhone Xなどの端末では、ページを開いた瞬間にリスプリングしてしま
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
Keiyaku CSS
Keiyaku CSS Crazy Style Formatter for Japanese Contract Document Unfortunately, the style in Japanese contract document is totally crazy. I hope this CSS library cures that a bit: write a document logically structured in markdown or HTML, apply keiyaku-css to it then, you’ll get a well-formed document good luck! 概要 Keiyaku CSS（以下、「本件ライブラリ」という。）は、Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするための、CSSライブラリです。 ユ
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>
![[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2cf8d2fa440a82f4d989af711914223cad329f6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015121100.png)
【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」
【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」 佐川 夫美雄（Ashiras, inc.） Twitter Bootstrapバージョン4アルファ版が8月19日に公開されました。既にご存知の通りTwitter BootstrapはレスポンシブでモバイルファーストなCSSフレームワークです。さっとレスポンシブなサイトを構築するのに多くの方が利用しているのではないかと思います。この記事ではTwitter Bootstrapバージョン4の変更点について、筆者が「これは！」と思ったところをピックアップしてまとめます。 バージョン4の変更内容はGitHub上のissueで確認することができます。この中で筆者が注目している事項は LESSからSASSへの変更 アイコン（グラフィックアイコン）の削除 IE8のサポート終了とjQuery1系からjQuery2系
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
Lining.js·複数行表示に使えるスタイルシートライブラリ MOONGIFT
スタイルシートは便利になっていて、多数の機能を備えるようになっています。CSSセレクタを使って細かく要素を指定できるようになっていますが、それでも足らないものがあります。それが複数行記述した時の、2行目、3行目の指定法です。 そうした指定法はなく、JavaScriptで対応する他なかったのですが、Lining.jsはその行ごとの指定を可能にしてくれるライブラリです。 Lining.jsの使い方 例えばスタイルシートを次のように記述します。 .poem { line-height: 40px; font-size: 32px; font-family: 'Dancing Script' serif; } .poem .line:nth-of-type(-n+2) { font-size: 42px; color: #DA4453; } こちらが結果。3行目からスタイルが変わっています。 次の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Background-clip: text | Can I use... Support tables for HTML5, CSS3, etc
Careful When Changing the Display of `summary` | CSS-Tricks
The Slideout Footer | CSS-Tricks
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
Loaders.css
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ
