GNOME.org
 

[gnome-shell-design] add dropshadow

commit f986497e0f3219ec66bfe52113158b11d0d94ca2
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Oct 26 13:11:54 2010 +0200

    add dropshadow

 mockups/modal-dialogs.svg                  |  301 ++++++++++++++++++++++++++--
 mockups/static/modal-dialogs-breakdown.png |  Bin 351032 -> 339746 bytes
 mockups/static/modal-dialogs.png           |  Bin 364487 -> 365488 bytes
 3 files changed, 282 insertions(+), 19 deletions(-)
---
diff --git a/mockups/modal-dialogs.svg b/mockups/modal-dialogs.svg
index fae169e..25492cd 100644
--- a/mockups/modal-dialogs.svg
+++ b/mockups/modal-dialogs.svg
@@ -29,8 +29,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="1"
-     inkscape:cx="489.65486"
-     inkscape:cy="372.82522"
+     inkscape:cx="507.81869"
+     inkscape:cy="331.8408"
      inkscape:current-layer="layer54"
      inkscape:document-units="px"
      showgrid="false"
@@ -58,6 +58,22 @@
   </sodipodi:namedview>
   <defs
      id="defs2942">
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect32507"
+       effect="spiro" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient32477">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop32479" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop32481" />
+    </linearGradient>
     <linearGradient
        id="linearGradient32431">
       <stop
@@ -9441,16 +9457,6 @@
     </linearGradient>
     <linearGradient
        inkscape:collect="always"
-       xlink:href="#linearGradient23237-9"
-       id="linearGradient23243-7"
-       x1="-32.984818"
-       y1="285.89236"
-       x2="-32.984818"
-       y2="20.212112"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-133,-73)" />
-    <linearGradient
-       inkscape:collect="always"
        id="linearGradient23237-9">
       <stop
          style="stop-color:#e0e0dd;stop-opacity:1;"
@@ -9837,6 +9843,179 @@
        x2="307"
        y2="343.02081"
        gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient23237-9"
+       id="linearGradient32443"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-133,-73)"
+       x1="-32.984818"
+       y1="285.89236"
+       x2="-32.984818"
+       y2="20.212112" />
+    <filter
+       inkscape:collect="always"
+       id="filter32449">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="3.2398437"
+         id="feGaussianBlur32451" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient32477"
+       id="linearGradient32483"
+       x1="-181.27563"
+       y1="26.844767"
+       x2="-181.27563"
+       y2="-45.679771"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient32421"
+       id="linearGradient32509"
+       gradientUnits="userSpaceOnUse"
+       x1="852"
+       y1="260.96875"
+       x2="852"
+       y2="265.96875"
+       gradientTransform="translate(0,282)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient23251-0-2-7"
+       id="linearGradient32511"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.62005277,0,0,1.0260115,878.58374,525.27764)"
+       x1="-38.984821"
+       y1="15.21211"
+       x2="-38.984821"
+       y2="25.212111" />
+    <filter
+       inkscape:collect="always"
+       id="filter32513">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.6199219"
+         id="feGaussianBlur32515" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient32477-7"
+       id="linearGradient32483-7"
+       x1="-181.27563"
+       y1="26.844767"
+       x2="-181.27563"
+       y2="-45.679771"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient32477-7">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop32479-3" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop32481-4" />
+    </linearGradient>
+    <filter
+       color-interpolation-filters="sRGB"
+       inkscape:collect="always"
+       id="filter32513-9">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.6199219"
+         id="feGaussianBlur32515-1" />
+    </filter>
+    <linearGradient
+       y2="-45.679771"
+       x2="-181.27563"
+       y1="26.844767"
+       x1="-181.27563"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient32534"
+       xlink:href="#linearGradient32477-7"
+       inkscape:collect="always" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient32477-7"
+       id="linearGradient32559"
+       gradientUnits="userSpaceOnUse"
+       x1="-181.27563"
+       y1="26.844767"
+       x2="-181.27563"
+       y2="-45.679771" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient23237-9-0"
+       id="linearGradient32443-4"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-133,-73)"
+       x1="-32.984818"
+       y1="285.89236"
+       x2="-32.984818"
+       y2="20.212112" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient23237-9-0">
+      <stop
+         style="stop-color:#e0e0dd;stop-opacity:1;"
+         offset="0"
+         id="stop23239-2-4" />
+      <stop
+         id="stop23245-5-2"
+         offset="0.86666667"
+         style="stop-color:#e0e0dd;stop-opacity:1;" />
+      <stop
+         style="stop-color:#f0f0ef;stop-opacity:1"
+         offset="0.95999998"
+         id="stop23247-2-7" />
+      <stop
+         style="stop-color:#e0e0dd;stop-opacity:1"
+         offset="1"
+         id="stop23241-6-3" />
+    </linearGradient>
+    <linearGradient
+       y2="20.212112"
+       x2="-32.984818"
+       y1="285.89236"
+       x1="-32.984818"
+       gradientTransform="translate(862.48484,503.27227)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient32578"
+       xlink:href="#linearGradient23237-9-0"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="20.212112"
+       x2="-32.984818"
+       y1="285.89236"
+       x1="-32.984818"
+       gradientTransform="translate(862.48484,503.27227)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient32578-5"
+       xlink:href="#linearGradient23237-9-0-2"
+       inkscape:collect="always" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient23237-9-0-2">
+      <stop
+         style="stop-color:#e0e0dd;stop-opacity:1;"
+         offset="0"
+         id="stop23239-2-4-3" />
+      <stop
+         id="stop23245-5-2-5"
+         offset="0.86666667"
+         style="stop-color:#e0e0dd;stop-opacity:1;" />
+      <stop
+         style="stop-color:#f0f0ef;stop-opacity:1"
+         offset="0.95999998"
+         id="stop23247-2-7-8" />
+      <stop
+         style="stop-color:#e0e0dd;stop-opacity:1"
+         offset="1"
+         id="stop23241-6-3-2" />
+    </linearGradient>
   </defs>
   <metadata
      id="metadata2945">
