内容へ移動
PAYA.net
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
start
»
digital
»
css
»
tips
トレース:
digital:css:tips
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== CSS Tips ====== <html> <style type="text/css"> .samplebox { width: 300px; height: 250px; display: table-cell; text-align: center; vertical-align: middle; font-size: 200%; color: white; border: 1px solid #888; border-radius: 5px; text-shadow: 1px 1px 3px black; } </style> </html> ====== みずたま背景 ====== <code css dotted_pattern.css> .dottedbg { background: #888; background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0); background-position: 0 0, 25px 25px; background-size: 50px 50px; } </code> <html> <style type="text/css"> #dottedbg { background: #888; background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0); background-position: 0 0, 25px 25px; background-size: 50px 50px; } </style> <div id="dottedbg" class="samplebox">Dotted B.G.</div> </html> ====== みずたま背景2 ====== <code css dotted_pattern.css> .dottedbg2 { background: #888; background-image: radial-gradient(#444 40%, transparent 0), radial-gradient(#444 40%, transparent 0); background-position: 0 0, 25px 25px; background-size: 50px 50px; } </code> <html> <style type="text/css"> #dottedbg2 { background: #888; background-image: radial-gradient(#444 40%, transparent 0), radial-gradient(#444 40%, transparent 0); background-position: 0 0, 25px 25px; background-size: 50px 50px; } </style> <div id="dottedbg2" class="samplebox">Dotted B.G.</div> </html> ====== みずたま背景3 ====== <code css dotted_pattern.css> .dottedbg3 { background: #888; background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0); background-position: 0 0, 10px 10px; background-size: 20px 20px; } </code> <html> <style type="text/css"> #dottedbg3 { background: #888; background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0); background-position: 0 0, 10px 10px; background-size: 20px 20px; } </style> <div id="dottedbg3" class="samplebox">Dotted B.G.</div> </html> ===== 応用 ===== <code css dottedButton01.css> .dotteButton01 { background: #E0609F; background-image: radial-gradient(#965BC4 30%, transparent 0), radial-gradient(#965BC4 30%, transparent 0); background-position: 0 0, 15px 15px; background-size: 30px 30px; border: 2px inset rgba(108, 69, 138, 0.3); border-radius: 0.5em; line-height: 1; padding: 0.4em 1.5em; color: white; font-size: 150%; font-weight: bold; text-decoration: none; position: relative; top: 0; 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 { 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; left: 1px; text-decoration: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition-duration: 0.1s; } </code> <html> <style type="text/css"> #dotteButton01 { background: #E0609F; background-image: radial-gradient(#965BC4 30%, transparent 0), radial-gradient(#965BC4 30%, transparent 0); background-position: 0 0, 15px 15px; background-size: 30px 30px; border: 2px inset rgba(108, 69, 138, 0.3); border-radius: 0.5em; line-height: 1; padding: 0.4em 1.5em; color: white; font-size: 150%; font-weight: bold; text-decoration: none; position: relative; top: 0; 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 { 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; left: 1px; text-decoration: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition-duration: 0.1s; } </style> <a id="dotteButton01" href="javascript:void(0);">みずたまがらのボタン</a> </html>
digital/css/tips.txt
· 最終更新: 2018/12/28 13:55 by
paya
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