내 개인 사이트에 작은 것들

최근에 나는 개인 웹 사이트를 새로 고침 - 재미있는 솔로 프로젝트에 주었다! 그것은 나의 창조적 인 아울렛, 자기 표현 및 실험을위한 공간입니다. 이것은 신선한 페인트 코트처럼 완전한 점검이 아니 었습니다. 내가 사용한 흥미로운 기술 중 일부를 살펴 보겠습니다.

Hoefler 글꼴이있는 타이포그래피

Inkwell 글꼴 가족은 환상적입니다! 나는 웨이트, 세리프, Sans-Serifs 및 자본화 스타일을 혼합하는 것을 좋아합니다. 이전 디자인에서 Inkwell을 사용했지만 블로그 포스트 본문 텍스트에는 너무 장난기가 너무 장난감이라고 생각했습니다. 내 작문 스타일은 캐주얼하지만 항상 그런 것은 아니며 Inkwell의 유쾌한 특성은 더 심각한 주제에 맞지 않았습니다. 이전에는 이상적인 Sans와 짝을 이루었지만 조합이 느껴졌습니다.

이번에는 Body Copy를 위해 Whitney를 선택했습니다. 가벼운 느낌을 유지하지만보다 간단한 내용과 잘 어울립니다.

Sass와 함께 블로그 롤 스타일링

Zebra 스트라이핑 테이블은 간단합니다.

 Tr : nth-Child (짝수) {
  배경색 : var (-색상 -1);
}
Tr : nth-Child (홀수) {
  배경색 : var (-Color-2);
}

그러나 네 가지 색상을 순환하는 것은 어떻습니까? The :nth-child Selector는 오프셋으로 깔끔하게 처리합니다. 다음은 목록 항목에 대한 SASS 예입니다.

 Li {
  & : nth-Child (4n) a {
    색상 : $ Blue;
  }
  & : nth-Child (4n 1) a {
    색상 : $ 옐로우;
  }
  & : nth-Child (4n 2) a {
    색상 : $ 빨간색;
  }
  & : nth-Child (4n 3) a {
    색상 : $ Purple;
  }
}

이 접근법은 채색 된 블로그 롤을 만들었습니다. 나는 프로젝트에 기존의 존재로 인해 Sass를 사용했습니다. Codekit은 편집을 쉽게 처리했습니다. 그리고 네, 블로그 롤은 다시 시원합니다!

효율적인 YouTube 포함

나는 영리한 클릭-로드 YouTube 기술을 사용했습니다. 많은 리소스를로드하는 전체 YouTube Iframe을 포함시키는 대신 정적 이미지 자리 표시자를 사용했습니다. 이는 비슷한 사용자 경험을 유지하면서 성능을 크게 향상시킵니다.

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'>▶</a>" title="다크 나이트 상승 : 무엇이 잘못 되었습니까? - 현명한 판" width="560"></iframe>

사용자 정의 게시물 유형 및 데이터 구조

나는 구조화 된 데이터에 대한 강력한 옹호자입니다. WordPress에서는 종종 고급 사용자 정의 필드와 같은 플러그인과 결합 된 사용자 정의 게시물 유형이 포함됩니다. 이를 통해 유연한 데이터 처리가 가능하고 향후 사이트 수정을 단순화합니다.

동적 바이오 생성기

내 바이오 섹션은 복잡하지 않습니다. 18을 만들었습니다<div> 요소 (3 길이 <em>2 스타일</em> 3 코드 유형) 및 JavaScript를 사용하여이를 전환합니다. 클래스 문자열은 사용자 선택에 따라 계산되며 다른 바이오를 숨기면서 다른 바이오를 숨 깁니다.<pre class="brush:php;toolbar:false"> $ ( &quot;. Bio-Choices Input&quot;). on ( &quot;Change&quot;, function () { var longthclass = &quot;.bio-&quot;$ ( &quot;input [name = length] : checked&quot;). attr ( &quot;id&quot;); var styleclass = &quot;.bio-&quot;$ ( &quot;input [name = style] : checked&quot;). attr ( &quot;id&quot;); var codeclass = &quot;.bio-&quot;$ ( &quot;input [name = code] : checked&quot;). attr ( &quot;id&quot;); var selector = longthclass styleclass codeclass; $ ( &quot;. bio&quot;). hide (); $ (selector) .show (); });</pre> <p> jQuery는 이미 사이트에 통합되어 FitVids와 함께 사용 되었기 때문에 사용했습니다. 향후 다시 쓰기에는 jQuery를 제거하고 바이오 옵션을 간소화하는 것이 포함될 수 있습니다.</p> <h3 id="ztext-js-및-애니메이션-헤더"> ztext.js 및 애니메이션 헤더</h3> <p> 헤더는 ztext.js를 사용하여 Webby Flair의 터치를 추가합니다. 이 수준의 애니메이션은 교통량이 많은 사이트에 적합하지 않을 수 있지만 방문자 빈도가 낮은 사이트에는 적합합니다.</p> <h3 id="SVG-배경-및-바닥-글-효과"> SVG 배경 및 바닥 글 효과</h3> <p> 업데이트 된 SVG 배경 사이트를 사용하여 배경을 만들었습니다. <code>background-attachment: fixed 및 데스크탑에 슬라이드 아웃 바닥 글 효과가 포함되었습니다. 바닥 글씨는 정제가 필요할 수 있습니다. 역동적 인 배경에 더 큰 영향을 미칩니다.

필터가있는 일관된 링크 스타일

다른 섹션에서는 다양한 하이라이트 색상을 사용하며 섹션 링크를 해당 색상에 연결했습니다. 이것은 논쟁의 여지가있을 수 있지만 (일관된 링크 색상이 종종 선호됩니다) 시각적으로 매력적입니다. filter: brightness(120%); 트릭은 모든 색상에서 일관된 호버 및 포커스 스타일을 보장하여 스타일링을 단순화합니다.

 A : 초점, .Button : 초점,
A : 호버, .Button : 호버 {
  필터 : 밝기 (120%);
}

이것은 코드펜 챌린지에서 영감을 얻은 비교적 빠른 업데이트였습니다. 그러나 언제나 그렇듯이 한 작은 변화가 다른 변화로 이어졌고 결국 처음에 계획된 것보다 더 큰 수정을했습니다!