試したことを記録していくもの。
以下記事にて実装
投稿日：2021/11/04
・「何食べたい？」に対して「なんでもいい」以外の言葉、探してみませんか？
カラーコード
・WEB色見本 原色大辞典 - HTMLカラーコード
Web上の画面再読み込み
Web上で再読み込みボタンを作る
HTMLとCSSの記述のみで実装可能
参考
・See-SS
HTML
a href=""の""は「再読み込み」を行う指示
a href=""を"#"にすると「ページ上部へ戻る」の指示になる
やりたいことによって記述が変わるので注意。
<a href="" class="button-19">他の料理も見たい場合は押してください</a>
CSS
.button-19 {
position: relative;
padding: 0.5em 1.6em;
font-size: 0.8em;
color: #8b4513;
text-decoration: none;
user-select: none;
border-top: 1px #8b4513 solid;
border-bottom: 1px #8b4513 solid;
transition: 0.3s;
}
.button-19:hover {
opacity: 0.5;
}
.button-19::after,
.button-19::before {
position: absolute;
left: 0;
width: 100%;
height: 1px;
content: '';
background: #8b4513;
}
.button-19::after {
top: 2px;
}
.button-19::before {
bottom: 2px;
}
背景グラデーション
CSSの記述のみで実装可能
CSS
/*背景グラデーション*/
body {
overflow: visible !important;
background: -webkit-linear-gradient(45deg, #fffacd 10%, #ffa500 90%);
background: -moz-linear-gradient(45deg, #fffacd 10%, #ffa500 90%);
background: -ms-linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
background: -o-linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
background: linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
}
気になるサイト
・コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
・CSSで表現する背景パターン51種＋【コピペで簡単！/アニメーション有】
・コピペでできるCSSボタンプロデザインをコピペで実装！ 【 グラデーション・カラフル系 】
・【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
・CSSで見出しをデザイン！コピペできるおしゃれな見出しデザインまとめ
・かわいい系デザインに使えるCSSいろいろ
↧