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”
Tag: css
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.
An Overview of OOCSS, BEM, SMACSS (CSS Methodologies/Practices) with References
Writing CSS is really simple, we’ve been doing that since many years. But the problem is, in larger projects where the CSS code grows over thousands of lines, whether you’re alone or it is a team maintaining and building on the code, it gets really unwieldy (spaghetti code). Code gets hard to maintain, harder to debug, unoptimized leading to poor performance and highly inefficient. New team members start adding more code (classes, IDs, etc.) and start using them leading to a lot of redundant and unoptimized code here and there. Basically it gets hard, really hard. You end up into too many issues.
Continue reading “An Overview of OOCSS, BEM, SMACSS (CSS Methodologies/Practices) with References”
Mini HTML/CSS/JS Code Playground (with Editors and Sandbox) in Less than 200 Bytes
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.