CSS | コンピューター

CSS3左から右へのグラデーション

次のコードを実行して、CSS3で左から右へのグラデーションを実装してみてください例 <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left,

CSS3上から下へのグラデーション

次のコードを実行して、CSS3で上から下へのグラデーションを実装してみてください- 例 <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(pink

CSSのグラデーションの種類

グラデーションは、2つ以上の色の組み合わせを表示します。グラデーションの種類は次のとおりです。グラデーションの種類線形グラデーション（下/上/左/右/対角）放射状グラデーション例放射状グラデーションの例を見てみましょう： <html> <head> <style> #grad1 { height: 100px;

CSSを使用してスキューx軸でdivを回転

次のコードを実行して、CSS-を使用してスキューx軸でdivを回転させることができます。例 <html> <head> <style> div { width: 300px; height: 100px; &nb

CSSborder-image-repeat

CSSのborder-image-repeatプロパティは、境界線の画像を丸め、繰り返し、引き伸ばすように設定するために使用されます。例次のコードを実行して、border-image-repeatプロパティを実装してみてください- <html> <head> <style> #borderimg1 { border: 15px sol

CSS3によって提供される追加のカラープロパティ

CSS3には、次のような追加のカラープロパティがあります- RGBA色 HSLカラー HSLAカラー HSL色とは何かを見てみましょう： HSL hueの略です、飽和、明度。ここで、Hugeはカラーホイールの程度であり、彩度と明度は0〜100％のパーセンテージ値です。以下に示すHSLのサンプル構文： #g1 {background-color: hsl(120, 100%, 50%);} #g2 {background-color: hsl(120, 100%, 75%);} #g3 {background-color: hsl(120, 100%, 25%);}

CSS3rgbaカラープロパティ

RGBAはRedGreenBlueAlphaの略です。これはCSS2の拡張であり、Alphaは色の不透明度を指定し、パラメーター番号は0.0から1.0までの数値です。例次の例はrgbaカラープロパティを示しています- <html> <head> <style> #p1 {background-color:rgba(255,0,0,0.3);} #p

CSS3でx軸を使用して要素を回転変換します

[rotateX（angle）]メソッドを使用して、CSS3でx軸を使用して要素を回転変換します- 例 <html> <head> <style> div { width: 200px; height: 100px;

CSS3でy軸を使用して要素を回転変換します

回転（角度）メソッドを使用して、CSS3でy軸を使用して要素を回転変換します- 例 <html> <head> <style> div { width: 200px; height: 100px; &nb

CSS3HSLAカラープロパティ

HSLAは、色相、彩度、明度、およびアルファの略です。アルファ値は、RGBAで示されているように不透明度を指定します。例次の例は、HSLAカラープロパティ-を示しています。 <html> <head> <style> #d1 {background-color:hsla(120,100%,50%,0.3);} #d2 {background-color

CSS3不透明度プロパティ

不透明度は、不透明度を上げるために黒を追加する必要がある薄い塗料です。次の例は、CSS3の不透明度プロパティ-を示しています。例 <html> <head> <style> #m1 {background-color:rgb(255,0,0);opacity:0.6;} #m2 {background-color:rgb(0,255,0);opacity:0.6;} #m3 {background-color:rgb(0,0,255);opacity:0.6;}

CSS3線形グラデーション

線形グラデーションは、2つ以上の色を上から下などの線形形式で配置するために使用されます。例次のコードを実行して、CSS3に線形グラデーションを実装してみてください- <html> <head> <style> #grad1 { height: 100px;

CSSを使用してスキューy軸でdivを回転させる

次のコードを実行して、CSS-を使用してy軸をスキューしてdivを回転させることができます。例 <html> <head> <style> div { width: 300px; height: 100px; &nb

CSS絶対単位

CSSの絶対単位は次のとおりです。単位略語ピクセル Px ポイント Pt インチ In センチメートル Cm ピカ Pc

CSSborder-image-slice

CSSのborder-image-sliceプロパティは、境界線の画像をスライスするために使用されます。例次のコードを実行して、border-image-sliceプロパティを実装してみてください- <html> <head> <style> #borderimg1 { border: 15px solid transparent;

CSSborder-image-source

CSSのborder-mage-sourceプロパティ画像パスを設定するために使用されます。次のコードを実行して、 border-image-sourceを実装してみてください。プロパティ：例 <html> <head> <style> #borderimg1 { border: 15px solid transparent; &nbs

CSSを使用して右下に回転するアニメーション効果

CSSを使用して完全に回転するアニメーション効果を作成するには、次のコードを実行してみてください- 例 <html> <head> <style> .animated { background-image: url(/css/images/logo.png);

CSSを使用して左上のアニメーション効果を回転させる

CSSを使用して左上に回転するアニメーション効果を作成するには、次のコードを実行してみてください- 例 <html> <head> <style> .animated { background-image: url(/css/images/logo.png);

CSSを使用してアニメーション効果を上に回転させる

CSSを使用して右に回転するアニメーション効果を作成するには、次のコードを実行してみてください- 例 <html> <head> <style> .animated { background-image: url(/css/images/logo.png);

スケールは、CSS3でy軸を使用して要素を変換します

scaleY（y）メソッドは、y軸を使用して要素をスケール変換するために使用されます。構文を見てみましょう- scaleY(y) ここで、yは、要素の各ポイントの縦座標に適用する倍率を表す数値です。例を見てみましょう- div { width: 60px; height: 60px; background-color: yellow; } .scaled { transform: scaleY(0.5); background-color: black;