CSS ilə laylı kağız texnikası

Veb səhifələr hazırlayarkən CSS mütləq istifadə edirik. Səhifələrimizdə bəzi bölmələri istifadəçiyə gözəl göstərmək üçün grafikalardan istifadə etmək də gözəl bir yol ola bilər. Ancaq artıq CSS ilə o qədər çox şeylər etmək mümkündür ki, düşünürəm grafikadan istifadə etmək yerinə elə CSS texnikasını istifadə etmək daha gözəl olardı.
 
Bu yazımda CSS ilə laylı kağız texnikasını necə edə biləcəyimizi göstərməyə çalışacam.
 
Bunun üçün HTML və CSS dillərindən istifadə edəcəm.
 
Əvvəla HTML səhifəmizdə aşağıdaki kodları yazmağımız lazım gələcək:

<div class="layli-kagiz">Bu bir nümunədir.</div>

Ardından CSS kodlarımzı yazmalıyıq. İstəsəniz CSS kodlarını əlavə css faylında yaza bilərsiniz. Mən burada HTML səhifəmizin daxilində yazmağa çalışacam:

<style type='text/css'>
.layli-kagiz {
  text-align: center;
  padding:1.618em;
  margin-bottom:1.618em;
  font-weight: bold;
  margin:1em;
  background: #ededed;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), /* birinci laya aid kölgə */
              0 10px 0 -5px #ededed, /* ikinci lay*/
              0 10px 1px -4px rgba(0,0,0,0.15), /* ikinci laya aid kölgə */
              0 20px 0 -10px #ededed, /* üçüncü lay*/
              0 20px 1px -9px rgba(0,0,0,0.15); /* üçüncü laya aid kölgə */
             }
</style>

Bu qədər :) Hər hansı grafika vəya əlavə koda ehtiyac qalmadan sadə bir şəkildə səhifələrinizdə bu kodları istifadə edə bilərsiniz.

Tətbiqin hazır versiyasına baxmaq üçün bu keçiddən istifadə edin.
 


 
p.s : bəzi tətbiqlər türk dilində hazırladığım dərslərin tərcümələri olduğu üçün hazır versiyaları türk dilində göstərilməkdədir.
 
Qaynaq: Layered paper effect using CSS3 box shadows

#css , #css dili , #css ilə laylı kağız , #css texnikası

Şərh yazın..