zuknow learn together

新しい教材を作成

CSS3 プロパティ

カード 16枚 作成者: lulu (作成日: 2014/01/22)

  • 影をつける(要素)
    ・内側に影をつけるときは?
    ・スプレッドはあっても無くてもいい

解説面  クリックしてカードを裏返す

アプリをダウンロードして、このコンテンツを学習しよう! AppStore / Google Play

教材の説明:

CSS3のプロパティーと値の書き方

公開範囲:

公開

カテゴリ:

言語:

  • カード表 : 日本語
  • カード裏 : 日本語
  • このエントリーをはてなブックマークに追加
  • 1

    影をつける(要素) ・内側に影をつけるときは? ・スプレッドはあっても無くてもいい

    補足(例文と訳など)

    答え

    • box-shadow:5px 5px 5px 5px gray; :x y スプレッド ぼかし 色; 内側に影:inset 前か後ろに

    解説

  • 2

    影をつける(テキスト)

    補足(例文と訳など)

    答え

    • text-shadow:3px 3px 3px #333; :x移動距離 y移動距離 ぼかし 色;

    解説

  • 3

    角丸(同じ丸みをつける場合)

    補足(例文と訳など)

    答え

    • border-radius:10px; 又は border-radius:10px 10px 10px 10px;

    解説

  • 4

    角丸(非対称の場合)

    補足(例文と訳など)

    答え

    • border-radius:ax bx cx dx/ay by cy dy; ex) border-radius:15px 10px 5px 0px/30px 20px 10px 0px;

    解説

  • 5

    要素の幅の取り方 (値:枠線含、初期値、親と同じ)

    補足(例文と訳など)

    答え

    • box-sizing:border-box; box-sizing:content-box;(初期値) box-sizing:inherit;

    解説

  • 6

    CSS3での色指定(二種類)値のみ

    補足(例文と訳など)

    答え

    • property:rgb(赤, 緑, 青); (red, green, blue) property:hsl(色相, 彩度, 輝度); (Hue, Saturation, Lightness)

    解説

  • 7

    色の透明度を指定する

    補足(例文と訳など)

    答え

    • property:rgba(赤, 緑, 青, 透明度); (red, green, blue, alpha) property:hsla(色相, 彩度, 輝度, 透明度); (Hue, Saturation, Lightness,alpha)

    解説

  • 8

    線状グラデーション(上から指定)

    補足(例文と訳など)

    答え

    • background: -webkit-linear-gradient(top, yellow 0%, white 50%, green 100%); linear-gradient(開始位置,色 場所,色 場所)

    解説

  • 9

    線状グラデーション(左下から角度で) (左から・右下からの位置指定)

    補足(例文と訳など)

    答え

    • background: -webkit-linear-gradient(45deg, yellow 0%, white 50%, green 100%); (左 left 右下 bootom right)

    解説

  • 10

    線状グラデーション (グラデーションを繰り返す)

    補足(例文と訳など)

    答え

    • background-image:-webkit-repeating-linear-gradient(top,mistyrose 0%,salmon 20%); (開始位置,色と位置,色と位置)

    解説

  • 11

    円形グラデーション (形状、サイズはdefault)

    補足(例文と訳など)

    答え

    • background-image: -webkit-radial-gradient(center, ellipse cover, yellow 0%, green 100%); (中心点,形状とサイズ,色と位置,色と位置) 中心点=%かキーワード 形状とサイズ=キーワードで指定

    解説

  • 12

    円形グラデーション (中心点を20%ずつの位置、始まりを10%の所から)

    補足(例文と訳など)

    答え

    • background-image: -webkit-radial-gradient(20% 20%, ellipse cover, #66cdaa 10%, #006400 100%);

    解説

  • 13

    円形グラデーション形状とサイズ… 形状:楕円、サイズ:ボックスの角

    補足(例文と訳など)

    答え

    • background-image: -webkit-radial-gradient(center, ellipse cover, #000 0%, #fff 100%)

    解説

  • 14

    円形グラデーション形状とサイズ… 形状:楕円、サイズ:ボックスの辺

    補足(例文と訳など)

    答え

    • background-image: -webkit-radial-gradient(center, ellipse closest-side, #000 0%, #fff 100%);

    解説

  • 15

    円形グラデーション形状とサイズ… 形状:正円、サイズ:ボックスの角

    補足(例文と訳など)

    答え

    • background-image: -webkit-radial-gradient(center, circle cover, #000 0%, #fff 100%);

    解説

  • 16

    円形グラデーション形状とサイズ… 形状:正円、サイズ:ボックスの近い辺

    補足(例文と訳など)

    答え

    • background-image: -webkit-radial-gradient(center, circle closest-side, #000 0%, #fff 100%);

    解説

56706

セットの学習コンテンツ

公開初月で
60,000
ダウン
ロード!

無料アプリはこちら!

英単語をウェブサイト
からzuknowに簡単登録

覚えたい単語を選択するだけ!
簡単にzuknowに登録することが
できます

Get the free Chrome Extension

トップ