Published on
Border for custom element preview

I like to work with creative designers. I like to convert their ideas to HTML and CSS. I think that every professional front-end developer must be able to do it. It’s our job after all. But I look at questions on Habr Q&A and I see people asking about these designs almost every day. I expect to see beginners, the programmers with a year of experience, but I don’t expect these questions from the seniors. But they are there. And a lot of comments like “it’s impossible to create this thing, you should just fire your designer”. I think I’ll write a big article with lifehacks for such tasks in the future, but not now. This time I created just the one example of the responsive custom border. It looks simple, but it’s not. You’ll find the SVG filter for creating a border with padding for the shape of free form in the sources.

See the Pen Border for custom element by Ivan Bogachev (@sfi0zy) on CodePen.

Related posts

Funny face - post preview
Animated 404 page - post preview
Scroll example - post preview

Pet projects

Muilessium preview

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.

Promo Core preview

Boilerplate for static promotional websites. Pug, LESS, PostCSS, ES6+, Gulp, Webpack, BrowserSync, ESLint, Stylelint, auto-generated docs...

Shaders Gallery preview

Library for creating galleries of photos with effects based on WebGL shaders.