로고 대신 glowing text 사용하기 > 그누보드5 팁자료실

그누보드5 팁자료실

로고 대신 glowing text 사용하기 정보

로고 대신 glowing text 사용하기

본문

2106540688_1623686136.9314.png

 

pc, mobile에서 로고를 클릭하면 a href="<?php echo G5_URL ?>" 즉 홈으로 연결이 되는데요.

로고 대신에 빛나는 텍스트를 사용해보았습니다.

아래 소스는 mobile/ head.php에 넣는 것을 하였지지만 pc 버전에서도 동일하게 하시면 됩니다.

css가 겹치지 않게 id 값을 주었습니다.

<div id="logo">의 image를 텍스트로 대체하고 css를 사용해서 빛이나는 효과(glowing)을 주었습니다.

기존의 <a href="<?php echo G5_URL ?>"><img src="<?php echo G5_IMG_URL ?>/m_logo.png" alt="<?php echo $config['cf_title']; ?>"></a>을 주석처리하거나 삭제하고 붉은 색 코드를 넣으시면 됩니다.

 

<mobile/head.php>

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

include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.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');
?>

<header id="hd">
    <h1 id="hd_h1"><?php echo $g5['title'] ?></h1>

    <div class="to_content"><a href="#container">본문 바로가기</a></div>

    <?php
    if(defined('_INDEX_')) { // index에서만 실행
        include G5_MOBILE_PATH.'/newwin.inc.php'; // 팝업레이어
    } ?>

    <div id="hd_wrapper">
        
    
        
<!-- glowing text style  6.14 추가 -->
<style>
/*
body {
  background-color: black;
  font-family: cursive;
}
*/

.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_URL ?>"> 
                <h1 id="kims" class="glowkim" style="font-size: 20px;  text-align:center; color: white;  padding-top: 5px;"  title="Welcome to kim's Homepage!!"> Kim's Page !!</h1>
            </a>
            
<!-- 이미지 주석처리  <a href="<?php echo G5_URL ?>"><img src="<?php echo G5_IMG_URL ?>/m_logo.png" alt="<?php echo $config['cf_title']; ?>"></a>-->
        </div>

        
        <button type="button" id="gnb_open" class="hd_opener"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only"> 메뉴열기</span></button>

        <div id="gnb" class="hd_div">
            <button type="button" id="gnb_close" class="hd_closer"><span class="sound_only">메뉴 닫기</span><i class="fa fa-times" aria-hidden="true"></i></button>
            <?php echo outlogin('theme/basic'); // 외부 로그인 ?>
            <ul id="gnb_1dul">
            <?php
            $menu_datas = get_menu_db(1, true);
            $i = 0;
            foreach( $menu_datas as $row ){
                if( empty($row) ) continue;
            ?>
                <li class="gnb_1dli">
                    <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
                    <?php
                    $k = 0;
                    foreach( (array) $row['sub'] as $row2 ){
                        if( empty($row2) ) continue;
                        if($k == 0)
                            echo '<button type="button" class="btn_gnb_op"><span class="sound_only">하위분류</span></button><ul class="gnb_2dul">'.PHP_EOL;
                    ?>

아래 코드 생략....

추천
6

댓글 4개

전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT