使用CSS

Question

我有这条消息，我正在我的应用上显示。我想改进文本。

以下是现在的样子：

这就是我想要的样子（从Snapchat复制）：

这就是我的CSS现在的样子：

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

#footerNoInternet是：

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

如何使用CSS执行此操作？

Answer 1

尝试搞乱文本抗锯齿;你还需要一些填充物。

使用更大的字体进行更好的演示; 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

Answer 2

DEMO
我认为您需要使用渐变和Gradient tool将图像转换为渐变我认为您需要使用字体

#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%);
}

Answer 3

添加到CY5的答案这就是我修改的内容：

我将font-size更改为1em，将color更改为rgb(244,244,244)，然后添加font family: sans-serif。

它看起来几乎就是你要找的东西。

这是jsfiddle。