CSSで作る!中は透明で線だけのリボン!

トマト CSS

こんにちはトミーです。

先日、久々にサイトデザインをしました!!!

最近はコーディングの仕事ばかりしていたので、久々にデザインするとコーディングのことを考え、いかに画像ではなくコーディングで再現できるかを考えながら作ってました!笑

過去のサイト制作でリボンを使ったデザインが出てきたことがあり、いつも「サルワカ」サイトを参考に再現してきました。

CSSで作る!綺麗なWeb用リボンデザイン22選
HTMLとCSSのコピペで使えるWeb用のリボンデザイン集です。横だけでなく、縦や斜めのもの、ボッ クスに折り込まれるような立体的なデザインのものまで揃えました。

なので、リボンはCSSで再現できるため、リボンのデザインを入れてても問題ないな〜と思い、進めていたのですが、、、

あれ?

私の考えたデザインって、ちょっと特殊かも!!!

トマト

リボンの中は透明で線だけで表現してるデザインを作成してました。
(通常はベタ塗りのリボンが多いです)

やばい・・・

いつも参考にしている「サルワカ」サイトでもCSSでの再現方法が載ってない(´;ω;`)

今回の仕事はデザインだけだったので、コーディングは誰かが良い感じにやってくれるかな〜という淡い期待はありましたが、気になったら即行動する性格なので、早速テストコーディングしてみました!

そして、意外にもできちゃいました!

おぉー!👏
良い感じにできて安心しました(*´∇`*)
けど、若干の微調整は必要ですね。。。

あと、いつも迷う矢印のコーディング↑→↓←
ボタン部分のデザインに使用したので、ちゃんと綺麗に再現できるかテストコーディングしてみました。

これも良い感じ〜
(若干の微調整は必要です)

微調整なしにコーディングできる方法ないのかな〜
でも、CSSで再現できることは実証されたので、今日はゆっくり寝れそうです♪

タイトルとURLをコピーしました