LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
 

Vue.js + CSS Image Filters

{{ preset.name }}

CSS
body {
  /*     background-color: #000; */
  font-family: "Roboto", sans-serif;
  color: #2c3e50;
}

.hero-title {
  font-size: 4vw;
  font-weight: 100;
  color: #2c3e50;
  text-align: center;
  margin: 0.2em;
}

#app {
  display: flex;
  justify-content: center;
}

.image {
  width: 640px;
  height: 480px;
  margin: 1em;
  /*   transition: all 500ms linear; */
}

.controls {
  margin: 0 1em;
  border-radius: 3px;
}

.controls-subject,
.controls-preset,
.controls-blend {
  margin: 1em 0;
}

.controls-sliders {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1.5em 0.5em;
}

.slider {
  display: block;
  width: 90%;
  margin-bottom: 1.5em;
}

.slider:last-child {
  margin-bottom: 0;
}

.thumbnails {
  margin-top: 1em;
}

.thumbnails-thumbnail {
  width: 100px;
  height: 75px;
  margin-bottom: 0.5em;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnails-thumbnail.active {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px black;
}

.thumbnail-title {
  padding: 0.45em;
  color: #aaa;
  font-weight: 100;
  font-size: 0.75em;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-title.active {
  color: white;
}
JS
new Vue({
  el: '#app',
  data: {
    selectedSubject: 'people',
    subjects: [
      'animals',
      'arch',
      'nature',
      'people',
      'tech'     
    ],
    selectedPreset: 'Nashville',
    presets: [
      {
        'name': 'None',
        'blendMode': 'normal',
        'red': 0,
        'green': 0,
        'blue': 0,
        'alpha': 0
      },
      {
        'name': 'Nashville',
        'blendMode': 'multiply',
        'red': 255,
        'green': 255,
        'blue': 172,
        'alpha': 0
      },
      {
        'name': 'Lark',
        'blendMode': 'color-burn',
        'red': 226,
        'green': 211,
        'blue': 180,
        'alpha': 0
      },
      {
        'name': 'Oldies',
        'blendMode': 'hard-light',
        'red': 57,
        'green': 96,
        'blue': 25,
        'alpha': 0
      },
      {
        'name': 'Brownies',
        'blendMode': 'luminosity',
        'red': 193,
        'green': 118,
        'blue': 0,
        'alpha': 0
      },
      {
        'name': 'Fargo',
        'blendMode': 'screen',
        'red': 193,
        'green': 118,
        'blue': 0,
        'alpha': 0
      },
      {
        'name': 'Charcoal',
        'blendMode': 'luminosity',
        'red': 255,
        'green': 255,
        'blue': 255,
        'alpha': 0
      }      
    ],
    selectedBlendMode: 'multiply',
    blendModes: [
      'normal',
      'multiply',
      'screen',
      'overlay',
      'darken',
      'lighten',
      'color-dodge',
      'color-burn',
      'hard-light',
      'soft-light',
      'difference',
      'exclusion',
      'hue',
      'saturation',
      'color',
      'luminosity' 
    ],
    color: {
      red: 255,
      green: 255,
      blue: 172,
      alpha: 0
    }
  },
  computed: {
    computedColor() {
      // return 'rgba(255, 0, 0, 0)'
      // return 'rgb(255, 0, 0)'
      // return 'red'
      // return `rgba(${this.color.red}, ${this.color.green}, ${this.color.blue}, ${this.color.alpha})`
      return `rgb(${this.color.red}, ${this.color.green}, ${this.color.blue})`
    },
    computedBackgroundImage() {
      return `url(https://placeimg.com/640/480/${this.selectedSubject})`
    }
  },
  watch: {
    selectedPreset() {
      let preset = this.presets.filter((obj) => {
        return obj.name == this.selectedPreset;
      })
      this.color.red = preset[0].red
      this.color.green = preset[0].green
      this.color.blue = preset[0].blue
      this.selectedBlendMode = preset[0].blendMode
    }
  }
})

Description

Image filters using CSS background color and blending modes. Vue.js handles all the magic.
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv