A presentation at VueConf TO in in Toronto, ON, Canada by Victoria Bergquist
🤖 Shapy: Images with CSS Gradients & Vue.js 🤖 🎨 Victoria Bergquist, @vicbergquist Vue Conf Toronto, November 15 2018
Victoria Bergquist, who? 🦄 Front End Dev & Community Manager @melsicon 🏢 CSS Frankfurt & Vue.js Frankfurt 😺 Vue Vixens DE 🦊 Cats & M&Ms ❤ (donations welcome) @vicbergquist Vue Conf Toronto
What is Shapy? 🧐 A CSS gradients generator + more ) Play around with gradients + Be a CSS artist ✂ Copy code (like a pro) @vicbergquist Vue Conf Toronto
Pre-talk demo! 😱 Let’s see what Shapy is! @vicbergquist Vue Conf Toronto
Origin 🌈 CSS 😍 JavaScript 😑 #DailyCSSImages @vicbergquist Vue Conf Toronto
Origin 🌈 #DailyCSSImages Daily e-mail prompts to make CSS images @vicbergquist Vue Conf Toronto
Origin 🌈 #DailyCSSImages Level 1: One tag per shape @vicbergquist Vue Conf Toronto
Origin 🌈 #DailyCSSImages Level 2: Fewer tag + Pseudo elements @vicbergquist Vue Conf Toronto
Origin 🌈 #DailyCSSImages God level: One tag + pseudo elements + gradients a.singlediv.com by Lynn Fisher @vicbergquist Vue Conf Toronto
Origin 🌈 😱 😱 CSS only CSS only What kind of magic is this? 😭 @vicbergquist Vue Conf Toronto
Origin 🌈 😱 😱 wtf 😰 @vicbergquist Vue Conf Toronto
Origin 🌈 There’s a generator for that, right? I don’t know 🤷 @vicbergquist Vue Conf Toronto
Origin 🌈 A year later: I still don’t know. 💁 But let’s just make one! @vicbergquist Vue Conf Toronto
Origin 🌈 But JavaScript 😑 But Vue.js! 😍 @vicbergquist Vue Conf Toronto
Origin 🌈 But JavaScript 😑 4👎 Slow progress… @vicbergquist Vue Conf Toronto
Origin 🌈 @vicbergquist Vue Conf Toronto
Origin 🌈 But Vue.js 😍 @vicbergquist Vue Conf Toronto
🦄 Makes all your ideas come true! productivity++ @vicbergquist Vue Conf Toronto
Origin 🌈 I WAS ON A ROLL 😎 @vicbergquist Vue Conf Toronto
The How 😯 Learn how CSS gradients work: background-color background-image background-position Shorthand: background background-repeat background-size + more @vicbergquist Vue Conf Toronto
The How 😯 Learn how CSS gradients work radial-gradient( linear-gradient( Width Height at X-axis Y-axis, Direction, Color start, Color stop) Color start, Color stop) no-repeat no-repeat X-axis Y-axis / Width Height X-axis Y-axis / Width Height) @vicbergquist Vue Conf Toronto
The How 😯 What did I use to build Shapy? Vuex vuex-map-fields vue-meta vue-color vue-highlightjs (vue-router) @vicbergquist Vue Conf Toronto
The How 😯 Gather your data: input fields in a form x 1000. V-model everything! @vicbergquist Vue Conf Toronto
The How 😯 Gather your data: update the store on changes @vicbergquist Vue Conf Toronto
The How 😯 Turn it into a string ${type}( ${shape}, ${repeat} ${colors}) ${box}
@vicbergquist Vue Conf Toronto
The How 😯 Turn it into a string gradientString() { // TYPE const type = this.general.type // REPEATING const repeat = this.general.repeat // COLORS const colors = this.colorStops // COMMENT const comment = this.general.comment // DEGREE const degree = this.general.degree.size + this.general.degree.unit // BOX const box = this.boxCombined // SHAPE const shape = this.shapeCombined
}
if (type === 'radial-gradient') { return /* ${comment} */ ${type}(${shape}, ${colors}) ${repeat} ${box} } else if (type === 'linear-gradient' && this.general.degree.size > 0) { return /* ${comment} */ ${type}(${degree}, ${colors}) ${repeat} ${box} } else if (type === 'linear-gradient') { return /* ${comment} */ ${type}(${colors}) ${repeat} ${box} }
@vicbergquist Vue Conf Toronto
The How 😯 Turn it into a string radial-gradient( 50% 50% at 50% 50%, #00978d 0%, #f3b6c9 100%) no-repeat 50% 50% / 100% 100% linear-gradient( 90deg, #00978d 0%, #f3b6c9 100%) no-repeat 50% 50% / 100% 100% @vicbergquist Vue Conf Toronto
The How 😯 Bind the style! <div class=“canvas” :style=“{ background: gradientString }”/> 🎉 🎉 @vicbergquist Vue Conf Toronto
Demo time! Let’s make the Vue logo together! @vicbergquist Vue Conf Toronto
Shapy’s Future 🧙 Plans and ideas for Shapy ) Gallery: like/fork/share 🦊 Shapy in the browser 💡 Your ideas? @vicbergquist Vue Conf Toronto
🤖 Play with Shapy shapy.app ❤ Contribute to Shapy github.com/vicbergquist/shapy @vicbergquist Vue Conf Toronto
Thank you! ☺🙏 @vicbergquist Vue Conf Toronto
Shapy is an app where you can explore and discover the power of CSS gradients. Create shapes and images with gradients by layering and positioning gradients.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.