0

真ん中を斜めの縦線で分割したデザインを作成しました。表示に使用しているデバイスに関係なく、垂直方向と水平方向の中央に配置したいテキストが両側にあります。デザインは片面が黒、もう片面が白であるため、テキストの色も変更する必要があります。テキストが常に垂直方向の中央に配置されているさまざまな解像度やデバイスにこれを調整する方法がわかりません。これを機能させる方法がわかれば、jQueryを使用するか、これを画像に変換したいと思います。

http://jsfiddle.net/dw4Cj/7/

---------------------- HTML --------------------

<div id="wrapper">
   <div id="right"></div>
    <div class="content" id="left-content">
        <h1> Designer </h1>
    </div>
    <div class="content" id="right-content">         
        <h1> Developer </h1>
    </div>
 </div>

--------------------- CSS -------------------------

#right {
     background: none repeat scroll 0 0 rgba(0,0,0,1);
     height: 10000px;
     left: -851px;
     position: fixed;
     top: -150px;
     transition: all 0.5s ease-in-out 0s;
     transform: rotate(10deg);
     -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
     -o-transform: rotate(10deg);
     -ms-transform: rotate(10deg);
     width: 710px;
}

#right-content {
     position: fixed;
     margin: 0 0 0 703px;
     top: 40px;
}

#left-content {
    color: white;
    position: fixed;
    text-align: right;
    top: 40px;
    width: 574px;
}

.content {
    padding-top: 260px;
}

 #left {
     float: right;
     margin-right: 40px;
 }
4

1 に答える 1

1

グラデーションを使用して背景を作成できます。ここに例を作成しました。

/* HTML */
<body>
    <p class="center-vertical">Designer <span class="black">Developer</span></p>
</body>


/* CSS */
body, html {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
background-image: -moz-linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
background-image: -linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
}

p {
text-align: center;
font-size: 30px;
color: #fff;
word-spacing: 80px;
}

.black {
color: #000;
}

/* JS */
$(document).ready(function(e) {

var centerVerticaly = function() {
    var marginTop = $('body').height() / 2;

        $('.center-vertical').css({
            marginTop: marginTop
        });
};

    $(window).bind("load resize", function(){
        centerVerticaly();
    });

    centerVerticaly();

});

http://jsfiddle.net/LFGGV/

投稿したjsfiddleの真ん中にある影が欠けていますが、グラデーションにブレークポイントを追加することで影を作成できます。

私はjQueryの助けを借りてテキストを中央に配置することを選択しました。これを行うためのより良い方法があるかもしれませんが、それは機能します。

于 2013-01-16T16:22:30.633 に答える