column

WYSIWYGエディタのみでCSSをジェネレートできるWebサービス「EnjoyCSS 」が神な理由

CATEGORY CSS PC & Web Webサービス お勉強 TAG,

投稿日:2014年11月18日 更新日:

執筆者:

画像も貼り付けれる、ロングシャドーも作れるCSSジェネレーター

 

スクリーンショット 2014-11-20 10.10.07

 

 

このCSSジェネレーターはbackgroundに画像を貼り付けれるのも素晴らしい理由です。

グラデーションを使えばそれなりに出来ますが、やはりアイコンを埋めたりはなかなか簡単にはいきません。

ですが「EnjoyCSS」は画像を背景に指定できるので色々なデザインのボタンやギミックなどに使えます。

 

スクリーンショット 2014-11-20 10.12.56

 

 

例えばこんなギミックボタンがものの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分ですw

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の拡張に登録出来るので素早くアクセス出来る様になります。

スクリーンショット 2014-11-20 10.09.36

なんて便利なw。

 

後書き

こう言ったギミックがたった5分で作成できると言う事は制作時間の短縮にも繋がります。

ガンガン使ってスピード速めて動きもガンガンでクライアントにも喜んでもらえれば幸せになれますね!

 

 

 

紹介サイト:http://www.lifehacker.jp/2014/10/141016enjoycss.html


コメントを残す

関連記事

PREV

JP-SecureのSiteGuard WP Pluginにあった落とし穴!? 管理画面が404に早変わり、アクセス出来ないそんな時の対処法はこれだ!!

NEXT

Google Pagespeed Insights for WordPressは入れておくと幸せになるかも! Webサイトのパフォーマンスレポートを自動

WYSIWYGエディタのみでCSSをジェネレートできるWebサービス「EnjoyCSS 」が神な理由

side bar

メニューはこちら

メニューはこちら