使用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提高文本的质量

回答

相关问题