[B! 破線] masakuma0812のブックマーク

masakuma0812 id:masakuma0812

破線に関するmasakuma0812のブックマーク (3)

CSSで区切り線を実装するのは、flexboxが簡単で便利！レスポンシブ対応の区切り線を実装するテクニック
要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS flexboxでレスポンシブ対応の区切り線を実装する巧妙で素晴らしいテクニックを紹介します。 Flexbox Dynamic Line Separator by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに区切り線の実装なぜ区切り線が小さい四角になるのか区切り線の太さグラデーションの区切り線破線の区切り線これを行う別の方法終わりにはじめに UIをデザインしているときに
masakuma0812 2022/03/09
CSS

ボーダー

ライン

レスポンシブ

対応

Flexbox

グラデーション

破線

コード
リンク
こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック
ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。しかし、いくつかのテクニックを使用することで、それが実現できます！ Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Border Generator by Amit Sheen (@amitsheen) on CodePen. このテクニックのポイントは4つの背景（background）を使用することです。backgroundプロパティはカンマ区切りの値を取るため、4つの背景（上下左右に沿って1つずつ）を設定し、それらをボーダーのようにサイズ変更することで、borderプロパティの制約を解除することができます。ジェネーターで自分好みのボーダーを簡単に作成で
masakuma0812 2020/08/25
CSS

ボーダー

破線

ドット

アニメーション

小技

コード

まとめ
リンク
[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ |　バニデザノート
photoshopでドットのラインを描く方法をまとめてみます。さいごに、配布ブラシもあります。 Fireworksなら、線を描いて、プロパティーから「ストロークを編集」とするときれいなドットラインが描けるのですが photoshopではそういった機能がないんですね。ドットラインを描くにはどうしたらいいのか探してみたら、みなさん色々な方法でやってましたので、その方法をご紹介。ブラシを使う（１）- 間隔設定を使うブラシ設定の「間隔」という設定を100%以上にすると破線になります。 %設定は、割り切れる数字とか、キレイな数字のほうがうまくいく気がします。参考：http://www.dougamanual.com/blog/247/1430/e6849.html ブラシを使う（２）- 登録されたブラシ小さい四角形をつくって、その中に一つの「-」を描き、「ブラシを定義」し上記と同様
masakuma0812 2011/11/22
Photoshop

プラグイン

ブラシ

破線

ライン

知識

小技

情報

サンプル

まとめ
リンク
1