CSS技巧可以彻底改变您的Web布局

炫酷设计 2018-07-03 190 次浏览 0 条评论

探索一些CSS超级大国,激发您的设计灵感。

如果你已经在网络行业工作了几年,你可能会觉得你总是编码或设计相同的网站布局。虽然趋势来来往往,但大多数网站看起来仍然相同:几乎每一个网站都使用12列网格,两列和三列,盒装布局和类似形状。看起来很无聊,用户体验也不是很好。

是时候我们开始从超越数字设计的领域或领域中汲取灵感。打印和编辑设计可以很漂亮,那么为什么不打破旧习惯并尝试新的CSS属性,打开一个无限可能的全新世界?

30个网页设计工具,可在2018年加快您的工作流程
正在进行CSS革命 - 像Flexbox或CSS Grid这样的东西提供了简单的方法来构建有趣的布局。使用CSS,您可以创建超出您可能熟悉的视觉样式。

在本文中,我们将分享一些CSS技巧,这些技巧将帮助您打破网站布局中的模式,只需几行代码即可。

01.探索CSS混合模式
双色调图像和色彩效果是最热门的网页设计趋势。它们在网络上广受欢迎,这归功于Spotify,它可以实现它们。现在,您最终可以停止创建资产的多个不同颜色版本,并直接在浏览器中应用效果。

使用CSS混合模式不仅是统一网站内容外观的好方法,它还使您能够设置图像的不同颜色版本,只更改CSS中的一个值:颜色。有15种可能的混合模式值,包括屏幕,叠加,变亮和变暗。

Ortiz Leon Architects网站CSS

Ortiz Leon Architects使用混合模式生成双色调图像背景

有几种实现方法,具体取决于您要应用效果的元素类型。例如,您可以在容器background-blend-mode上使用background-image和background-color set:darken; ,或者在图像包装器上创建一个带有伪元素的叠加层(即:before和:after),以获得色彩效果。

为了获得令人满意的双色调效果,建议您使用高对比度的黑白图像。您可以通过应用CSS过滤器来设置灰度和高对比度级别来实现此目的。

CSS网站:Bolden

Bolden的网站有一个混合混合模式的好例子,它已经在CSS中完全实现
另一个很酷的属性是mix-blend-mode,它允许您将元素的内容与其直接父级的内容或背景混合。这在重叠字体上特别有效。您可能会问为什么在这种情况下我们不仅仅调整不透明度 - 答案很简单:我们只能使用透明度轻松地失去色彩鲜艳度。

可以在Web浏览器中直接编辑的图像时代即将到来,但我们不能忘记浏览器兼容性 - 目前对混合模式的支持有限。

02.添加面膜
屏蔽告诉您的浏览器哪些资产元素应该是可见的,并且对于构建创意形状和布局非常有用。屏蔽可以通过三种方式完成:使用光栅图像(例如带透明度部分的PNG格式),CSS渐变或SVG元素。

请注意,与典型的光栅图像不同,SVG可以缩放或转换而不会显着降低质量。、

 

