테스트 사이트 - 개발 중인 베타 버전입니다

쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기

· 2년 전 · 2259 · 12
text glow.png

영카트 pc 버전 상단 로고를 빛나는 텍스트(glowing text)로 바꾸는 방법입니다.

로고 만들기위해서 포토샾이나 일러스트를 켜기도 귀찮을때 간편합니다. 텍스트는 크기나 내용을 마음대로 변경할 수있습니다.

shop.head.php에서 <div id="logo">에 있는 기존의 이미지를 주석처리하고 다음코드를 넣으면 됩니다.

[code]

<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

$q = isset($_GET['q']) ? clean_xss_tags($_GET['q'], 1, 1) : '';

if(defined('G5_THEME_PATH')) {
    require_once(G5_THEME_SHOP_PATH.'/shop.head.php');
    return;
}

include_once(G5_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
include_once(G5_LIB_PATH.'/latest.lib.php');

add_javascript('<script src="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.js"></script>', 10);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/owlcarousel/owl.carousel.css">', 0);
?>

<!-- 상단 시작 { -->
<div id="hd">
    <h1 id="hd_h1"><?php echo $g5['title'] ?></h1>
    <div id="skip_to_container"><a href="#container">본문 바로가기</a></div>

    <?php if(defined('_INDEX_')) { // index에서만 실행
        include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
    } ?>
     
    <div id="tnb">
        <div class="inner">
            <?php if(defined('G5_COMMUNITY_USE') == false || G5_COMMUNITY_USE) { ?>
            <ul id="hd_define">
                <li><a href="<?php echo G5_URL ?>/">커뮤니티</a></li>
                <li class="active"><a href="<?php echo G5_SHOP_URL ?>/">쇼핑몰</a></li>
            </ul>
            <?php } ?>
            <ul id="hd_qnb">
                <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>
                <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>
                <li><a href="<?php echo G5_SHOP_URL ?>/personalpay.php">개인결제</a></li>
                <li><a href="<?php echo G5_SHOP_URL ?>/itemuselist.php">사용후기</a></li> 
                <li><a href="<?php echo G5_SHOP_URL ?>/itemqalist.php">상품문의</a></li>
            </ul>
        </div>
    </div>

  
    <div id="hd_wrapper">
<!-- logo 대체하는 glowing text -->
<style>
.glowkim {
  font-size: 25px;
  color: #fff;
  text-align: center;
  animation: glowkim 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glowkim {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
</style>

<div id="logo">
<a href="<?php echo G5_SHOP_URL; ?>"> <h1 id="kims" class="glowkim" style="font-size: 30px; float: left; text-align:right; color: white;  padding-top: 5px;" title="The Kim's Company">KIMCHULYONG!! </h1></a>
<!--  기존 이미지를 주석처리함          <a href="<?php echo G5_SHOP_URL; ?>/"><img src="<?php echo G5_DATA_URL; ?>/common/logo_img" alt="<?php echo $config['cf_title']; ?>"></a>-->
</div>
<!-- logo 대체하는 glowing text -->

[/code]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 12개

KIMCHULYONG!! 글 자가 모두 빤짝빤짝 이쁘네요. 로고 글자 중 특정 글자만 빤짝이게 할 수 있나요? 있다면 팁을 알고 싶습니다. 예를 들어 KIMCHULYONG!! 중 K, C, Y 만 반짝임
@gagot glow text의 원 소스는 https://www.w3schools.com/howto/howto_css_glowing_text.asp 입니다.
특정 문자만 빛나게 하려면 <span>태그로 특정문자에만 class를 주면 될것 같습니다.
http://egis.kr/zest.php

[http://sir.kr/data/editor/2301/9b1324044c79cdc14a0e8f58c7d18b13_1674750075_2783.png]

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: gray;
font-family: cursive;
}

.glow {
font-size: 80px;
color: #fff;
text-align: center;
animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
</head>
<body>

<h1 id="kimh1" style="font-size: 80px">GL<span class="glow">O</span>WING <span class="glow">T</span>EXT</h1>


</body>
</html>
@김철용 헐..대박 이게 되네요.. 감사합니다^^
2년 전
유용한 팁이네요 감사합니다.
@브러운아이 따뜻한 관심과 격려에 감사드립니다. ^^
멋지네요~~~~
@Daniel74 관심가져주셔서 감사드립니다^^
반짝이니 좋네요
@mizuru 격려의 말씀, 감사드립니다^^
감사합니다^^

게시글 목록

번호 제목
1874
1873
1870
1862
1846
1845
1837
1835
1823
1787
1781
1777
1771
1750
1746
1743
1742
1738
1714
1710
1700
1699
1696
1694
1691
1684
1662
1659
1656
1637