css圆角三角形3个圆角

tech2024-04-19  7

css圆角三角形3个圆角

As you may well have noticed by now, our new advanced CSS book — The Art & Science Of CSS — has been officially released across the site, although it’s been available for a little while if you’d looked.

您可能已经注意到,我们新的高级CSS书籍-CSS 的艺术与科学 -已在整个网站上正式发行,不过如果您看过一会儿也可以买到。

If you’re interested but held off purchasing till now, you’re in luck. Use this link to get a $10 discount on The Art & Science of CSS PLUS select a free poster of your choice (DHTML/CSS/Linux/PHP).

如果您有兴趣但一直推迟购买,那么您很幸运。 使用此链接可在Art + Science CSS PLUS上获得10美元的折扣,选择免费的海报(DHTML / CSS / Linux / PHP) 。

The Art & Science Of CSS + Free Poster = $29.95 + Shipping

CSS的艺术与科学+免费海报 = $ 29.95 +运费

Make no mistake: this offer auto-expires a week from today, so don’t wait too long if you want to use this discount link.

没错: 此优惠从今天起自动过期,因此,如果您想使用此折扣链接,请不要等待太久。

Onto the book’s content.

书中的内容。

An entire chapter of Art & Science (chapter 6) is dedicated to the implementation of rounded corners. Looking at all the online tools, articles, blog posts, head scratching and sometime teeth-gnashing focussed on the issue over the last 5 years, it is probably not all that surprising.

《艺术与科学》的完整章节(第6章)专门介绍圆角的实现。 回顾过去5年中针对该问题的所有在线工具,文章,博客文章,抓头和有时咬牙切齿的情况,这也许并不奇怪。

However, as Jina demonstrated in her ‘Breaking Out of the Box‘ feature article, it’s easy to forget sometimes that many of the techniques filed under ’rounded corners’ are capable of much more than plain old curved boxes. An example I really liked from the book was this (left) faux silver-plated, art noveau frame.

但是,正如Jina在她的“ 打破常规 ”专题文章中所展示的那样,有时很容易忘记,在“圆角”下提出的许多技术比普通的老式弯曲盒子具有更多的功能。 我从书中真正喜欢的一个例子是这种(左)人造银镀银的新艺术风格框架。

To get you thinking outside the rounded square, I thought we might look at some alternative non-rounded corner design options with an ‘olde worlde feel(ey)’.

为了让您在圆角正方形之外思考,我想我们可能会考虑一些另类的非圆角设计选项,它们具有“ 老式的感觉 (ey)”。

1) Maps

1) 地图

Kings and queens always loved a good map and happily paid a mint for them, so cartography has always attracted the most highly-skilled artisans of their day . These people took great pride in their finished product and their work rarely lacked for fascinating detail or thoughtful decoration.

国王和王后一直喜欢一张精美的地图,并为他们高兴地付出了代价,因此制图学一直吸引着当时最熟练的工匠。 这些人以他们的制成品感到骄傲,他们的工作很少因迷人的细节或周到的装饰而缺少。

There are a number of antique map sites out all containing plenty of potential inspiration.

有许多古董 地图 站点 ,它们都包含许多潜在的灵感。

2). Art Deco

2)。 艺术装饰

The linearity of much art deco seems to make it perfect for translating into CSS layouts, so it’s little bit of a surprise that it’s been used so sparingly in online design till now. Fortunately for us a lot of art deco/art nouveau design has already been translated into ready to use vectors or fonts. Golden Studios sell an impressive range of vector borders and old Americana style art perfect for translating into online design. You can also find a nice selection at Specialty Fonts that may get your thought processes turning over.

许多装饰艺术的线性似乎使其非常适合转换为CSS布局,因此,到目前为止,它在在线设计中如此稀少地使用还不足为奇。 对我们来说幸运的是,许多装饰艺术/新艺术风格设计已经转化为可以使用的矢量或字体。 Golden Studios出售各种令人印象深刻的矢量边框和古老的美国风格艺术,非常适合转化为在线设计。 您还可以在“ 特殊字体”中找到不错的选择,这可能会使您的思考过程翻过来。

3). Comics and Hand-drawn Art

3)。 漫画和手绘艺术

Although comic books would appear to be the epitome of box design, I think there’s something nice about the loose, imperfect way their boxes are drawn — especially to eyes that are used to the laser sharp lines of most HTML. Comic book cell borders constantly over shoot their corner point and nothing is ever quite perfectly perpendicular.

尽管漫画似乎是框设计的缩影,但我认为框的松散,不完美的绘制方式还是有好处的,特别是对于大多数HTML的激光锐利线条习惯的眼睛而言。 漫画单元格边框不断在拍摄他们的角点,没有什么是以往任何时候都相当完美的垂直。

Of course, that’s the charm, and it wouldn’t be terribly difficult to distill that organic, loose feel down into a flexible CSS layout using one of the standard rounded corners techniques.

当然,这就是魅力,使用一种标准的圆角技术将有机的,松散的感觉提炼成灵活CSS布局并不是很难。

Two things I try to keep in mind when using these types of design tricks. Firstly, no matter how hard you try, distinctive style elements like these are not going to suit every project. Trying to give a PC retailers website a ‘Victoriana’ feel is probably not going to work — unless you’re a design genius.

使用这些类型的设计技巧时,我要牢记两件事。 首先,无论您多么努力,像这样的独特风格元素都不适合每个项目。 除非您是一名设计天才,否则尝试使PC零售商网站具有“维多利亚”的感觉可能不会起作用。

Secondly, try not to be too literal when referencing past work. For example, if you’re using cartographic imagery to flavor a new blog design, don’t try to recreate the whole map in the design — pick a couple of nice elements to spice things up, and then play them down in the design.

其次,在参考过去的工作时,不要太直率。 例如,如果您使用制图图像来修饰新的博客设计,请不要尝试在设计中重新创建整个地图-选择几个不错的元素来使事情变得有趣,然后在设计中将它们淡化。

Of course, there are almost endless possibilities. Hopefully this has been something to get your mind ticking over at least.

当然,几乎有无限的可能性。 希望这至少可以让您精打细算。

** P.S. Don’t forget: If you want the book, make sure you use this link to lock in the $10.00 discount.

** PS别忘了: 如果您想要这本书,请确保使用此链接锁定$ 10.00的折扣 。

翻译自: https://www.sitepoint.com/the-art-science-of-css-rounded-corners-and-beyond/

css圆角三角形3个圆角

相关资源:jdk-8u281-windows-x64.exe
最新回复(0)