From 98001c61e5b79cb1478c0c975028ed626e2a903f Mon Sep 17 00:00:00 2001 From: youngluo Date: Mon, 4 Sep 2017 17:22:41 +0800 Subject: [PATCH 01/10] Initial commit --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8864d4a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From 23f68cef01191d358601437a3c007ad2de9c6bb4 Mon Sep 17 00:00:00 2001 From: young Date: Mon, 4 Sep 2017 18:19:55 +0800 Subject: [PATCH 02/10] init --- .gitignore | 1 + LICENSE | 2 +- css/clearfix.css | 0 css/scale-box.css | 0 css/triangle.css | 0 css/vertical-horizontal-center.css | 0 gulpfile.js | 8 ++++++++ package.json | 23 +++++++++++++++++++++++ readme.md | 0 scss/clearfix.scss | 7 +++++++ scss/scale-box.scss | 0 scss/triangle.scss | 0 scss/vertical-horizontal-center.scss | 0 test/scale-box.html | 0 test/vertical-horizontal-center.html | 0 15 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 css/clearfix.css create mode 100644 css/scale-box.css create mode 100644 css/triangle.css create mode 100644 css/vertical-horizontal-center.css create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 readme.md create mode 100644 scss/clearfix.scss create mode 100644 scss/scale-box.scss create mode 100644 scss/triangle.scss create mode 100644 scss/vertical-horizontal-center.scss create mode 100644 test/scale-box.html create mode 100644 test/vertical-horizontal-center.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/LICENSE b/LICENSE index 8864d4a..673f0e0 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 +Copyright (c) 2017 Young Luo Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/css/clearfix.css b/css/clearfix.css new file mode 100644 index 0000000..e69de29 diff --git a/css/scale-box.css b/css/scale-box.css new file mode 100644 index 0000000..e69de29 diff --git a/css/triangle.css b/css/triangle.css new file mode 100644 index 0000000..e69de29 diff --git a/css/vertical-horizontal-center.css b/css/vertical-horizontal-center.css new file mode 100644 index 0000000..e69de29 diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..8921c8c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,8 @@ +const Eagle = require('gulp-eagle') + +Eagle.config.buildPath = 'css' +Eagle.config.sourcemaps = false; + +Eagle(function (mix) { + mix.sass('./scss/*.scss') +}) \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..56f6515 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "css-snippets", + "version": "1.0.0", + "description": "", + "main": "", + "scripts": { + "test": "" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/youngluo/css-snippets.git" + }, + "author": "Young Luo", + "license": "MIT", + "bugs": { + "url": "https://github.com/youngluo/css-snippets/issues" + }, + "homepage": "https://github.com/youngluo/css-snippets#readme", + "devDependencies": { + "gulp": "^3.9.1", + "gulp-eagle": "^2.1.0" + } +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..e69de29 diff --git a/scss/clearfix.scss b/scss/clearfix.scss new file mode 100644 index 0000000..c355560 --- /dev/null +++ b/scss/clearfix.scss @@ -0,0 +1,7 @@ +.clearfix:after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} \ No newline at end of file diff --git a/scss/scale-box.scss b/scss/scale-box.scss new file mode 100644 index 0000000..e69de29 diff --git a/scss/triangle.scss b/scss/triangle.scss new file mode 100644 index 0000000..e69de29 diff --git a/scss/vertical-horizontal-center.scss b/scss/vertical-horizontal-center.scss new file mode 100644 index 0000000..e69de29 diff --git a/test/scale-box.html b/test/scale-box.html new file mode 100644 index 0000000..e69de29 diff --git a/test/vertical-horizontal-center.html b/test/vertical-horizontal-center.html new file mode 100644 index 0000000..e69de29 From 33629cdad6a015e26941764dbe66b4f7da920709 Mon Sep 17 00:00:00 2001 From: young Date: Tue, 5 Sep 2017 15:44:01 +0800 Subject: [PATCH 03/10] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B8=B8=E7=94=A8?= =?UTF-8?q?=E7=9A=84=E5=9E=82=E7=9B=B4=E6=B0=B4=E5=B9=B3=E5=B1=85=E4=B8=AD?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=89=87=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/clearfix.css | 7 ++ css/scale-box.css | 14 ++++ css/vertical-horizontal-center.css | 68 ++++++++++++++++++ demo/scale-box.html | 25 +++++++ demo/vertical-horizontal-center.html | 103 +++++++++++++++++++++++++++ gulpfile.js | 9 ++- readme.md | 3 + scss/scale-box.scss | 14 ++++ scss/vertical-horizontal-center.scss | 59 +++++++++++++++ test/scale-box.html | 0 test/vertical-horizontal-center.html | 0 11 files changed, 301 insertions(+), 1 deletion(-) create mode 100644 demo/scale-box.html create mode 100644 demo/vertical-horizontal-center.html delete mode 100644 test/scale-box.html delete mode 100644 test/vertical-horizontal-center.html diff --git a/css/clearfix.css b/css/clearfix.css index e69de29..62af4e1 100644 --- a/css/clearfix.css +++ b/css/clearfix.css @@ -0,0 +1,7 @@ +.clearfix:after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} \ No newline at end of file diff --git a/css/scale-box.css b/css/scale-box.css index e69de29..087843b 100644 --- a/css/scale-box.css +++ b/css/scale-box.css @@ -0,0 +1,14 @@ +.scale-box-wrapper { + position: relative; + width: 20%; + padding-top: 20%; + border: 1px solid #bbb; +} + +.scale-box-wrapper .scale-box-content { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} \ No newline at end of file diff --git a/css/vertical-horizontal-center.css b/css/vertical-horizontal-center.css index e69de29..dbb70e3 100644 --- a/css/vertical-horizontal-center.css +++ b/css/vertical-horizontal-center.css @@ -0,0 +1,68 @@ +.vertical-horizontal-center-transform { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.vertical-horizontal-center-table-wrapper { + display: table; +} + +.vertical-horizontal-center-table-wrapper .vertical-horizontal-center-table { + display: table-cell; + vertical-align: middle; + text-align: center; +} + +.vertical-horizontal-center-flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.vertical-horizontal-center-after-wrapper { + text-align: center; +} + +.vertical-horizontal-center-after-wrapper:after { + content: ''; + display: inline-block; + width: 0; + height: 100%; + vertical-align: middle; +} + +.vertical-horizontal-center-after-wrapper .vertical-horizontal-center-after { + display: inline-block; + vertical-align: middle; +} + +.vertical-horizontal-center-margin { + position: absolute; + top: 50%; + left: 50%; + width: 260px; + height: 60px; + margin-top: -30px; + margin-left: -130px; +} + +.vertical-horizontal-center-margin-auto { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 260px; + height: 60px; + margin: auto; +} \ No newline at end of file diff --git a/demo/scale-box.html b/demo/scale-box.html new file mode 100644 index 0000000..4ff0085 --- /dev/null +++ b/demo/scale-box.html @@ -0,0 +1,25 @@ + + + + + + + + 等比缩放盒子 + + + + + +
+
+ 等比缩放盒子 +
+
+ + + \ No newline at end of file diff --git a/demo/vertical-horizontal-center.html b/demo/vertical-horizontal-center.html new file mode 100644 index 0000000..ef3528e --- /dev/null +++ b/demo/vertical-horizontal-center.html @@ -0,0 +1,103 @@ + + + + + + + + 垂直居中示例 + + + + + + +
    +
  • +

    宽高不定（transform）

    +
    • +
  • +
    +
    +

    宽高不定（display:table）

    +
    +
    +
    • +
  • +
    +

    宽高不定（flex）

    +
    +
    • +
  • +
    +

    宽高不定（伪元素）

    +
    +
    • +
  • +

    宽高固定260 x 60（margin负值）

    +
    • +
  • +

    宽高固定260 x 60（margin:auto）

    +
    • +
+ + + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 8921c8c..4b39539 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,5 +4,12 @@ Eagle.config.buildPath = 'css' Eagle.config.sourcemaps = false; Eagle(function (mix) { - mix.sass('./scss/*.scss') + mix + .sass('./scss/*.scss') + .browserSync({ + server: { + baseDir: './', + directory: true + } + }) }) \ No newline at end of file diff --git a/readme.md b/readme.md index e69de29..9b09d8a 100644 --- a/readme.md +++ b/readme.md @@ -0,0 +1,3 @@ +# css-snippets + +此处收集了在项目开发中常用的css代码片段。 diff --git a/scss/scale-box.scss b/scss/scale-box.scss index e69de29..3074862 100644 --- a/scss/scale-box.scss +++ b/scss/scale-box.scss @@ -0,0 +1,14 @@ +// 利用padding-top撑开盒子，可通过width和padding-top调整任意比例 +.scale-box-wrapper { + position: relative; + width: 20%; + padding-top: 20%; // padding-top是根据父元素的宽度计算的 + border: 1px solid #bbb; + .scale-box-content { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } +} \ No newline at end of file diff --git a/scss/vertical-horizontal-center.scss b/scss/vertical-horizontal-center.scss index e69de29..3deeb31 100644 --- a/scss/vertical-horizontal-center.scss +++ b/scss/vertical-horizontal-center.scss @@ -0,0 +1,59 @@ +// 宽高不定 +.vertical-horizontal-center-transform { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.vertical-horizontal-center-table-wrapper { + display: table; + .vertical-horizontal-center-table { + display: table-cell; + vertical-align: middle; + text-align: center; + } +} + +.vertical-horizontal-center-flex { + display: flex; + align-items: center; + justify-content: center; +} + +.vertical-horizontal-center-after-wrapper { + text-align: center; + &:after { + content: ''; + display: inline-block; + width: 0; + height: 100%; + vertical-align: middle; + } + .vertical-horizontal-center-after { + display: inline-block; + vertical-align: middle; + } +} + +// 宽高固定 +.vertical-horizontal-center-margin { + position: absolute; + top: 50%; + left: 50%; + width: 260px; + height: 60px; + margin-top: -30px; + margin-left: -130px; +} + +.vertical-horizontal-center-margin-auto { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 260px; + height: 60px; + margin: auto; +} \ No newline at end of file diff --git a/test/scale-box.html b/test/scale-box.html deleted file mode 100644 index e69de29..0000000 diff --git a/test/vertical-horizontal-center.html b/test/vertical-horizontal-center.html deleted file mode 100644 index e69de29..0000000 From 95313faaf84e1ae9967a2697816a4aeea75badfa Mon Sep 17 00:00:00 2001 From: young Date: Tue, 5 Sep 2017 15:50:10 +0800 Subject: [PATCH 04/10] update readme --- readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/readme.md b/readme.md index 9b09d8a..3aaa884 100644 --- a/readme.md +++ b/readme.md @@ -1,3 +1,6 @@ # css-snippets 此处收集了在项目开发中常用的css代码片段。 + +- [垂直水平居中](https://youngluo.github.io/css-snippets/demo/vertical-horizontal-center.html) +- [等比缩放盒子](https://youngluo.github.io/css-snippets/demo/scale-box.html) From ed7f934f2f86b54cadc586d2a0fe821b679549f4 Mon Sep 17 00:00:00 2001 From: young Date: Tue, 5 Sep 2017 17:34:15 +0800 Subject: [PATCH 05/10] =?UTF-8?q?=E6=B7=BB=E5=8A=A0CSS=E4=B8=89=E8=A7=92?= =?UTF-8?q?=E5=BD=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .editorconfig | 14 +++++ css/triangle.css | 31 +++++++++++ css/vertical-horizontal-center.css | 2 +- demo/scale-box.html | 43 ++++++++++----- demo/triangle.html | 61 +++++++++++++++++++++ demo/vertical-horizontal-center.html | 16 +++--- readme.md | 1 + scss/clearfix.scss | 12 ++-- scss/scale-box.scss | 24 ++++---- scss/triangle.scss | 31 +++++++++++ scss/vertical-horizontal-center.scss | 82 ++++++++++++++-------------- 11 files changed, 234 insertions(+), 83 deletions(-) create mode 100644 .editorconfig create mode 100644 demo/triangle.html diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0301b00 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true +end_of_line = lf + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/css/triangle.css b/css/triangle.css index e69de29..fd91d1f 100644 --- a/css/triangle.css +++ b/css/triangle.css @@ -0,0 +1,31 @@ +.triangle-up { + width: 0; + height: 0; + border-left: 50px solid transparent; + border-right: 50px solid transparent; + border-bottom: 100px solid #0dbc79; +} + +.triangle-down { + width: 0; + height: 0; + border-left: 50px solid transparent; + border-right: 50px solid transparent; + border-top: 100px solid #0dbc79; +} + +.triangle-left { + width: 0; + height: 0; + border-top: 50px solid transparent; + border-bottom: 50px solid transparent; + border-right: 100px solid #0dbc79; +} + +.triangle-right { + width: 0; + height: 0; + border-top: 50px solid transparent; + border-bottom: 50px solid transparent; + border-left: 100px solid #0dbc79; +} \ No newline at end of file diff --git a/css/vertical-horizontal-center.css b/css/vertical-horizontal-center.css index dbb70e3..4ba09cb 100644 --- a/css/vertical-horizontal-center.css +++ b/css/vertical-horizontal-center.css @@ -34,7 +34,7 @@ } .vertical-horizontal-center-after-wrapper:after { - content: ''; + content: ""; display: inline-block; width: 0; height: 100%; diff --git a/demo/scale-box.html b/demo/scale-box.html index 4ff0085..e28063a 100644 --- a/demo/scale-box.html +++ b/demo/scale-box.html @@ -2,24 +2,37 @@ - - - - 等比缩放盒子 - - + + + + 等比缩放盒子 + + + -
-
- 等比缩放盒子 -
+
+
+

等比缩放盒子

+
- \ No newline at end of file + diff --git a/demo/triangle.html b/demo/triangle.html new file mode 100644 index 0000000..f457290 --- /dev/null +++ b/demo/triangle.html @@ -0,0 +1,61 @@ + + + + + + + + CSS三角形 + + + + + + +
    +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
  • +
    +
    • +
+ + + diff --git a/demo/vertical-horizontal-center.html b/demo/vertical-horizontal-center.html index ef3528e..d22d007 100644 --- a/demo/vertical-horizontal-center.html +++ b/demo/vertical-horizontal-center.html @@ -20,12 +20,12 @@ background-color: #f8f8f8; } - .content { + .main { padding: 1%; list-style: none; } - .content li { + .main li { position: relative; float: left; width: 32%; @@ -36,11 +36,11 @@ background-color: #fff; } - .content li:nth-child(3n-2) { + .main li:nth-child(3n-2) { margin-left: 0; } - .content li h3 { + .main li h3 { display: inline-block; padding: 5px; font-size: 14px; @@ -50,14 +50,14 @@ } @media (max-width: 767px) { - .content li { + .main li { float: none; width: 100%; margin-left: 0; margin-top: 10px; } - .content li:first-child { + .main li:first-child { margin-top: 0; } } @@ -70,7 +70,7 @@ -
    +

    • 宽高不定（transform）

      • @@ -100,4 +100,4 @@

      宽高固定260 x 60（margin

    - \ No newline at end of file + diff --git a/readme.md b/readme.md index 3aaa884..bc3f35b 100644 --- a/readme.md +++ b/readme.md @@ -4,3 +4,4 @@ - [垂直水平居中](https://youngluo.github.io/css-snippets/demo/vertical-horizontal-center.html) - [等比缩放盒子](https://youngluo.github.io/css-snippets/demo/scale-box.html) +- [CSS三角形](https://youngluo.github.io/css-snippets/demo/triangle.html) diff --git a/scss/clearfix.scss b/scss/clearfix.scss index c355560..a091e26 100644 --- a/scss/clearfix.scss +++ b/scss/clearfix.scss @@ -1,7 +1,7 @@ .clearfix:after { - content: ""; - display: block; - height: 0; - clear: both; - visibility: hidden; -} \ No newline at end of file + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} diff --git a/scss/scale-box.scss b/scss/scale-box.scss index 3074862..db8ddaa 100644 --- a/scss/scale-box.scss +++ b/scss/scale-box.scss @@ -1,14 +1,14 @@ // 利用padding-top撑开盒子，可通过width和padding-top调整任意比例 .scale-box-wrapper { - position: relative; - width: 20%; - padding-top: 20%; // padding-top是根据父元素的宽度计算的 - border: 1px solid #bbb; - .scale-box-content { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - } -} \ No newline at end of file + position: relative; + width: 20%; + padding-top: 20%; // padding-top是根据父元素的宽度计算的 + border: 1px solid #bbb; + .scale-box-content { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } +} diff --git a/scss/triangle.scss b/scss/triangle.scss index e69de29..76e08fc 100644 --- a/scss/triangle.scss +++ b/scss/triangle.scss @@ -0,0 +1,31 @@ +@mixin triangle($direction, $size:50px, $borderColor:#0dbc79) { + width: 0; + height: 0; + @if $direction==up { + border-left: $size solid transparent; + border-right: $size solid transparent; + border-bottom: $size*2 solid $borderColor; + } + @else if $direction==down { + border-left: $size solid transparent; + border-right: $size solid transparent; + border-top: $size*2 solid $borderColor; + } + @else if $direction==left { + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-right: $size*2 solid $borderColor; + } + @else if $direction==right { + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-left: $size*2 solid $borderColor; + } +} + +$types: ("up", "down", "left", "right"); +@each $direction in $types { + .triangle-#{$direction} { + @include triangle($direction); + } +} diff --git a/scss/vertical-horizontal-center.scss b/scss/vertical-horizontal-center.scss index 3deeb31..021c696 100644 --- a/scss/vertical-horizontal-center.scss +++ b/scss/vertical-horizontal-center.scss @@ -1,59 +1,59 @@ // 宽高不定 .vertical-horizontal-center-transform { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .vertical-horizontal-center-table-wrapper { - display: table; - .vertical-horizontal-center-table { - display: table-cell; - vertical-align: middle; - text-align: center; - } + display: table; + .vertical-horizontal-center-table { + display: table-cell; + vertical-align: middle; + text-align: center; + } } .vertical-horizontal-center-flex { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .vertical-horizontal-center-after-wrapper { - text-align: center; - &:after { - content: ''; - display: inline-block; - width: 0; - height: 100%; - vertical-align: middle; - } - .vertical-horizontal-center-after { - display: inline-block; - vertical-align: middle; - } + text-align: center; + &:after { + content: ""; + display: inline-block; + width: 0; + height: 100%; + vertical-align: middle; + } + .vertical-horizontal-center-after { + display: inline-block; + vertical-align: middle; + } } // 宽高固定 .vertical-horizontal-center-margin { - position: absolute; - top: 50%; - left: 50%; - width: 260px; - height: 60px; - margin-top: -30px; - margin-left: -130px; + position: absolute; + top: 50%; + left: 50%; + width: 260px; + height: 60px; + margin-top: -30px; + margin-left: -130px; } .vertical-horizontal-center-margin-auto { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 260px; - height: 60px; - margin: auto; -} \ No newline at end of file + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 260px; + height: 60px; + margin: auto; +} From b5ed5f1cc4cd595af298e9c57c21a13c90ce9a96 Mon Sep 17 00:00:00 2001 From: young Date: Fri, 27 Oct 2017 16:56:17 +0800 Subject: [PATCH 06/10] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=A4=E6=A0=8F?= =?UTF-8?q?=E7=AD=89=E9=AB=98=E8=87=AA=E9=80=82=E5=BA=94=E5=B8=83=E5=B1=80?= =?UTF-8?q?=EF=BC=9B=E5=B7=A6=E6=A0=8F=E5=9B=BA=E5=AE=9A=E5=8F=B3=E6=A0=8F?= =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/column.css | 84 ++++++++++++ examples/column.html | 129 ++++++++++++++++++ {demo => examples}/scale-box.html | 0 {demo => examples}/triangle.html | 0 .../vertical-horizontal-center.html | 0 package.json | 2 +- readme.md | 7 +- scss/column.scss | 65 +++++++++ 8 files changed, 283 insertions(+), 4 deletions(-) create mode 100644 css/column.css create mode 100644 examples/column.html rename {demo => examples}/scale-box.html (100%) rename {demo => examples}/triangle.html (100%) rename {demo => examples}/vertical-horizontal-center.html (100%) create mode 100644 scss/column.scss diff --git a/css/column.css b/css/column.css new file mode 100644 index 0000000..ac5b1e2 --- /dev/null +++ b/css/column.css @@ -0,0 +1,84 @@ +.left-column-fixed-float .left { + float: left; + width: 100px; +} + +.left-column-fixed-float .right { + margin-left: 110px; +} + +.left-column-fixed-table { + display: table; + width: 100%; +} + +.left-column-fixed-table .left { + display: table-cell; + width: 100px; +} + +.left-column-fixed-table .right { + display: table-cell; + padding-left: 10px; +} + +.left-column-fixed-flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; +} + +.left-column-fixed-flex .left { + width: 100px; +} + +.left-column-fixed-flex .right { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin-left: 10px; +} + +.equal-height-margin { + overflow: hidden; +} + +.equal-height-margin .left, +.equal-height-margin .right { + float: left; + width: 50%; + padding-bottom: 2000px; + margin-bottom: -2000px; +} + +.equal-height-table { + display: table; + width: 100%; +} + +.equal-height-table .left, +.equal-height-table .right { + display: table-cell; + width: 50%; +} + +.equal-height-flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; +} + +.equal-height-flex .left, +.equal-height-flex .right { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} \ No newline at end of file diff --git a/examples/column.html b/examples/column.html new file mode 100644 index 0000000..513e3b8 --- /dev/null +++ b/examples/column.html @@ -0,0 +1,129 @@ + + + + + + + + + column布局 + + + + + +
      +
    • +

      左边栏宽度固定，右边栏自动填满剩余空间

      +

      float + BFC实现

      +
      +
      左边100px
      +
      +

      右边自适应

      +

      右边自适应

      +

      右边自适应

      +

      右边自适应

      +
      +
      +

      display:table

      +
      +
      左边100px
      +
      +

      右边自适应

      +

      右边自适应

      +

      右边自适应

      +

      右边自适应

      +
      +
      +

      flex实现

      +
      +
      左边100px
      +
      +

      右边自适应

      +

      右边自适应

      +

      右边自适应

      +
      +
      +
      • +
    • +

      两栏自适应等高布局

      +

      margin负值

      +
      +
      左边
      +
      +

      右边

      +

      右边

      +

      右边

      +

      右边

      +
      +
      +

      display:table

      +
      +
      左边
      +
      +

      右边

      +

      右边

      +

      右边

      +

      右边

      +
      +
      +

      flex实现

      +
      +
      左边
      +
      +

      右边

      +

      右边

      +

      右边

      +
      +
      +
      • +
    + + + + diff --git a/demo/scale-box.html b/examples/scale-box.html similarity index 100% rename from demo/scale-box.html rename to examples/scale-box.html diff --git a/demo/triangle.html b/examples/triangle.html similarity index 100% rename from demo/triangle.html rename to examples/triangle.html diff --git a/demo/vertical-horizontal-center.html b/examples/vertical-horizontal-center.html similarity index 100% rename from demo/vertical-horizontal-center.html rename to examples/vertical-horizontal-center.html diff --git a/package.json b/package.json index 56f6515..42450f2 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "", "main": "", "scripts": { - "test": "" + "start": "gulp watch" }, "repository": { "type": "git", diff --git a/readme.md b/readme.md index bc3f35b..2decb37 100644 --- a/readme.md +++ b/readme.md @@ -2,6 +2,7 @@ 此处收集了在项目开发中常用的css代码片段。 -- [垂直水平居中](https://youngluo.github.io/css-snippets/demo/vertical-horizontal-center.html) -- [等比缩放盒子](https://youngluo.github.io/css-snippets/demo/scale-box.html) -- [CSS三角形](https://youngluo.github.io/css-snippets/demo/triangle.html) +- [垂直水平居中](https://youngluo.github.io/css-snippets/examples/vertical-horizontal-center.html) +- [等比缩放盒子](https://youngluo.github.io/css-snippets/examples/scale-box.html) +- [CSS三角形](https://youngluo.github.io/css-snippets/examples/triangle.html) +- [两栏自适应等高布局](https://youngluo.github.io/css-snippets/examples/column.html) diff --git a/scss/column.scss b/scss/column.scss new file mode 100644 index 0000000..361dfd1 --- /dev/null +++ b/scss/column.scss @@ -0,0 +1,65 @@ +.left-column-fixed-float { + .left { + float: left; + width: 100px; + } + .right { + margin-left: 110px; + } +} + +.left-column-fixed-table { + display: table; + width: 100%; + .left { + display: table-cell; + width: 100px; + } + .right { + display: table-cell; + padding-left: 10px; + } +} + +.left-column-fixed-flex { + display: flex; + flex-flow: row; + .left { + width: 100px; + } + .right { + flex: 1; + margin-left: 10px; + } +} + +.equal-height-margin { + $padding: 2000px; // 足够大 + overflow: hidden; + .left, + .right { + float: left; + width: 50%; + padding-bottom: $padding; + margin-bottom: -$padding; + } +} + +.equal-height-table { + display: table; + width: 100%; + .left, + .right { + display: table-cell; + width: 50%; + } +} + +.equal-height-flex { + display: flex; + flex-flow: row; + .left, + .right { + flex: 1; + } +} From db86d9d0d4332bd30e44c1f40bb44f6dd4f61a1e Mon Sep 17 00:00:00 2001 From: young Date: Tue, 8 May 2018 18:06:48 +0800 Subject: [PATCH 07/10] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=AD=A3=E5=85=AD?= =?UTF-8?q?=E8=BE=B9=E5=BD=A2=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/hexagon.css | 63 ++++++++++++++++++++++++++++++++++++++ css/tiny-reset.css | 71 +++++++++++++++++++++++++++++++++++++++++++ examples/hexagon.html | 33 ++++++++++++++++++++ scss/hexagon.scss | 54 ++++++++++++++++++++++++++++++++ 4 files changed, 221 insertions(+) create mode 100644 css/hexagon.css create mode 100644 css/tiny-reset.css create mode 100644 examples/hexagon.html create mode 100644 scss/hexagon.scss diff --git a/css/hexagon.css b/css/hexagon.css new file mode 100644 index 0000000..10a4a80 --- /dev/null +++ b/css/hexagon.css @@ -0,0 +1,63 @@ +.hexagon-column-item::before, +.hexagon-column-item::after { + content: ''; + position: absolute; + top: 0; + width: 0; + height: 0; + border-top: 16.666666vw solid transparent; + border-bottom: 16.666666vw solid transparent; +} + +.hexagon { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + padding-top: 16.666666vw; +} + +.hexagon-column { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 0; +} + +.hexagon-column:first-child { + padding-left: 0; +} + +.hexagon-column:nth-child(2) { + margin-top: -16.666666vw; +} + +.hexagon-column-item { + position: relative; + width: 50%; + margin: 35px 0 0 25%; + padding-top: 100%; + background: #00D084; +} + +.hexagon-column-item:active { + background-color: #7BDCB5; +} + +.hexagon-column-item:active::before { + border-right-color: #7BDCB5; +} + +.hexagon-column-item:active::after { + border-left-color: #7BDCB5; +} + +.hexagon-column-item::before { + right: 100%; + border-right: 8.333333vw solid #00D084; +} + +.hexagon-column-item::after { + left: 100%; + border-left: 8.333333vw solid #00D084; +} \ No newline at end of file diff --git a/css/tiny-reset.css b/css/tiny-reset.css new file mode 100644 index 0000000..8586b3b --- /dev/null +++ b/css/tiny-reset.css @@ -0,0 +1,71 @@ +html { + line-height: 1; +} + +body, +div, +p, +ol, +ul, +li, +dl, +dt, +dd, +table, +th, +td, +blockquote, +figure, +fieldset, +legend, +menu, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + line-height: inherit; + box-sizing: border-box; +} + +ul, +menu { + list-style: none; +} + +button, +input, +select, +textarea, +iframe, +img { + outline: none; + border: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { + display: block; + line-height: inherit; + box-sizing: border-box; +} diff --git a/examples/hexagon.html b/examples/hexagon.html new file mode 100644 index 0000000..1e58850 --- /dev/null +++ b/examples/hexagon.html @@ -0,0 +1,33 @@ + + + + + + + + + + hexagon + + + +
    +
      +
    • +
    • +
    • +
    +
      +
    • +
    • +
    • +
    +
      +
    • +
    • +
    • +
    +
    + + + diff --git a/scss/hexagon.scss b/scss/hexagon.scss new file mode 100644 index 0000000..cbe82b3 --- /dev/null +++ b/scss/hexagon.scss @@ -0,0 +1,54 @@ +$gutter: 0; +$backgroundColor: #00D084; +$activeColor: #7BDCB5; +%triangle { + content: ''; + position: absolute; + top: 0; + width: 0; + height: 0; + border-top: 16.666666vw solid transparent; + border-bottom: 16.666666vw solid transparent; +} + +.hexagon { + display: flex; + width: 100%; + padding-top: 16.666666vw; + &-column { + flex: 1; + padding-left: $gutter; + &:first-child { + padding-left: 0; + } + &:nth-child(2) { + margin-top: -16.666666vw; + } + &-item { + position: relative; + width: 50%; + margin: 35px 0 0 25%; + padding-top: 100%; + background: $backgroundColor; + &:active { + background-color: $activeColor; + &::before { + border-right-color: $activeColor; + } + &::after { + border-left-color: $activeColor; + } + } + &::before { + @extend %triangle; + right: 100%; + border-right: 8.333333vw solid $backgroundColor; + } + &::after { + @extend %triangle; + left: 100%; + border-left: 8.333333vw solid $backgroundColor; + } + } + } +} From 41b6b248d6158fb6971c44ee320be4bf2b97c6b3 Mon Sep 17 00:00:00 2001 From: young Date: Wed, 9 May 2018 18:06:38 +0800 Subject: [PATCH 08/10] update --- css/hexagon.css | 81 +++++++++++++++------------------ examples/hexagon.html | 82 ++++++++++++++++++++++++++------- scss/hexagon.scss | 102 ++++++++++++++++++++++++++++-------------- 3 files changed, 169 insertions(+), 96 deletions(-) diff --git a/css/hexagon.css b/css/hexagon.css index 10a4a80..faee0db 100644 --- a/css/hexagon.css +++ b/css/hexagon.css @@ -1,63 +1,54 @@ -.hexagon-column-item::before, -.hexagon-column-item::after { - content: ''; - position: absolute; - top: 0; - width: 0; - height: 0; - border-top: 16.666666vw solid transparent; - border-bottom: 16.666666vw solid transparent; +.hexagon { + width: 100%; + padding-top: 16.666666vw; } -.hexagon { +.hexagon-item { + position: relative; + float: left; + width: 33.333333%; + padding-top: 28.866667%; +} + +.hexagon-item-container { display: -webkit-box; display: -ms-flexbox; display: flex; - width: 100%; - padding-top: 16.666666vw; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } -.hexagon-column { +.hexagon-item-container-before { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - padding-left: 0; + overflow: hidden; } -.hexagon-column:first-child { - padding-left: 0; -} - -.hexagon-column:nth-child(2) { - margin-top: -16.666666vw; +.hexagon-item-container-before::before { + content: ''; + display: block; + width: 0; + height: 0; + border-top: 519.6px solid transparent; + border-bottom: 519.6px solid transparent; + border-right: 300px solid #249ff1; + margin-right: -519.6px; + margin-top: -300px; } -.hexagon-column-item { - position: relative; - width: 50%; - margin: 35px 0 0 25%; - padding-top: 100%; +.hexagon-item-container-content { + -webkit-box-flex: 2; + -ms-flex: 2; + flex: 2; background: #00D084; } -.hexagon-column-item:active { - background-color: #7BDCB5; -} - -.hexagon-column-item:active::before { - border-right-color: #7BDCB5; -} - -.hexagon-column-item:active::after { - border-left-color: #7BDCB5; -} - -.hexagon-column-item::before { - right: 100%; - border-right: 8.333333vw solid #00D084; -} - -.hexagon-column-item::after { - left: 100%; - border-left: 8.333333vw solid #00D084; +.hexagon-item-container-after { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } \ No newline at end of file diff --git a/examples/hexagon.html b/examples/hexagon.html index 1e58850..271f337 100644 --- a/examples/hexagon.html +++ b/examples/hexagon.html @@ -11,23 +11,71 @@ -
    -
      -
    • -
    • -
    • -
    -
      -
    • -
    • -
    • -
    -
      -
    • -
    • -
    • -
    -
    +
      +
    • +
        +
      • +
      • +
      • +
      +
      • + +
    diff --git a/scss/hexagon.scss b/scss/hexagon.scss index cbe82b3..dbb956f 100644 --- a/scss/hexagon.scss +++ b/scss/hexagon.scss @@ -1,4 +1,3 @@ -$gutter: 0; $backgroundColor: #00D084; $activeColor: #7BDCB5; %triangle { @@ -7,48 +6,83 @@ $activeColor: #7BDCB5; top: 0; width: 0; height: 0; - border-top: 16.666666vw solid transparent; - border-bottom: 16.666666vw solid transparent; + border-top: calc(50% * 1.732) solid transparent; + border-bottom: calc(50% * 1.732) solid transparent; } .hexagon { - display: flex; width: 100%; padding-top: 16.666666vw; - &-column { - flex: 1; - padding-left: $gutter; - &:first-child { - padding-left: 0; - } - &:nth-child(2) { - margin-top: -16.666666vw; - } - &-item { - position: relative; - width: 50%; - margin: 35px 0 0 25%; - padding-top: 100%; - background: $backgroundColor; - &:active { - background-color: $activeColor; + &-item { + position: relative; + float: left; + width: 33.333333%; + padding-top: 28.866667%; // width / 2 * √3 + &-container { + display: flex; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + &-before { + flex: 1; + overflow: hidden; &::before { - border-right-color: $activeColor; - } - &::after { - border-left-color: $activeColor; + $height: 300px; // 足够大 + $bottom: $height * 1.732; //底与高比为 (2 * √3) : 1 + content: ''; + display: block; + width: 0; + height: 0; + border-top: $bottom solid transparent; + border-bottom: $bottom solid transparent; + border-right: $height solid #249ff1; + margin-right: -$bottom; + margin-top: -$height; } } - &::before { - @extend %triangle; - right: 100%; - border-right: 8.333333vw solid $backgroundColor; + &-content { + flex: 2; + background: $backgroundColor; } - &::after { - @extend %triangle; - left: 100%; - border-left: 8.333333vw solid $backgroundColor; + &-after { + flex: 1; } - } + } // &:active { + // background-color: $activeColor; + // &::before { + // border-right-color: $activeColor; + // } + // &::after { + // border-left-color: $activeColor; + // } + // } + // &::before { + // // @extend %triangle; + // // right: 100%; + // // border-right: calc(50% * 1.732 / 2) solid $backgroundColor; + // content: ''; + // position: absolute; + // top: 0; + // right: 100%; + // width: 50%; + // height: 100%; + // background-color: #ccc; + // &::before { + // content: ''; + // display: block; + // width: 0; + // height: 0; + // border-top: 500 * 2 * 1.732px solid transparent; + // border-bottom: 500 * 2 * 1.732px solid transparent; + // border-right: 500px solid $backgroundColor; + // } + // } + // &::after { + // @extend %triangle; + // left: 100%; + // border-left: calc(50% * 1.732 / 2) solid $backgroundColor; + // } } } From dcb08d64dd4246e94459da07e37c6674d4e09f5a Mon Sep 17 00:00:00 2001 From: young Date: Sun, 13 May 2018 22:57:42 +0800 Subject: [PATCH 09/10] update hexagon --- css/hexagon.css | 77 +++++++++++++++------ examples/hexagon.html | 148 ++++++++++++++++++++++------------------- examples/triangle.html | 12 +--- scss/column.scss | 96 +++++++++++++------------- scss/hexagon.scss | 106 ++++++++++++++--------------- 5 files changed, 233 insertions(+), 206 deletions(-) diff --git a/css/hexagon.css b/css/hexagon.css index faee0db..eae4d9c 100644 --- a/css/hexagon.css +++ b/css/hexagon.css @@ -1,13 +1,49 @@ +.hexagon-item-container-before, +.hexagon-item-container-after { + position: relative; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + overflow: hidden; +} + +.hexagon-item-container-before::before, +.hexagon-item-container-after::before { + content: ''; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 0; + height: 0; + border-top: 866px solid transparent; + border-bottom: 866px solid transparent; +} + .hexagon { width: 100%; - padding-top: 16.666666vw; + padding-top: 14.4333333333%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.hexagon-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.hexagon-wrapper:nth-child(2n) { + margin-top: -14.4333333333%; } .hexagon-item { position: relative; - float: left; - width: 33.333333%; - padding-top: 28.866667%; + width: 100%; + margin-bottom: 25%; + padding-top: 86.6%; } .hexagon-item-container { @@ -21,23 +57,21 @@ left: 0; } -.hexagon-item-container-before { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - overflow: hidden; +.hexagon-item-container:active .hexagon-item-container-content { + background-color: #7BDCB5; +} + +.hexagon-item-container:active .hexagon-item-container-before::before { + border-right-color: #7BDCB5; +} + +.hexagon-item-container:active .hexagon-item-container-after::before { + border-left-color: #7BDCB5; } .hexagon-item-container-before::before { - content: ''; - display: block; - width: 0; - height: 0; - border-top: 519.6px solid transparent; - border-bottom: 519.6px solid transparent; - border-right: 300px solid #249ff1; - margin-right: -519.6px; - margin-top: -300px; + border-right: 500px solid #00D084; + left: 0; } .hexagon-item-container-content { @@ -47,8 +81,7 @@ background: #00D084; } -.hexagon-item-container-after { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; +.hexagon-item-container-after::before { + border-left: 500px solid #00D084; + right: 0; } \ No newline at end of file diff --git a/examples/hexagon.html b/examples/hexagon.html index 271f337..a273844 100644 --- a/examples/hexagon.html +++ b/examples/hexagon.html @@ -3,79 +3,89 @@ - - - - + + + + hexagon -
      -
    • -
        -
      • -
      • -
      • -
      -
      • - -
    +
    +
      +
    • +
        +
      • +
      • +
      • +
      +
      • +
    • +
        +
      • +
      • +
      • +
      +
      • +
    • +
        +
      • +
      • +
      • +
      +
      • +
    +
      +
    • +
        +
      • +
      • +
      • +
      +
      • +
    • +
        +
      • +
      • +
      • +
      +
      • +
    • +
        +
      • +
      • +
      • +
      +
      • +
    +
      +
    • +
        +
      • +
      • +
      • +
      +
      • +
    • +
        +
      • +
      • +
      • +
      +
      • +
    • +
        +
      • +
      • +
      • +
      +
      • +
    +
    diff --git a/examples/triangle.html b/examples/triangle.html index f457290..3b0e27f 100644 --- a/examples/triangle.html +++ b/examples/triangle.html @@ -6,20 +6,10 @@ CSS三角形 +