Alicia Aliciabcd
Aliciabcd
/ {不歸路筆記} 從pageA到pageB的錨點滑動-pageB
Created
November 7, 2018 01:11
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| href = window.location.href.match(/block=([0-9a-z\-_]*)/i) | |
| if(href.length > 1){ | |
| block_id = href[1] | |
| $target = $("#" + block_id) | |
| console.log($target.offset) | |
| var targetOffset = $target.offset().top - 80; | |
| $('html, body').animate({ |
Aliciabcd
/ {不歸路筆記} 關於js判斷螢幕寬度二三事
Created
November 6, 2018 07:54
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if ($(window).width() < 800) { | |
| // 當視窗寬度小於800px時執行 | |
| // 寫在這裡 | |
| } else { | |
| // 當視窗寬度不小於800px時執行 | |
| // 寫在這裡 | |
| } | |
| }); |
Aliciabcd
/ {不歸路筆記} 偵測瀏覽器尺寸2
Created
November 1, 2018 08:49
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function ScreenSize(){ | |
| var NowWidth = $(window).width(); | |
| var NowHeight = $(window).height(); | |
| $("#show").html(NowWidth + ":" + NowHeight); | |
| }; | |
| $(document).ready(function(){ | |
| ScreenSize(); | |
| }) | |
| $(window).resize(function(){ | |
| ScreenSize(); |
Aliciabcd
/ {不歸路筆記} 偵測瀏覽器尺寸
Created
November 1, 2018 08:12
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function () { | |
| var w = $(window).width(); | |
| var h = $(window).height(); | |
| $("#show").html(w + ":" + h); | |
| $(window).resize(function () { | |
| var NowWidth = $(window).width(); | |
| var NowHeight = $(window).height(); | |
| $("#show").html(NowWidth + ":" + NowHeight); | |
| }) | |
| }); |
Aliciabcd
/ {不歸路筆記}關於mask-size
Created
November 1, 2018 01:56
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a::after{ | |
| content:""; | |
| width:14px; | |
| height:20px; | |
| background:#d3d3d3; | |
| -webkit-mask:url('../img/arrow.svg') no-repeat center; | |
| -webkit-mask-size:cover; | |
| mask:url('../img/arrow.svg') no-repeat center; | |
| mask-size:cover; | |
| display:block; |
Aliciabcd
/ {不歸路筆記} background-clip
Created
October 29, 2018 05:39
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rounded-corners-gradient-borders { | |
| width: 300px; | |
| height: 80px; | |
| border: double 4px transparent; | |
| border-radius: 80px; | |
| background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff); | |
| background-origin: border-box; | |
| background-clip: content-box, border-box; | |
| } |
Aliciabcd
/ gist:97e31d6771cee54c1fc1e0fea6be7cf3
Created
October 29, 2018 05:13
— forked from stereokai/gist:36dc0095b9d24ce93b045e2ddc60d7a0
CSS rounded corners with gradient border
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rounded-corners-gradient-borders { | |
| width: 300px; | |
| height: 80px; | |
| border: double 4px transparent; | |
| border-radius: 80px; | |
| background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff); | |
| background-origin: border-box; | |
| background-clip: content-box, border-box; | |
| } |
Aliciabcd
/ {不歸路筆記} css mask _ svg
Created
October 18, 2018 07:31
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .something{ | |
| content:""; | |
| background-color:#ffdc9a; | |
| position: absolute; | |
| width:25px; | |
| height:20px; | |
| margin-top:-23px; | |
| margin-left:-15px; | |
| transform:rotate(-50deg); | |
| mask:url('../img/crown-solid.svg') no-repeat; |
Aliciabcd
/ {不歸路筆記} scss偽類
Created
September 29, 2018 10:57
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Tab選單 | |
| .TabMenuArea{ | |
| width:100%; | |
| li{ | |
| max-width:8rem; | |
| margin:0px 1rem; | |
| display:inline-block; | |
| a{ |
Aliciabcd
/ gist:af2378a27fc7921beee4327746df1636
Created
September 27, 2018 13:54
{不歸路筆記} aspect-ratio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 瀏覽器可視範圍 寬除高 超過比例1.77時 | |
| @media screen and (min-aspect-ratio:1800 / 1013){ | |
| .Bg-Content-img{ | |
| width: 100%; | |
| height: auto; | |
| min-height: 100%; | |
| } | |
| } | |
| // 瀏覽器可視範圍 寬除高 不超過比例1.77時 |