css横幅
Inspired by Tamsin Baker’s beautiful Photoshop brushes “Urban Scrawl” 1 and 2, I was trying to create some shadowed banners using some CSS3 properties. Visit Tamsin’s site and check out all her inspiring artwork including the free Photoshop brushes: http://www.tamsinbaker.com/
受Tamsin Baker美丽的Photoshop笔刷“ Urban Scrawl” 1和2的启发，我试图使用一些CSS3属性创建一些阴影横幅。 访问Tamsin的网站，并查看她所有鼓舞人心的艺术品，包括免费的Photoshop笔刷： http ： //www.tamsinbaker.com/
Here is the result of my experiment with some example banners (click on the image to see the demo page):
这是我的实验结果，带有一些示例横幅(单击图像可查看演示页面)：
You can download the ZIP file with all the images here: CSS3 Banners ZIP
您可以在此处下载包含所有图像的ZIP文件： CSS3 Banners ZIP
The main idea is to create an image using the Urban Scrawl Photoshop brushes and to put it as the logo of the banner.
主要思想是使用Urban Scrawl Photoshop笔刷创建图像并将其作为横幅的徽标。
The CSS is built up like this:
CSS的构建如下：
h1{
padding-top: 10px;
font-size: 36px;
padding:0px;
margin: 0px;
line-height:100px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
width:310px;
float:left;
}
.slogan{
float: right;
margin:75px 20px 0px 0px;
font-size: 20px;
}
Here we define the heading and the slogan of the banner. In the next class we define the general banner layout:
在这里，我们定义横幅的标题和口号。 在下一课中，我们定义常规横幅布局：
.banner{
width:620px;
height: 100px;
margin:7px auto;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding-left:190px;
}
And now, we define each individual banner, by changing the background image, which is the logo, the font color and the font-family:
现在，我们通过更改背景图像(即徽标，字体颜色和字体系列)来定义每个单独的横幅：
.banner0{
background: #656964 url(banner0.png) no-repeat center left;
}
.banner1{
color:#37535B;
background: #31B3DA url(banner1.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner2{
color:#656A64;
background: #81C573 url(banner2.png) no-repeat center left;
font-family: "Palatino Linotype";
}
.banner3{
color:#37535B;
background: #656964 url(banner3.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner4{
color:#2B8EAC;
background: #656964 url(banner4.png) no-repeat center left;
font-family: "Century Gothic";
}
.banner5{
color:#37535B;
background: #C6CC10 url(banner5.png) no-repeat center left;
font-family: "Trebuchet MS";
}
.banner6{
color:#37535B;
background: #b8d8fb url(banner6.png) no-repeat center left;
font-family: "Arial Narrow";
text-transform: uppercase;
letter-spacing: 4px;
}
.banner7{
color:#6e9cf9;
background: #a08c60 url(banner7.png) no-repeat center left;
font-family: "Arial Narrow";
font-style: italic;
}
The html looks like this:
html看起来像这样：
<div class="banner banner0"></div>
<div class="banner banner3"></div>
<div class="banner banner1">
<h1>Sweet City</h1>
<div class="slogan">there's a lot to discover in your town</div>
</div>
<div class="banner banner2">
<h1>Automobile</h1>
<div class="slogan">The true fan club</div>
</div>
<div class="banner banner4">
<h1>Arrow Shmallow</h1>
<div class="slogan">Best Services</div>
</div>
<div class="banner banner5">
<h1>Radio Header</h1>
<div class="slogan">Listen to the music!</div>
</div>
<div class="banner banner6">
<h1>Energizer</h1>
<div class="slogan">The Smarter Power</div>
</div>
<div class="banner banner7">
<h1>Brickyton</h1>
<div class="slogan">We build everything</div>
</div>
The first two banners are complete images, but since we apply the general style of .banner to them, we get the rounded and shadowed borders.
前两个横幅是完整的图像，但是由于我们将.banner的一般样式应用于它们，因此我们得到了圆角和阴影边框。
We apply both classes, the .banner and the .bannerN to each element. This will apply the common style and the individual style to the element. Keep in mind, that we can control which property gets overwritten by defining the order of class application. Everything that we define in the individual class .bannerN will replace the property (if it existed) of the .banner class.
我们将.banner和.bannerN这两个类都应用于每个元素。 这会将通用样式和个人样式应用于元素。 请记住，我们可以通过定义类应用程序的顺序来控制哪个属性被覆盖。 我们在单个类.bannerN中定义的所有内容都将替换.banner类的属性(如果存在)。
Here is the demo link again: DEMO
再次是演示链接： DEMO
And also the ZIP: CSS3 Banners ZIP
以及ZIP： CSS3 Banners ZIP
Tamsin Baker’s homepage: http://www.tamsinbaker.com/
Tamsin Baker的主页： http ://www.tamsinbaker.com/
Thank you, Tamsin, and enjoy!
谢谢Tamsin，祝您愉快！
Update Note: There are some issues with older browsers and, of course, Internet Explorer, because of the color depth. To avoid problems of having the image in a slightly different color than the background color of the banner, you should use web colors when creating banners like these…
更新说明：由于颜色深浅，较旧的浏览器以及Internet Explorer当然存在一些问题。 为避免图像的颜色与横幅的背景颜色略有不同，创建此类横幅时应使用网络颜色。
翻译自: https://tympanus.net/codrops/2009/09/06/css3-creating-web-site-banners/
css横幅
