Logo
    main-post-cover

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

    Code-News
    25.01.2019
    Farid

    #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ə


    Paylaş
    Bənzər xəbərlər
    Logo
    © 2015-2025 Technote MMC