PAYA.net

ユーザ用ツール

サイト用ツール

現在位置: start » digital » css » tips
トレース:
digital:css:tips

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
digital:css:tips [2018/12/28 13:35] – [応用] payadigital:css:tips [2018/12/28 13:55] (現在) – paya
行 17: 行 17:
 </html> </html>
 ====== みずたま背景 ====== ====== みずたま背景 ======
-<code css dotted pattern>+<code css dotted_pattern.css>
 .dottedbg { .dottedbg {
  background: #888;  background: #888;
行 37: 行 37:
 </html> </html>
 ====== みずたま背景２ ====== ====== みずたま背景２ ======
-<code css dotted pattern>+<code css dotted_pattern.css>
 .dottedbg2 { .dottedbg2 {
  background: #888;  background: #888;
行 57: 行 57:
 </html> </html>
 ====== みずたま背景３ ====== ====== みずたま背景３ ======
-<code css dotted pattern>+<code css dotted_pattern.css>
 .dottedbg3 { .dottedbg3 {
  background: #888;  background: #888;
行 77: 行 77:
 </html> </html>
 ===== 応用 ===== ===== 応用 =====
-<code css dotted pattern>+<code css dottedButton01.css>
 .dotteButton01 { .dotteButton01 {
  background: #E0609F;  background: #E0609F;
- background-image: radial-gradient(#965BC4 20%, transparent 0), radial-gradient(#965BC4 20%, transparent 0); + background-image: radial-gradient(#965BC4 30%, transparent 0), radial-gradient(#965BC4 30%, transparent 0); 
- background-position: 0 0, 10px 10px; + background-position: 0 0, 15px 15px; 
- background-size: 20px 20px; + background-size: 30px 30px; 
- border: 2px inset rgba(108, 69, 138, 0.6);+ border: 2px inset rgba(108, 69, 138, 0.3);
  border-radius: 0.5em;  border-radius: 0.5em;
  line-height: 1;  line-height: 1;
  padding: 0.4em 1.5em;  padding: 0.4em 1.5em;
  color: white;  color: white;
- font-size: 110%;+ font-size: 150%;
  font-weight: bold;  font-weight: bold;
 + text-decoration: none;
  position: relative;  position: relative;
- transition-duration: 3sec; + top: 0; 
- box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.3);+ left: 0; 
 + transition-property: all; 
 + transition-duration: 0.5s; 
 + box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.3); 
 + text-shadow: 1px 0 0 rgba(0, 0, 0, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 0 rgba(0, 0, 0, 0.2), -1px 0 0 rgba(0, 0, 0, 0.3), -1px -1px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.3), 1px -1px 0 rgba(0, 0, 0, 0.2);
 } }
 .dotteButton01:hover { .dotteButton01:hover {
 + background-image: radial-gradient(rgba(0,0,0,0.1) 30%, transparent 0), radial-gradient(rgba(0,0,0,0.1) 30%, transparent 0);
  top: 2px;  top: 2px;
  left: 1px;  left: 1px;
  text-decoration: none;  text-decoration: none;
- opacity: 0.7; 
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 + transition-duration: 0.1s;
 } }
 </code> </code>
行 105: 行 111:
 <style type="text/css"> <style type="text/css">
 #dotteButton01 { #dotteButton01 {
- display: inline-block; 
  background: #E0609F;  background: #E0609F;
  background-image: radial-gradient(#965BC4 30%, transparent 0), radial-gradient(#965BC4 30%, transparent 0);  background-image: radial-gradient(#965BC4 30%, transparent 0), radial-gradient(#965BC4 30%, transparent 0);
行 115: 行 120:
  padding: 0.4em 1.5em;  padding: 0.4em 1.5em;
  color: white;  color: white;
- font-size: 110%;+ font-size: 150%;
  font-weight: bold;  font-weight: bold;
  text-decoration: none;  text-decoration: none;
  position: relative;  position: relative;
 + top: 0;
 + left: 0;
  transition-property: all;  transition-property: all;
- transition-duration: 4s; + transition-duration: 0.5s; 
- box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3);+ box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 0 rgba(0, 0, 0, 0.2), -1px 0 0 rgba(0, 0, 0, 0.3), -1px -1px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.3), 1px -1px 0 rgba(0, 0, 0, 0.2);  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 0 rgba(0, 0, 0, 0.2), -1px 0 0 rgba(0, 0, 0, 0.3), -1px -1px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.3), 1px -1px 0 rgba(0, 0, 0, 0.2);
 } }
 #dotteButton01:hover { #dotteButton01:hover {
- background-color: #F782BB;+ background-image: radial-gradient(rgba(0,0,0,0.1) 30%, transparent 0), radial-gradient(rgba(0,0,0,0.1) 30%, transparent 0);
  top: 2px;  top: 2px;
  left: 1px;  left: 1px;
  text-decoration: none;  text-decoration: none;
- opacity: 0.7; 
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 + transition-duration: 0.1s;
 } }
 </style> </style>
digital/css/tips.1545971758.txt.gz · 最終更新: by paya