طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

تایپوگرافی توسط جی کوئری

توسط مثال های موجود در این فایل می تونید زیبایی و طراحی نوین رو به وب سایت خودتون هدیه کنید

آموزش استفاده

  1. قبل از تگ </head> کد زیر را قرار دهید : 
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Sancreek|Raleway:100' rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
    <!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.lettering.js"></script>
    <script>
    $(document).ready(function() {
    $(".cs-text-cut").lettering('words');
    });
    </script>

     

  2. بعد از تگ <body> کد زیر را قرار دهید :
    <div class="container">
    
    <header>
    
    <h1>Creative <strong>Web Typography</strong> Styles</h1>
    <h2>Fun with text styles and effects</h2>
    
    <nav class="codrops-demos">
    <a class="current-demo" href="index.html">Demo 1</a>
    <a href="index2.html">Demo 2</a>
    <a href="index3.html">Demo 3</a>
    <a href="index4.html">Demo 4</a>
    <a href="index5.html">Demo 5</a>
    <a href="index6.html">Demo 6</a>
    <a href="index7.html">Demo 7</a>
    <a href="index8.html">Demo 8</a>
    </nav>
    
    <div class="support-note"><!-- let's check browser support with modernizr -->
    <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
    <span class="no-csstransitions">CSS transitions are not supported in your browser</span>
    <span class="note-ie">Sorry, only modern browsers.</span>
    </div>
    
    </header>
    
    <section class="main">
    
    <h2 class="cs-text">
    <span class="cs-text-cut">Smooth</span>
    <span class="cs-text-mid">Operator</span>
    <span class="cs-text-cut">Smooth</span>
    </h2>
    
    </section>
    
    </div>

     

6 نظر

دانلود و پیش نمایش

دانلود و پیش نمایش فایل تایپوگرافی توسط جی کوئری

دانلود پلاگین پیش نمایش آنلاین

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)