萩原賢二のコーディングストック > Web・デザイン > CSS3 リッチな表現角丸、影、グラデーションについて学ぶ

2018.05.29

CSS3 リッチな表現角丸、影、グラデーションについて学ぶ

Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで角丸、影やグラデーションとかを表現できるCSS3の機能があります。
今回, border-radial(角丸)、box-shadow（影)、gradient(グラデーション)についての初歩的なもののまとめた備忘録です。

cssデザイン

css1

css2

css3

css4

css5

css6

css7

css8

css9

css10

css11

css12

css13

css14

css15

css16

css17

css18

css19

css20

css21

css22

css23

CSS

#wrapper div{border: solid 1px gray;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	margin: 20px;
	display: inline-block;
}
.css1 { border-radius: 10px; }
.css2 { border-radius: 50px; }	
.css3 { border-radius: 0px 10px 20px 30px; }
.css4 { border-radius: 0px 100px 0 100px; }	

#wrapper .div2 {
	width: 150px;
}

.css5 { border-radius: 10px 10px 10px 10px; }		
.css6 { border-radius: 50px; }	
.css7 { border-radius: 50%; }	


#wrapper .div3 {
	width: 100px;
}

.css8 { box-shadow: 5px 5px 5px gray }	
.css9 { box-shadow: 5px 20px 5px gray }			
.css10 { box-shadow: -5px -5px 0 gray }	
.css11 { box-shadow: 5px 5px 20px gray }	
			/* x方向 y方向 ぼかし */
.css12 { 
	border-radius: 50%;
	box-shadow: 5px 5px 10px gray 
}	
.css13 { 
	border-radius: 50%;
	box-shadow: 5px 5px 10px gray,  -5px -5px 10px pink
}	
.css14 { 
	border-radius: 50%;
	box-shadow: inset 5px 5px 10px gray
}	
.css15 { 
	border-radius: 50%;
	box-shadow: inset -5px -5px 30px gray
}	

.css16 { 
	background: linear-gradient(white,red);
}	

.css17{ 
	border-radius: 50%;
	background: linear-gradient(white 30%,red 70%);
}	
.css18{ 
	border-radius: 50%;
	background: linear-gradient(blue,white,red);
}	
.css19{ 
	border-radius: 50%;
	background: linear-gradient(180deg,blue,white,red);
}	
.css20{ 
	border-radius: 50%;
	background: linear-gradient(225deg,blue,white,red);
}	

.css21{ 
	background: linear-gradient(225deg,blue,white,red);
}	

.css22{ 
	background: radial-gradient(white,red);
}	
.css23{ 
	border-radius: 50%;
	background: radial-gradient(white,red);
}

#wrapper div{border: solid 1px gray;

width: 100px;

height: 100px;

text-align: center;

line-height: 100px;

margin: 20px;

display: inline-block;

}

.css1 { border-radius: 10px; }

.css2 { border-radius: 50px; }

.css3 { border-radius: 0px 10px 20px 30px; }

.css4 { border-radius: 0px 100px 0 100px; }

#wrapper .div2 {

width: 150px;

}

.css5 { border-radius: 10px 10px 10px 10px; }

.css6 { border-radius: 50px; }

.css7 { border-radius: 50%; }

#wrapper .div3 {

width: 100px;

}

.css8 { box-shadow: 5px 5px 5px gray }

.css9 { box-shadow: 5px 20px 5px gray }

.css10 { box-shadow: -5px -5px 0 gray }

.css11 { box-shadow: 5px 5px 20px gray }

/* x方向 y方向ぼかし */

.css12 {

border-radius: 50%;

box-shadow: 5px 5px 10px gray

}

.css13 {

border-radius: 50%;

box-shadow: 5px 5px 10px gray, -5px -5px 10px pink

}

.css14 {

border-radius: 50%;

box-shadow: inset 5px 5px 10px gray

}

.css15 {

border-radius: 50%;

box-shadow: inset -5px -5px 30px gray

}

.css16 {

background: linear-gradient(white,red);

}

.css17{

border-radius: 50%;

background: linear-gradient(white 30%,red 70%);

}

.css18{

border-radius: 50%;

background: linear-gradient(blue,white,red);

}

.css19{

border-radius: 50%;

background: linear-gradient(180deg,blue,white,red);

}

.css20{

border-radius: 50%;

background: linear-gradient(225deg,blue,white,red);

}

.css21{

background: linear-gradient(225deg,blue,white,red);

}

.css22{

background: radial-gradient(white,red);

}

.css23{

border-radius: 50%;

background: radial-gradient(white,red);

}

HTML

<div id="wrapper">
	<h1>cssデザイン</h1>
	<div class="css1">css1</div>
	<div class="css2">css2</div>
	<div class="css3">css3</div>
	<div class="css4">css4</div><br>
	
	<div class="css5 div2">css5</div>	
	<div class="css6 div2">css6</div>	
	<div class="css7 div2">css7</div><br>
	
	<div class="css8 div3">css8</div>	
	<div class="css9 div3">css9</div>	
	<div class="css10 div3">css10</div>
	<div class="css11 div3">css11</div><br>
	
	<div class="css12 div3">css12</div>
	<div class="css13 div3">css13</div>
	<div class="css14 div3">css14</div>	
	<div class="css15 div3">css15</div><br>
	
	<div class="css16 div3">css16</div>	
	<div class="css17 div3">css17</div>	
	<div class="css18 div3">css18</div>	
	<div class="css19 div3">css19</div>	<br>
	
	<div class="css20 div3">css20</div>	
	<div class="css21 div3">css21</div>	
	<div class="css22 div3">css22</div>	
	<div class="css23 div3">css23</div>	
</div>