事实证明,CSS Grid非常适合布置在线漫画,特别是如果您希望漫画灵活。 在本教程中,我们将使用猫猫巴里(Barry the cat)演示如何制作响应式漫画。
巴里猫
在本教程中,我借鉴了GraphicRiver的一些作品。 昏昏欲睡的肥猫实际上是一种显示字体,但随附一些可爱的猫矢量-完美地完成了该漫画演示!
加快浏览器速度
别忘了,您需要最先进的浏览器功能才能看到CSS Grid的实际效果,因此,如果您使用的浏览器不支持,请通读CSS Grid Layout:快速入门指南 。 这是我们正在努力的方向:
在CodePen上查看完整的演示 ,以查看其对不同屏幕尺寸的响应。
1.标记
让我们从布局一些HTML开始:
<section class="grid-1">
<div class="panel panel-title">
<h1>Barry’s Cushion</h1>
<p>A tale of lethargy and soft furnishings</p>
</div>
<div class="panel panel-1"></div>
<div class="panel panel-2"></div>
<div class="panel panel-3">
<p>“I should probably get up–things to do.”</p>
</div>
<div class="panel panel-4"></div>
<div class="panel panel-5"></div>
<div class="panel panel-6"></div>
<div class="panel panel-7">
<p>“Naaah.”</p>
</div>
<div class="panel panel-8"></div>
<div class="panel panel-9"></div>
<div class="panel panel-copyright">
<p>Sleepy Fat Cat by messenj4h<br>© Copyright happily ever after <a href="https://webdesign.tutsplus.com">Envato Tuts+</a>
</div>
</section>
在这里,我们有一个<section>
作为我们的网格,其中有<div class="panel">
元素作为我们的网格项目。
几个面板中有文字,其余则用于漫画图像。 这里有两个选项:我们可以将图像内嵌在面板中,也可以通过CSS添加图像。 我之所以这样做,是因为它可以更轻松地控制图形的位置和大小,但是您可能会认为内联图像更易于访问。 你的选择。
2.基本样式
为了使(皮毛)球滚动,让我们添加一些样式来覆盖我们的版式和颜色:
/* basics */
body {
background: #f8f7f2;
padding: 0 10%;
font: 100%/1.5 'Kalam', cursive;
}
h1 {
margin: 0;
line-height: 1;
padding: 10px;
color: #251b19;
}
p {
margin: 0;
padding: 10px;
color: #251b19;
font-size: 1.2em;
a {
color: #e56633;
}
a:hover {
text-decoration: none;
}
我选择Kalam作为文本的Google网络字体-我认为它的手写风格非常适合漫画。 您需要将其连接到CSS或通过文档标题中的链接:
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">
3.我们的网格
首先开始移动版,我们将内容排列在一栏中,每一行都有一个面板:
.grid-1 {
display: grid;
width: 100%;
max-width: 770px;
margin: 10% auto;
grid-template-columns: 1fr;
grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;
grid-gap: 25px;
}
回顾我们之前的Grid教程,您会回想起grid-template-columns
分配了我们将要拥有的列数以及它们的宽度。 grid-template-rows
对grid-template-rows
执行相同的操作; 在这里,我们定义了其中的11个。 包含图片的图片的高度为200px,带有文字的图片的大小将根据内容自动调整。 最后, grid-gap
定义了我们的装订线大小。
现在让我们向面板添加一些常规样式:
.panel {
color: white;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
box-shadow: 0px 0px 0px 5px #251b19;
}
background
属性目前还没有任何视觉影响,但是只要我们添加一些背景图像,它们就会立即生效。 box-shadow
充当边界。 如果愿意,还可以在这里使用传统的border
属性,但是有时阴影框可以提供更大的灵活性。
让我们看看目前为止!
4.猫的照片
互联网是干什么的,对不对? 我准备了一些SVG图像添加到面板中,我一步一步地进行了操作:
.panel-1 {
background-image: url(cat-1.svg);
}
看起来不错!
但是我不希望所有面板都带有边框。 我将从包含文本的内容(以及第一张图片和最后一张图片) box-shadow: none;
删除它们(使用box-shadow: none;
)。
5.媒体查询
这些图像还不能完美运行。 可怜的老巴里正在严重收割。 现在是时候超越移动设备,为更大的视口更改网格了。 让我们添加一些媒体查询; 一幅为400px,另一幅为600px(任意数字,可使用任意尺寸):
/* media query 1 */
@media only screen and (min-width: 400px) {
}
/* media query 2 */
@media only screen and (min-width: 600px) {
}
在每种情况下,我们将使用它们来更改网格布局。
/* media query 1 */
@media only screen and (min-width: 400px) {
.grid-1 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto 200px auto 200px 200px auto 200px auto;
}
}
/* media query 2 */
@media only screen and (min-width: 600px) {
.grid-1 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 200px 200px 200px auto;
}
}
对于略大的屏幕,我们将使用两列和八行,对于更大的屏幕,将使用三列和五行。
跨度
现在,我们摆脱了单列约束,可以更具创造力。 例如,我们需要标题沿整个漫画的宽度延伸。 包含文本和版权声明的面板也是如此。 即使是某些图像,也可以在全角面板中更好地提供。 因此,我们会将这些详细信息添加到我们的第一个媒体查询中:
.panel-title,
.panel-3,
.panel-6,
.panel-7,
.panel-copyright {
grid-column: span 2;
}
我也改变了几种字体,最后给了我们:
我们的两列布局看起来很棒! 但是,我们的三栏漫画需要修复。
6.修复我们的三列布局
当我们首先使用移动设备时,应用于第一个媒体查询的规则仍在最大的屏幕上生效。 我们需要遍历面板并重设一些样式。
首先使.panel-title
跨越三列,而不是两列。 然后可以将.panel-3
(带有文本)设置回grid-column: span 1;
或grid-column: auto;
.panel-6
。 经过几处更改,您应该会得到如下结果:
一点点的Flexbox
我希望对话的第一部分垂直居中,所以让我们使用flexbox来做到这一点。 将以下内容添加到第二个媒体查询中:
.panel-3 {
display: flex;
align-items: center;
}
7.覆盖面板
网格不限制我们沿页面上下运行等距的块,我们也可以愉快地对面板进行分层。 通过将其分配给与下一个面板相同的网格位置,我们将使文本的最后一点更加有趣:
.panel-7 {
grid-column: 1;
grid-row: 4;
z-index: 1;
}
.panel-8 {
grid-column: 1 / span 2;
grid-row: 4;
}
在这里,我们将.panel-7
和 .panel-8
都定位到grid-column: 1;
grid-row: 4;
。 这意味着它们都位于完全相同的位置,无论哪个出现在DOM中的第二个都堆叠在第一个之上。
我们可以使用z-index更改堆叠顺序,因此给.panel-7
一个z-index: 1;
将其带到顶部:
注意:既然我们已经有效地删除了一行,那么您需要检查您的grid-template-rows
是否正常。
让我们为“ Naaah”添加更多样式。 同样,网格项的限制没有您想像的那么多-我们可以以负边距移动它们,甚至可以毫无问题地对其进行转换。 我在面板和其中的段落中添加了一些样式,以实现以下目的:
结论
做得好–这就是我们所建立的!
这是使用CSS Grid的有趣练习,同时向您介绍了一些新的Grid概念。 我希望您喜欢它-现在,如果您不介意我要打个na。