Styling First-Letters with CSS ::first-letter
Styling first letter in a block of text is a good way of increasing user attention span. It can be done with the ::first-letter CSS pseudo-element.
Creating Attractive First Lines with CSS ::first-line
When your copy content goes long, it is a good idea to make it visually attractive. The CSS pseudo-element ::first-line can be used to style the first line appearing within an element.
Selecting Sibling Elements with CSS
CSS provides the adjacent sibling combinator (+ character) and general sibling combinator (~ character), to select siblings of an element.
Selecting Child Elements with CSS
The child combinator represented by the greater-than character (>) select direct children of the parent element. The descendant combinator represented by a single-space character can be used to select children, grand-children, grand-grand-children also.
CSS :focus-within
The :focus-within CSS pseudo-class is a selector for an element that contains a focused element as a child. It is the only CSS selector that reaches a parent from a child.
Cropping and Resizing Images in CSS using object-fit and object-position
Images can be cropped and resized in CSS using the new object-fit and object-position properties. They are similar to background-size and background-position properties, but can be applied directly to image elements.
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.
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.
How to Create an On Scroll Fixed Navigation Bar with CSS
With the introduction of sticky positioned elements, creating a navigation bar which becomes fixed on scrolling has become very easy. There is no Javascript required.
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.
Typewriter Animation with Pure CSS
This tutorial discusses the concepts behind achieving typewriter effect with CSS, with no Javascript involved.
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.
Typing and Deleting Effect with Javascript
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.
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.
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.
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.
Auto Grow a Textarea with Javascript
Using the scrollHeight property you can make your textarea auto grow vertically based on its content.
Understanding clientHeight, offsetHeight & scrollHeight
offsetHeight = VISIBLE content & padding + border + scrollbar ● clientHeight = VISIBLE content & padding ● scrollHeight = ENTIRE content & padding (visible or hidden)
How to Add CSS Rules to a Stylesheet with Javascript
You can use insertRule to add new CSS rules to a stylesheet using Javascript.
Animating a Lightbox with CSS & Javascript
Lightboxes are one of the common things implemented in websites, so animating them is a good idea to impress your visitors.