首页 发现 帮助
注册 登录
oleg
/
Puppertino
镜像自地址 https://github.com/codedgar/Puppertino.git
1
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Blur and Blur documentation

Codedgar 3 年之前
父节点
8ece032e85
当前提交
2bb585dc34
共有 6 个文件被更改，包括 125 次插入 和 6 次删除
分列视图 显示文件统计
  1. 20 0
      dist/css/shadows.css
  2. 32 0
      docs/examples/doc.css
  3. 2 2
      docs/examples/index.html
  4. 71 4
      docs/examples/shadows.html
  5. 二进制
      docs/landing-images/apple_big.jpg
  6. 0 0
      docs/landing-images/dog_background.jpg

+ 20 - 0
dist/css/shadows.css
查看文件 

@@ -37,3 +37,23 @@
 
 .p-to-shadow-4:hover {
 
   box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
 
 }
 
+
 
+.p-blur-1{
 
+  backdrop-filter: saturate(180%) blur(20px);
 
+  background: rgba(0,0,0,.1);
 
+}
 
+
 
+.p-blur-2{
 
+  backdrop-filter: saturate(200%) blur(30px);
 
+  background: rgba(0,0,0,.1);
 
+}
 
+
 
+.p-blur-3{
 
+  backdrop-filter: saturate(200%) blur(45px);
 
+  background: rgba(0,0,0,.1);
 
+}
 
+
 
+.p-blur-4{
 
+  backdrop-filter: saturate(200%) blur(81px);
 
+  background: rgba(0,0,0,.1);
 
+}

+ 32 - 0
docs/examples/doc.css
查看文件 

@@ -264,6 +264,38 @@ pre {
 
   max-width: 200px;
 
 }
 
 
+.card_blur{
 
+  height: 200px;
 
+  position: relative;
 
+  overflow: hidden;
 
+}
 
+
 
+.blur_elm{
 
+  height: 70%;
 
+  width: 70%;
 
+  border-radius: 10px;
 
+  position: absolute;
 
+  bottom: 1%;
 
+  left: 1%;
 
+  z-index: 1;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+
 
+.blur_img{
 
+  height: 70%;
 
+  width: 70%;
 
+  border-radius: 10px;
 
+  background: blue;
 
+  position: absolute;
 
+  top: 1%;
 
+  right: 1%;
 
+  background: url('../landing-images/blur_example.jpg');
 
+  background-size: cover;
 
+  background-repeat: no-repeat;
 
+}
 
+
 
 @media (max-width: 768px){
 
   .sponsored{
 
     max-width: 100%;

+ 2 - 2
docs/examples/index.html
查看文件 

@@ -155,10 +155,10 @@
 
       <div class="col-xs-11 col-sm-4">
 
         <a href="shadows.html" class="p-card">
 
           <div class="p-card-content">
 
-            <h3 class="p-card-title">Shadows</h3>
 
+            <h3 class="p-card-title">Shadows & Blur</h3>
 
             <p class="p-card-text">
 
               Add depth to your project with this curated collection
 
-              of shadows.
 
+              of shadows and blur.
 
             </p>
 
           </div>
 
         </a>

+ 71 - 4
docs/examples/shadows.html
查看文件 

@@ -2,11 +2,15 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="utf-8">
 
-    <title>Shadows - Puppertino Framework</title>
 
+    <title>Shadows & Blur - Puppertino Framework</title>
 
     <link
 
       href="https://rsms.me/inter/inter.css"
 
       rel="stylesheet"
 
     />
 
+    <link
 
+      rel="stylesheet"
 
+      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
 
+    />
 
     
     <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
 
     <meta
 
@@ -44,14 +48,14 @@
 
       <p>/</p>
 
       <a href="shadows.html" class="p-btn p-btn-scope">Shadows</a>
 
     </div>
 
-    <h1>Shadows</h1>
 
+    <h1>Shadows & Blur</h1>
 
     <div class="master">
 
       <p>
 
         Shadows are not so common on iOS or MacOS. But having a curated collection of shadows can help your interface, which is why I added it! You can use Shadows by downloading the  
         <a
 
-          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/segmented_controls.css"
 
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/shadows.css"
 
           target="_blank"
 
-          >CSS of Shadows</a
 
+          >CSS of Shadows & Blur</a
 
         >
 
         or
 
         <a
 
@@ -139,6 +143,69 @@
 
         </div>
 
       </div>
 
 
+      <div class="talk-about-it">
 
+        <h2>Blur</h2>
 
+        <p>Blur is used pretty commonly along macOS and iOS apps, we have created a collection of curated blur levels for your usage in your apps. Keep in mind that blur levels also include a background, that you can override if you desire.</p>
 
+
 
+        <div class="row pad_15_row center_row">
 
+          <div class="col-xs-10 col-sm-3">
 
+            <div class="card_blur">
 
+              <div class="blur_elm p-blur-1">
 
+                <p class="col-w">p-blur-1</p>
 
+              </div>
 
+              <div class="blur_img">
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="col-xs-10 col-sm-3">
 
+            <div class="card_blur">
 
+              <div class="blur_elm p-blur-2">
 
+                <p>p-blur-2</p>
 
+              </div>
 
+              <div class="blur_img">
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="col-xs-10 col-sm-3">
 
+            <div class="card_blur">
 
+              <div class="blur_elm p-blur-3">
 
+                <p>p-blur-3</p>
 
+              </div>
 
+              <div class="blur_img">
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="col-xs-10 col-sm-3">
 
+            <div class="card_blur">
 
+              <div class="blur_elm p-blur-4">
 
+                <p>p-blur-4</p>
 
+              </div>
 
+              <div class="blur_img">
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+
 
+        <p>Usage:</p>
 
+        <div class="code">
 
+          <pre>
 
+        <code class="html">
 
+&#60;div class="p-blur-1">&#60;/div>
 
+
 
+&#60;div class="p-blur-2">&#60;/div>
 
+
 
+&#60;div class="p-blur-3">&#60;/div>
 
+
 
+&#60;div class="p-blur-4">&#60;/div>
 
+        </code>
 
+      </pre>
 
+        </div>
 
+      </div>
 
+
 
     </div>
 
  
 </body>

二进制
docs/landing-images/apple_big.jpg
查看文件


+ 0 - 0
docs/landing-images/dog_background.jpg
查看文件