10일 후 CSS3 — 2일

CSS 학습 2일차에 오신 것을 환영합니다.

이전에 말했듯이 이 시리즈는 freecodecamp 채널의 멋진 YouTube 시리즈에서 영감을 받았습니다.

2일차에는 타이포그래피부터 시작하겠습니다. 코드 편집기를 열고 새 2.1-Typography 폴더와 그 안에 두 개의 파일 index.html 및 sandbox.css를 만듭니다.

새 폴더

다음으로 index.html에 기본 html을 넣습니다.

index.html

이제 sandbox.css에서 먼저 Cool Shadow에 대한 코드를 추가합니다. Google 글꼴의 필기체 글꼴과 멋진 효과를 위한 텍스트 그림자 속성을 사용하고 있습니다.

샌드박스.css

이제 웹 브라우저에서 index.html을 열면 멋진 그림자 효과를 볼 수 있습니다.

쿨 섀도우

이제 멋진 3D 버튼을 만들어 보겠습니다. sandbox.css로 이동하여 아래 스타일을 추가합니다.

3D 버튼

그러면 멋진 3D 버튼이 표시됩니다.

멋진 3D

다음으로 이미지를 자르는 방법에 대해 알아보겠습니다. 코드 편집기를 열고 새 2.2-ClippingImages 폴더와 그 안에 두 개의 파일 index.html 및 sandbox.css를 만듭니다.

index.html에 기본 베어본을 넣습니다.

index.html

unsplash에서 4개의 이미지가 표시됩니다.

기본

CSS의 clip-path 속성을 사용하여 첫 번째 이미지를 완벽한 원으로 만들 차례입니다. sandbox.css의 첫 번째 이미지에 아래 코드 추가

클립-이미지-1

따라서 첫 번째 이미지는 완전한 원이 됩니다.

결과

다음으로 멋진 클립 메이커 사이트https://bennettfeely.com/clippy/로 이동합니다.

여기에서 제공된 클립을 사용할 수 있습니다. 우리는 첫 번째 주석을 사용할 것입니다.

클리피

코드를 복사하여 sandbox.css에 clip-image-2용으로 넣기만 하면 됩니다.

클립-이미지-2

그리고 당신은 아름다운 코멘트 이미지를 얻을 것입니다.

댓글 이미지

다시 clippy로 가서 십자가에 대한 코드를 복사합니다.

.clip-image-3{
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

}

이미지를 십자가로 변환합니다.

십자가

다시 clippy로 이동하여 제공된 왼쪽 화살표를 편집합니다. 아무 지점이나 드래그할 수 있습니다.

.clip-image-4{
-webkit-clip-path: polygon(40% 0%, 39% 34%, 100% 20%, 100% 80%, 38% 68%, 40% 100%, 0% 50%);
clip-path: polygon(40% 0%, 39% 34%, 100% 20%, 100% 80%, 38% 68%, 40% 100%, 0% 50%);
}

왼쪽 화살표가 표시됩니다.

맞춤 왼쪽 화살표

다음으로 아름다운 등록 양식을 만듭니다. 다시 코드 편집기에서 새 2.3-RegistrationForm 폴더와 그 안에 두 개의 파일 index.html 및 sandbox.css를 만듭니다.

index.html에 기본 베어본을 넣습니다.

등록 양식

그러면 브라우저에 기본 양식이 표시됩니다.

기본형

다음으로 양식에 몇 가지 기본 스타일을 추가하여 배경 그라데이션을 표시합니다.

기본 스타일

이제 아래와 같이 양식이 표시됩니다.

기본형

다음으로 sandbox.css에 입력 상자에 대한 코드를 추가합니다.

샌드박스.css

이제 아래와 같이 양식이 표시됩니다.

index.html

다음으로 제출 버튼의 스타일을 지정합니다. 버튼에 줄무늬 효과를 만들 것입니다.

버튼

호버 효과도 추가해 보겠습니다.

.register-wrapper form input[type="submit"]:hover {
    background-size: 40px 40px;
}

이제 버튼은 아래와 같습니다.

우리 버튼

다음으로 제목과 이 양식을 감싸는 상자에 스타일을 추가합니다.

제목

양식이 거의 완성되었으며 아래와 같습니다.

거의 완료

다음으로 양식 위로 마우스를 가져갈 때 발생하는 타일 효과를 만듭니다.

타일 스타일

아래와 같이 표시됩니다.

타일 효과

이것으로 코스 2일차를 마칩니다.

동일한 코드here를 찾을 수 있습니다.