• Breaking Entry

    TeLog Anime+Game

    深夜アニメのおもしろ記事や家ゲーRPG・ネトゲ・スマホゲームのおすすめ
    感想、レビュー、リセマラ、攻略系情報ブログ
    たまに知的好奇心をそそる記事も。





    2014年9月13日土曜日

    【HTML/CSS/Javascript】見出しをデザインしてみる





    HTML/CSS/Javascript

    HTMLで固有IDをつけてCSSから様々なデザインに変更できる、とっておきをご紹介させていただこうと思います(`・ω・´)
    これをつけてあげるだけで、ブログ更新中での文章で躓いても一旦プレビューし見出しを見る度に気持ちモチベーションが上昇したりします!(個人差) 
    遊び感覚でつけるだけでも十分なので是非試してみてね!

    今このブログで最近使い始めた見出しCSSはこれです(*‘ω‘ *)
    #heading03{
    position:relative;
    margin:0 -10px;
    padding:5px;
    font:normal 28px/1.6 "Times New Roman", Times, serif;
    text-align:center;
    color:#fafafa;/*色設定*/
    background:#ccc;/*色設定*/
    -webkit-transform: rotate(-3deg) skew(-3deg);
    -moz-transform: rotate(-3deg) skew(-3deg);
    -o-transform: rotate(-3deg) skew(-3deg);
    transform: rotate(-3deg) skew(-3deg);
    box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
    background-image: -webkit-gradient(linear, left top, left bottom,
    from( rgba(0, 0, 0, 0.0)),
    color-stop(0.08, rgba(255, 255, 255, 0.5)),
    color-stop(0.12, rgba(255, 255, 255, 0.5)),
    color-stop(0.12, rgba(0, 0, 0, 0.0)),
    color-stop(0.88, rgba(0, 0, 0, 0.0)),
    color-stop(0.88, rgba(255, 255, 255, 0.5)),
    color-stop(0.92, rgba(255, 255, 255, 0.5)),
    color-stop(0.92, rgba(0, 0, 0, 0.0)),
    to( rgba(0, 0, 0, 0.0))
    );
    background-image: -moz-linear-gradient(top,
    transparent 8%,
    rgba(255, 255, 255, 0.5) 8%,
    rgba(255, 255, 255, 0.5) 12%,
    transparent 12%,
    transparent 88%,
    rgba(255, 255, 255, 0.5) 88%,
    rgba(255, 255, 255, 0.5) 92%,
    transparent 92%
    );
    background-image: -o-linear-gradient(top,
    transparent 8%,
    rgba(255, 255, 255, 0.5) 8%,
    rgba(255, 255, 255, 0.5) 12%,
    transparent 12%,
    transparent 88%,
    rgba(255, 255, 255, 0.5) 88%,
    rgba(255, 255, 255, 0.5) 92%,
    transparent 92%
    );
    background-image: linear-gradient(to bottom,
    transparent 8%,
    rgba(255, 255, 255, 0.5) 8%,
    rgba(255, 255, 255, 0.5) 12%,
    transparent 12%,
    transparent 88%,
    rgba(255, 255, 255, 0.5) 88%,
    rgba(255, 255, 255, 0.5) 92%,
    transparent 92%
    );
    }
    #heading03:before{
    content:" ";
    position:absolute;
    top:-5px;
    left:0;
    width:0;
    height:0;
    border-width:0 0 5px 10px;
    border-style:solid;
    border-color:transparent;
    border-bottom-color:#000;/*色設定*/
    }
    #heading03:after{
    content:" ";
    position:absolute;
    top:100%;
    right:0;
    width:0;
    height:0;
    border-width:5px 10px 0 0;
    border-style:solid;
    border-color:transparent;
    border-top-color:#000;/*色設定*/
    }
    これが今現在使用してる見出しのCSSになります・・・!
    コピーして自分のCSSの最後尾に貼り付けるだけ!簡単だね・・・!←
    ただしこれだけでは全く反映されませんので、次はHTMLにこのタグを挿入します!
    HTML CSS Javascript 見出しをデザインしてみる
    必ずこのHTMLタグを設置して真ん中に表示させたいテキストを入力させてあげるだけで簡単に設置できちゃいます!
    引用:SQUEEZE URL:http://squeeze.jp/lab/sample-page/heading-design-css-only/

    0 件のコメント :

    コメントを投稿

    ※コメント反映までに時間がかかることがございます。

    ANTENA RSS

    ARCHIVE

    LINK





    RE:ACCESS

    アクセスランキング

    Feedly

    follow us in feedly

    PAGE TOP