polygon () CSS function example

備忘録 Bootstrapの水平方向(横)のカード に組み込んだ例 left Card title This is a wider card with supporti...

Read More

oklch() を理解しないブラウザにフォールバックする

最新ブラウザでサポートされているんですが、まだちょっと使うのは怖い oklch() | CSS-Tricks https://css-tricks.com/almanac/functions/o/oklch/#browser-support フォールバックの例が載ってま...

Read More

[CSS]画像周辺にテキストを配置する

Read More

[CSS]font-weight プロパティで、フォントの太さを指定する

通常より細くしたいとか、通常の太字より太くしたい場合 font-weight - CSS | MDN https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/font-weight CSS ...

Read More

[CSS]そのクラス、本当に必要？

そもそも CSS って何かというと CSSの例 .red { color: #f33; } 上記のクラスを使用したHTMLの例 <p class="red">この段落は赤い文字です。</p> 結果 この段落は赤い文...

Read More

[CSS]画像の周りに影を付ける

古典的な方法ですが CSS img { box-shadow: 0px 0px 10px 3px #aaa; border-radius: 10px; } Bloggerの投稿画像用 .post img { box-shadow: 0px 0px 10...

Read More

[CSS]!important

selector { property: value; /* 通常宣言 */ property: value !important; /* 重要宣言（推奨） */ property: value ! important; /* 重要宣言（非推奨） */ } !imp...

Read More

[CSS]左上隅と右下隅に丸みがあるボタン

ペーパーナイフみたいな A demonstration of rounded corners. こんな感じかねぇ CSS #myDIV { background-color: black; border: 1px solid black; border...

Read More

[CSS]rgba()のaは要らない

A pragmatic guide to modern CSS colours - part one - Piccalilli https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/ ...

Read More

[CSS]ブラシPNGで画像にマスクをする

Mask image is pretty handy - Piccalilli https://piccalil.li/blog/mask-image-is-pretty-handy/ より サンプル改

Read More

[HTML/CSS]Google Playに学ぶアラートセクション

リクエストされた URL は、このサーバー上に見つかりませんでした。 まぁ長い事アプリの紹介をやってきましたが、リンク切れのアプリも多くなっています。 (見つけたら教えてね) ブログに通知を出したい人もいるでしょう CSS #error-section { ...

Read More

[CSS]旭日旗の光線が回転する様なアニメーション

Read More

[CSS]画像をふわふわさせるフローティングアニメーション

この前ドラえもんが浮いてるのを見て合ってるなと コードはそこからパクってきたわけではないですが HTML <div class="floating"> <img src="https://blogger.g...

Read More

[CSS]ホバーで文字間のスペースを増やす

まぁかわいい感じのを作りたいよねということで welcome to dreamland (￣▽￣)ノ https://dreamland.nekoweb.org/ こちらより HTML <div class="space...

Read More

[CSS]左右に動くテキスト

Let’s enjoy selfie! 分享最愛女神上鏡攻略抽相機 より CSS #index_left_2{ font-size:28pt; color:#e7597d; letter-spacing:2px; position: static ; anima...

Read More

HTMLとCSSはなんてクソなんだ

HTMLとCSSはなんてクソなんだと、あなたに言わせるかもしれない理由。一般的にイライラさせられるHTMLとCSSの困惑、間違い、ジレンマの厳選した一覧。 WTF, HTML and CSS? https://makotot.github.io/wtf-html-css/ ...

Read More

[CSS]ホバーで持ち上がるボタン

CSS .RAISE { transition: transform 0.3s ease; } .RAISE:hover { transform: translateY(-3px); } HTML <div class="RAISE"...

Read More

[Blog]<blockquote>デフォルト値を変更

blockquote { margin-left: 0px !important; margin-right: 0px !important; } スマホでマージン入ると画面が狭くなるので、左右のマージンを無くしました(邪道ですが) 私はめちゃくちゃ引用多用するので...

Read More

CSSホログラムボタンのサンプル

Read More

CSSコメントに拘る

Read More