コーディング

【コーディング】便利なツール紹介

  • このエントリーをはてなブックマークに追加
【コーディング】便利なツール紹介

こんにちは、ワタナベです。

今回はコーディングの際に便利なツールをご紹介。
過去に紹介済みのツールもあるかもですがご了承ください(;’∀’)笑

CSS三角形作成ツール

こちらは横幅、高度を入力すると三角形を作ることができ、作った三角形のcssをコピペしてそのまま使うことができます。
頂点の方向なども変えられるので便利です(‘ω’)ノ

text-shadowジェネレーター

文字に影を落としたい時によく使うtext-shadowのジェネレーター。
すごく便利。影を複数設定することもできます。

box-shadowジェネレーター

text-shadowジェネレーターとほぼ同じ。こちらはbox-shadowのジェネレーターです。
親要素のcss設定も行えます。とても便利。

CSS clip-path maker

まだあまり使っていませんが、clip-pathを使って画像を複雑な形にトリミングすることができます。
見栄えの問題でPC表示とSP表示で画像の表示の仕方を変えたかった時に使用しました。
コピペで簡単に好きな形にトリミングできてしまうので感動しました。
こちらIE非対応となってます。

FANCY-BORDER-RADIUS

こちらまだ使ったことはありませんが、ユニークな楕円の形を作成できるツールです。
CSS clip-path makerは「clip-path」を使用しておりますが、こちらのツールはborder-radiusでユニークな楕円の形を作成することができます。
今後どこかで使えそうです(*‘ω‘ *)!

 

どれも便利なのでぜひ使ってみてください。

 

それではまた次回。

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