타운광장토픽게시판

 

 

 

 

 

물어 보신 분도 있었고.. 저처럼 디자인 필요치 않고 텍스트만 선명하게 보이고 약간의 효과만 주고 싶으신 분들에게 도움이 될까하고 남겨봐요.

저는 로고를 이미지 파일로 업로드 하면 선명하지가 않아서 그냥 이렇게 쓰고 있네요.. 똥손이라 예쁘게 만들지도 못하구요..

 

레이아웃 파일에 사이트 문자 입력이 출력되는 부분 {$li->site_name} 여기를 찾아서 아래 코드로 대체하고  레이아웃 설정에서 사이트 이름 넣으면 됩니다!  파일로 저장하고 이미지처럼 불러와도 되지만 사이트이름을 한글 ⇔ 영문 바꾸고 싶을때가 있어서 귀찮아서 이렇게 했어요.

 

웹폰트 적용하실거면 폰트이름 부분에 넣어주시고, 폰트사이즈, 자간 변경하면되고요..

위에 예시는  gif로 만들면서 프레임이 튀어서 흔들리는데 실제로 그렇지는 않아요
색상은 제가 사용하던거 그대로 퍼온 상태라 원하는 색상으로 변경하시고.. 사이즈 조절이 필요하면 초록색으로 표시한 부분을 수정하시면 됩니당.

그런데 크롬 사파리 파폭은 잘 나오는데 익스플로러는 모르겠네요.ㅎㅎ; 

 

<svg width="160px" height="37px" viewBox="0 0 160 37" >

<text x="50%" text-anchor="middle" y="50%" dy="0.4em" fill="url(#ptn)" font-family="폰트이름" font-size="24px" letter-spacing= "0.15em">{$li->site_name}</text>

<defs>

<linearGradient id="grd" x1="0%" y1="0%" x2="100%" y2="0">

<stop offset="0%" style="stop-color:#33235b;"/>

<stop offset="25%" style="stop-color:#9485f5;"/>

<stop offset="50%" style="stop-color:#ffb7d6;"/>

<stop offset="75%" style="stop-color:#9485f5;"/>

<stop offset="100%" style="stop-color:#33235b;"/>

</linearGradient>

<pattern id="ptn" x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">

<rect x="0" y="0" width="150%" height="100%" fill="url(#grd)">

<animate attributeType="XML"

attributeName="x"

from="0" to="150%"

dur="7s"

repeatCount="indefinite"/>

</rect>

<rect x="-150%" y="0" width="150%" height="100%" fill="url(#grd)">

<animate attributeType="XML"

attributeName="x"

from="-150%" to="0"

dur="7s"

repeatCount="indefinite"/>

</rect>

</pattern>

</defs>

</svg>

글쓴이 내강아지

?
홈페이지를 가지고 싶은 초보입니다.
잘 부탁드립니다!!