使用CSS提高文本的質量

我有這條消息，顯示在我的應用程序中。我想改進文字。使用CSS提高文本的質量

這是現在的樣子：

這是我希望它看起來（從Snapchat複製）：

這是怎麼了我的CSS現在看起來：

#footerNoInternet { 
    font-size: 12px; 
    background-color: #e80c0c; 
    border-color: #e80c0c; 
    color: white; 
}

其中#f ooterNoInternet是：

<div data-role="footer" data-position="fixed" id="footerNoInternet" hidden> 
    <p>No internet connection.</p> 
</div>

如何使用CSS做到這一點？

來源

2015-11-13 Emilio Weba

嘗試搞亂文本抗鋸齒;你也需要一些填充。

使用較大的字體進行更好的演示; text-align:center;，因爲在您的圖像中文本看起來中心對齊。 margin: 0;用於消除邊距。

至於漸變，我去了漸變鏈接（在底部），只是做了一個快速預設，然後粘貼到代碼片段中的CSS。

#footerNoInternet { 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    font-size: 25px; 
 
    background-color: #e80c0c; 
 
    border-color: #e80c0c; 
 
    color: white; 
 
    padding: 5px; 
 
    text-align: center; 
 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8c0237+0,ad0011+3,e80435+100 */ 
 
background: #8c0237; /* Old browsers */ 
 
background: -moz-linear-gradient(top, #8c0237 0%, #ad0011 3%, #e80435 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(top, #8c0237 0%,#ad0011 3%,#e80435 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to bottom, #8c0237 0%,#ad0011 3%,#e80435 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c0237', endColorstr='#e80435',GradientType=0); /* IE6-9 */ 
 
} 
 
#footerNoInternet > p { 
 
    margin: 0; 
 
}

<div data-role="footer" data-position="fixed" id="footerNoInternet"> 
 
    <p>No internet connection.</p> 
 
</div>

Recommend to read this Interesting Article

Gradients Site

來源

2015-11-13 18:27:59

DEMO
我認爲你需要，你需要有梯度玩，Gradient tool轉換圖像梯度I認爲你需要玩字體

#footerNoInternet { 
    text-align:center; 
    font-size: 2em; 
    background-color: #e80c0c; 
    color: white; 
    background: -webkit-linear-gradient(top, rgb(185, 57, 58) 0%, rgb(219, 71, 71) 61%, rgb(219, 71, 71) 100%); 
}

來源

2015-11-13 18:39:05 CY5

添加到CY5的答案，這是我修改：

我改變font-size到1em，color到rgb(244,244,244)和我添加font family: sans-serif。

它看起來幾乎正是你在找什麼。

這是jsfiddle。

來源

2015-11-13 22:22:25 Anthony

使用CSS提高文本的質量

回答

相關問題