Ubuntu HTML5 UI SDK

Ubuntu Shape does not scale

Bug #1243396 reported by Adnane Belmadiaf
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Ubuntu HTML5 UI SDK
Fix Released
Medium
Adnane Belmadiaf

Bug Description

We need a scalable Ubuntu Shape, so we have two options :

- Make the shape with CSS
- Make the shape with SVG and apply it using -webkit-mask (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask)

Related branches

lp:~daker/ubuntu-html5-theme/fix.1243396
Ubuntu HTML5 Theme Developers: Pending requested
Diff: 128 lines (+44/-45)
2 files modified
0.1/ambiance/css/shapes.css (+4/-3)
examples/html5-theme/widgets/UbuntuShape.html (+40/-42)
Adnane Belmadiaf (daker)
Changed in ubuntu-html5-theme:
status: New → Triaged
importance: Undecided → Medium
Revision history for this message
Adnane Belmadiaf (daker) wrote :

FYI http://design.canonical.com/2013/10/indented-styles-and-the-ubuntu-shape/

Revision history for this message
Adnane Belmadiaf (daker) wrote :

here is the fix preview http://i.imgur.com/nl4beub.png but it still limited to 240px width/height

Changed in ubuntu-html5-theme:
assignee: nobody → Adnane Belmadiaf (daker)
status: Triaged → In Progress
Revision history for this message
Stuart Langridge (sil) wrote :

It may be easier to just use border-radius, which means that the browser engine does all the work.

See http://jsbin.com/taliqapu/1/edit for a live example, or the code as pasted below. Border-radius comes very, very, very close to perfectly approximating the Ubuntu Shape, and perhaps a fraction more tweaking of the radii chosen could make it even closer.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body { font-family: Ubuntu, sans-serif; }
    div {
      border: 1px solid red;
      padding: 20px;
      box-sizing: border-box;
    }
    div.one {
      border-radius: 20%;
      width: 238px;
      height: 221px;
    }
    div.two {
      border-top-left-radius: 18% 15%;
      border-top-right-radius: 18% 15%;
      border-bottom-left-radius: 18% 15%;
      border-bottom-right-radius: 18% 15%;
      width: 238px;
      height: 238px;
    }
    div.one, img.one { position: absolute; top: 100px; left: 100px; }
    div.two, img.two { position: absolute; top: 500px; left: 100px; }
  </style>
</head>
<body>
  <h1>The Ubuntu shape, as border radius</h1>
  <img class="one" src="http://design.canonical.com/wp-content/uploads/1-ubuntu-shape.jpg">
  <div class="one">Using a single border radius (and the example shape from <a href="http://design.canonical.com/2013/10/indented-styles-and-the-ubuntu-shape/">a design team blog post</a>)</div>

  <img class="two" src="http://design.canonical.com/wp-content/themes/design-blog-theme/assets/img/team-squircle.png">
  <div class="two">Using two radii for an elliptical border (and a different example shape)</div>
</body>
</html>

David Barth (dbarth)
Changed in ubuntu-html5-theme:
status: In Progress → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.
Subscribing...

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.