當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

ui svg 转纯svg_带有SVG和边框图像的高科技UI元素

發(fā)布時(shí)間：2024/3/26 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 ui svg 转纯svg_带有SVG和边框图像的高科技UI元素小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

ui svg 轉(zhuǎn)純svg

It’s uncertain when the design motif originated - perhaps with the original 1980’s Battlestar Galactica TV series - but there’s something about clipped corners that screams “high tech” to viewers. Unfortunately, creating that appearance has been rather difficult in web design. Lea Verou outlined some clever ways to achieve clipped corners in her recent CSS Secrets book, but I thought up a few alternatives:

尚不清楚該設(shè)計(jì)主題是何時(shí)產(chǎn)生的-也許是1980年的太空堡壘卡拉狄加電視劇集的最初版本-但彎角處有一些東西向觀眾大叫“高科技”。不幸的是，在網(wǎng)頁(yè)設(shè)計(jì)中創(chuàng)建這種外觀非常困難。 Lea Verou在她最近的《 CSS Secrets 》 ( CSS秘密)書中概述了一些巧妙的方法來(lái)實(shí)現(xiàn)快速發(fā)展，但是我想出了一些替代方法：

為什么不使用背景圖像？ (Why Not Use Background Images?)

An instinctual reaction to this design goal might be to use background-image. Unfortunately, there are a few problems with that approach:

對(duì)本設(shè)計(jì)目標(biāo)的本能React可能是使用background-image 。不幸的是，這種方法存在一些問(wèn)題：

size and resolution are obviously factors, unless you use SVG.
大小和分辨率顯然是因素，除非您使用SVG 。
whatever you do with it, the effect will almost certainly stretch in odd ways as the viewport is resized.
無(wú)論您使用它做什么，隨著調(diào)整視口大小，效果幾乎肯定會(huì)以奇怪的方式擴(kuò)展。
it’s difficult to get a truly transparent clipped corner while making the rest of the element solid.
在使元素的其余部分牢固的同時(shí)，很難獲得真正透明的剪切角。

SVG, coupled with border-image, addresses all of those limitations.

SVG加上border-image可解決所有這些限制。

支撐角 (Braced Corners)

The first example shows not clipped, but “braced” corners. This is achieved by using a primitive SVG polyline, duplicated three times:

第一個(gè)示例顯示的不是修剪，而是“支撐”的角。這是通過(guò)使用原始的SVG折線 (重復(fù)三次)實(shí)現(xiàn)的：

The SVG viewport is a 10 × 10 unit box, and the SVG is sized to 100px × 100px.

SVG視口是一個(gè)10×10的單位框，SVG的大小為100px×100px。

Note that the copies are rotated around the center of the SVG (i.e. at coordinates 5, 5). You may want to provide the brace with a different stroke and change it later, as otherwise you’ll likely see white polylines on a white background when looking at the SVG by itself, i.e. nothing at all.

請(qǐng)注意，副本圍繞SVG的中心旋轉(zhuǎn)(即在坐標(biāo)5、5)。您可能需要為支架提供不同的筆觸，然后再進(jìn)行更改，否則，單獨(dú)查看SVG時(shí)，您可能會(huì)在白色背景上看到白色的折線，也就是一無(wú)所獲。

This SVG is applied to a container element as a border-image; in this case, that element is a <div> with an id of braced-corners:

該SVG作為border-image應(yīng)用于容器元素；在這種情況下，該元素是id為braced-corners的<div> ：

* { box-sizing: border-box; } #braced-corners { border-image: url(brace.svg) 50 50; background-color: rgba(255,255,255,0.3);border-style: inset;border-width: 30px;transition: .8s; }

A few notes:

一些注意事項(xiàng)：

unlike bitmaps, when border-image uses an SVG the units following the URL are interpreted as percentages, not pixels
與位圖不同，當(dāng)border-image使用SVG時(shí)，URL后的單位被解釋為百分比，而不是像素
in this case, the 50 50 implies that the SVG is divided into even quadrants, with the “cut lines” at 50% and 50% slicing through the exact center of the element vertically and horizontally.
在這種情況下， 50 50表示將SVG劃分為偶數(shù)象限，其中“切割線”分別以50％和50％的比例沿垂直和水平方向穿過(guò)元素的確切中心。
Firefox insists on a border-style being present in the declaration, even though the inset effect will not be visible.
Firefox堅(jiān)持在聲明中使用border-style ，即使inset效果將不可見(jiàn)。
the border-width determines the “extent” of the bracing; increasing it will “push” the content deeper into its container while making the braces larger.
border-width決定支撐的“范圍”；增加它可以將內(nèi)容“推”到更深的容器中，同時(shí)使括號(hào)更大。
transition isn’t necessary at this point, but will be used in a moment.
transition在這一點(diǎn)上不是必需的，但稍后會(huì)使用。

