UI / UX
January 13, 2019
Using WebP Images with Fallback
If your application involves showing a lot of images then probably it makes sense to add WebP support. Using the HTML
tag is the most robust solution to display WebP images with fallback.
January 1, 2019
Detecting when an Element Becomes Fixed in CSS position:sticky with an Intersection Observer
Creating an element which would become fixed during scrolling has become very easy with CSS position : sticky. And with the new Intersection Observer API, it can be detected when an element comes in/out of sticky position.
December 30, 2018
How to Create an On Scroll Fixed Navigation Bar with CSS
December 10, 2018
How to Create a Parallax Scrolling Effect with CSS
Parallax effect is one of the simplest ways to give an elegant look to your webpage. This effect can be achieved with the background-attachment CSS property.
July 2, 2018
Typewriter Animation with Pure CSS
June 15, 2018
Some Less Known CSS Properties for Form Input Fields
This post briefly discusses some less popular CSS properties for form inputs, for example tab-index, caret-color etc. You can use them to make your form even more effective.
June 5, 2018
Typing effect is a good way to grab user attention. To implement typing effect, you can start by showing the first character initially; after a few milliseconds you can show the first 2 characters; and so on till the whole sentence has been shown.
February 11, 2018
Creating a Full Height Page with Fixed Sidebar and Scrollable Content Area
Webpages with a fixed sidebar and a scrollable content area are quite popular. The page expands to 100% height of the screen. Depending upon the height, both the sidebar and content may have scrollbars.
November 1, 2017
Creating a Page with Sidebar and Main Content Area using HTML & CSS
Popularly used in admin pages, a page with a left sidebar to hold menu options, and a section to hold the main content is one simple design that looks good.
October 9, 2017
How to Handle CSS in Browser Full-Screen Mode
When an element goes to full-screen , you can change the user interface by changing CSS properties. Tutorial handles all the cases that can possibly come.
April 9, 2017
Using the scrollHeight property you can make your textarea auto grow vertically based on its content.
April 9, 2017
Understanding clientHeight, offsetHeight & scrollHeight
offsetHeight = VISIBLE content & padding + border + scrollbar ● clientHeight = VISIBLE content & padding ● scrollHeight = ENTIRE content & padding (visible or hidden)
February 19, 2017
February 13, 2017
Lightboxes are one of the common things implemented in websites, so animating them is a good idea to impress your visitors.
January 30, 2017
Revealing Hidden Elements By CSS Animations
Examples of revealing (show & hide) elements through CSS animations.
January 14, 2017
How to Move an Element in a Circular Path with CSS Offset-Path (Motion Path)
Moving / animating an element along a circular path can be achieved by CSS Offset Path (Motion Path).
January 11, 2017
How to Move an Element in a Circular Path with CSS
Moving / animating an element along a circular path can be achieved by animating the CSS transform property.
November 8, 2016
How to Drag / Pan an Image in a Container div using jQuery
You can drag an image within the parent container using jQuery with a combination of mousedown, mousemove and mouseup events.
© UsefulAngle.com 2016 - 2019. All code MIT license.
UsefulAngle on Twitter
UsefulAngle on Facebook