CSS3로 RSS 피드 로고를 만드는 방법
RSS 피드 로고는 웹 디자인에서 가장 일반적으로 사용되는 로고 중 하나입니다. Photoshop과 같은 그래픽 소프트웨어를 사용하여 RSS 피드 로고 그리기에 대한 많은 자습서를 보았습니다. 순전히 CSS3를 사용하여 그리기? Yeap, 내 말 들었어 :-)
이 기회에서 저는 CSS3만으로 표준 RSS 피드 로고를 만드는 쉬운 방법을 보여 드리고자합니다. 포괄적 인 단계와 그래픽으로 튜토리얼을 따라 첫 번째 CSS3 피드 로고를 얻으십시오.!
다음은 몇 분 안에 작성하게 될 내용에 대한 미리보기입니다. 자습서 끝 부분에서 소스 파일을 다운로드 할 수도 있습니다.
1 단계
HTML 파일을 만들고 완전히 비어있는 경우 다음 코드를 파일에 삽입하십시오..
내 첫 CSS3 RSS Feed 로고 - 여기에 HTML 삽입 -
2 단계
아래 코드를 HTML 파일에 삽입하여 피드 상자를 만듭니다..
피드 상자 용 HTML
피드 상자 용 CSS
span.feed-box display : block; 너비 : 200px; 높이 : 200px; 여백 : 0 자동; 배경 : # F9A004; 박스 그림자 : 1px 1px 0 # C27C03, 2px 2px0 # C27C03, 3px 3px0 # C27C03, 4px4px0 # C27C03, 5px 5px0 # C27C03, 6px 6px0 # C27C03; -moz-box-shadow : 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px0 # C27C03, 4px4px0 # C27C03, 5px 5px0 # C27C03, 6px 6px0 # C27C03; -webkit-box-shadow : 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px0 # C27C03, 4px4px0 # C27C03, 5px 5px0 # C27C03, 6px 6px0 # C27C03; -moz-border-radius : 20px; -webkit-border-radius : 20px; border-radius : 20px; span.feed-box * float : right; 디스플레이 : 블록;
이것이 당신이 달성 할 결과입니다 :
3 단계
우리는 첫 번째 피드 상자 안에있는 다른 상자를 그리기 때문에 아래의 HTML 코드를 첫 번째 피드 상자의 HTML 코드에 넣으십시오. 우리는 여기 경계를 장벽으로 추가 할 것입니다..
작은 피드 박스 용 HTML
작은 피드 박스 용 CSS
span.feed-box .feed-box-in border : 4px solid # FFC563; 너비 : 184px; 높이 : 184px; 여백 : 4px 4px 0 0; -moz-border-radius : 20px; -webkit-border-radius : 20px; border-radius : 20px; / * overflow : hidden; * /
이것이 당신이 달성 할 결과입니다 :
4 단계
이 단계에서 우리는 1/4 큰 원을 만들 것입니다. 작은 피드 상자의 HTML 코드에 1/4 큰 원의 HTML 코드를 입력하고 그 코드는 다음과 같습니다.
1/4 빅 서클 용 HTML
1/4 큰 원형을위한 CSS
span.feed-box .feed-box-in .feed-quarter-circle-big margin : 16px 16px 0 0; 너비 : 260px; 높이 : 260px; 국경 : 30px 단색 # FFDEA5; -moz-border-radius : 260px; -webkit-border-radius : 260px; border-radius : 260px;
이것이 당신이 달성 할 결과입니다 :
5 단계
이제 1/4의 작은 원을 만들고, 아래의 HTML 코드를 큰 원의 HTML 코드에 넣습니다..
1/4 작은 원을위한 HTML
1/4 작은 원을위한 CSS
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin : 16px 16px 0 0; 너비 : 176px; 높이 : 176px; 국경 : 26px 단색 # FFDEA5; -moz-border-radius : 176px; -webkit-border-radius : 176px; border-radius : 176 픽셀
이것이 당신이 달성 할 결과입니다 :
6 단계
6 단계에서 작은 원이 작은 원 안에 만들어 지므로 HTML 코드를 작은 원의 HTML 코드에 넣습니다..
가장 작은 원을위한 HTML
가장 작은 서클을위한 CSS
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle margin : 24px 24px 0 0; 배경 : # FFDEA5; 너비 : 70px; 높이 : 70px; -moz-border-radius : 70px; -webkit-border-radius : 70px; border-radius : 70px
이것이 당신이 달성 할 결과입니다 :
마지막 작업
코드 검색, / * overflow : hidden; * / 이 코드로 바꾼다., 오버플로 : 숨김;, 다음 예! 방금 CSS3 RSS Feed 로고를 얻었습니다.!
보너스 : 호버 효과 추가
마법 호버 효과없이 RSS 피드 로고를 원하지 않습니까? 그냥 아래의 CSS 스타일을 추가하여 그것을 달성하십시오!
호버 효과를위한 CSS
span.feed-box : 호버 (배경 : # 07C103; 상자 그림자 : 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-shadow : 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow : 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; span.feed-box : hover .feed-box-in border-color : # 58FC55; span.feed-box : 호버 .feed-box-in .feed-quarter-circle-big, span.feed-box : 호버 .feed-box-in .feed-quarter-circle-big .feed-quarter-circle -small border-color : # B9FFB7; span.feed-box : 호버 .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle background : # B9FFB7;
미리보기 및 다운로드
다음은 크기와 스타일이 다른 CSS3 피드 로고의 미리보기입니다. 특정 단계를 수행 할 수 없으면 소스 파일도 다운로드 할 수 있습니다..
- CSS3 RSS 로고 미리보기 (큰)
- CSS3 RSS 로고 미리보기 (매질)
- CSS3 RSS 로고 미리보기 (작은)
- CSS3 RSS 로고 미리보기 (중형, 역형)
- CSS3 RSS 로고 소스 파일 다운로드 (.지퍼)
편집자 주 : 이 게시물은에 의해 작성됩니다 이맘 켄 데니 Hongkiat.com. Indham으로도 알려진 Irham은 인도네시아의 웹 디자이너이자 개발자입니다. 그는 또한 CSS와 WordPress 테마 개발을 좋아합니다..
