آموزش ساخت کاغذ توسط css

سلام

در این مطلب آموزشی قصد داریم تا به کمک CSS بتونیم یک برگه شبیه کاغذ بسازیم، پس در ادامه با بپرسم همراه باشید.

کاغذی که میخواهیم بسازیم مانند تصویر زیر است:

آموزش ساخت کاغذ توسط CSS

کدهای CSS:

body {
  background: linear-gradient(#ccc, #fff);
  font: 14px sans-serif;
  padding: 20px;
  direction:rtl;
}
.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
}
.letter:before, .letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
.letter:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

body {

background: linear-gradient(#ccc, #fff);

font: ۱۴px sans-serif;

padding: ۲۰px;

direction:rtl;

}

.letter {

background: #fff;

box-shadow: ۰ ۰ ۱۰px rgba(۰,۰,۰,۰.۳);

margin: ۲۶px auto ۰;

max-width: ۵۵۰px;

min-height: ۳۰۰px;

padding: ۲۴px;

position: relative;

width: ۸۰%;

}

.letter:before, .letter:after {

content: "";

height: ۹۸%;

position: absolute;

width: ۱۰۰%;

z-index: -۱;

}

.letter:before {

background: #fafafa;

box-shadow: ۰ ۰ ۸px rgba(۰,۰,۰,۰.۲);

left: -۵px;

top: ۴px;

transform: rotate(-۲.۵deg);

}

.letter:after {

background: #f6f6f6;

box-shadow: ۰ ۰ ۳px rgba(۰,۰,۰,۰.۲);

right: -۳px;

top: ۱px;

transform: rotate(۱.۴deg);

}

مطلب پیشنهادی: سورس جابجایی بین صفحات - AIDE

کدهای HTML:

<div class="letter">
  <p>سلام دوستان,</p>
  <p>
  بپرسم مکانی برای آموزش و رفع مشکلات
  <br>www.beporsam.ir
  </p>
  <p>
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
  </p>
  <p>
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
  </p>
</div>

۱۰

۱۱

۱۲

۱۳

<p>سلام دوستان,</p>

<p>

بپرسم مکانی برای آموزش و رفع مشکلات

<br>www.beporsam.ir

</p>

<p>

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.

</p>

<p>

</p>

</div>

مطلب پیشنهادی: دانلود افزونه SeoPress Pro(فارسی)

کدهای css را در فایل استایل کپی کنید و هر جا خواستید از کاغذ استفاده کنید، کافیست تا کدهای HTML را همانجا کپی کنید.

پیش نمایش: کلیک کنید.

مشکلی یا سوالی در رابطه با این مطلب داشتید، در سایت بپرسید ، پاسخگوی سوالات شما هستیم.

موفق باشید.