@@ -11821,6 +12000,16 @@
          transform="translate(668.98482,218.78789)"
          style="display:inline;enable-background:new"
          id="g31603">
+        <path
+           transform="translate(4.6566772e-6,3.0000047)"
+           sodipodi:type="inkscape:offset"
+           inkscape:radius="0"
+           inkscape:original="M -356.5 -52.25 L -356.5 221.71875 L 17.5 221.71875 L 17.5 -52.25 L -356.5 -52.25 z "
+           xlink:href="#rect22459"
+           style="color:#000000;fill:url(#linearGradient32483);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999981999999998;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.4077381;filter:url(#filter32513)"
+           id="path32441"
+           inkscape:href="#rect22459"
+           d="m -356.5,-52.25 0,273.96875 374,0 0,-273.96875 -374,0 z" />
         <rect
            style="color:#000000;fill:none;stroke:#ffffff;stroke-width:1;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
            id="rect23259"
@@ -11847,7 +12036,7 @@
            height="273.96875"
            width="374.00003"
            id="rect22459"
-           style="color:#000000;fill:url(#linearGradient23243-7);fill-opacity:1;fill-rule:nonzero;stroke:#a8aca8;stroke-width:0.99999982;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+           style="color:#000000;fill:url(#linearGradient32443);fill-opacity:1;fill-rule:nonzero;stroke:#a8aca8;stroke-width:0.99999982;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
         <text
            sodipodi:linespacing="200%"
            id="text23263"
@@ -12079,7 +12268,8 @@
     <g
        inkscape:groupmode="layer"
        id="layer54"
-       inkscape:label="breakdown">
+       inkscape:label="breakdown"
+       style="display:none">
       <rect
          style="color:#000000;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
          id="rect32271"
@@ -12088,7 +12278,7 @@
          x="677"
          y="159" />
       <path
-         style="color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#3465a4;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+         style="color:#000000;fill:none;stroke:#3465a4;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
          d="m 682,164 28,0"
          id="path32273"
          inkscape:path-effect="#path-effect32275"
@@ -12115,16 +12305,16 @@
       <flowRoot
          xml:space="preserve"
          id="flowRoot32304"
-         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:150%;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Medium"><flowRegion
+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:150%;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Medium"><flowRegion
            id="flowRegion32306"><rect
              id="rect32308"
              width="278"
              height="96"
              x="716"
              y="188"
-             style="-inkscape-font-specification:Cantarell Medium;font-family:Cantarell;font-weight:500;font-style:normal;font-stretch:normal;font-variant:normal;font-size:14px;text-anchor:start;text-align:start;writing-mode:lr;line-height:150%;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;text-align:start;line-height:150%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Medium" /></flowRegion><flowPara
            id="flowPara32310">The dialog appears from a dent/slab on the parent window.</flowPara></flowRoot>      <rect