We can also use SVG to create a grid background for the container as a separate file, which I’ll call grid.svg:

我們還可以使用SVG為容器創(chuàng)建一個(gè)網(wǎng)格背景作為單獨(dú)的文件，我將其稱為grid.svg ：

In this case, the grid is made up of almost completely transparent white lines. Applied to the same container element in CSS:

在這種情況下，網(wǎng)格由幾乎完全透明的白線組成。應(yīng)用于CSS中的同一容器元素：

#braced-corners { background-image: url(grid.svg);padding: 0 2% 0 2%;background-size: 3%; }

Interestingly, we can transition both on hover to provide a “focus” effect, which you can see in the example above:

有趣的是，我們可以在懸停時(shí)進(jìn)行過(guò)渡，以提供“焦點(diǎn)”效果，您可以在上面的示例中看到：

#braced-corners:hover {border-image: url(brace.svg) 25 25; background-size: 2%; }

Unfortunately, Firefox messes this up by replicating the braces across the edges of the container on focus, an issue that needs more work and attention.

不幸的是，Firefox通過(guò)在焦點(diǎn)對(duì)準(zhǔn)容器邊緣的位置復(fù)制括號(hào)來(lái)解決這個(gè)問(wèn)題，這個(gè)問(wèn)題需要更多的工作和關(guān)注。

夾角 (Clipped Corner)

The original clipped corner effect takes a similar approach. First, the basic shape is created as a file named clipped-corner.svg:

原始的修剪角效果采用類似的方法。首先，將基本形狀創(chuàng)建為名為clipped-corner.svg的文件：

Visually, the SVG looks like this (filled with black for visibility):

在視覺(jué)上，SVG看起來(lái)像這樣(用黑色填充可見(jiàn)性)：

It’s then applied to the container element:

然后將其應(yīng)用于容器元素：

#clipped-corners {border-image: url(clipped-corner.svg) 50 50 repeat repeat; border-style: outset;border-width: 25px; }

There’s just one problem: true to its name, the border-image takes care of the border of the element, not it’s interior, creating a result that looks like this:

有一個(gè)問(wèn)題：真正意義上的border-image照顧元素的邊界，而不是內(nèi)部的邊界，從而產(chǎn)生一個(gè)看起來(lái)像這樣的結(jié)果：

This presents something of a quandary: we can’t use background-color to fill the space, as that will also flood the cut-off corner. I hit on the idea of using an inset box-shadow with the same color as the SVG border-image:

這帶來(lái)了一個(gè)難題：我們不能使用background-color來(lái)填充空間，因?yàn)檫@也會(huì)淹沒(méi)截止角。我想到了使用與SVG border-image相同顏色的插入box-shadow的想法：

#clipped-corners {box-shadow: inset rgba(255,255,255,0.3) 0 0 0 250px; }

Using an appropriate amount of spread with no blur, this fills the center of the container without affecting the corners. The background-image of the grid can then be applied as normal: the cut-off corner will always appear as a 45° angle, even as the elements are resized.

使用適當(dāng)數(shù)量的spread而不會(huì)模糊，這將填充容器的中心而不會(huì)影響角落。然后可以正常應(yīng)用網(wǎng)格的background-image ：即使調(diào)整了元素的大小，截止角也會(huì)始終顯示為45°角。

Eagle-eyed readers may notice that the grid background image actually flows over the cut-off corner. This could be taken care of with clip-path, but the CSS implementation currently does not cut-off background images.

鷹眼的讀者可能會(huì)注意到，網(wǎng)格背景圖像實(shí)際上在截止角上流動(dòng)。可以使用clip-path ，但是CSS實(shí)施目前不能切斷背景圖像。

翻譯自: https://thenewcode.com/17/High-Tech-UI-Elements-with-SVG-and-Border-Image

ui svg 轉(zhuǎn)純svg

總結(jié)

以上是生活随笔為你收集整理的ui svg 转纯svg_带有SVG和边框图像的高科技UI元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： java-htttp-远程访问之Rest
下一篇：电力系统谐波的产生与危害