StoryCode

'2019/10/08'에 해당되는 글 3건

  1. Pie Chart
  2. Pie Chart
  3. CSS 변수

Pie Chart

Web Dev, HTML, CSS, SVG, BootStrap/CSS 예제
반응형

<!doctype html>
<html>
	
<head>
<style>
	.pie
	{
		padding: 48vmin;
		border-radius: 50%;
		background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
	}
</style>
</head>

<body>
<div class="pie" style="--value: 40%;"></div>
</body>

</html>
반응형

'Web Dev, HTML, CSS, SVG, BootStrap > CSS 예제' 카테고리의 다른 글

담배연기 Animation + 글자 나타나기  (0) 2019.10.26
체크 무늬 3D 배경 회전  (0) 2019.10.12
Pie Chart  (0) 2019.10.08
Typing Text Animation  (0) 2018.09.28
Gradient Button,그래디언트버튼  (0) 2018.09.28
,

Pie Chart

Web Dev, HTML, CSS, SVG, BootStrap/CSS 예제
반응형

<!doctype html>
<html>
	
<head>
<style>
	.pie
	{
		padding: 48vmin;
		border-radius: 50%;
		--value: 0%;
		background: conic-gradient(red var(--value, 0%), yellow 0 60%, black 0);
	}
</style>
</head>

<body>
<div class="pie" style="--value: 40%;"></div>
</body>

</html>

 

반응형

'Web Dev, HTML, CSS, SVG, BootStrap > CSS 예제' 카테고리의 다른 글

체크 무늬 3D 배경 회전  (0) 2019.10.12
Pie Chart  (0) 2019.10.08
Typing Text Animation  (0) 2018.09.28
Gradient Button,그래디언트버튼  (0) 2018.09.28
Border 애니메이션  (0) 2018.09.28
,

CSS 변수

Web Dev, HTML, CSS, SVG, BootStrap/CSS
반응형

--main-page-color 라는 지역변수를 정의하고, var 로 불러서 사용.

 

<!DOCTYPE html>
<html>
<head>
<style>
:root
{
  --main-page-color:blue;
}

div
{
  background-color:var(--main-page-color);
}

h1
{
  --main-page-color:red;
  background-color:var(--main-page-color);
}
</style>
</head>

<body>
  <div>Haha</div>
  <h1>haha</h1>
</body>
</html>

 

반응형

'Web Dev, HTML, CSS, SVG, BootStrap > CSS' 카테고리의 다른 글

2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch  (0) 2020.04.05
CSS1,2,3  (0) 2020.03.04
CSS Animation : 2D Transform  (0) 2019.08.14
(작성중) transition, transform (rotate, translate)  (0) 2018.10.26
Div p 와 Div > p 의 차이점  (0) 2018.06.03
,

티스토리툴바