Gradients Collection Preview With HTML and CSS

Admin
Juni 08, 2022
Gradients Collection Preview

Candil Code - Hallo Sobat Developers kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat Gradients Collection Preview sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, Silahkan di simak dan perhatikan baik-baik code di bawah ini.

How to Create Gradients Collection Preview


- 
  const gradients = [ 
    '00bd56', 'f9fd50',
    '26baee', '9fe8fa',
    '8f71ff', '8bffff', 
    'c7004c', 'ffaaaa',
    '55968f', '8acbbb',
    '226b80', '35b0ab',
    '3d6cb9', '00fff0',
    '4d3664', 'bab5f6',
    'fa4659', 'e9007f',
    '00b7c2', '4ef037',
    '303481', 'a100ff',
    'fc8a15', 'fff6a2',
    'f9d00f', 'fbff64',
    '295e6a', '4797b1',
    'ff0592', 'ffbee3',
  ];

- const length = gradients.length / 2;

section.gradients
  ul.list-gradient
    - for ( let i = 0; i < length; i++ )
      - const start = `#${ gradients[ 2 * i ] }`;
      - const end = `#${ gradients[ 2 * i + 1 ] }`;

      li.item-gradient( style={ '--start': start, '--end': end } )
        .gradient
        p.start #{ start }
        p.end #{ end }
  


 @import url('https://fonts.googleapis.com/css?family=Quicksand');

// Variables

$color-background: #3c415e;
$color-border: #738598;
$color-color: #1cb3c8;
$color-hover: #dfe2e2;
$color-shadow: darken( $color-background, 25% );

$degrees-gradient: 45deg;
$size-gradient: ( 100%, 70% );
$size-text: ( 100%, auto );
$size-font: 1.35em;
$size-min: 200px;
$size-max: 300px;
$size-scrollbar: 7.5px;
$space: 10px;

$border: thick solid $color-border;
$shadow: 0 0 $space 0 $color-shadow;

// Mixins

@mixin size ( $w: null, $h: null )
{
  width: $w;
  height: $h;
}

@mixin box-size ( $s )
{
  @include size( $s, $s );
}

@mixin scrollbar ( $size, $coord: y )
{
  overflow: hidden;
  overflow-#{ $coord }: scroll;
  scroll-behavior: smooth;

  // Mozilla Firefox
  scrollbar-color: $color-color $color-background;
  scrollbar-width: thin;

  // Scrollbar
  &::-webkit-scrollbar
  {
    @include size( $size );
  }

  // Track
  &::-webkit-scrollbar-track
  {
    color: $color-color;
    background-color: $color-background;
  }

  // Handle
  &::-webkit-scrollbar-thumb
  {
    color: $color-color;
    background-color: $color-color;
    border-radius: $size;
  }

  // Rules for devices with mouse here
  @media ( pointer: fine )
  {
    // Mozilla Firefox
    scrollbar-color: $color-background $color-background;

    // Track
    &::-webkit-scrollbar-track
    {
      color: $color-color;
      background-color: $color-background;
    }

    // Handle
    &::-webkit-scrollbar-thumb
    {
      color: $color-color;
      background-color: $color-background;
    }

    &:hover
    {
      // Mozilla Firefox
      scrollbar-color: $color-color $color-background;

      // Handle
      &::-webkit-scrollbar-thumb
      {
        background-color: $color-color;

        &:hover
        {
          background-color: $color-hover
        }
      }
    }
  }
}

// Extends

%full-size
{
  @include box-size( 100% );
}

%flex-center
{
  display: flex;
  align-items: center;
  justify-content: center;
}

// Reset

*,
*::before,
*::after
{
  box-shadow: none;
  outline: 0;
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

// Layout

html { @include size( 100vw, 100vh ) }

body { @extend %full-size }

ul { list-style: none }

.gradients
{
  @extend %full-size, %flex-center;
  overflow: hidden;
  padding: $space;
  padding-left: 2 * $space;
  background: $color-background;
}

.list-gradient
{
  @extend %full-size;
  @include scrollbar( $size-scrollbar );
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item-gradient
{
  @include size( auto, calc( 100vh - 4 * #{ $space } ) );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 auto;
  min-width: $size-min;
  max-width: $size-max;
  padding: 2 * $space;
  margin: $space;
  border: $border;  
  border-radius: $space;
  box-shadow: $shadow;
  transition: border-color .35s ease-in-out;

  &:hover
  {
    border-color: $color-color;
  }

  @media ( min-height: 500px )
  {
    @include size( auto, calc( 50vh - 3 * #{ $space } ) );
  }
}

.gradient
{
  @include size( $size-gradient... );
  background: linear-gradient( $degrees-gradient, var( --start ), var( --end ) );
  border-radius: $space;
}

.start,
.end
{
  @extend %flex-center;
  @include size( $size-text... );
  justify-content: space-between;
  font-weight: bold;
  font-size: $size-font;
  letter-spacing: .1em;
  color: $color-color;
  transition: color .35s ease-in-out;
  margin-top: $space;
  
  &:hover { color: $color-hover }
  
  &::before
  {
    @extend %flex-center;
    @include box-size( $size-font );
    content: '';
    border-radius: 50%;
  }
}

.start::before { background: var( --start ) }
.end::before { background: var( --end ) }


***


Demo Video

Gunakan Live editor online : Live editor online untuk mencoba code diatas.

Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika dirasa Artikel Yang saya tulis melanggar Hak Cipta Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak dan Saya akan menghapusnya sesegera mungkin.

Penutup

Semoga saja code Gradients Collection Preview bisa dijadikan refferensi pembelajaran untuk anda yang masih baru terjun ke dalam dunia web programming, silahkan di share, nantikan web design menarik lainnya hanya di blog ini, Semoga Bermanfaat and Hapy Ngoding.

Baca juga :
Admin