Home Web Front-end CSS Tutorial Comprehensive introduction to css gradient colors, omission tags, embedded fonts, and text shadows

Comprehensive introduction to css gradient colors, omission tags, embedded fonts, and text shadows

Jul 02, 2018 am 10:28 AM
text mark Gradient shadow

The following article brings you a comprehensive understanding of CSS gradient color, omitted tags, embedded fonts, and text shadows. The content is quite good, so I will share it with you now and give it as a reference.

1. Gradient color

CSS3 Gradient is divided into linear gradient(linear)and Radial gradient(radial). Since different rendering engines have different syntax for implementing gradients, here we only analyze its usage based on the W3C standard syntax of linear gradients. You can refer to relevant information for the rest. W3C syntax has been supported by browsers such as IE10, Firefox19.0, Chrome26.0 and Opera12.1.

In this section, let’s talk about Linear gradient:

## Parameters:

The first parameter:

Specify the gradient direction, which can be represented by the keyword "angle" or "English":

(Click the image to enlarge)

When the first parameter is omitted, the default is "180deg", which is equivalent to "to bottom".

The second and third parameters,

represents the starting point and end point of the color, which can have multiple color values.

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
Copy after login

Rendering:

2, text-overflow and word-wrap

text-overflow is used to set whether to use an omission mark (...) to mark the overflow of text within the object.

Grammar:

But text-overflow is only used to explain how to display text when it overflows. To achieve the effect of producing an ellipsis when overflowing, you must Define the forced text to be displayed in one line (white-space:nowrap) and the overflow content to be hidden (overflow:hidden). Only in this way can the effect of displaying ellipses in the overflow text be achieved. The code is as follows:

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
Copy after login

At the same time, word- Wrap can also be used to set text behavior, whether to break and break when the current line exceeds the boundary of the specified container.

Syntax:

normal is the browser default value, break-word is set to wrap within long words or URL addresses, This attribute is not commonly used, so just use the browser default value.

3. Embed font @font-face

@font-face can load the server-side font file so that the browser can display the user There are no fonts installed on the computer.

Syntax:

@font-face {

font-family: font name;
src: relative or absolute path to the font file on the server ;
}

After setting this, you can set the font style in (font-*) just like using a normal font.

For example:

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项,设置@font-face中font-family同样的值*/
}
Copy after login

4. Text-shadow

text-shadow can Used to set the shadow effect of text.

Syntax:

text-shadow: X-Offset Y-Offset blur color;X-Offset: represents the horizontal offset distance of the shadow, its value is positive When the shadow is offset to the right, otherwise it is offset to the left;

Y-Offset: refers to the vertical offset distance of the shadow. If its value is positive, the shadow is offset downward, otherwise it is offset upward ;

Blur: refers to the blurring degree of the shadow, and its value cannot be a negative value. The larger the value, the blurr the shadow, and conversely the clearer the shadow. If the shadow blur is not needed, the Blur value can be set to 0;

Color: refers to the color of the shadow, which can use rgba color.

For example, we can use the following code to set the shadow effect.

text-shadow: 0 1px 1px #fff
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Two commonly used functions of CSS3 rounded corners and gradients

CSS3 realizes background transparency and text opaqueness Effect

Implementation of linear color gradient in CSS3

The above is the detailed content of Comprehensive introduction to css gradient colors, omission tags, embedded fonts, and text shadows. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to mark minesweeper? -How to change the difficulty of Minesweeper? How to mark minesweeper? -How to change the difficulty of Minesweeper? Mar 18, 2024 pm 06:34 PM

How to mark minesweeper? First, we need to familiarize ourselves with the marking method in Minesweeper. Normally, there are two common marking methods in Minesweeper games: flag marking and question mark marking. The flag mark is used to indicate that there are mines in the block and is a deterministic mark; while the question mark mark indicates that there may be mines in the block, but it is not deterministic. These two marking methods play an important role in the game, helping players to infer which blocks may contain mines, so as to effectively proceed to the next step. Proficient use of these marking methods can improve the player's success rate in the minesweeper game and reduce the risk of stepping on mines. Therefore, when playing the minesweeper game, if the player has mastered the flag mark and question mark mark, when the player is not sure whether there is a mine in a certain square, he can use the question mark mark to mark it.

How to mark multiple locations on Baidu Maps How to mark multiple locations How to mark multiple locations on Baidu Maps How to mark multiple locations Mar 15, 2024 pm 04:28 PM

