The backdrop-filter CSS property allows you to apply visual effects (like blur, brightness, contrast, etc.) to the area behind an element — making it perfect for frosted glass UIs, soft overlays, or modern modal designs. Prerequisites are: Supported in modern browsers like Chrome, Edge, and Safari. Requires transparency (like rgba or backdrop-filter on semi-transparent elements). May … [Read more...]
12 Text-Styling Properties in CSS
CSS (Cascading Style Sheets) is a language used to style web pages, and it offers a wide range of properties to control the appearance of text on a webpage. By applying CSS text-styling properties, you can adjust font types, sizes, colors, and much more, enhancing readability and visual appeal. Understanding these properties is crucial for web designers and developers who want to create … [Read more...]
What is Accessible Rich Internet Applications (ARIA): Explained With HTML, Js & CSS
Accessible Rich Internet Applications (ARIA) is a set of web standards developed by the World Wide Web Consortium (W3C) to improve the accessibility of web content and applications for people with disabilities. This article provides a detailed exploration of ARIA, covering its purpose, features, guidelines, implementation, benefits, and impact on web accessibility. Understanding … [Read more...]
How to Create a Typewriter Effect With CSS
Creating a typewriter effect with CSS can add a nostalgic and engaging touch to text elements on your website. This effect mimics the appearance of text being typed out as if by an old-fashioned typewriter, character by character. Let's walk through how you can achieve this effect using CSS animations. Step-by-Step Guide: Creating a Typewriter Effect With CSS Start with a … [Read more...]
Sass vs. SCSS: Writing the Perfect Syntax
In the world of web development, writing clean, organized, and maintainable CSS is essential for creating beautiful and efficient websites and applications. To achieve this, developers often turn to preprocessors like Sass (Syntactically Awesome Stylesheets). Now same Sass can be written in SaaS or SCSS (Sassy CSS). While both Sass and SCSS offer similar features and capabilities, they differ in … [Read more...]
What is Sass (stylesheet ext)
Sass stands for Syntactically Awesome Style Sheets. Sass is a stylesheet language that offers variables, loops, and many other features that Cascading Style Sheets (CSS). It simplifies the creation of CSS and also help to maintain large stylesheets. It is influenced by the YAML markup language. Sass is available in two syntaxes. The original syntax, called indented syntax which uses … [Read more...]
What is User Experience (UX) Design
User experience design describes the process of designing a purchase pre-decision phase of a user in a service or product interaction, for example with the help of digital graphical user interfaces, and forms part of the phenomenon of user experience. This interaction with a product is created through the interplay of usability, usability, visual design, interaction design, content strategy, user … [Read more...]
When Will We Have CSS4?
CSS never had versions such as CSS v1.0, CSS v2.0, CSS v3.0 and so on. CSS is not a programing language. HTML and CSS are markup languages. In computer science, markup languages represent a class of languages specialized in enriching textual information. They use tags, syntactic units that delimit a sequence of characters or mark a precise position within a stream of characters (for example, a … [Read more...]
How To Customize Inline Pre and Code Tags in WordPress Posts
Some years back, we discussed how to convert the backticks to inline code blocks in WordPress posts. You can copy the final PHP code from that article or copy from this GitHub gist. You can paste that code in your theme's functions.php file directly or use our simple WordPress plugin to paste that snippet. If you are using some WordPress syntax highlighting plugin, such as Urvanov/Crayon Syntax … [Read more...]
How to Add Auto Anchor to WordPress Headings
These days the search engine can understand the meaning of the headings within an article. Whether you add a table of content, anchor text etc or not, they may show the links on the search engine result page. This happens with the content of our site. If there is step 1, step 2, and step 3 headings; Google search engine adds links on the search engine result page. However, adding links to the … [Read more...]
Self-Hosted Fonts vs. Cloud-Hosted Fonts
In the year 2022, Munich Regional Court (Germany) concluded that embedding dynamic objects such as Google Fonts without the visitors' consent is a ground for the EU citizens to sue for injunctive relief. Thereafter some website operators with embedded Google Fonts are receiving fines. The administrative fine can be 100 to 250,000 euros or, worse decisions. Using Adobe Fonts may put you in a … [Read more...]