반응형



    커스텀을 계속하면서 점점 Fastboot 스킨이 전혀 다른 모습으로 변해가고 있습니다 ^^


    다 모아서 한번 Fastboot 뭐하라's Editiion한번 만들어봐야겠네요 ㅋㅋ



    제가 다시 수정하기 전까지 보신 분들은 지금 설명하는 제목스타일을 직접 보실테지만, 언제 수정할 지 모르니 스크린샷부터 남깁니다.


    크롬에서 모습


    모바일에서 모습


    Webkit 기반 이외의 브라우저에서의 모습 (IE, FF 등)


    배경이미지를 글씨에 맞게 자르는 옵션이 현재 Webkit기반 브라우저(크롬 등)에서만 동작하기 때문에, IE나 FF에서는 세번째 그림처럼 나타납니다.


    그럼 간단히 수정방법을 알아봅시다.



    .


    보이는 것과 같이 제목 스타일 변경하기


    1. skin.html에서 다음을 찾아 아래와같이 변경합니다.

    <h3 class="title">

    <i class="fa fa-bars"></i> <a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>


    <h3 class="title"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>


    2.style.css에서 다음을 찾아 아래와 같이 변경합니다.

    h3.title a {

      color: #fff;

    }

    h3.title {

      color: #fff;

      line-height:32px;

      font-size: 20px;

      font-weight: bold;

      border-radius:3px;

      padding-top: 3px;

      padding-bottom: 1.5px;

      padding-left: 10px;

      margin-bottom: 2px;

      margin-top: 5px;

      background: #aab2bd;

    }


    h3.title a {

      -webkit-text-fill-color: rgba(0,0,0,0);

      color: #fff;

      font-family:"맑은 고딕",Arial,"돋움",Dotum,AppleGothic,sans-serif;

    }


    h3.title {

      line-height: 1em;

      font-size: 2em;

      font-weight: 900;

      margin-bottom: 2px;

      margin-top: 5px;

      background: url('./images/polygon-3.jpg');

      text-align: center;

      padding: 1.5em;

      -webkit-background-clip: text;

      background-clip: text;

      text-shadow: rgba(0,0,0,0.5) 2px 2px 2px;

      border-bottom: #888 solid 1px;

    }


    3. 다음 이미지를 업로드합니다.

    '오른쪽 클릭 - 사진 저장' 후에 HTML/CSS편집에서 파일 업로드로 업로드합니다.


    파일이름이 'polygon-3.jpg'인지 확인해주세요.


    ( 이것 말고도, 어두운 계열 이미지는 모두 사용 가능합니다.)




    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함