時空 解 さんの日記
2023
5月
18
(木)
11:10
本文
皆さんこんにちは、時空 解です。
今日は会社がお休みと言うこともあって、朝から「トップに戻るボタン」のデザインを変更していました。
以前のはダサかったですよね。( ^^;
以前のボタンを作成したときには、まだ下記のような参考になるサイトがありませんでした。
・【CSSだけ】トップに戻るボタンの作り方【コピペでOK】
今回のは "上矢印" が分かりやすくて良いです。まぁ以前からこの手のタイプの "上矢印" が一般的でしたが、
「どうやって作っているんだろうか?」
と思っていたんです。
時代が進んで、望みの "上矢印" の作り方が載っているサイトが出てきてくれたのです、良かったよかった。
以前からこの "上矢印" が使いたかったんです。
今日はやっとそれが実現できました。
実際に作ったボタンを見てみてくださいね。…うーむ。色づかいがいまいちかな…?
でも色は以前と同じ感じのがいいかなぁと思いますので、しばらくはこれで…。
では今日も休日を始めています。休日の充実こそ、人生の充実です。
( ブログのコメント欄は 2022-04-16 に閉鎖いたしました )
今日は会社がお休みと言うこともあって、朝から「トップに戻るボタン」のデザインを変更していました。
以前のはダサかったですよね。( ^^;
以前のボタンを作成したときには、まだ下記のような参考になるサイトがありませんでした。
・【CSSだけ】トップに戻るボタンの作り方【コピペでOK】
今回のは "上矢印" が分かりやすくて良いです。まぁ以前からこの手のタイプの "上矢印" が一般的でしたが、
「どうやって作っているんだろうか?」
と思っていたんです。
時代が進んで、望みの "上矢印" の作り方が載っているサイトが出てきてくれたのです、良かったよかった。
.gotop::before{
content: "";
display: block;
border-top: 2px solid #333;
border-right: 2px solid #333;
width: 25%;
height: 25%;
top: 25%;
left: 0;
right: 0;
margin: auto;
position: absolute;
transform: rotate(-45deg);
}
content: "";
display: block;
border-top: 2px solid #333;
border-right: 2px solid #333;
width: 25%;
height: 25%;
top: 25%;
left: 0;
right: 0;
margin: auto;
position: absolute;
transform: rotate(-45deg);
}
以前からこの "上矢印" が使いたかったんです。
今日はやっとそれが実現できました。
実際に作ったボタンを見てみてくださいね。…うーむ。色づかいがいまいちかな…?
でも色は以前と同じ感じのがいいかなぁと思いますので、しばらくはこれで…。
では今日も休日を始めています。休日の充実こそ、人生の充実です。
( ブログのコメント欄は 2022-04-16 に閉鎖いたしました )
閲覧(3430)
コメントを書く |
---|
コメントを書くにはログインが必要です。 |