CSS-də gradient çərçivələr

CSS-də gradient çərçivələr

Code-News
25.01.2019 PAYLAŞIM
TECHNOTE @technote TECHNOTE logo icon

Bənzər xəbər


#Step IT Academy tərəfindən təqdim olunur  





Sizə Chris Coyier-in CSS-də gradient çərçivələr haqqında məqaləsini təqdim edirik.

    Fərz edək ki sizə müəyyən elementin ətrafında qradient çərçivə lazımdır. Və siz düşünürsünüz: Bunun üçün asan bir CSS APİ yoxdur. Mən sadəcə qradient fonlu üzlük bir element yaradacam, sonra isə daxili element ilə bu üzlük elementin böyük hissəsini qapadacam. Qalmış nazik qradientli hissələr isə elə çərçivə kimi görünəcək. Nəticə təxmini belə olacaq:

HTML

<div class="module-border-wrap"><div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div></div>


SCSS

body {
   height: 100vh;
   margin: 0;
   display: grid;
   place-items: center;
   background: #222;
}

.module-border-wrap {
   max-width: 250px;
   padding: 1rem;
   position: relative;
   background: linear-gradient(to right, red, purple);
   padding: 3px;
}

.module {
   background: #222;
   color: white;
   padding: 2rem;
}

Nəticə    


    Əgər üzlük element ideyası xoşunuza gəlmirsə z-index-in dəyəri mənfi olduğu halda siz psevdoelement istifadə edə bilərsiniz. Öz fonları olan valideyn elementlərin sayı çox olduqda bu variant işlək olmayacaqdır. Stiven Şou-nun təklif etdiyi border-radius-lu nümunə: 

HTML

<div class="gradient-box">

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p>

</div>

   

SCSS

.gradient-box {

   display: flex;
   align-items: center;
   //width: 50vw;
   width: 90%;
   margin: auto;
   max-width: 22em;

   position: relative;
   padding: 30% 2em;
   box-sizing: border-box;

   $border: 5px;
   color: #FFF;
   background: #000;
   background-clip: padding-box; /* !importanté */
   border: solid $border transparent; /* !importanté */
   border-radius: 1em;

   &:before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      margin: -$border; /* !importanté */
      border-radius: inherit; /* !importanté */
      background: linear-gradient(to right, red, orange);
   }
}

html { height: 100%; background: #000; display: flex; }
body { margin: auto; }

 Nəticə


    Lakin border-image barədə unutmayın. CSS-in bu ən məntiqsiz property-sini ayrı-ayrı tərəflərdə gradient sərhədlər əldə etmək üçün istifadə edə bilərsiniz.

HTML

<div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div>

SCSS

body {
   height: 100vh;
   margin: 0;
   display: grid;
   place-items: center;
   background: #222;
}

.module {
   max-width: 250px;
   padding: 1rem;
   color: white;
   border-width: 3px;
   border-style: solid;
   border-image: 
      linear-gradient(
         to bottom, 
         red, 
         rgba(0, 0, 0, 0)
      ) 1 100%;
}

Nəticə 


    Border-image kimi kimi border-image-slice da gradient çərçivə yaratmaq üçün ən asan sintaksisdir, amma təəssüfki bu həll border-radius ilə işləmir.

HTML

<div>

   <div class="on-light">
      <button class="border-gradient border-gradient-purple">
         I have a gradient
      </button>
   </div>

   <div class="on-dark">
      <button class="border-gradient border-gradient-purple">
         I have a gradient
      </button>
   </div>

   <div class="on-light">
      <button class="border-gradient border-gradient-green">
         I have a gradient
      </button>
   </div>

   <div class="on-dark">
      <button class="border-gradient border-gradient-green">
         I have a gradient
      </button>
   </div>

</div>
    

SCSS

button {
   background: none;
   text-decoration: inherit;
   font-family: system-ui;
   font-size: 1rem;
   padding: 1rem 2rem;
}

.border-gradient {
   border-image-slice: 1;
   border-width: 2px;
}
.border-gradient-purple {
   border-image: linear-gradient(to left, #743ad5, #d53a9d);
}
.border-gradient-green {
   border-image: linear-gradient(to left, #00C853, #B2FF59);
}

body {
   height: 100vh;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   > div {
      width: 100%;
      text-align: center;
   }
   > div > div {
      width: 100%;
      padding: 1rem;
   }
}

.on-dark {
   background: #222;
   button {
      color: white;
   }
}

Nəticə



Qeyd: Şərhlərdə nalayiq ifadələr işlətmək, reklam xarakterli mətn paylaşmaq qadağandır.

Şərh yoxdur

Şərh yazmaq üçün daxil olun


DAHA ÇOX


2020-ci ildə məlumatların vizualizasiyası üçün aktual olacaq Top-8 JavaScript ki..

JavaScript-də məlumatları daha gözəl şəkildə təqdim etmək lazımdır?


Microsoft bu il olmuş qeyri adi fişinq kiberhücumlarından danışdı

Bir neçə müddət bundan öncə isə Microsoft şirkəti kiberhücumlar və malware-lar üzrə trendləri əks et..


Microsoft Windows-da 0-day boşluğu da daxil olmaqla 7 kritik sistem boşluğu arad..

Microsoft şirkəti bu ay təqdim etmiş olduğu yenilənmələr ilə öz sistemlərində 36 boşluğu aradan qald..


Microsoft Teams platformasının Linux versiyası təqdim edildi

Microsoft şirkəti Microsoft Teams platformasının Linux versiyasını təqdim edib.


OpenBSD-də 4 ciddi sistem boşluğu aşkar edilib

OpenBSD-də 4 ciddi sistem boşluğu aşkar edilərək aradan qaldrılıb.


Sadə tətbiqlərin müxtəlif proqramlaşdırma dillərindəki test nəticələri təqdim ed..

Assembler x86_64-də HeavyThing adlı azad kitabxananı reallaşdırmış müəllif Jeff Marrison “Assembler-..

×