Create stunning liquid glass, glassmorphism and neumorphism CSS effects with our free online generator. Live preview, instant code export, and beautiful presets.
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？ テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました！ lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素（おそらく<html>要素）のline-heightプロパティの計算値に等しい これらの新しい単位が役立つシーンはどこだと思いますか？ Šime Vidasの記事によると、
当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番 リソース はじめに この記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。 多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �� ⪪View in English � ⪪Always switch to English 重ね合わせコンテキスト (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。重ね合わせコンテキストは、Z 軸（画面上の「奥行き」のサイズと考えてください）に沿って要素が互いに重なり合う方法を決定します。重ね合わせコンテキストは、重なり合うコンテンツがどのようにレンダリングされるかの視覚的な順序を決定します。 重ね合わせコンテキスト内の要素は、その重ね合わせコンテキスト外の要素とは独立して重ね合わされます。これにより、ある重
Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons! The Freedom of CSS Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! Use In Graphic Apps Weather Icons come with OTF and TTF files
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
CSSの数学関数と言えばcalc()関数、多くの人が便利に使用していると思います。 そんなCSSの数学関数がどうやら増える方向で動いているようです。 CSSワーキンググループのメンバーであるBenjamin氏のツイートによると、CSSに多くの数学関数を追加することで合意した、とのことです。 The CSS Working Group agreed this morning on adding many math functions. We now have: • calc() • min() • max() • clamp() • sin() • cos() • tan() • acos() • asin() • atan() • atan2() • hypot() • sqrt() • pow() The face of CSS is rapidly changing. — Benjam
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応 iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 投稿日2015年05月07日 更新日2015年05月07日 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before, * {
2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
Predictable 予測しやすい Reusable 再利用しやすい Maintainable 保守しやすい Scalable 拡張しやすい 参考：https://philipwalton.com/articles/css-architecture/ CSS設計の必要性 コスト削減 実装者の単価を減らせる 実装工数を減らせる 既存のコンポーネントを使うことで工数を減らせる デグレが起きる確率が減り改修工数を減らせる 部分的な改修を行うことで並行して実装ができる 観測した限りのCSS設計 OOCSS オブジェクト指向 Bootstrap BEM（MindBEMding） シングルクラスにする命名規則 SMACSS OOCSSやBEMなどから影響を受けている Base、Layout、Module、State、Themeのカテゴリーから構成される MCSS（Multilayer CSS） OO
CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。 コードを見ながらサンプルを確認することができるので、先日まとめたテキストエフェクトを含む、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。 詳細は以下から。 CSS3の新しい可能性！美しいテキストエフェクト用コードスニペット24個まとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 Collection of Button Hover Effects CSS3で表現された、実践的に使えるボタンデザイン5つを収録していま
出典 : Designed by Freepik HTMLのul、ol、liタグとCSSを使ったリスト(箇条書き)デザインを紹介します。 どのリストデザインも画像などは使わず、HTMLとCSSだけで表現することが可能です。 またコピペするだけでブログやホームページに実装できますので、気に入ったのがあればお試しください。 olを使ったオシャレなリストデザイン まずはhtmlのolタグを使った、番号付きのリスト(箇条書き)デザインから紹介します。 番号が必要なリストに対して使用して下さい。 またほとんどのリストデザインには、下記のHTMLコードを使っています。 違うHTMLコードを使用する場合は、CSSコードと合わせて掲載します。 <ol class="sample1"> <li>List1</li> <li>List2</li> <li>List3</li> <li>List4</li> <
MiniShadowArt A tool converting your images in CSS box-shadow pixel-art in less than 512b! (Don't use too big images, it will crash your browser) Source code: <html ondrop='with(new FileReader)readAsDataURL(event.dataTransfer.files[0]),onload=function(){ I=new Image;I.src=result;w=c.width=I.width;h=c.height=I.height;a="\46lt;div style=\47width:1px; height:1px;box-shadow:";z=c.getContext("2d");z.dr
Get started any way you want Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. Read installation docs Install via package manager Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also use any demo from ou
CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。
![[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf887b0bc6b94c6a1fafc14cebbccdea2a06ef5b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018072601.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
