ambient-image is a Vue component that can be used to add multi colored shadows to images. As shown on the demos below the shadow accepts the colors of the image creating beautiful and fully configurable ambience via handy props for blur, elevation, etc. The component is on npm. You can check the demo and the … Continue reading “Ambient Image Component for VueJs”
VcPiechart is a simple, yet powerful VueJs component for creating pie charts that came out from an experiment I made with the relatively new CSS conic gradients utilizing minimal markup and simple calculations. The package is available as an ES6 module on NPM and the repo is on BitBucket in case you feel like forking it. … Continue reading “Pie Chart VueJs Component with CSS Conic Gradients”
A couple of years ago, when HTML5 WebComponents were new, Polymer was just conceived and I was still experimenting, I created a nice Parallax component based on Mozilla X-Tag – one of the first libraries/framework, built on top of the WebComponents API. The component came out to be pretty popular and as time passed by … Continue reading “Parallax Component for VueJs”
It’s been a while since I last posted here because I’ve been quite busy with daytime projects and I did not have much time for my pet projects, but finally I accomplished an idea that I had for a while. Presenting CSS HDR – an online HDR photo editor, built on top of VueJs, ES6, … Continue reading “Online HDR Photo Editor”
Here’s a small project, based on VueJs and Vuecidity I’ve just accomplished you can use to generate, edit, preview, copy and get permanent link CSS gradients. Currently, it supports linear and radial gradients, but I am planning to add support for conic gradients, enabled by the excellent CSS conic gradients polyfill by Lea Verou.
Just finished my next experiment with HTML5 WebComponents. AcidJs.XTextarea is an advanced replacement of the classic <textarea /> HTML element, supporting custom events and auto resizing as-you-type. Check the extensive documentation in the distribution file (click the download button at the top of the demo page) or scroll this page to see the demos. Usage … Continue reading “Auto Resizing Textarea HTML5 WebComponent”
Recently I worked on an HTML5 app, utilizing contenteditable elements. According to the specs of the app, the empty editable elements were supposed to have placeholder texts and since the placeholder attribute is only supported by standard input boxes and textareas I was planning to use JavaScript to enable this functionality in contenteditable elements, but … Continue reading “Enabling Placeholders in ContentEditable Elements with CSS”
Below is a quick and dirty solution for adding icons to the <option /> elements of the <select /> tag utilizing CSS generated content. Disclaimer: According to the CSS specs, the <option /> element should not support generated content, and this solution works only in Firefox. Anyways, it may come handy sometime. The Result: The … Continue reading “Adding Icons to the Option Elements of the Select Tag in Firefox. Quick and Dirty”
A couple of weeks ago I was contacted by Webucator asking me if I’d be interested in the creation of a video tutorial with my Parallax Page Scroll Effect with Pure CSS3. No JavaScript. No Hassle blog post and experiment. Of course, I was much excited by the idea, especially when I was told that … Continue reading “Collaboration with Webucator”
Ribbon JS is turning 5 this month! If you are planning to purchase a license, now it’s the time. Join the celebration and get any commercial license for the most advanced and feature-complete JavaScript, HTML5 and CSS3 MSOffice-like ribbon control available on the Internet today at a half price only in August 2015!