10 Stunning Web Design Ideas for 2019

Hello and welcome to red stapler channel in this video we’ll show you the collection of 10 stunning web design ideas in 2019 that you should see and details about technique and library they used ready let’s check it out this one used three.js WebGL library and combined it with custom shader the text and noise images were used to create texture map on plain surface before shader processing writing a game might sound complicated but actually this one is only just a sophisticated checkbox put together with conditions SCSS and Haml were used to help creating logics this one is a clever implementation of SVG radial gradient mask the modified image with sketch effect were put in place and add JavaScript code to mask over with the original image on mouse click This cool effect is achieved by carefully placed div and a simple transform animation box shadows were used to create 3d light effect SCSS was used to calculate the transform

amount and apply to each it an awesome slider using SVG image our animations were at by JavaScript using TweenMax which is part of GSAP or GreenSock animation platform actually this one was created with almost pure CSS using 3d transform and grid template the JavaScript was added to just enable the scroll feature I really love this one the 3d text was created using text geometry and all cardboard textures were embedded into the JavaScript code using base64 encoding TweenMax again was used to move the camera when typing new letters as for physics engine an open-source library cannon.js was used This is pure CSS animation it looks like we have a sphere shape but actually it’s just a circle div box shadow and moving face to create an illusion of spinning again this one is pure CSS at first I was certain that this was made with three.js but actually it was made with lots of simple square divs box-shadow CSS animation and 3d transform a good design for a product showcased a transparent product pictures were added to page with CSS hover property to create hover effect the grid regenerated with JavaScript which automatically recalculate when resizing browser window no extra library was used and that’s all for this video you can find all links to the code at the description box below hope you guys enjoy and if you want to see more development tips and tutorials don’t forget to subscribe our channel weekly update thanks watching and see you next time bye

As found on Youtube

Web Design Edmonton