10 个惊人的 CSS 和 HTML 复古字体效果

已发表: 2021-01-27

Hipstamatic、Spotify 和现在的阿迪达斯:似乎我们的社会对旧时光和旧方式有着巨大的渴望。 也许我们的市场充满了高科技和创新的一切,以至于我们开始感到无聊。 或许这只是对旧时代的一种平庸的怀旧之情,那时一切似乎都很容易、简单和玫瑰色。 当前对近期一切事物的痴迷是显而易见的。 随处可见,网页设计领域也不例外。

事实上,复古风格在网络上时不时地表现出来。 它通过柔和的复古调色板、双色调效果、大胆过分简化的几何印花、装饰艺术插图、颗粒状和嘈杂的效果、宝丽来图像、小报风格的布局、从老式游戏中拍摄的风景,当然还有老式 -及时的排版。

说到这一点,排版是在项目中注入令人兴奋的复古感觉时最受欢迎的选择之一。 它微妙而有品味。 而且,最重要的是,它不会使项目不堪重负或超载。 这只是一个完美的画龙点睛,吸引眼球并建立适当的氛围。


此外,借助深受喜爱的 CSS/JS 和 SVG 三重奏,您可以快速重现 80 年代或 90 年代的效果。 只需将效果应用于任何单词并在几秒钟内获得所需的结果。 而且您无需使用照片编辑或与设计相关的程序(如 Photoshop 或 Sketch)来进行更改。 简单优雅,不是吗?

如果您喜欢这种完成工作的方式,我们收集了 10 个具有惊人复古排版效果的代码片段。 让我们来看看:

离开了这个国家

我们忍不住从 Gabrielle Wee 的这个出色的代码片段开始我们的收藏。 她的项目被称为离开这个国家,主要是受到 Duffer Brothers 的恐怖电影“Stranger Things”的启发。 大量的设计师和开发人员已经复制了它。 Dribbble 和 Codepen 在节目的介绍中充满了专业人士。 甚至还有由 Nelson Cash 开发的生成器,可让您使用数据重新创建徽标并下载图像。 但是如果你想避免一切都是静态的,试试 Wee 的代码片段,它是一个纯 HTML 和 SCSS 解决方案。

没有空缺 404

Riley Shaw 的 No Vacancy 404 很像 Gabrielle Wee 之前的作品。 它的根源在于奇妙的线条艺术,通过发光的触感和闪烁效果增强了真实感。 它让我们想起了上个世纪中叶在美国越来越流行的那些明亮的霓虹灯。 不过,也许它们看起来不像莱利·肖的杰作那样优雅精致。 解决方案是优雅、精致和复古魅力的共生。

复古霓虹灯

需要更多发光效果和美式氛围? 然后你应该把注意力转向 Kyle Lavery 的复古霓虹灯。 感觉就像它走出了 60 年代充满发光标志的广告。 各种直径的管子、奇妙的发光效果、有争议的调色板和华丽的字体巧妙地组合在一起,造就了出色的代码驱动杰作。

分裂:太空入侵者

让我们回到 80 年代,看看这段代码的排版效果。 首先,80 年代和 90 年代都是关于电子游戏的。 我们的童年是如此可爱。 马丁皮特是设法提醒我们这一点的人之一。 他的分裂:太空入侵者让我们回到了我们的青少年时期。 这种认识具有积极的氛围和俏皮的魅力。 它看起来可爱而梦幻。 它是在 Splitting 库的帮助下创建的,这使得使用 CSS 进行操作变得容易。

玩复古排版

没有在家用视频游戏机 Atari 中玩街机游戏的 90 年代。 简直就是极客世界80、90年代的代名词。 Max Kohler 非常清楚这一点。 他致力于复古排版的 codepen 巧妙地复制了 Atari 标志。 您还会发现另外四种效果,使刻字具有令人愉悦的复古感。

新复古文本/80 年代排版/404 SVG

我们的收藏中有几种奇妙的文字效果,让人想起一些与电视有关的美好回忆。 例如,Vladimir Jovanovic 的 New retro text、David Parker 的 80s Typography 和 Marcos Mellado 的 404 SVG。 虽然前两个项目使用大胆的排版、光滑的表面、霓虹灯风格和强烈的色彩来营造某种 VHS 复古的介绍氛围,但第二个项目感觉有点质朴、平凡和粗俗——就像那个时期 MTV 上的音乐视频剪辑一样。

复古字体/很棒的复古标题

如果没有几个传统的解决方案,这将不是一个完整的复古排版效果集合。 我们有两个很棒的代码片段:Thibault Jan Beyer 的 Vintage Typeface 和 Kevin Nagata 的 Awesome Vintage Title。 它们都展示了一种传统的复古字体,就像我们习惯于想象的那样:超薄的字体越来越细长,带有微妙的装饰艺术风格,当然还有作为艺术品核心和灵魂的阴影。 Thibault Jan Beyer 的项目看起来经典而雄伟; Kevin Nagata 的项目看起来有点现代,带有某种俏皮的底色。

时光倒流

如果你厌倦了超现代、精致和高端的一切,那么是时候抛弃现在,寻找过去的灵感了。 相信我们,它总是有一张王牌在洞里。 它没有一次不能挽救这一天。

它为设计师提供了让项目脱颖而出的趋势和解决方案。 复古排版效果就是一个完美的例子。 它们是来自过去的欢迎和愉快的爆炸,自然会引起人们的注意,感觉就像呼吸新鲜空气。