CSS Grid is a module that allows creating a layout based on a grid using columns and rows. Until recently, HTML layout was built using floats, tables, and other various CSS properties that were definitely not suitable for creating...
HotSince forever, the use of grids has been an integral part of the world of design and website development. As Frontend developers, you’ve likely encountered websites built on some CSS Framework like Bootstrap, Tailwind CSS and others, which allow...
HotThe background-clip property allows us to control how far the background image (or background color) extends beyond the Padding or the content itself of an element. I assume that this explanation is challenging to understand without some examples and...
CSS Flexbox as well as CSS Grid are excellent tools for managing layout on websites. Flexbox provides wonderful one-dimensional alignment, and CSS Grid solves the issue of two-dimensional alignment using rows and columns. Sometimes, we often want to add...
HotThe CSS Text Decoration Module Level 3 module provides us with several new ways to decorate and adorn text on web pages, and browser support for this module is quite extensive, much to our delight. New CSS properties such...
clip-path is a very interesting CSS property that allows you to “clip” a certain part visible to the eye in elements such as SVG, images, and HTML. The property creates a shape that determines which part of the element...
This is a short post describing how to create a separator line with an element in the middle, like a kind of divider with text or an image when there is the same separator line to the left and...
You’ve probably encountered websites with various animations happening as you scroll down (On Scroll Animations). So, I’ll share with you a library I came across called AOS, which allows you to easily add these animations with full CSS control...
Typography has interested me since I started developing websites and getting into design, even before there was widespread use of web fonts. And although web fonts have been around for almost ten years now, we’ve always had to balance...
HotCSS Grid introduced a new measurement unit to the world. It’s actually a new type of flexible unit called Fr unit. The meaning of Fr is Fractional Unit, where 1fr represents a fraction of the available space. Below, I’ll...
In CSS Grid-based layouts – The default in placing elements in the grid itself is by defining the rows, or in fact, defining the grid lines according to which elements will start and end. The Grid Area feature is...
I have previously written a post about a guide that aims to cover the topic of Flexbox. There’s a feature mentioned there briefly, and it’s very useful when creating such a grid or another. Let me give a brief...
is a specific property that exists as part of the CSS flexbox module. Using this property, you can determine how flex items will be displayed and behave within a flex container when they don’t have enough space. The...
Lity is a lightweight, accessible, and responsive lightbox library that supports images, videos, iframes, and even inline content. The library weighs only about 3K when minified and gzipped on your server. In this short post, we’ll see how to...
...encrypted using MD5 hash and stored in the WordPress database. It’s worth noting that in older versions, WordPress used the same MD5 to encrypt passwords. However, from version 2.5 onwards, WordPress started using stronger encryption technologies. Nevertheless, WordPress still...
One aspect in which websites lag behind native applications is the smooth user experience. The perception of a smooth experience largely comes from the user interface’s responsiveness to user interactions, with the action of scrolling content being a crucial...
Loops are a kind of ‘computer program’ that executes a set of commands or a specific piece of code multiple times until a certain condition is met. A loop eliminates the need to write the same set of commands...
WebP is an image format developed by Google in 2010 as an alternative to formats like PNG and JPG. The format offers significantly smaller file sizes compared to those formats, all while maintaining fairly similar image quality. Pay attention...
Hotis another useful pseudo-element that allows you to style the first letter of text within any element without the need to modify the HTML or add any specific tags like . The method works similarly to a scenario...
The current status of CSS Selectors Level 4 is a kind of draft; however, modern browsers have already started implementing certain parts of the new specifications. In essence, there will never be CSS4 just as there will never be...
According to Wikipedia, merging (or “blending modes”) in digital image editing and computer graphics is used to determine how two layers blend together. In most applications, the default blending mode is simply to hide the bottom layer by covering...
In CSS, it is not possible to perform animation or partial gradient changes using the property. In other words, the following won’t work: In the above code, the transition between states won’t be smooth but will immediately jump between...
The plugin Advanced Custom Fields in its Pro version comes with the option to add a “Repeater Field.” The Repeater Field allows the user to add an unlimited number of rows to a post or page in WordPress. This...
CSS is a powerful language that allows web developers to control the presentation of a web page. Among the various features CSS offers, the function stands out as a valuable tool for efficiently managing repetitive patterns in layouts and...
Returning to 2011, the parallax scrolling effect created buzz and emerged as a new trend in websites design. Many trends have come and gone since then, but this effect has established its place and is not planning to leave...
