PNGイラストとCSSで装飾しよう！2️⃣
記事IT・テクノロジー
今回もイラストACの素材と、CSSで素敵にお飾りします！
よかったら参考にしてみてくださいね🎶
完成見本
https:// tsuyu0102.github.io/css-sample/blinking-hearts/index.html
⭐️左上、右下のテープは、固定していて、右上のハートはアニメーションで点滅させています。
▼1200px幅
▼480px幅
▼320px幅
PNG
▼画像は、イラストACのこちらの素材をダウンロードしました。
https:// www.ac-illust.com/main/detail.php?id=23388725&word=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%82%E3%81%97%E3%82%89%E3%81%84%E3%82%BB%E3%83%83%E3%83%88#goog_rewarded
⭐️イラストACの利用にはアカウント（無料）が必要です。
⭐️今回は、素材それぞれに色をつけて、tape.png, heart01.png, heart02.pngという名前で保存しました。それらをimgフォルダ内に入れました。大きさは変えてないです。背景は透明です。
html
<div class="container">
<h2>INFORMATION</h2>
<img src="img/tape.png" alt="upper-tape" class="upper-tape" />
<img src="img/tape.png" alt="lower-tape" class="lower-tape" />
<p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。これは、Lorem Ipsum の一節を含む Letraset シートのリリースによって 1960 年代に普及し、さらに最近では Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング
ソフトウェアによって普及しました。</p>
<img src="img/heart02.png" alt="" class="heart02" />
<img src="img/heart01.png" alt="" class="heart01" />
</div>
CSS
<style>
body {
background: skyblue;
}
.container {
position: relative;
background: #fff;
text-align: center;
margin: 3rem;
padding: 2rem 4rem;
}
.container .upper-tape,
.container .lower-tape {
position: absolute;
max-width: 130px;
}
.container .upper-tape {
top: -15px;
left: -20px;
transform: rotate(-5deg);
}
.container .lower-tape {
bottom: -15px;
right: -25px;
transform: rotate(-185deg);
}
.container .heart01,
.container .heart02 {
position: absolute;
opacity: 0;
}
.container .heart01 {
top: 58px;
right: 4px;
animation: blinking01 2.7s infinite linear;
}
.container .heart02 {
top: -18px;
right: -15px;
animation: blinking02 2.7s infinite linear;
}
＠keyframes blinking01 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
21% {
opacity: 1;
}
90% {
opacity: 1;
}
91% {
opacity: 0;
}
100% {
opacity: 0;
}
}
＠keyframes blinking02 {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
51% {
opacity: 1;
}
90% {
opacity: 1;
}
91% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.container h2 {
letter-spacing: 0.5rem;
word-wrap: break-word;
margin: 1rem 0 2rem;
}
.container p {
line-height: 2rem;
}
＠media (max-width: 480px) {
.container {
margin: 1.5rem 1rem;
padding: 2rem;
}
.container h2 {
margin: 2.5rem 0 1rem;
}
.container .heart01 {
width: 10%;
top: calc(58px - 2%);
}
.container .heart02 {
width: 15%;
}
}
</style>
⭐️CSS内の＠マーク3箇所は半角のアットマークに差し替えてください。
⭐️CSSの word-wrap: break-word; は、英単語途中でも折り返ししてくれます。
⭐️CSSの opacity は、不透明度のこと。1は100%、0は完全透明の0%で表示します。
▼CSSもhtmlファイル内に記入したらこのような形になりました。
いかがでしたか？少しでも参考になれば幸いです🌷
🎊お陰様でココナラブログ毎日投稿1ヶ月達成いたしました！
今後は少しペースを落としますが、引き続きWeb制作に関するちょっとしたお役立ち情報をお届けして参りますので、またチェックしていただけると嬉しいです。😊