img {
mask-image: url(‘mask.png’) linear-gradient(-45deg,
rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

重要的是要提到Firefox仅支持最新版本,因此我们需要使用内联SVG掩码元素。如果我们使用具有透明度级别的光栅图像怎么办?不会看到图像的透明部分 - 换句话说,将显示不透明的片段,隐藏其他片段。

遮罩特别强大,因为它使您能够将相同的属性应用于背景图像,定义它们的位置,大小和重复。

 

CSS网站

在这里,红色背景是可见部分,文字将从山后面出现(点击图片查看最后的面具)
CSS屏蔽的一个很好的用例是结合文本和图像的文章。不规则的容器和图像在印刷中非常流行,但在网络上实现是繁琐且耗时的。但是由于掩盖,不再是了!

您还可以使用透明度级别来切割部分动画图像(例如GIF文件)。但是,在使用这些属性时,请不要忘记跨浏览器支持,并添加供应商前缀。

03.不要害怕削减
另一个很棒的功能是CSS剪辑。形状的边界称为剪辑路径(不要与不推荐的剪辑属性混淆),剪切定义应该可见的图像区域。剪切类似于剪切一张纸 - 路径外的任何东西都将被隐藏,而路径中的任何内容都将被显示。

clip-path: circle(radius at x, y);
clip-path: url(#clipping); /*referencing to SVG element*/

例如,如果圆形函数在图像顶部设置剪贴蒙版,则只能在此圆圈内看到图像的一部分。

很酷的是我们可以使用形状函数和SVG作为剪辑路径,这为我们提供了很多机会 - 例如,我们可以将它们设置为变形形状。查看Chris Coyier撰写的关于使用SVG剪辑路径创建透明JPG的文章。

 

CSS网站

使用剪辑路径,您可以从图像中删除背景(单击以查看完整示例)
如果您想知道剪裁和遮罩之间的区别是什么,请记住遮罩是图像,剪辑只是矢量路径。值得一提的是,屏蔽将消耗更多内存,因为您正在处理完整图像,因此必须逐个像素地完成所有操作。

这就是为什么建议您在需要部分透明效果时使用蒙版; 如果你想要清晰的边缘,最好使用剪辑路径。

04.在盒子外面思考
形状 - 外部和形状 - 内部救援!谁说文字容器总是需要长方形?让我们开箱即用,并发现新的形式,使我们的页面布局更丰富,更少四四方方。shape-outside和shape-in​​side属性允许您将内容包装在CSS中的自定义路径周围。

那么它是怎样工作的?只需将以下代码应用于给定的浮动图像或容器:

shape-outside: circle(50%); /* content will flow around the circle*/

重要的是要注意浮动属性和元素的尺寸 - 高度和宽度 - 必须定义,否则这将不起作用。对于形状,您可以使用circle(),polygon(),inset()或ellipse()。

另一个可能的值是url()函数。在这种情况下,这使得形状外部属性能够基于图像定义元素形状。当您拥有一个包含许多曲线和点的特别复杂的图形时,您可以选择使用url()函数而不是polygon(),并且您希望内容能够平滑地环绕它。

CSS网站:DevTools

使用DevTools检查您为文本设计的形状的行为(单击图像以查看此示例)
如果您想在元素和内容之间创建更多空间,请使用shape-margin属性,该属性就像一个边距。形状函数可以是动画的,但仅适用于已定义的多边形 - 遗憾的是,url()函数无法设置动画。

浏览器对外形的支持目前是有限的,但请保持手指交叉,以便在其他浏览器中快速实现。

05.尝试SVG动画
说实话,我无法想象没有SVG(可缩放矢量图形)的今天的网络。它的名字不言而喻 - 它可以扩展,因此它解决了有关响应式网页设计的所有问题。无论设备的屏幕分辨率如何,SVG图形都会很清晰。

除了可伸缩性之外,还有另一个功能应该鼓励您使用SVG:使用CSS操作SVG的能力。如果您从未尝试过涉及CSS动画和SVG代码,那么您必须立即尝试 - 令人难以置信的是您能够以多快的速度获得惊人的效果。

 

CSS网站:CSSconf北欧

这个动画幻灯片来自Aga在CSSconf Nordic上的演示,完全是用HTML和SVG创建的(点击查看动态)
您可能认为在某些情况下使用光栅图像更容易,但是,SVG比普通图像有一个很大的优势。SVG中包含的单词保存在<text>标记中,因此保留文本,使其可搜索,可选择和可访问。这也意味着您可以直接在代码中编辑它。但是,我们必须记住嵌入字体以确保字体将被渲染。

使用CSS动画SVG就像动画HTML中的任何其他元素一样 - 它可以通过过渡,变换和关键帧动画来完成。一旦熟悉了SVG代码,剩下的就是直截了当且非常直观,因为你基本上就像在HTML中一样。

关于SVG最酷的事情是,你可以抓住你想要的任何部分,并通过CSS动画让它变得活跃起来。这意味着我们可以创建一些非常有趣的动态效果,而不一定使用JavaScript。SVG有自己的DOM API,所以事实上整个SVG代码都可以使用DevTools轻松检查,我强烈建议在探索这个主题时使用它。

06.发出一些声音
20世纪80年代和90年代又回来了!小故障 - 混乱,噪音和干扰的美学 - 正在成为今年流行的设计趋势。网上也可以看到故障,失败和错误的庆祝活动。如果您想要使用透视并且视觉上更混乱,您可以通过转换和扭曲网站的元素来轻松实现。

CSS网站 - Tennent Brown

 

这种效果很容易编码,并为网站增添了强烈的视觉效果(点击即可直播)
如何在CSS中完成它的完美示例可以在Captain Anonymous的CodePen上找到,它提供了倾斜的动画文本。一行代码就是神奇的:

transform:skew(60deg, -30deg) scaleY(.66667);

07.用拼贴画创作
拼贴风格的设计正在欣赏他们在视觉艺术中的时刻 - 在研究这篇文章时,Rosanna Webster和Barrakuz的作品立刻偷走了我的心 - 甚至在网络上他们也越来越受到关注。如果您有疑问,请查看MailChimp主页(下方)。你注意到拼贴了吗?

CSS网站:MailChimp

 

Mailchimp的主页拼贴画是使用俏皮的CSS属性创建的
传统的方法是简单地附加在图形编辑器中准备的光栅图像,但是使用我在本文中讨论的技术,可以通过使用CSS属性创建类似的效果。您甚至可以准备真正适应网络要求的拼贴画,并且可以扩展,动画和互动。

我已经使用所有这些很酷的CSS属性准备了一些示例,因此您可以看到它们如何组合以在Web上实现类似拼贴的样式。看看我的例子。

08.不要忘记浏览器支持
如果您想要使用您怀疑并非所有浏览器都支持的CSS属性时感到沮丧,那么@supports规则可以帮助您。@supports允许您检查浏览器对CSS属性:值对的支持。

只有在这些条件为真时才会呈现@supports块中包含的代码,否则浏览器不会读取代码。在浏览器不理解@supports的情况下,它也不会生成代码的给定部分。

@supports (mix-blend-mode: overlay) {
.example {
mix-blend-mode: overlay;
}
}

结合混合模式,蒙版,剪裁,CSS形状和SVG的强大功能,为我们提供了一套很好的工具来提升我们的创造力并打破常规。有了这些工具,我们就有机会创建我们目前在印刷中看到的东西的网络版本。

虽然某些属性可能仍会遇到浏览器兼容性问题,但请不要犹豫与它们一起玩。虽然浏览器支持现在可能有限,但未来可能不会出现这种情况。只是时间问题。

0

【飞龙网.COM】不一样的IT资讯网,艺术,设计,插画,资源技巧分享!

发表评论