ChatGPT活用アイデア館

投稿確認画面

投稿確認画面

プロンプト入力

ブログの見栄えをよくする方法を聞いてみた

hoverでカードをおしゃれに光らせるCSSを教えて

カードをホバーすると光るCSSは、以下のようなものがあります。

.card:hover {
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
}

もう少し春を感じる光り方がいいな

以下は、もう少し春を感じる光り方をしたhoverカードのCSS例です。

.archive-entries .archive-entry:hover,
.hatena-urllist li:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
    background-color: #F8E9A1;
}

.archive-entries .archive-entry,
.hatena-urllist li{
    align-items: center;
    border-radius: 10px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

自分のブログにCSSを実装してみました

投稿画面1
カテゴリ設定

下記の中から選択してください(複数選択可)

タグ設定