-         style="color:#000000;fill:none;stroke:url(#linearGradient32427);stroke-width:0.99999987999999995;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         style="color:#000000;fill:none;stroke:url(#linearGradient32427);stroke-width:0.99999988;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
          id="rect23259-1"
          width="235"
          height="4.9930677"
@@ -12187,12 +12377,85 @@
              width="278"
              id="rect32392" /></flowRegion><flowPara
            id="flowPara32394">The modal dialog's background is shaded with a vertical linear gradient to make it appear bent on top, coming from the parent window through the slab.</flowPara></flowRoot>      <rect
-         style="color:#000000;fill:url(#linearGradient32437);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         style="color:#000000;fill:url(#linearGradient32437);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
          id="rect32429"
          width="41"
          height="34"
          x="289"
          y="318" />
+      <rect
+         y="441"
+         x="677"
+         height="10"
+         width="11"
+         id="rect32485"
+         style="color:#000000;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <path
+         inkscape:connector-curvature="0"
+         inkscape:original-d="m 682,446 28,0"
+         inkscape:path-effect="#path-effect32507"
+         id="path32487"
+         d="m 682,446 28,0"
+         style="color:#000000;fill:none;stroke:#3465a4;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <rect
+         y="438"
+         x="704"
+         height="276"
+         width="307"
+         id="rect32489"
+         style="color:#000000;fill:#729fcf;fill-opacity:1;stroke:#3465a4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <text
+         sodipodi:linespacing="200%"
+         id="text32491"
+         y="461"
+         x="715"
+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:200%;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"
+         xml:space="preserve"><tspan
+           y="461"
+           x="715"
+           id="tspan32493"
+           sodipodi:role="line">Shadow</tspan></text>
+      <flowRoot
+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:150%;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Medium"
+         id="flowRoot32495"
+         xml:space="preserve"
+         transform="translate(0,282)"><flowRegion
+           id="flowRegion32497"><rect
+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;text-align:start;line-height:150%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Medium"
+             y="188"
+             x="716"
+             height="133"
+             width="278"
+             id="rect32499" /></flowRegion><flowPara
+           id="flowPara32501">The blur radius is half of what the regular window has. The shadow is masked towards the top creating the illusion the dialog is closer to the background surface and finally entering the parent window on top.</flowPara></flowRoot>      <path
+         transform="matrix(0.29539766,0,0,0.35040379,981.5699,614.79871)"
+         sodipodi:type="inkscape:offset"
+         inkscape:radius="0"
+         inkscape:original="M -356.5 -52.25 L -356.5 221.71875 L 17.5 221.71875 L 17.5 -52.25 L -356.5 -52.25 z "
+         xlink:href="#rect22459"
+         style="opacity:0.40773806;color:#000000;fill:url(#linearGradient32534);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999982;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter32513-9);enable-background:accumulate"
+         id="path32441-3"
+         inkscape:href="#rect22459"
+         d="m -356.5,-52.25 0,273.96875 374,0 0,-273.96875 -374,0 z" />
+      <path
+         d="m -356.5,-52.25 0,273.96875 374,0 0,-273.96875 -374,0 z"
+         inkscape:href="#rect22459"
+         id="path32557"
+         style="opacity:0.40773806;color:#000000;fill:url(#linearGradient32559);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999982;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter32513-9);enable-background:accumulate"
+         xlink:href="#rect22459"
+         inkscape:original="M -356.5 -52.25 L -356.5 221.71875 L 17.5 221.71875 L 17.5 -52.25 L -356.5 -52.25 z "
+         inkscape:radius="0"
+         sodipodi:type="inkscape:offset"
+         transform="matrix(0.29539766,0,0,0.35040379,855.5699,614.79871)" />
+      <rect
+         ry="0"
+         rx="0"
+         y="598.45312"
+         x="751.5"
+         height="92.046875"
+         width="107.99993"
+         id="rect22459-9"
+         style="color:#000000;fill:#e0e0dd;fill-opacity:1;fill-rule:nonzero;stroke:#a8aca8;stroke-width:0.99999994;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
     </g>
   </g>
   <g
diff --git a/mockups/static/modal-dialogs-breakdown.png b/mockups/static/modal-dialogs-breakdown.png
index 30eee54..5e02762 100644
Binary files a/mockups/static/modal-dialogs-breakdown.png and b/mockups/static/modal-dialogs-breakdown.png differ
diff --git a/mockups/static/modal-dialogs.png b/mockups/static/modal-dialogs.png
index 35d6a7e..d120a63 100644
Binary files a/mockups/static/modal-dialogs.png and b/mockups/static/modal-dialogs.png differ
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]