Category: Сайтостроение

CSS Blurry Background

See the Code — See it Full Page — See Details My 10 year old son Nate helped me design this after I came home from CSS Dev Conf. Facebook killed the gradient background so I thought I would try and make something different. Although this style may not be that modern, it serves as an example that you **do not need** heavy blurry background images to pull this off.

Interactive object clipping

See the Code — See it Full Page — See Details Click on the transform controls to move the move the knot through the clipping plane, and drag anywhere else to tumble. I just realized you could do this with the fragment shader! It’s very sneaky, the flat gray surface is not the clipped face but the interior of the object, solid shaded. I love the effect though! This Pen

Earth News

See the Code — See it Full Page — See Details A little responsive kajigger that uses a bunch of new CSS tech. — CSS Variables — CSS Grid Layout — CSS Flexbox Based on [Product Web Design](https://dribbble.com/shots/3863348-Product-Web-Design) by Aditya Khakhria This Pen uses: HTML, SCSS, JavaScript, and Source: codepen

Using CSS Grid as a mask

See the Code — See it Full Page — See Details Using CSS Grid as a mask to recreate a design similar to this poster: https://media-s3-us-east-1.ceros.com/ceros-marketing/images/2016/10/24/ddad31747373bd0169a985ebbd60cad2/poster-full.jpg This Pen uses: HTML, CSS, JavaScript, and Source: codepen