CSS로 하트 모양을 만드는 법
CSS3는 HTML 및 CSS 만 사용하여 웹 사이트에서 구축 할 수있는 가능성을 높입니다. 이전에 소개 한 놀라운 예를 찾을 수 있습니다. 하지만 너무 멀리 앞서 가려고하지 마십시오. 복잡한 디자인에는 두통을 줄 수있는 코드가 필요합니다..
대신, 우리는 당신을 도울 간단한 것을 만들 것입니다. 먼저 CSS로 모양과 위치를 이해하십시오., 전에 고급 디자인으로 모험하기 전에. 발렌타인 데이가 끝나면 HTML과 CSS를 사용하여 하트 모양을 만들어 보겠습니다..
기본 사항
기본적으로 하나 이상의 기본 모양 (예 : 사각형 및 원)을 결합하여 새로운 모양을 만들 수 있습니다. 심장 모양을 살펴보면 심장 모양이 두 개의 원과 결합 된 직사각형. HTML 요소는 본질적으로 정사각형 또는 직사각형입니다. CSS3 테두리 반경 덕분에 사각형을 원으로 쉽게 변형 할 수 있습니다..
다음을 추가하여 시작하십시오. 그런 다음 너비와 높이를 동일하게 지정하여 정사각형으로 만듭니다. 좋아하는 배경색을 선택하십시오.. 다음 단계에서는 서클을 만듭니다.. 새로운 요소를 추가하는 대신 의사 요소를 사용합니다., 사각형과 함께 다음과 같은 결과를 얻습니다. 그런 다음 의사 요소를 사용하여 두 번째 원을 만듭니다. 결과는 다음과 같습니다. 다음과 같이 의사 요소 선택자를 그룹화하여 이러한 두 개의 동일한 스타일을 결합 할 수 있습니다. 따 - 다! 우리는 아직 올바른 방향으로 있지는 않지만 심장 모양을 가지고 있습니다. 그것을 바로 잡으려면 CSS3 변환을 사용합니다.. 변형은 모양의 주요 요소에 부여 될 수 있습니다. 여기는 사각형을 의미합니다. 변형되면 의사 요소는 주 요소 다음에 자동으로 위치를 변경합니다. 여기에서 우리는 마음이 회전되도록 볼 것입니다. “서 있는”. 그리고 이것은 우리의 마음이 지금과 같은 것입니다.. 위의 심장 모양의 전체 코드는 HTML에서 다음과 같습니다. 그리고 우리의 CSS에서는 다음과 같이됩니다 : 이제 알파 채널의 알파 채널을 설정합니다. 이제 우리는 완벽한 심장 모양을 가지게되었습니다. 배경을 다른 색으로 바꾼다. (예 : 분홍색 또는 빨강). 유일한 단점은 우리가 국경을 추가 할 수 없습니다. 적층 된 요소에 기인 한 형상으로 변형된다. 경계선을 추가하면 심장이 이상하게 보입니다.. 하트 모양과 같은 모양을 만드는 CSS3를 사용하면 쉽게 할 수 있습니다. border-radius 속성을 사용하면 요소 또는 의사 요소를 원으로 만든다.. CSS3 변환을 사용하면 객체의 좌표를 회전하거나 이동한다. 편하게. 창의력과 상상력에 의해서만 제한됩니다.!
.심장 - 모양 위치 : 상대적; 너비 : 200px; 높이 : 200px; 배경색 : rgba (250, 184, 66, 0.8);
:전에 과 :후. 우리는 먼저 :전에 첫 번째 원으로 의사 요소. 우리는 div와 마찬가지로 폭과 높이가 같은 크기의 정사각형으로 만듭니다. 그런 다음 테두리 반경을 50 %로 지정하고 사각형의 왼쪽에 배치하여 원으로 변환합니다.. .심장 모양 : before 위치 : 절대; 하단 : 0 픽셀; 왼쪽 : -100 픽셀; 너비 : 200px; 높이 : 200px; 배경 - 색상 : rgba (250,184,66) : - 웹킷 - 국경 - 반경 : 50 % - 국경 - 국경 반경 : 50 % - 국경 - 반경 : 50 % 국경 - 반경 : 50 % , 0.8);
:후 우리가 만든 첫 번째 서클과 같은 스타일로 그런 다음 정사각형 꼭대기에 배치합니다.. .심장 모양 : 위치 : 절대 이후; 상단 : -100 픽셀; 오른쪽 : 0px; 너비 : 200px; 높이 : 200px; 배경 - 색상 : rgba (250,184,66) : - 웹킷 - 국경 - 반경 : 50 % - 국경 - 국경 반경 : 50 % - 국경 - 반경 : 50 % 국경 - 반경 : 50 % , 0.8);
.심장 - 모양 : 전에, 심장 - 모양 : 이후 위치 : 절대; 너비 : 200px; 높이 : 200px; 배경 - 색상 : rgba (250,184,66) : - 웹킷 - 국경 - 반경 : 50 % - 국경 - 국경 반경 : 50 % - 국경 - 반경 : 50 % 국경 - 반경 : 50 % , 0.8); .heart-shape : before bottom : 0px; left : -100px; .heart-shape : top : -100px; 오른쪽 : 0px; 이후
.심장 모양 -webkit-transform : rotate (45deg); -moz-transform : rotate (45deg); -ms-transform : rotate (45deg); -o-transform : rotate (45deg); 변형 : rotate (45deg);
결과:
.심장 - 모양 위치 : 상대적; 너비 : 200px; 높이 : 200px; -webkit-transform : rotate (45deg); -moz-transform : rotate (45deg); -ms-transform : rotate (45deg); -o-transform : rotate (45deg); 변형 : rotate (45deg); 배경색 : rgba (250,184,66, 1); .heart-shape : 앞에, .heart-shape : 위치 뒤에 : 절대; 너비 : 200px; 높이 : 200px; 배경 - 색상 : rgba (250,184,66) : - 웹킷 - 국경 - 반경 : 50 % - 국경 - 국경 반경 : 50 % - 국경 - 반경 : 50 % 국경 - 반경 : 50 % , 1); .heart-shape : before bottom : 0px; left : -100px; .heart-shape : top : -100px; 오른쪽 : 0px; 이후
rgba (250, 184, 66, 1) 배경에 1 투명도를 제거합니다. 이제 이것이 우리의 마음이 보이는 것입니다..
결론
