Tipografía animada de diseño digital VFS

2,455 smartclass703

Abrir en el editor Publica tu código

Tipografía animada de diseño digital VFS

Recomendado

20 January 2026

Generador de contraseñas de Roblox: seguro y aleatorio en línea

14 May 2025

Un código de cyrillsemah

7 March 2025

Formulario de inicio de sesión animado

HTML

<html class=" ui-mobile ui-mobile-rendering js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths" lang="en"><head><base href="https://vfsdigitaldesign.com/animatedtypeface/"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Neo Latina Animated Typeface Project | VFS Digital Design</title> <meta name="description" content="Animated Typeface Project is a collaborative project by students in term 3 for the Neo Latina typeface."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="fb:app_id" content="2005007956431749"> <meta property="og:type" content="website"> <meta property="og:url" content="http://vfsdigitaldesign.com/animatedtypeface"> <meta property="og:title" content="Neo Latina Animated Typeface Project | VFS Digital Design"> <meta property="og:image" content="http://vfsdigitaldesign.com/animatedtypeface/img/B_uchenna.jpg"> <meta property="og:description" content="Animated Typeface Project is a collaborative project by students in term 3 for the Neo Latina typeface."> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="img/at-icon-older-iPhone.png"> <link rel="apple-touch-icon" sizes="180x180" href="img/at-icon-iPhone-6Plus.png"> <link rel="apple-touch-icon" sizes="152x152" href="img/at-icon-iPad-Retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="img/at-icon-iPad-Pro.png"> <link rel="shortcut icon" href="img/vfsicon.ico"> <link rel="author" href="http://vfsdigitaldesign.com/animatedtypeface/humans.txt"> <link href="https://fonts.googleapis.com/css?family=Neo Latina&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <link rel="stylesheet" href="css/styles.css"> <script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-ZEXYWZ5DXW&cx=c&_slc=1"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="js/vendor/modernizr-2.8.3.min.js"></script> </head> <body> <input id="menu-checkbox" role="checkbox" type="checkbox"> <div class="off-canvas-wrapper"> <label for="menu-checkbox" class="menu-toggle"> <span class="screen-reader">Open main menu</span> <span class="icon fa-bars" aria-hidden="true">MENU</span> </label> <nav id="menu" class="menu" role="navigation" aria-expanded="false" aria-label="Main menu"> <article class="logo"> <a role="link" href="http://vfsdigitaldesign.com/animatedtypeface"><img role="img" src="img/vfsdd-logo-redHoriz.svg" alt="VFS Digital Design logo"></a> </article> <label for="menu-checkbox" class="menu-close"> <span class="sr-only">Close main menu</span> <span class="icon fa-close" aria-hidden="true"></span> </label> <div class="section-heading">Main menu</div><div class="skip"><a role="link" href="#content">Skip to content</a></div><ul class="clearfix"> <li class="tab16"><a id="active16" role="link" aria-current="page" href="index.html">Neo Latina</a></li><li class="tab15"><a role="link" aria-current="page" href="dd44-gugi.html">Gugi</a></li><li class="tab14"><a role="link" href="dd43-fanwood.html">Fanwood</a></li><li class="tab13"><a role="link" href="dd42-raleway.html">Raleway</a></li><li class="tab12"><a role="link" href="dd41-goudybookletter.html">Goudy Bookletter</a></li><li class="tab11"><a role="link" href="dd40-leaguemono.html">League Mono</a></li><li class="tab10"><a role="link" href="dd39-sniglet.html">Sniglet</a></li><li class="tab9"><a role="link" href="dd38-sortsmillgoudy.html">Sorts Mill Goudy</a></li><li class="tab8"><a role="link" href="dd37-ostrich.html">Ostrich Sans</a></li><li class="tab7"><a role="link" href="dd36-junction.html">Junction</a></li><li class="tab6"><a role="link" href="dd35-orbitron.html">Orbitron</a></li><li class="tab5"><a role="link" href="dd34-leaguespartan.html">League Spartan</a></li><li class="tab4"><a role="link" href="dd33-knewave.html">Knewave</a></li><li class="tab3"><a role="link" href="dd32-leaguegothic.html">League Gothic</a></li><li class="tab2"><a role="link" href="dd31-blackout.html">Blackout Midnight</a></li><li class="tab1"><a role="link" href="dd30-chunkfive.html">Chunk Five</a></li></ul> </nav> <label for="menu-checkbox" class="mobile-backdrop" tabindex="-1" aria-hidden="true" hidden=""></label> </div><section class="container" id="content"> <header> <article class="banner banner16"> <h1 class="banTxt banTxt16" role="heading" aria-level="1">Animated Typeface <span class="mobile-hidden">Project</span></h1> </article> </header> <div class="desc"> <p>Animated Typeface is a collaborative project by students of the VFS Digital Design program. In Term 3, they create 3-4 glyph sequences for the typeface. To visit our community site, visit <a role="link" href="http://community.vfs.com/oomph" target="_blank" rel="noopener noreferrer">VFS Oomph</a>. To find out more about the VFS Digital Design program and what we offer, visit <a role="link" href="http://vfs.edu/programs/digital-design" target="_blank" rel="noopener noreferrer">VFS Digital Design Program</a>.</p></div><section class="clearfix"> <img class="item nl" role="img" src="img/A_austin.jpg" alt="Neo Latina A animation" width="167" height="200"> <img class="item nl1" role="img" src="img/B_uchenna.jpg" alt="Neo Latina B animation" width="167" height="200"> <img class="item nl2" role="img" src="img/C_cristina.jpg" alt="Neo Latina C animation" width="167" height="200"> <img class="item nl3" role="img" src="img/D_austin.jpg" alt="Neo Latina D animation" width="167" height="200"> <img class="item nl4" role="img" src="img/E_rodrigo.jpg" alt="Neo Latina E animation" width="167" height="200"> <img class="item nl6" role="img" src="img/G_rodrigo.jpg" alt="Neo Latina G animation" width="167" height="200"> <img class="item nl7" role="img" src="img/H_uchenna.jpg" alt="Neo Latina H animation" width="167" height="200"> <img class="item nl8" role="img" src="img/I_uchenna.jpg" alt="Neo Latina I animation" width="167" height="200"> <img class="item nl10" role="img" src="img/K_shayna.jpg" alt="Neo Latina K animation" width="167" height="200"> <img class="item nl11" role="img" src="img/L_uchenna.jpg" alt="Neo Latina L animation" width="167" height="200"> <img class="item nl12" role="img" src="img/M_rodrigo.jpg" alt="Neo Latina M animation" width="167" height="200"> <img class="item nl13" role="img" src="img/N_austin.jpg" alt="Neo Latina N animation" width="167" height="200"> <img class="item nl14" role="img" src="img/O_shayna.jpg" alt="Neo Latina O animation" width="167" height="200"> <img class="item nl15" role="img" src="img/P_cristina.jpg" alt="Neo Latina P animation" width="167" height="200"> <img class="item nl18" role="img" src="img/S_rodrigo.jpg" alt="Neo Latina S animation" width="167" height="200"> <img class="item nl19" role="img" src="img/T_rodrigo.jpg" alt="Neo Latina T animation" width="167" height="200"> <img class="item nl20" role="img" src="img/U_uchenna.jpg" alt="Neo Latina U animation" width="167" height="200"> <img class="item nl21" role="img" src="img/V_uchenna.jpg" alt="Neo Latina V animation" width="167" height="200"> <img class="item nl22" role="img" src="img/W_uchenna.jpg" alt="Neo Latina W animation" width="167" height="200"> <img class="item nl24" role="img" src="img/Y_cristina.jpg" alt="Neo Latina Y animation" width="167" height="200"> <img class="item nl25" role="img" src="img/Z_kay.jpg" alt="Neo Latina Z animation" width="167" height="200"> <img class="item nl26" role="img" src="img/AE_austin.jpg" alt="Neo Latina 0 animation" width="167" height="200"> <img class="item nl27" role="img" src="img/PoundSign_cristina.jpg" alt="Neo Latina 1 animation" width="167" height="200"> <img class="item nl28" role="img" src="img/Ampersand_uchenna.jpg" alt="Neo Latina 2 animation" width="167" height="200"> <img class="item nl29" role="img" src="img/PlusSign_shayna.jpg" alt="Neo Latina 3 animation" width="167" height="200"> </section> <section class="cred"> <div> <h2 role="heading" aria-level="2">Credits</h2> <p>Each set of Animated Typeface is completed by an individual class of students as part of the <a role="link" href="http://vfs.edu/programs/digital-design" target="_blank" rel="noopener noreferrer">VFS Digital Design</a> program. Each student is credited below with the animations they created. Each set showcases a type created by a type designer from <a role="link" href="https://www.theleagueofmoveabletype.com" target="_blank" rel="noopener noreferrer">The League of Movable Type</a>, who are also credited below.</p></div><p>Type Design - <a role="link" href="https://defharo.com" target="_blank" rel="noopener noreferrer">deFharo</a></p><article class="set"> <p>Ƀ / H / I / L / U / V / W - Uchenna Obi</p><p>E / G / M / S / T- Rodrigo Giorgetti</p><p>A / D / N / AE - Austin Day</p><p>C / P / Y / # - Cristina Rendon</p><p>K / O / + - Shayna Nunuez</p><p>Z - Kay Nguyen</p></article> </section> <footer class="clearfix"> <div class="copy">© 2019 VFS Digital Design. All Rights Reserved <span>|</span> <div class="skip"><a role="link" href="#content">Back to the top of the page</a></div><a href="#">↑ Top</a></div><div class="social"> <a role="link" aria-label="facebook icon" href="https://www.facebook.com/VFSDigitalDesign" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook-official"></i></a> <a role="link" aria-label="youtube icon" href="https://www.youtube.com/playlist?list=PL0BB77C52358480F9" target="_blank" rel="noopener noreferrer"><i class="fa fa-youtube-square"></i></a> </div></footer> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>$(document).bind("mobileinit", function(){$.extend($.mobile ,{autoInitializePage: false})}); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> <script async="" src="js/dd45-responsive-animGif.js"></script> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-61360002-1', 'auto'); ga('send', 'pageview'); </script> </body></html>

CSS