IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

CSS

opacity - 透明度を変更し画像などをぼかす -hover処理あり- | CSS Introduction

opacityCSSのopacityプロパティはHTML要素の透明度を変更することができ、画像にぼかしをいれたり透明にしたりすることができます。マウスオーバー時に画像をぼかすことで、画像の強調表示も可能です。opacity: 透明度(0.0~1.0); ...見本、例(html,css)あり.…

transform:scale() - マウスホバー時に写真などを縮小/拡大する | CSS Introduction

transform:scale()関数をマウスホバー時に設定して写真などの要素を強調表示させる。transform:scale()transformプロパティのscale()関数は、要素の大きさを水平方向と垂直方向に対して変更することができます。要素をマウスホバー時に拡大/縮小することで強…

【CSS】背景パターン --サンプル集-- | 【WEBデザイン】

投稿日:2019/07/19 CSSだけでできる柄物の背景を、備忘録として書き記している記事です。 ドット柄 ドット柄 <div class="style1"></div> .style1{ background-color: #04bd41; background-image: linear-gradient(45deg, #00ad39 25%, #04bd41 25%,transparent 75%, #04bd41 75%); ba…

【CSS】背景色 グラデーション --サンプル集-- | background:linear-gradient 【WEBデザイン】

投稿日:2019/07/19 CSSのbackgroundプロパティに指定する複雑な値を、備忘録として書き記している記事です。 虹色 虹色 <div class="style1"></div> .style1{ background: linear-gradient(135deg,rgb(255, 0, 0),rgb(255, 20, 172),rgb(90, 40, 255), rgb(60, 120, 255),rgb(80, 255,…

ソースコードハイライト【Google Code Prettify】にCSSだけで言語情報を記述する - 開発日記

Photo by Sean Lim on Unsplash Google Code Prettify HTML CSS JavaScript sample html JavaScript Google Code Prettify 使用している code-prettify https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst HTML、CSS…

【CSS】でスクロールバーの表示を変えて、個性的なデザインにカスタマイズする【WEBデザイン】

今回の記事は、[画像]この見慣れたスクロールバーのカスタマイズに関する記事です。前置きFirefox、IEなどでは、サポートされていません。スクロールバーのカスタマイズで使用する疑似要素のブラウザ互換性[画像] ::-webkit-scrollbar::-webkit-scrollbar-::…

【WEBデザイン】CSSで画像をホバー時にハイライトさせてオシャレにする

記事トップ画像のように、マウスホバー時に画像を拡大/縮小・ぼかしをしてハイライトさせます。cssの「transition」「opacity」「transform」プロパティの3つを使用しています。サンプル(マウスホバー時)拡大/縮小ぼかし透明度の値:0.5変化時間の設定説明tr…

【CSS】超簡単「WEBデザイン」を美しくする | ボックスシャドウ(box-shadow)

Google Chromeで簡単にUIで設定値を変更できる前回、Google Chromeの開発ツールが超便利という記事を書きました。今回は、その開発ツールを使った簡単WEBデザインの紹介をします。CSSのbox-shadowというプロパティをつかって要素にかげをつけるデザインです…

【WEBデザイン】を美しくする | グラデーション(linear-gradient())

【WEBデザイン】を美しくする | グラデーション // linear-gradient() 使い方 グラデーションの方向 途中色 グラデーションをつくる linear-gradient() CSSのbackgroundプロパティに使用することのできる関数です。 使い方 background:linear-gradient(グラ…

「HTML」縦書き・行書体による575 | 「CSS」

あこがれた たてにしたくて できなくて などと思った人も多いでしょう。 ご覧のとおり縦書きはできます。 縦にする -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; 行書体 font-family: “HGP行書体”, “MS P明…

「HTML」「CSS」WEBページ背景色に悩んだら#f1f1f1

WEBページ制作ではデザインをどうしようか悩むものですよね。 背景色もどうしようかと思って、何度もいろいろ試してしまいます。 コンテンツの色など、ほかの要素との相性によってはしっくりくる色を見つけるのは、なかなか難しいです。 そんなときに便利な…