digital:css:tips
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
digital:css:tips [2018/12/28 13:42] – [応用] paya | digital:css:tips [2018/12/28 13:55] (現在) – paya | ||
---|---|---|---|
行 17: | 行 17: | ||
</ | </ | ||
====== みずたま背景 ====== | ====== みずたま背景 ====== | ||
- | <code css dotted pattern> | + | <code css dotted_pattern.css> |
.dottedbg { | .dottedbg { | ||
background: | background: | ||
行 37: | 行 37: | ||
</ | </ | ||
====== みずたま背景2 ====== | ====== みずたま背景2 ====== | ||
- | <code css dotted pattern> | + | <code css dotted_pattern.css> |
.dottedbg2 { | .dottedbg2 { | ||
background: | background: | ||
行 57: | 行 57: | ||
</ | </ | ||
====== みずたま背景3 ====== | ====== みずたま背景3 ====== | ||
- | <code css dotted pattern> | + | <code css dotted_pattern.css> |
.dottedbg3 { | .dottedbg3 { | ||
background: | background: | ||
行 77: | 行 77: | ||
</ | </ | ||
===== 応用 ===== | ===== 応用 ===== | ||
- | <code css dotted pattern> | + | <code css dottedButton01.css> |
.dotteButton01 { | .dotteButton01 { | ||
background: | background: | ||
- | background-image: | + | background-image: |
- | background-position: | + | background-position: |
- | background-size: | + | background-size: |
- | border: 2px inset rgba(108, 69, 138, 0.6); | + | border: 2px inset rgba(108, 69, 138, 0.3); |
border-radius: | border-radius: | ||
line-height: | line-height: | ||
padding: 0.4em 1.5em; | padding: 0.4em 1.5em; | ||
color: white; | color: white; | ||
- | font-size: | + | font-size: |
font-weight: | font-weight: | ||
+ | text-decoration: | ||
position: relative; | position: relative; | ||
- | transition-duration: | + | top: 0; |
- | box-shadow: | + | left: 0; |
+ | transition-property: | ||
+ | transition-duration: | ||
+ | box-shadow: | ||
+ | text-shadow: | ||
} | } | ||
.dotteButton01: | .dotteButton01: | ||
+ | background-image: | ||
top: 2px; | top: 2px; | ||
left: 1px; | left: 1px; | ||
text-decoration: | text-decoration: | ||
- | opacity: 0.7; | ||
box-shadow: | box-shadow: | ||
+ | transition-duration: | ||
} | } | ||
</ | </ | ||
行 105: | 行 111: | ||
<style type=" | <style type=" | ||
# | # | ||
- | display: inline-block; | ||
background: | background: | ||
background-image: | background-image: | ||
行 115: | 行 120: | ||
padding: 0.4em 1.5em; | padding: 0.4em 1.5em; | ||
color: white; | color: white; | ||
- | font-size: | + | font-size: |
font-weight: | font-weight: | ||
text-decoration: | text-decoration: | ||
行 122: | 行 127: | ||
left: 0; | left: 0; | ||
transition-property: | transition-property: | ||
- | transition-duration: | + | transition-duration: |
box-shadow: | box-shadow: | ||
text-shadow: | text-shadow: | ||
行 132: | 行 137: | ||
text-decoration: | text-decoration: | ||
box-shadow: | box-shadow: | ||
- | transition-duration: | + | transition-duration: |
} | } | ||
</ | </ |
digital/css/tips.1545972147.txt.gz · 最終更新: 2018/12/28 13:42 by paya