آموزش ساخت کاغذ توسط 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);
}

کدهای HTML:

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

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

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

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

موفق باشید.