网页页面样式测试工具_帮助您设置网页样式的工具-CSDN博客

网页页面样式测试工具

色彩 (Colors)

冷却器 (Coolors)

Coolors creates color palettes with colors that are coordinated to work together. Coolors allows users to customize their color palettes. Users can also choose some colors for a palette and let Coolors fill in the rest of the palette.

冷却器创建的调色板具有可以协同工作的颜色。冷却器允许用户自定义其调色板。用户还可以为调色板选择一些颜色，然后让Coolors填充调色板的其余部分。

Coolors also allows users to build a color palette from an image.

冷却器还允许用户从图像构建调色板。

Each color can be precisely selected by adjusting the temperature, hue, saturation, and brightness of a color.

可以通过调整颜色的温度，色相，饱和度和亮度来精确选择每种颜色。

Users can export their color palettes as PNGs, PDFs, SCSSs, and other forms. Users can also create profiles and can save and organize their color palettes.

用户可以将其调色板导出为PNG，PDF，SCSS和其他形式。用户还可以创建配置文件，并可以保存和组织其调色板。

Adobe颜色 (Adobe Color)

Like Coolors, Adobe Color creates a color palette. Adobe Color is unique in that it allows users to generate palettes around a single base color. Each color can easily be adjusted and when a color is adjusted, the other colors in the palette automatically adjust to ensure the colors work well together. The program can be used to target various relationships between colors, such as analogous, complementary, monochromatic, and more.

与Coolors一样，Adobe Color可以创建调色板。 Adobe Color的独特之处在于，它允许用户围绕单一基色生成调色板。每种颜色都可以轻松调整，并且在调整颜色后，调色板中的其他颜色会自动调整以确保这些颜色可以很好地协同工作。该程序可用于确定颜色之间的各种关系，例如类似，互补，单色等。

As with Coolors, Adobe Color also allows users to extract a color palette from an image.

与Coolors一样，Adobe Color也允许用户从图像中提取调色板。

背景资料 (Backgrounds)

SVG背景 (SVG Backgrounds)

This is a very easy way to make interesting, colorful backgrounds for web pages. The website has a variety of pre-made backgrounds, each of which can be customized. For each background there is a CSS output which is displayed and updates in response to the backgrounds being customized. The CSS can easily be inserted into a style sheet.

这是制作网页有趣，彩色背景的一种非常简单的方法。该网站具有各种预制的背景，每种背景均可定制。对于每个背景，都会显示一个CSS输出，并根据定制的背景进行更新。 CSS可以轻松插入样式表中。

网络渐变 (Web Gradients)

This website has many pre-made beautiful gradients. Any gradient can easily be selected, showing the CSS for the gradient. This CSS can then be used in the “background-color” CSS property.

该网站有许多预制的美丽渐变。可以轻松选择任何渐变，并显示渐变CSS。然后可以在“ background-color” CSS属性中使用此CSS。

网站图示 (Favicons)

Favicon.io (Favicon.io)

Favicon.io allows users to easily create their own personalized favicon. Users can create their favicons from text, which they can customize, from an image, or even from an emoji. Users can then download their favicon as an ICO or PNG. Favicon.io also allows users to generate logos.

Favicon.io允许用户轻松创建自己的个性化图标。用户可以从可以自定义的文本，图像甚至表情符号创建图标集。然后，用户可以将其图标下载为ICO或PNG。 Favicon.io还允许用户生成徽标。

动画制作 (Animations)

悬停 (Hover.css)

Hover.css is a CSS library which was created with CSS3. It contains a variety of hover effects and animations. These effects and animations can be applied to links, buttons, logos, SVG, featured images and other elements.

Hover.css是使用CSS3创建CSS库。它包含各种悬停效果和动画。这些效果和动画可以应用于链接，按钮，徽标，SVG，特色图像和其他元素。

Hover.css is easy to use. It allows users to simply copy and paste the CSS for a desired effect into their stylesheet.

Hover.css易于使用。它允许用户简单地将CSS粘贴并粘贴到他们的样式表中以获得所需的效果。

图片 (Images)

Unsplash (Unsplash)

Unsplash has thousands of beautiful images that you can download and use completely for free and without making an account.

Unsplash具有数千张精美的图片，您可以免费下载并完全免费使用，而无需注册帐户。

像素 (Pexels)

Pexels is another website that is great for finding beautiful images that can be downloaded and used for free. It also does not require users to make an account.

Pexels是另一个网站，非常适合查找可以免费下载和使用的精美图像。它也不需要用户注册。