쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기 정보
쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기관련링크
http://egis.kr/shop/
132회 연결
본문
영카트 pc 버전 상단 로고를 빛나는 텍스트(glowing text)로 바꾸는 방법입니다.
로고 만들기위해서 포토샾이나 일러스트를 켜기도 귀찮을때 간편합니다. 텍스트는 크기나 내용을 마음대로 변경할 수있습니다.
shop.head.php에서 <div id="logo">에 있는 기존의 이미지를 주석처리하고 다음코드를 넣으면 됩니다.
<?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 -->
추천
6
6
댓글 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
<!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>
특정 문자만 빛나게 하려면 <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>
@김철용 헐..대박 이게 되네요.. 감사합니다^^
유용한 팁이네요 감사합니다.
@브러운아이 따뜻한 관심과 격려에 감사드립니다. ^^
멋지네요~~~~
@Daniel74 관심가져주셔서 감사드립니다^^
반짝이니 좋네요
@mizuru 격려의 말씀, 감사드립니다^^
![](http://sir.kr/data/member_image/na/naver_3v7kaqsy.gif?1579144860)
감사합니다^^
@0620lhj 따뜻한 댓글, 감사드립니다^^
![](http://sir.kr/data/member_image/na/naver_vo0g29r6.gif?1546854102)
멋있어요!!!