Sometime back this thread on HackerNews gained quite some traction. Basically, it’s a small project called MiniCodeEditor which is a tiny and minimal version of an online code playground like CSSDeck.
Tag: css
The New and Final CSS3 Linear and Radial Gradients Syntax
The specs have always been in a state of flux. But it seems to be decided on the CSS3 linear and radial gradients syntax finally (hopefully). Let’s just discuss the changes and how you’ll need to modify your current/old code accordingly.
Continue reading “The New and Final CSS3 Linear and Radial Gradients Syntax”
Convert Your CSS Code to SCSS/Sass
Ever wanted to make your own CSS2Sass convertor ? When working on projects, a tool that can quickly convert our CSS code to Sass can be ridiculously useful. Let’s see how to do it.
Continue reading “Convert Your CSS Code to SCSS/Sass”
Building Your Own HTML, CSS, JS Realtime Playground
Many months ago I built this site called CSSDeck. Its an interesting app where you can write your HTML, CSS, JS code inside few code editors that gets rendered and displayed in realtime in an output area (sandbox). Similar to JSFiddle, yeh! But the intent was a bit different. Instead of aiming for a playground where people could just create testcases, I wanted to build a community of people who would create some cool creations with their CSS3 and Javascript skills and all I would do is feature them on the Home Page of the site. Whatever people submit shows up in their profile page which means they can share their profile link with anyone and show off how awesome they are.
Continue reading “Building Your Own HTML, CSS, JS Realtime Playground”
HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)
Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Personally I think a fullscreen good quality video that autoplays does increases engagement for the users/customers. It should be kept in mind that the story of the video must be relevant to the brand. These days we’re surrounded by loads of videos on social networks like FB and Twitter as well which autoplay (but is muted of course). Analytical studies have also reported higher engagement due to this.
Continue reading “HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)”
CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property
We’re well acquainted with the CSS3 filter property that lets us apply various effects like blur, grayscale, sepia, saturation, etc. to a particular element. Now using this property we actually end up adjusting the rendering of the entire element including its borders, background and content (text or/and image). Did you ever want to apply the same effects to just the area behind the element, i.e., the background of the parent element or the one right behind/below the target element ? This is now very easily possible with the backdrop-filter property. I’m sure you’d have noticed this effect being widely used in iOS 7 and OS X Yosemite.
Prevent Touch Panning and Zooming on Mobile Web Pages with CSS touch-action Property
The new touch-action property from the CSS Pointer Events spec can help us (as developers) specify what sort of manipulation (panning, zooming, etc.) should be allowed by a user in a particular region (one or more DOM elements) in a specific web page on a mobile device. It helps specify the sort of interactions or gestures allowed by the user in one or both axis.