10素晴らしいCSSとHTMLのレトロなタイプの効果

公開: 2021-01-27

Hipstamatic、Spotify、そして今ではAdidas：私たちの社会は昔と昔のやり方を大いに渇望しているようです。たぶん、私たちの市場はハイテクで革新的なものすべてで飽和状態になっているので、退屈し始めています。あるいは、すべてが簡単で、シンプルで、バラ色に見えた昔の、単なる懐かしさかもしれません。最近の過去からのすべてに対する現在の執着は明らかです。それはどこでも見ることができ、ウェブデザインの分野も例外ではありません。

実際のところ、レトロなスタイルはウェブ上で時々現れます。パステル調のレトロなカラーパレット、デュオトーン効果、大胆で過度に単純化された幾何学的なプリント、アールデコのイラスト、粒子の粗いノイズの多い効果、ポラロイドのような画像、タブロイド風のレイアウト、昔ながらのゲームから取った風景、そしてもちろん古いものを示しています-タイムリーなタイポグラフィ。

そういえば、タイポグラフィは、プロジェクトにレトロな雰囲気を吹き込むことになると、最も人気のあるオプションの1つです。繊細で上品です。そして、最も重要なことは、プロジェクトを圧倒したり、過負荷にしたりしないことです。それは目を引くと適切な雰囲気を確立する完璧な仕上げです。

さらに、CSS / JSとSVGの最愛のトリオの助けを借りて、80年代または90年代の効果をすばやく再現できます。任意の単語に効果を適用するだけで、数秒で目的の結果を得ることができます。また、写真編集やPhotoshopやSketchなどのデザイン関連のプログラムをいじって変更する必要はありません。シンプルでエレガントですね。

あなたが物事を成し遂げるこの方法を高く評価している人なら、私たちは驚くべきレトロなタイポグラフィ効果を持つ10のコードスニペットを集めました。見てみましょう：

国を去った

GabrielleWeeのこの優れたコードスニペットからコレクションを開始せざるを得ませんでした。彼女のプロジェクトはLeftthe Countryと呼ばれ、主にダファー兄弟のホラー「ストレンジャー・シングス」に触発されました。多くのデザイナーや開発者がそれを再現しています。 DribbbleとCodepenは、ショーのイントロのプロのテイクで溢れています。 Nelson Cashによって開発されたジェネレーターもあり、データを使用してロゴを再作成し、画像をダウンロードできます。ただし、すべてを静的に回避したい場合は、純粋なHTMLおよびSCSSソリューションであるWeeのコードスニペットを試してください。

空室なし404

RileyShawによるNoVacancy 404は、GabrielleWeeによる前の作品とよく似ています。そのルーツは、よりリアリズムのために輝くタッチと点滅効果で強化された素晴らしいラインアートにあります。これは、前世紀の半ばにアメリカでますます人気が高まったすべての明るいネオンサインを思い出させます。とはいえ、ライリー・ショーの傑作ほどエレガントで洗練されたものには見えなかったのかもしれません。解決策は、エレガンス、洗練、ヴィンテージの魅力の共生です。

ヴィンテージネオンサイン

輝く効果とアメリカの雰囲気がもっと必要ですか？次に、KyleLaveryによるヴィンテージネオンサインに注意を向ける必要があります。明るい看板が密集していた60年代の広告から抜け出したような気がします。さまざまな直径のチューブのスマートな組み合わせ、素晴らしい光る効果、物議を醸すカラーパレット、壮大な書体がそのトリックを実行し、優れたコードパワーの傑作を生み出します。

分割：スペースインベーダー

80年代に戻り、この時期を念頭に置いて作成されたタイポグラフィ効果を特徴とするコードスニペットを見てみましょう。何よりもまず、80年代と90年代はすべてビデオゲームに関するものでした。私たちの子供時代はとても愛らしいものでした。そして、マーティン・ピットは、それについて私たちに思い出させることができた人の一人です。彼の分裂：スペースインベーダーは私たちを10代に戻します。この実現は前向きな雰囲気と遊び心で魅力的です。かわいくて夢のようです。これは、CSSでの操作を簡単にするSplitingライブラリの助けを借りて作成されました。

レトロなタイポグラフィで遊ぶ

ホームビデオゲームコンソールAtariでアーケードゲームがプレイされない90年代はありません。これは、オタクの世界における80年代と90年代の同義語にすぎません。そしてマックス・コーラーはそれを完全によく知っています。レトロなタイポグラフィに特化した彼のコーデックスは、Atariのロゴを巧みに再現しています。また、レタリングに心地よいレトロなタッチを与える4つの効果もあります。

新しいレトロテキスト/ 80年代のタイポグラフィ/ 404 SVG

私たちのコレクションには、テレビに関連するいくつかの甘い思い出を思い起こさせるいくつかの素晴らしいテキスト効果があります。たとえば、Vladimir Jovanovicによる新しいレトロテキスト、David Parkerによる80年代のタイポグラフィ、MarcosMelladoによる404SVGなどです。最初の2つのプロジェクトは、特定のVHSレトロイントロの雰囲気に大胆なタイポグラフィ、光沢のある表面、ネオンスタイル、劇的なカラーリングを利用していますが、2番目のプロジェクトは、当時のMTVのミュージックビデオクリップのように、少し素朴でありふれた、粗野な感じです。

Vintage Typeface / Awesome Vintage Title

これは、いくつかの従来のソリューションがなければ、レトロなタイポグラフィ効果の完全なコレクションにはなりません。そして、2つの素晴らしいコードスニペットがあります。ThibaultJanBeyerによるVintageTypefaceとKevinNagataによるAwesomeVintageTitleです。どちらも、私たちが想像していたように、伝統的なヴィンテージの書体を示しています。文字の形がますます細長くなり、繊細なアールデコ調のタッチと、もちろんアートワークの核心である影を備えた超薄型です。 Thibault Jan Beyerによるプロジェクトは古典的で荘厳に見えますが、ケビン・ナガタのプロジェクトは、遊び心のある雰囲気で少しモダンに見えます。

過去にさかのぼる

超近代的で洗練されたハイエンドのすべてにうんざりしているなら、今は現在を捨てて過去のインスピレーションを求める時です。私たちを信じてください、それは常に穴にエースを持っています。その日を救うことに失敗することは一度もありません。

プロジェクトを群衆から際立たせるトレンドとソリューションをデザイナーに提供します。そして、レトロなタイポグラフィ効果はその完璧な例です。彼らは、新鮮な空気の息吹のように自然に注目を集める過去からの歓迎的で楽しい爆発です。