There are many functions above, especially for maps that can mark multiple places. When we know some places, we will definitely use some punctuation functions, so that we can bring you a variety of different aspects. Some of the functions you mark will produce distance differences, that is, you can know how far away they are. Of course, some names and detailed information of the above places will also be displayed. However, many netizens may not be familiar with some of the above. The content information is not very clear, so in order to allow everyone to make better choices in various aspects, today the editor will bring you some choices in various aspects, so friends who are interested in ideas, If you are also interested, come and give it a try. Standard

Detailed explanation of how to deal with all font shadows in Win10 computer Detailed explanation of how to deal with all font shadows in Win10 computer Jul 23, 2023 pm 11:13 PM

In the process of using the computer, some problems may occur due to improper operation and other situations. Recently, some netizens said that what to do with all the font shadows on their win10 computers, which affects viewing, and the icons on the desktop have shadows. The editor below will teach you how to clear all font shadows on your computer desktop. The specific steps are as follows: 1. First turn on the computer, enter the win+r key combination, open the run window, and enter gpedit.msc to confirm. 2. Find Enable ActiveDesktop, double-click it to open it, and disable it. 3. Next we need to open the disable ActiveDesktop button below, and then enable it. 4. Then open the system of the control panel, open its advanced system settings properties, and then enter the Properties

How to mark strikethrough text in HTML? How to mark strikethrough text in HTML? Aug 25, 2023 pm 10:45 PM

To mark strikethrough text in HTML, use the <strike>…</strike> tag. It will render a strikethrough text. This tag has been deprecated by HTML and should not be used in HTML5. As an alternative, you can use the CSS text-decoration property. To use CSS properties, use the style attribute. The style attribute specifies inline styles for the element. This attribute can be used with the HTML <p> tag. Keep in mind that HTML5 does not support the <strike> tag, so CSS styling should be used. Example you can try running the following

What to do if win7 system cannot open txt text What to do if win7 system cannot open txt text Jul 06, 2023 pm 04:45 PM

What should I do if win7 system cannot open txt text? When we need to edit text files on our computers, the easiest way is to use text tools. However, some users find that their computers cannot open txt text files. So how to solve this problem? Let’s take a look at the detailed tutorial to solve the problem of unable to open txt text in win7 system. Tutorial to solve the problem that win7 system cannot open txt text. 1. Right-click any txt file on the desktop. If there is no txt file, you can right-click to create a new text document, and then select properties, as shown below: 2. In the opened txt properties window , find the change button under the general options, as shown in the figure below: 3. In the pop-up open mode setting

Try new ringtones and text tones: Experience the latest sound alerts on iPhone in iOS 17 Try new ringtones and text tones: Experience the latest sound alerts on iPhone in iOS 17 Oct 12, 2023 pm 11:41 PM

In iOS 17, Apple has overhauled its entire selection of ringtones and text tones, offering more than 20 new sounds that can be used for calls, text messages, alarms, and more. Here's how to see them. Many new ringtones are longer and sound more modern than older ringtones. They include arpeggio, broken, canopy, cabin, chirp, dawn, departure, dolop, journey, kettle, mercury, galaxy, quad, radial, scavenger, seedling, shelter, sprinkle, steps, story time , tease, tilt, unfold and valley. Reflection remains the default ringtone option. There are also 10+ new text tones available for incoming text messages, voicemails, incoming mail alerts, reminder alerts, and more. To access new ringtones and text tones, first, make sure your iPhone

Using large models to create a new paradigm for text summary training Using large models to create a new paradigm for text summary training Jun 10, 2023 am 09:43 AM

1. Text task This article mainly discusses the method of generative text summarization, and how to use contrastive learning and large models to implement the latest generative text summarization training paradigm. It mainly involves two articles, one is BRIO: Bringing Order to Abstractive Summarization (2022), which uses contrastive learning to introduce ranking tasks in the generative model; the other is OnLearning to Summarize with Large Language Models as References (2023), which further introduces large models to generate high-quality training data based on BRIO. 2. Generative text summarization training methods and

How to mark on Baidu map - specific operations of marking on Baidu map How to mark on Baidu map - specific operations of marking on Baidu map Mar 04, 2024 pm 08:46 PM

Are you also using Baidu map software on your computer? But do you know how to mark Baidu map? The following article brings you the specific operation of Baidu map mark. Let us take a look below. After entering the Baidu map, click on the upper right corner to select the region, as shown in the figure. After selecting the region, select the tool in the map, as shown in the figure. Select the mark in the map, as shown in the figure. Mark the map you want to mark. Here we use the front of Xicheng District, Beijing. Take No. 33 Qingchang Hutong as an example. Just select and save as shown in the picture.

See all articles