-
Create a Chrome Logo using HTML and CSS
Here’s an example introduction that includes how to create a Chrome logo using HTML and CSS. Decomposition of Graphs The chrome logo can be deconstructed into several distinct graphical elements, as illustrated below. radial-gradient The central circle exhibits a gradient transition from blue to white, followed by a transparent hue, and is further complemented by an underlying orange color. This outcome can be achieved: In this context, the term “closest-side” is employed to refer to the nearest edge. The default value is “farthest-side”. Further options are elaborated upon below. value description closest-side The termination position is determined by the closest edge of the container to the gradient center. closest-corner The…
-
New Twitter Logo (X) in Pure CSS
In this tutorial, I will create a new twitter logo (X) in pure css. Recently, Twitter unveiled a new logo, replacing the blue bird with an “X”, as depicted below. The rendering of x The entire logo consists of a hollow “x” shape. Disregarding the hollow portion, how can a solid “x” be rendered? There are three types of gradients: linear gradient, radial gradient, and conical gradient. It is evident that the x element can be viewed as a line segment with inclined ends, thus a linear gradient is sufficient. Assuming the HTML structure is as follows, an x element. Next, a diagonal line is drawn using a linear gradient, which transitions from…
-
Use CSS to Hide Scrollbars on iOS
In this article, we will discover how to use CSS to hide scrollbars on iOS. In mobile development, it is common to encounter scenarios that require horizontal scrolling, for eaxmple: However, in many cases, it is not necessary to display this scrollbar, resulting in the following effect: One possible solution that may come to mind is to directly modify the style of the scroll bar, as demonstrated below: Currently, there appear to be no apparent issues, but it is ineffective on certain versions of iOS as the scrollbar continues to appear. Are there any alternative methods to resolve this issue? The following methods will be introduced below. Using overflow Below…
-
Easing Functions for Animation
In this article, we will delve into the core principles of easing functions for animation, exploring their mathematical foundations and how they contribute to creating seamless and captivating animations. Basic Principle Assuming an object in motion, positioned at 100 meters on a track, preparing to move forward to 250 meters, with a planned duration of 2 seconds. We initiate the timing at 0 seconds. As time progresses, the relationship between its position and the current time can be represented by the following function (equation): The meaning of each parameter is as follows: The principle of this formula is to divide the elapsed duration of the movement by the total duration…
-
Code Signing and Notarize on macOS with electron-builder
Introduction Code signing plays a crucial role in ensuring the integrity and security of software applications, including Electron apps. By digitally signing your Electron app, you can establish trust, reduce warning messages, and enhance the user experience. In this article, we will guide you through the process of implementing code signing and notarize on macOS with electron-builder. Starting from macOS 10.14.5, applications are required to undergo both signing and notarization processes in order to be directly executed. Failure to comply with these requirements will result in a warning message being displayed: Alternatively, there may be Chinese prompts displayed: 无法打开“Appname.app”，因为无法验证开发者。macOS 无法验证此 App 不包含恶意软件。 To address this issue, it is necessary to…
-
EV/OV Code Signing On Mac or Windows with electron-builder
Introduction Code signing plays a crucial role in ensuring the integrity and security of software applications, including Electron apps. By digitally signing your Electron app with an EV/OV Code Signing Certificate, you can establish trust, reduce warning messages, and enhance the user experience. In this article, we will guide you through the process of implementing EV/OV code signing on Mac or Windows with electron-builder. Differences between EV certificate and OV certificate Microsoft offers two different types of certificates for digital code signing: the Extended Validation Code Signing Certificate (EV) and the Organization Validation Code Signing Certificate (OV). These certificates are utilized to authenticate the origin and integrity of software. 1.…
-
Yaml Best tutorial: Syntax and Configuration Examples
Introduction YAML (YAML Ain’t Markup Language) is a human-readable data serialization format commonly used for configuration files, data exchange, and structured data representation. This tutorial aims to provide a comprehensive introduction to YAML, covering its syntax, data structures, and configuration examples. Furthermore, it is possible to convert between YAML and JSON formats. File structure YAML files can consist of one or multiple documents, each with its own independent organizational structure. The documents are separated by “—” at the beginning of each document. Additionally, a document can be terminated with “…” as an optional ending marker. If there is only a single document, the separator “—” can be omitted. While it…
-
Glob Patterns Examples and Syntax
Introduction Glob patterns, also known as wildcard patterns or globbing patterns, are invaluable tools for matching and manipulating filenames and paths in a filesystem. They provide a flexible and efficient way to specify patterns and perform operations on multiple files at once. In this article, we will discover glob patterns examples and syntax and how they can be used in various programming languages and tools. Glob Patterns Syntax At its core, a glob pattern is a string pattern that uses special characters called wildcards to represent variable parts of filenames or paths. These wildcards allow us to match filenames based on specific patterns rather than exact names. The most commonly…
-
The Basics and Principles of the Base64 Algorithm
Introduction Base64 is a collection of binary-to-text encoding schemes that are utilized to represent binary data in an ASCII string format through the translation of the data into a radix-64 representation. It uses the following alphabet to represent the radix-64 digits, alongside “=” as a padding character A-Z, a-z, 0-9, +, / In URLs, certain characters such as /, ?, and # have special meanings. To optimize the encoding of binary data in URLs, URL Base64 encoding replaces the characters + and / with – and _ to avoid characters that might cause problems in URL path segments or query parameters. Base64 encoding schemes are commonly used to encode binary data for…
-
How to make responsive image (srcset, sizes)
There are many solutions for responsive images, which can be implemented using JavaScript and CSS. This article introduces the simplest and most semantically correct HTML method, natively supported by browsers. Pixel density selection: srcset attribute To solve the problems mentioned in the previous section, HTML provides a complete solution. First, the <img> tag introduces the srcset attribute. The srcset attribute is used to specify multiple images that adapt to different pixel densities of screens. Its value is a comma-separated string, where each part is the URL of an image, followed by a space, and then a descriptor for the pixel density. The condition descriptor may take one of two forms…