画像も貼り付けれる、ロングシャドーも作れるCSSジェネレーター
このCSSジェネレーターはbackgroundに画像を貼り付けれるのも素晴らしい理由です。
グラデーションを使えばそれなりに出来ますが、やはりアイコンを埋めたりはなかなか簡単にはいきません。
ですが「EnjoyCSS」は画像を背景に指定できるので色々なデザインのボタンやギミックなどに使えます。
例えばこんなギミックボタンがものの5分ぐらいで出来上がります！
Tokyo Q Studio
<div class="tqs_btn">Tokyo Q Studio</div>
<link async href="http://fonts.googleapis.com/css?family=Syncopate" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
.tqs_btn {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: left;
width: 500px;
height: 90px;
position: relative;
cursor: pointer;
overflow: hidden;
border: none;
-webkit-border-radius: 10px;
border-radius: 10px;
font: normal normal bold 1.6em/90px "Syncopate", Helvetica, sans-serif;
color: #ecf0f1;
text-align: center;
text-indent: 19%;
-o-text-overflow: clip;
text-overflow: clip;
background: url("https://enjoycss.com/bg-img/custom/16617-1t0tdsx.png");
background-repeat: no-repeat;
background-position: auto auto;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 500px 90px;
background-size: 500px 90px;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-webkit-transform: scaleX(0.97) scaleY(0.9) ;
transform: scaleX(0.97) scaleY(0.9) ;
}
.tqs_btn:hover {
background-repeat: no-repeat;
background-position: auto auto;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 500px 90px;
background-size: 500px 90px;
-webkit-box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) ;
box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) ;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5) ;
-webkit-transform: none;
transform: none;
}
.tqs_btn:active {
background-repeat: no-repeat;
background-position: auto auto;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 500px 90px;
background-size: 500px 90px;
-webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.2) ;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.2) ;
text-shadow: 4px 4px 6px rgba(0,0,0,0.5) ;
-webkit-transform: translateY(4px) ;
transform: translateY(4px) ;
}
たった5分ですｗ
htmlとcssをそのまま貼り付ければ完成です。
これは使えます！
しかもテキストで管理出来るので変更もテキストをちょちょいと直せば利用できます。
当サイトでは「MW wp form」を使用していますが、ボタンを画像付きのものに変更した場合があります。
その場合この様に指定すればボタンを変更出来ます。
<span class="submitback">[mwform_backButton value=""]</span>
<span class="btn">[mwform_submitButton value=""]</span>
「class=”submitback”」は 確認画面の「戻る」ボタンです。
「value」にテキストを書けばそれが表示されます。
「class=”btn”」は入力画面ではボタンの上に「確認画面へ」と表示され確認画面では「送信する」と変化します。
後はCSSを合わせてコピペすれば実装完了です！
問合せフォーム：https://tqs.jp/inquiry/
（現在はこのジェネレーターを使用していません。後日変更致します。）
GoogleChromeにも対応！素早くアクセス出来る 「EnjoyCSS」
Webサービスなのでブラウザからのアクセスは必須です。
EnjoyCSSはGoogleChromeの拡張に登録出来るので素早くアクセス出来る様になります。
なんて便利なｗ。
後書き
こう言ったギミックがたった5分で作成できると言う事は制作時間の短縮にも繋がります。
ガンガン使ってスピード速めて動きもガンガンでクライアントにも喜んでもらえれば幸せになれますね！