*

グラデーションの繰り返しを指定する

公開日: : 最終更新日:2016/04/14 CSS , , ,

グラデーションは繰り返して表示することができます。線形グラデーションを表示たいなら、repeating-linear-gradient()関数を、円形グラデーションはrepeating-radial-gradient()関数を使います。()内の引数は、どちらも繰り返さない時と同じです。

画像を扱えるプロパティすべてに指定できることに仕様上なってますが、Firefoxとか古いブラウザだと、background-image,backgroundプロパティにのみ適用されている点を頭の片隅に入れた方がいいです。

サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

CSS

フレックスコンテナでアイテムを複数行に配置する

フレックスコンテナ内の全てのフレックスアイテムは、1行で配置されますが、flex-wrapプロパティ

記事を読む

CSS

アニメーションの速度のパターンを設定する

animation-timing-functionプロパティを使うと、アニメーションを実行する速度の

記事を読む

CSS

要素にフィルタをかけてみる

注意:今回書くfilterプロパティはChrome,Safari,Android,IOS7以降でない

記事を読む

CSS

円形・放射状のグラデーションを指定する

radial-gradient()関数を利用すると、1点から放射状に広がる円形のグラデーションを表示

記事を読む

cateCSSPage

CSSの書き方を覚える。

CSSの書き方 CSSはどの「要素」の「もの」を「どんな風」に するかを指定するものであり、半角

記事を読む

cateCSSPage

テキストの回り込みを設定するfloatプロパティ

通販サイトやニュースサイトを眺めていると 様々なコンテンツが横に並べて配置され、 それが複数あり

記事を読む

CSS

フレキシブルボックスレイアウトを使う

久しぶりにCSSの記事を書いていきます。タイトルの通りフレキシブルボックスレイアウトについて書きます

記事を読む

CSS

アニメーションを実行方向を指定したり、停止したりする

アニメーションを逆再生 アニメーションを繰り返すよう設定した場合に、折り返して逆向きで実行する(逆

記事を読む

CSS

フレックスコンテナ内の主軸方向の配置方法を指定する

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを

記事を読む

CSS

フレックスコンテナ内で複数行のとき、交差軸方向の配置方法を指定する

今回書くalign-contentプロパティは、フレックスコンテナ内にフレックスアイテムを複数行に配

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