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

CSSの背景色に使用する虹色のカラーを集めました。テキストを虹色にするためのCSSサンプルコードもあります。

2021-09-02

CSSでスクロールバーをカスタマイズして、カラフルなスクロールバーのデザインを作ってみました。svgを使用しているものもあり。

CSS-スクロールバー-カスタマイズ CSS-スクロールバー CSS CSS-"::-webkit-scrollbar" WEBデザイン WEBデザイン-スクロールバー WEBデザイン-スクロールバー-カスタマイズスクロールバーカスタマイズ "::-webkit-scrollbar"

cssを使用していろいろなスクロールバーのデザインを作成してみました。「::-webkit-scrollbar」をいじって、スクロールバーをカスタマイズしています。種類ごとにスクロールバーを分けて、サンプルを表示しています。色、幅、透明度、素材をカスタマイズ…

#CSS #スクロールバー

2020-09-30

【コピペok】はてなブログ記事デザインサンプル集スマホも簡単にカスタマイズ可能！ | はてなブログデザインカスタマイズ

はてなブログカスタマイズ-デザインはてなブログカスタマイズデザインツール-CSS生成ツールツール CSS生成ツール WEBデザイン CSS

はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。CSSを生成するツールになっているため、クラス名・スタイルの変更が可能です。スマホからでも簡単に、カスタマイズから実装までができるようにスタイルの編集、ボタンで…

2019-12-20

【CSS】でiPhoneのスイッチのようなトグルボタンを設置する | CSS+JavaScript | iosスイッチ

CSS-iOS_Switch CSS iOS_Switch WEBデザイン-iOS_Switch WEBデザイン

CSSでiosのスイッチ(switch)を再現するタイトルの通り、HTMLでiPhone(iOS)のスイッチ(switch)のようなデザインのトグルボタンを設置する記事になります。CSSでiosのスイッチのスタイルを再現し、切り替えはJavaScriptで処理します。webページではなかなか見…

2019-12-02

虹色に色が変わるアニメーションスタイルの設定 | animation | CSS | HTML

CSS-animation CSS-keyframes CSS animation keyframes WEBデザイン-アニメーション WEBデザインアニメーション

HTMLで虹色に色が変わるアニメーションスタイルを設定する方法です。 @keyframes規則を使用することでアニメーションを作成することができます。@keyframes [ 名前 ]{ [ 作動するタイミング ]{ スタイル } }@keyframes規則についての詳細は「@keyframes - CS…

2019-10-07

【CSS】背景パターン一風変わったおしゃれな柄物背景 -サンプル一覧- | 【WEBデザイン】

CSS-background-柄物 CSS background 柄物 CSS-background WEBデザイン背景 WEBデザイン-背景-柄物 WEBデザイン-背景開発日記備忘録開発日記-備忘録-CSS-background-柄物開発日記-備忘録-CSS-background 開発日記-備忘録-CSS 開発日記-備忘録

CSSだけでできる柄物の背景を、備忘録として書き記している記事です。ドット柄を表現できる背景色のCSS一覧・緑-水玉(濃緑)・カーボン素材風・青..光沢のある背景色のCSS一覧・青・赤

2019-09-26

【HTML】画像やアイコン・文字などを反転させる - scale()を使った方法

CSS-transform-scale() CSS CSS-transform transform WEBデザイン-反転 scale() WEBデザイン反転

Photo by Devin Avery on Unsplash scale()を使ったHTML要素を反転させる方法コード見本通常反転上下反転 scale()を使ったHTML要素を反転させる方法 [HTML] [CSS] [スタイル] コード transform:scale(-1,1); 見本通常通常 HTML CSS JS 5 Photo by Thi…

2019-09-03

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

WEBデザイン-スクロールバー-カスタマイズ WEBデザインスクロールバーカスタマイズ WEBデザイン-スクロールバー CSS "::-webkit-scrollbar" CSS-"::-webkit-scrollbar" CSS-スクロールバー-カスタマイズ CSS-スクロールバー

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

2019-08-10

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

CSS opacity CSS-opacity

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

2019-08-09

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

CSS transform scale() CSS-transform CSS-transform-scale()

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

2019-07-06

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

開発日記 WEBデザイン Google Code Prettify 開発日記-WEBデザイン WEBデザイン-Google Code Prettiffy 開発日記-WEBデザイン-Google Code Prettify 開発日記-CSS 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…

2019-06-25

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

WEBデザイン CSS CSS-transition CSS-opacity CSS-transform transition opacity transform WEBデザイン-画像

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

2019-06-18

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

CSS HTML WEBデザイン "box-shadow" CSS-"box-shadow" WEBデザイン-"box-shadow"

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

2019-06-02

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

CSS HTML WEBデザイン background CSS-background WEBデザイン-background "linear-gradient()" CSS-background-"linear-gradient()"

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