技术控

    今日:161| 主题:49347
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] A Redesign with CSS Shapes

[复制链接]
queen女王 发表于 2016-10-5 08:14:36
168 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Here at An Event Apart (an A List Apart sibling) we recently refreshed the design of our “ Why Should You Attend? ” page, which had retained an older version of our site design and needed to be brought into alignment with the rest of the site. Along the way, we decided to enhance the page with some cutting-edge design techniques: non-rectangular float shapes and feature queries.
   Article Continues Below
   To be clear, we didn’t set out to create a Cutting Edge Technical Example™; rather, our designer (Mike Pick of Monkey Do ) gave us a design, and we realized that his vision happened to align nicely with new CSS features that are coming into mainstream support. We were pleased enough with the results and the techniques that we decided to share them with the community.
  Styling bubbles

   Here are some excerpts from an earlier stage of the designs ( Fig. 1 ). (The end-stage designs weren’t created as comps, so I can’t show their final form, but these are pretty close.)
     
A Redesign with CSS Shapes-1 (css,shapes,css,shapes,editor,fun,with,shapes,redesign,redesign,my,brain)
      Fig 1: Late-stage design comps showing “desktop” and “mobile” views.       What interested me was the use of the circular images, which at one point we called “portholes,” but I came to think of as “bubbles.” As I prepared to implement the design in code, I thought back to the talk Jen Simmons has been giving throughout the year at An Event Apart. Specifically, I thought about CSS Shapes and how I might be able to use them to let text flow along the circles’ edges—something like Fig. 2 .

A Redesign with CSS Shapes-2 (css,shapes,css,shapes,editor,fun,with,shapes,redesign,redesign,my,brain)
      Fig 2: Flowing around a circular shape.       This layout technique used to be sort of possible by using crude float hacks like Ragged Float andSliced Sandbags, but now we have float shapes! We can define a circle—or even a polygon—that describes how text should flow past a floated element.
  “Wait a minute,” you may be saying, “I haven’t heard about widespread support for Shapes!” Indeed, you have not. They’re currently supported only in the WebKit/Blink family—Chrome, Safari, and Opera. But that’s no problem: in other browsers, the text will flow past the boxy floats the same way it always has. The same way it does in the design comps, in fact.
  The basic CSS looks something like this:
  [code]img.bubble.left {
    float: left; margin: 0 40px 0 0 ;
    shape-outside: circle(150px at 130px 130px);
    }
img.bubble.right {
    float: right; margin: 0 0 0 40px;
    shape-outside: circle(150px at 170px 130px);
    }[/code]  Each of those bubble images, by the way, is intrinsically 260px wide by 260px tall. In wide views like desktops, they’re left to that size; at smaller widths, they’re scaled to 30% of the viewport’s width.
  Shape placement

  To understand the shape setup, look at the left-side bubbles. They’re 260×260, with an extra 40 pixels of right margin. That means the margin box (that is, the box described by the outer edge of the margins) is 300 pixels wide by 260 pixels tall, with the actual image filling the left side of that box.
   This is why the circular shape is centered at the point 130px 130px —it’s the midpoint of the image in question. So the circle is now centered on the image, and has a radius of 150px . That means it extends 20 pixels beyond the visible outer edge of the circle, as shown here ( Fig. 3 ).
12345下一页
更多图片 小图 大图
组图打开中,请稍候......
友荐云推荐




上一篇:收集移动端开发所需要的一些资源与小技巧
下一篇:The week in .NET – On .NET on Cecil – NAudio – SpeechCentral – Hand of Fate ...
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

zttao8p47 发表于 2016-10-5 21:32:04
回帖无节操
回复 支持 反对

使用道具 举报

idouba 发表于 2016-11-6 11:04:50
很不错,谢谢queen女王的分享
回复 支持 反对

使用道具 举报

ja0ol 发表于 2016-11-9 08:00:52
有的人,做面膜的时候,比真人好看多了。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表