Tag: css

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.

Continue reading “CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property”

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.

Continue reading “Prevent Touch Panning and Zooming on Mobile Web Pages with CSS touch-action Property”

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.

Continue reading “Mini HTML/CSS/JS Code Playground (with Editors and Sandbox) in Less than 200 Bytes”

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”