02アプライドビジュアルデザイン【FCC】



02 Applied Visual Design Fcc



応用ビジュアルデザイン:段階的なCSS線形グラデーションを作成する

一般的な構文:

background: linear-gradient(gradient_direction, color 1, color 2, color 3...

例:



background:linear-gradient(90deg,red,yellow,rgb(204,204,255))

90度は垂直勾配であり、45度の勾配角度は逆傾斜バーに似ています。

適用されたビジュアルデザイン:CSS線形グラデーションを使用してストライプ要素を作成します

0px [yellow -- blend -- blue] 40px [green -- blend -- red]80px background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255))

2つのカラーストップ値がすべて同じ色である場合、同じ色の間にあるため、ブレンドは目立ちません。その後、
次の色なので、ストライプになってしまいます。
色は同じ値で停止し、他の色に直接移動するため、縞が表示されます。



次の黄色と黒の斜めのストライプ:

div{ border-radius: 20px width: 70% height: 400px margin: 50 auto background: repeating-linear-gradient( 45deg, yellow 0px, yellow 40px, black 40px, black 80px ) }

応用ビジュアルデザイン:背景画像として微妙なパターンを追加してテクスチャを作成する

背景を目立たせすぎず、前景から遠ざけることが重要です。

適用されたビジュアルデザイン:CSS Transformscaleプロパティを使用して要素のサイズを変更します

要素のスケールを変更すると、CSSにはそのscale()関数とともにtransformpropertyがあります。



テクスチャの背景を追加し、⚠️に注意してください 小さなパターンはバランスが取れている必要があります!残高!背景は奪うことではありません!

body { background: url(https://i.imgur.com/MJAkxbh.png)

バブル効果:

.ball { width: 40px height: 40px margin: 50 auto position: fixed background: linear-gradient( 35deg, #ccffff, #ffcccc ) border-radius: 50% } #ball1 { left: 20% } #ball2 { left: 65% transform:scale(1.1) }

適用されたビジュアルデザイン:CSS Transform scaleプロパティを使用して、ホバー時に要素をスケーリングします

プロパティには、要素の拡大縮小(ズーム)、移動、回転、傾斜などを可能にするさまざまな機能があります。
要素の特定の状態を指定するような疑似クラスであるプロパティは、要素に対話性を簡単に追加できます。
tansform 対話性を強化するために疑似クラス要素とともに使用できます

div:hover{ transform: scale(1.1) }

適用されたビジュアルデザイン:CSS変換プロパティskewXを使用して、X軸に沿って要素を傾斜させます

#bottom { background-color: blue transform: skewX(-32deg) }

適用されたビジュアルデザイン:CSS変換プロパティskewYを使用して、Y軸に沿って要素を傾斜させます

#top { background-color: red transform: skewY(-10deg) }

応用ビジュアルデザイン:CSSを使用してグラフィックを作成する

三日月:

.center { position: absolute margin: auto top: 0 right: 0 bottom: 0 left: 0 width: 100px height: 100px background-color: transparentk border-radius: 50% box-shadow: 25px 10px 0px 0px bluen }

応用ビジュアルデザイン:CSSとHTMLを使用してより複雑な形状を作成する

適用されたビジュアルデザイン:text-alignプロパティを使用してビジュアルバランスを作成する

text-align:justifyを使用すると、最後の行を除くすべてのテキスト行がラインボックスの左端と右端に一致します。
text-align:テキストを中央揃えにします
text-align:rightright-テキストを右揃えにします
text-align:left(デフォルト)テキストをleft-alignします。

適用されたビジュアルデザイン:テキストのbackground-colorプロパティを調整します

全体的な背景やテキストの色を調整して前景を読みやすくする代わりに、強調したいテキストを保持している要素に背景色を追加することができます。このチャレンジでは、16進コードまたは通常のrgb()の代わりにrgba()を使用します。

このチャレンジでは、background-color:rgba(45、45、45、0.1)を使用します。不透明度の値が0.1と低い場合、ほぼ透明な濃い灰色になります。

コード:

background-color:rgba(45,45,45,0.1)

応用ビジュアルデザイン:カードのような要素にボックスシャドウを追加します

box-shadowプロパティは、offset-x(要素から影を水平方向に押す距離)、offset-y(要素から影を垂直方向に押す距離)、blur-radius、spread-radius、およびcolorの値を取ります。値、この順序で。ぼかし半径と広がり半径の値はオプションです。

コード:

box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)

適用されるビジュアルデザイン:複数の見出し要素のフォントサイズを設定します

font-sizepropertyは、特定の要素のテキストの大きさを指定するために使用されます。このルールを複数の要素に使用して、ページ上のテキストの視覚的な一貫性を作成できます。このチャレンジでは、見出しのサイズのバランスをとるために、すべてのh1からh6tagsの値を設定します。

コード:

font-size: 68px font-weight:400

応用ビジュアルデザイン:色相を調整する

色には、色相、彩度、明度など、いくつかの特性があります。 CSS3は、これらの特性を直接示すことによって色を選択する代替方法として、hsl()プロパティを導入しました。

色相は、人々が一般的に「色」と考えるものです。左側が赤で始まり、中央が緑、右側が青となる色のスペクトルを想像すると、色相はこの線に沿って色が収まる場所です。 hsl()では、色相はスペクトルの代わりにカラーホイールの概念を使用します。この場合、円の色の角度は0〜360の値として指定されます。

彩度は、色の灰色の量です。完全に飽和した色には灰色がなく、最小に飽和した色はほぼ完全に灰色です。これは、100%が完全に飽和しているパーセンテージとして示されます。

明度は、色の白または黒の量です。パーセンテージは0%(黒)から100%(白)の範囲で与えられます。ここで、50%は通常の色です。