問題タブ [pure-css]

テキストをオーバーレイできるコンテンツ ボックスを作成しようとしています。私は新しい機能を構築するために取り組んでいます。開発中ですが、ページに加えられる変更のいくつかを実際に示したいと思います。したがって、すべてを灰色のボックスに入れ、「Under Construction」というテキストを隅から隅まで重ねて配置したいと思います。

私は他の要素に PureCSS を使用しています。これが必要な詳細ではないことはわかっていますが、このフレームワークに、私が気付いていないクールなものが既に組み込まれている場合は、それを使用するだけでよいでしょう。

そこで、このセクションの周りにボックスを配置したかったので、グリッド コンテキストに配置することにしました。また、ボックスを横切って 45 度の角度でテキストを配置したいと考えていました。これが私が始めたところですが、今は少し進化させたいと思っています。コンテンツを 45 度の角度ではなく、隅から隅までオーバーレイしたいと考えています。ここで重要なのは、コンテンツ ボックスとページのサイズが変更されたときに、これを動的にサイズ変更することです。ボックスの上に線を配置するいくつかの例以外は見つかりませんでしたが、動的なものやテキストを含むものはありません。

ボックスのサイズを計算してから正しい角度を計算するために動的に数学を実行する方法、または相対位置で左下から右上に移動する方法が必要です。したがって、私はtransform: rotate(-45deg);意志を変更する必要があることを知っています。また、可能であれば、テキストをこの行の中央に配置したいと思います。

最後に、これは少し話題から外れますが、可能であれば「工事中」をすべて CSS スタイリングから取得するのは素晴らしいことですが、それを機能させる方法はまだわかりません。それを CSS の一部に入れようcontent: '';として、HTML から取り出したところ、すべてのテキストが消えて絵文字だけが残りました。

これが重複している場合は、正しい方法を教えてください。時間をかけて探しましたが、検索用語が間違っている可能性がありますが、良い解決策が見つかりませんでした.

角度を定義する Javascript を更新して 、 の角から角までの角度を定義する関数を少し追加しましたdiv。今、CSS に追加するための助けが必要です。divプロパティを取得できるように、上記に以下を追加する必要がありましたid="diag"

作成した新しい変数をrotatdegシートのスタイリングに追加する必要があります。助けてください。

私もこれを見つけましたが、役に立ちませんでした。おそらく、いくつかの説明がこのチュートリアルをより意味のあるものにするのに役立つでしょう: http://jonraasch.com/blog/javascript-style-node

フレームワークに基づいて小さなブログを作成しmetalsmithてPureCSSいます。これは、次のような単純な 3 行レイアウトです。

私はまだ CSS とレスポンシブ デザインについて多くの新しいことを学んでいるので、ナビゲーション バーもグリッド行に配置する必要があるのか​​、それともその外側に配置する必要があるのか​​ 疑問に思っています。PureCSS のドキュメントには、次のように記載されています。

人に見えるすべてのコンテンツは、グリッド ユニット内に含める必要があります。これにより、コンテンツが適切にレンダリングされます。

もちろん、ナビゲーションメニューはユーザーに表示されるため、これはyesになります。しかし、それはナビゲーション バーのメディア クエリの処理をより複雑にしませんか? では、レスポンシブ グリッドを使用する場合、ナビゲーション バーをどこに配置すればよいでしょうか?

次の基本レイアウトがあります。これを、純粋な css を使用してレスポンシブ グリッドに変換したいと考えています。

<div class="pure-u-3-24">ToC</div>残念ながら、特定のブレークポイントなどで非表示にする方法がわかりません。

基本ファイルpure.cssと、グリッド grids -responsive.cssのクラスを含む css を調べました。.hidden-*-downBootstrap から知られているクラスのようなものはないようです。また、これを実現するための (purecss-) ユーティリティも見つかりませんでした。

PureCSS を使用して目標を達成し、特定のブレークポイントで要素を非表示にするにはどうすればよいですか?