امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

طرّاحی سریع یک صفحۀ تیزر جذاب

در این آموزش، شما نحوۀ طرّاحی یک صفحۀ تیزر را یاد می‌گیرید که تنها با CSS طراحی شده است و هیچ عکس یا طرح Photoshop در آن استفاده نشده است. اکثر وب‌سایت‌ها و برنامه‌های آینده از طریق صفحات تیزر عمومیت زیادی کسب می‌کنند، بنابراین صفحات تیزر یک ابزار مفیدی می‌باشند که به جعبه ابزار خود اضافه کنید. می‌توانید از این صفحات در هر برنامه و یا وب‌سایت که آماده راه‌اندازی است استفاده کنید.

مرحلۀ 1 : نشانه‌گذاری HTML

همانطور که در زیر مشاهده می‌کنید، HTML این صفحۀ تیزر بسیارساده می‌باشد.

<!doctype html>
 
<head>
 
    <!-- Basics -->
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
    <title>App is coming soon.</title>
 
    <!-- Mobile -->
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
    <!-- CSS -->
 
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/styles.css">
 
</head>
 
    <!-- Main HTML -->
 
<body>
 
    <!-- Begin Page Content -->
 
    <div id="container">
 
        <h1>App.</h1>
 
        <p>
        This amazing application will change your life. Subscribe to be notified when it's available, or follow us on <a href="#">Twitter.</a>
        </p>
 
        <div id="subscribe">
 
        <input type="email" placeholder="email address">
 
        <input type="submit" value="submit">
 
        </div>
 
    </div>
 
    <!-- End Page Content -->
 
</body>
 
</html>

مرحلۀ 2 : تنظیم محل و اندازۀ اجزاء

خوب بگذارید به صفحه‌مان یک ساختار بدهیم. با موارد پایه آغاز می‌کنیم، و container را در مرکز صفحه جاسازی می‌کنیم. از موقعیت 50% استفاده می‌کنیم و سپس از مقادیر منفی margin استفاده می‌کنیم تا نصف عرض و ارتفاع آن را برگردانیم.

html, body {
    width: 100%;
    height: 100%;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color: #444;
    -webkit-font-smoothing: antialiased;
}
 
}
 
#container {
    position: fixed;
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -250px;
    text-align: center;
}

سپس متن و ورودی‌ها را توسط انتخاب‌گرهای صفت جاسازی می‌کنیم تا ایمیل و ورودی ارسال را جداگانه نشانه بگیریم.

h1 {
    font-size: 90px;
}
 
p {
    width: 80%;
    font-size: 23px;
    line-height: 1.3em;
    margin: 1.1em auto;
    text-align: center;
}
 
#subscribe {
    margin: 0 auto;
    text-align: center;
}
 
input[type=email] {
    width: 90%;
    padding: 15px;
    margin: 0 auto;
}
 
input[type=submit] {
    position: absolute;
    margin-left: -105px;
    margin-top: 5px;
    padding: 10px;
    width: 100px;
    height: 50px;
}

مرحلۀ 3 : استایل‌دهی متن

استایل‌دهی برای متن این صفحه بسیار راحت است. می‌خواهیم که نام با پس‌زمینه در تقابل باشد (کنتراست کند). متن مهم است، اما ما می‌خواهیم که نام محصولمان را به خاطر داشته باشند، پس استایل متن را اندکی متفاوت انتخاب می‌کنیم. لینک تویتر بصورت underline هست تا مشخص شود که لینک ایست.

اول متن اصلی :

h1 {
    font-size: 90px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 4px #000;
    margin-top: 20px;
}
 
