Contact Form 7 専用、使いまわせませるCSS3テンプレート

カテゴリ:WEB技術 タグ:,
閲覧数: 8,625 views
公開日:2013年1月29日

WordPress でみんなが使ってる、人気の Contact Form 7。
コーディングしててふと気づいたのですが、 Contact Form 7 プラグインが書きだすCSSのクラス、しっかりとマークアップされているんですね。

作者さんさすがだなぁと思いつつ、特にHTMLを Contact Form 7 の編集画面でさわらなくても、それなりのデザインになるCSSプロパティのテンプレートにできあがったので、ちょっと掲載。

イメージとしてはTwitterでしょうか。

 Twitter風の Contact Form 7 CSSデザイン

Twitter風の Contact Form 7 CSSデザイン
CSS3でbox-shadow、focus をしてます

いろいろやれるんですが、カスタマイズしやすいよう、シンプルに組んでます。やはりめんどうなbox-shadow周りが書いてあるのが楽な印象。

とりあえずは input type が texttextarea のみですが、そのままコピペでCSSプロパティが使いまわせますので、時間短縮になかなか重宝しそうな気がします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です