p {
    width: 80%;
    font-size: 23px;
    line-height: 1.3em;
    color: #fff;
    margin: 1.1em auto;
    text-align: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

سپس لینک تویتر :

p a {
    color: #fff;
    border-bottom: 2px solid #2da1ec;
}

مرحلۀ 4 : استایل‌دهی پس‌زمینه

یک پس‌زمینۀ gradient مناسب می‌سازیم. اگر کاربر Mac هستید، می‌توانید از سایت GradientApp برای انجام کارهای سختش کمک بگیرید. در کنار این می‌توانید به سایت CSS3 Please رفته تا ایده‌هایی از این syntax بدست آورید.

html, body {
    width: 100%;
    height: 100%;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color: #444;
    -webkit-font-smoothing: antialiased;
    background: #000222;
    background: -moz-linear-gradient(top,  #000222 0%, #4b637c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
    background: -webkit-linear-gradient(top,  #000222 0%,#4b637c 100%);
    background: -o-linear-gradient(top,  #000222 0%,#4b637c 100%);
    background: -ms-linear-gradient(top,  #000222 0%,#4b637c 100%);
    background: linear-gradient(top,  #000222 0%,#4b637c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
}

مرحلۀ 5 : استایل‌دهی فرم اشتراک

از آنجایی که ما می‌خواهیم بازدیدکنندگانمان از زمان انتشار محصول شگفت‌انگیزمان باخبر شوند، مرکز توجه صفحه‌مان فرم اشتراک خواهد بود. ما می‌خواهیم که بعد از لوگو یا نام صفحه، فرم اشتراک مرکز توجه صفحه قرار گیرد.

با استایل‌دهی placeholder ( استایل‌های خاص Mozilla و Webkit ) و ست کردن اندازه متن شروع می‌کنیم.

::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.4);
}
 
::-moz-input-placeholder {
   color: rgba(255, 255, 255, 0.4);
}
 
input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 25px;
}

اکنون بگذارید که به فیلد و دکمه، کمی رنگ و عمق بدهیم.

input[type=email] {
    outline: none;
    width: 90%;
    padding: 15px;
    margin: 0 auto;
    color: #fff;
    border: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
    -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
}
 
input[type=submit] {
    position: absolute;
    margin-left: -105px;
    margin-top: 5px;
    font-size: 25px;
    color: #222;
    text-shadow: 0 1px 0 #fff;
    padding: 10px;
    width: 100px;
    height: 50px;
    border: none;
    background: #f0f0f0;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff));
    background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
    background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
    background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
    background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 );
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}

مرحلۀ 6 : اضافه کردن CSS Transitions

اجازه دهید تا مقداری CSS Transitions (حالت تغییر یا انتقال CSS ) اضافه کنیم تا کمک کند نظر بازدیدکننده جلب شود.

ابتدا حالت‌های hover و active را به لینک تویتر و ورودی‌ها اضافه می‌کنیم:

p a {
 color: #fff;
 border-bottom: 2px solid #2da1ec;
}
 
p a:hover {
 color: #2da1ec;
 border-bottom: 2px solid #fff;
}
input[type=email] {
  outline: none;
  width: 90%;
  padding: 15px;
  margin: 0 auto;
  color: #fff;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
}
 
input[type=email]:hover {
  background: rgba(0, 0, 0, 0.5);
}
 
input[type=email]:focus {
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.6);
}
 
input[type=submit] {
  position: absolute;
  margin-left: -105px;
  margin-top: 5px;
  font-size: 25px;
  color: #222;
  text-shadow: 0 1px 0 #fff;
  padding: 10px;
  width: 100px;
  height: 50px;
  border: none;
  background: #f0f0f0;
  background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff));
  background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 );
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  width: 125px;
  margin-left: -130px;
 
}
 
input[type=submit]:active {
  background: #c3d7ff;
  background: -moz-linear-gradient(top,  #c3d7ff 0%, #f0f0f0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d7ff), color-stop(100%,#f0f0f0));
  background: -webkit-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  background: -o-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  background: -ms-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  background: linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d7ff', endColorstr='#f0f0f0',GradientType=0 );
 
}

سپس قوانین transition را اضافه می‌کنیم:

p a {
 color: #fff;
 border-bottom: 2px solid #2da1ec;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
}

و

input {
 font-family: "Helvetica Neue", Helvetica, sans-serif;
 font-size: 25px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
}

مرحلۀ 7 : انیمیشن‌های CSS

ما همچنین می‌توانیم از انیمیشن‌های CSS3 برای یک افکت اضافه شده در زمان بارگزاری صفحه استفاده کنیم. توصیه می‌شود از انیمیشن‌های CSS به عنوان یک خوش‌آمدگویی در سایت یا برنامه‌تان استفاده کنید; و نه به عنوان بخش داخلی آن. پشتیبانی انیمیشن‌ها هنوز کامل نیست و شما بایستی احتیاط لازم را در جهت پیچیده کردن طرّاحی خود، به خرج دهید.

با این حال، فایل Animate.css آقای Dan Eden یک کتابخانۀ انیمیشن‌های CSS بسیار مفیدی می‌باشد. شما می‌توانید آن را همانگونه که در مستندات اصلی در اول آموزش نشان داده شد، اضافه کنید و یا اگر صلاح می‌دانید آن را در stylesheet خود وارد کنید.

@import url(animate.css);

انیمیشن‌های زیادی هستند که می‌توانید انتخاب کنید، اما ما در اینجا از انیمیشن bounceInDown استفاده خواهیم کرد. به این روش آن را به الِمِنتِمان اضافه می‌کنیم ( در این مورد ما به container اضافه خواهیم کرد ) :

#container {
 position: fixed;
 width: 500px;
 height: 300px;
 top: 50%;
 left: 50%;
 margin-top: -150px;
 margin-left: -250px;
 text-align: center;
 -webkit-animation-name: bounceInDown;
 -webkit-animation-fill-mode: both;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
 -moz-animation-name: bounceInDown;
 -moz-animation-fill-mode: both;
 -moz-animation-duration: 1.5s;
 -moz-animation-iteration-count: 1;
 -moz-animation-timing-function: linear;
 animation-name: bounceInDown;
 animation-fill-mode: both;
 animation-duration: 1.5s;
 animation-iteration-count: 1;
 animation-timing-function: linear;
}

اگر می‌خواهید انیمیشن را تغییر دهید تنها کافیست -animation-name را به نام انیمیشن مورد نظر خود تغییر دهید.

امیدوارم که از این آموزش لذت برده باشید و مورد استفاده‌تان قرار بگیرد.

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

رمز عبور برای باز کردن فایل : www.dtuts.net

منبع : Tutsplus.com

درباره امین بهشتی

یک ایرانی ترک زبان که علاقه زیادی به طرّاحی وِب و گرافیک دارد!
در این سایت سعی می‌کنم مطالب جالب، مفید و کاربردی را در جهت آموزش به اشتراک بگذارم!
امیدوارم لحظات خوشی را در سایت سپری نمایید و مطالب سایت مورد استفاده شما قرار بگیرد.
سپاس

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.