interesting codepens - Githubissues

Rplus / f2e-note

record some note in issue

0 stars 0 forks source link

interesting codepens #15

Open Rplus opened 9 years ago

Rplus commented 9 years ago

collections of fun codepen

Rplus commented 9 years ago

CSS only clicking game http://codepen.io/web-tiki/pen/NPeKbE/?editors=010

有趣的應用了 counter-increment 來計數因為 counter-increment 只計一次的緣故，能巧妙地一併算出剩餘數量

input{
  counter-increment: input;
}

input:checked {
  counter-increment: checked;
}

Rplus commented 9 years ago

CSS Walking Animation http://codepen.io/web-tiki/pen/NqjKze/?editors=010 模擬走路動態的 CSS animation 作品

Running CSS animation http://codepen.io/web-tiki/details/gpWLbW 跑步版本

Running CSS animation http://codepen.io/yukulele/details/aOwGmY/ 有人 fork 去調整成有自然傾角的狀態

Rplus commented 9 years ago

Text with 3D shadow http://codepen.io/web-tiki/details/azeKNy

以 rotateX(90deg) 模擬陰影傾角旋轉的變化

Rplus commented 9 years ago

CSS responsive grid of hexagons http://codepen.io/web-tiki/pen/HhCyd/?editors=010

實心 hexagons 作法：雙層 overfow: hidden

外層 rotate(-60deg) skewY(30deg)
內層 skewY(-30deg) rotate(60deg)

可處理 mouseenter 邊界問題 (用 border 組出來的會有)

Rplus commented 9 years ago

CSS transparent strike through http://codepen.io/web-tiki/details/YXwyRa

先以 pseudo element 夾出一條縫模擬 strike through 效果再用 svg mask fill 實作靈活的 strike through

Rplus commented 9 years ago

CSS Hexagon - the basics (SO) http://codepen.io/thebabydino/details/sJdgu

神奇操作用 pseudo-element 的話，可以單元素達成六邊形主要是內部的圖片裁切完美還能轉~ 讚讚讚

我把算式用 Stylus 公式化了 http://codepen.io/Rplus/pen/BNdgoJ.stylus demo: http://codepen.io/Rplus/details/BNdgoJ

Rplus commented 9 years ago

http://codepen.io/thebabydino/details/MwEbwE/

gradient 裡用 calc(50% - 1px) calc(50% + 1px) 來制作出 2px 的直線 XDDD

Rplus commented 9 years ago

CSS Only Poseable Mannequin http://codepen.io/neoberg/details/doVQqv/

肢體動作 by CSS control

Rplus commented 9 years ago

Logo animation http://codepen.io/makegraff/details/gpoaJG/

主要是利用 timing-function 做超過臨界點的擺盪 cubic-bezier(0.66, -0.7, 0.27, 1.6)

Rplus commented 9 years ago

Download Cards http://codepen.io/EvanWieland/details/zGPXpK

這個是典型的 flip type 的旋轉效果搭配與上則一樣的 over-transtion 來達到更加擬真的 3D 翻轉效果

切換翻轉的按鈕位置設計可以再調整一下位置不一，有反下意識操作的困擾

Rplus commented 9 years ago

Adaptive tabs http://codepen.io/Lewitje/details/doJRBX

這一例中的 color picker 利用 border-radius 很巧妙地模擬了立體陰影相當值得學習

另外對於 :hover , .active 的狀態也處理得相當合理且易於辨別浮出凸顯有幾個樣式: 不破壞左右間距的 scale()、帶有背景陰影、自體陰影範圍加大

Rplus commented 8 years ago

textarea auto-expainding height http://codepen.io/vsync/details/frudD https://gist.github.com/CodeMyUI/51c9d6e83db8653b3e5c

自動長高的 textarea

很聰明的作法呀~ 雖然目前 textarea 很常被用 contenteditable 取代不過原生的輸入框還是有它的特性 ( 純文字、表單 ~ )

它偵測 input event 來調整 row 數值 (抓 textarea.scrollHeight ) 不過它的 lineHeight 為何要寫死為 17px 呀？ ( 但 window.getComputedStyle 出來的都是 normal 是怎麼算呀 = =

Rplus commented 8 years ago

it's those damn xenomorphs again http://codepen.io/lesbaa/details/MYLoRp/

moveit 的動畫效果很棒模擬傳統電視電漿啟動的扭曲感

@keyframes moveit {
  0%      { transform: translateX(0); }
  28.99%  { transform: translateY(0); }
  29%     { transform: translateY(5px) skewX(20deg); }
  30%     { transform: translate(0); }
  88.999% { transform: translate(0); }
  89%     { transform: skewX(-15deg); }
  89.001% { transform: skew(0); }
  90%     { transform: translate(0); }
  90.001% { transform: translate(23px, 17px); }
  98.999% { transform: translate(22px, 20px); }
  99%     { transform: translate(0); }
  100%    { transform: translate(0) skew(0); }
}

Rplus commented 8 years ago

HR with centered text http://codepen.io/scottzirkel/details/yNxNME/

<hr> 是個頗趣味的 tag 設定成 block level 後可以塞進 pseudo-element

Rplus commented 8 years ago

Gooey Beach Ball Loader http://codepen.io/Henri-K/pen/doqWdo

用 filter: blur() 創建的 svg goo effect

Rplus commented 8 years ago

A Pen by Marcello Insolera http://codepen.io/frontend_marcello/pen/aOaLrb?editors=010

clip 的應用，顫抖字，第二次看到

Rplus commented 8 years ago

Progress Bar Liquid Bubble http://codepen.io/wiseguy12851/details/mJZNqN/

利用 border-radius: 40% 巧妙地製作出波動效果非常有趣

Rplus commented 8 years ago

Amazingly sarcastic click&blink™ bunny! NOW WITH SOUND!!! http://codepen.io/FabioG/pen/doBEzY

直接 new Audio 物件就能播放了耶~ 手機也會播不過 audio format 要挑一下就是了

http://caniuse.com/#feat=mp3 mp3 支援最廣

Rplus commented 8 years ago

Timer demo By Bali Balo http://codepen.io/bali_balo/details/527676fb10a5638253c6897ff73e189b/

很有趣的寫法用 animation steps time function 來處理時間的遞進

不過不曉得為啥不能 fork ？

★續

fork 改成 jade + scss syntax 順便加上 reset 的功能 http://codepen.io/Rplus/pen/jbwLJd/

Rplus commented 8 years ago

Flat CSS Eyeball Outline http://codepen.io/hexagoncircle/pen/RrPgYQ

很有趣~ 用 border-radius 切成眼睛樣子很有創意~

Rplus commented 8 years ago

http://codepen.io/CrocoDillon/pen/AdtLI 處理地蠻漂亮的 text-shadow

巧妙的半透明文字搭配 text-shadow 組成立體陰影中間的黑色看似無用，但其實是和半透文字色一起稱起第一個灰色的文字陰影~

.shadow {
  color: rgba(red, .5);
  text-shadow: 0 0.02em 0.08em #ccc, 0 0 0 #000, 0 0.02em 0.02em #fff;
}

Rplus commented 8 years ago

http://codepen.io/CrocoDillon/pen/Htycs/

box-shadow 高級技巧 pseudo-element 的寬度變化搭配 box-shadow 的 dx 位移順利地用單一偽元素作出反向的兩色塊！搭起來就是個 slack icon animation 了~

  0% {
    width: $thickness;
    box-shadow:
      $lat (-$offset) nth($colors, 1),
      (-$lat) $offset nth($colors, 3);
  }
  35% {
    width: $size;
    box-shadow:
      0 (-$offset) nth($colors, 1),
      0   $offset  nth($colors, 3);
  }

Rplus commented 8 years ago

Batman A PEN BY massimo http://codepen.io/_massimo/pen/YwaaWe

use multiple svg polygons & creative translate to simulate parallax effect.

主要亮點在於利用 SVG 每個 polygon 尺寸不同搭配極大的 translate 位移，而完成了這個 parallax 效果

t: https://twitter.com/RplusTW/status/692094907217883136 f: https://www.facebook.com/rplus.tw/posts/1049953295072453

Rplus commented 8 years ago

Imperfect Buttons A PEN BY Tiffany Rayside http://codepen.io/tmrDevelops/pen/VeRvKX/

Hand-Drawn Border Buttons

使用歪斜的 border 來模擬手繪風

border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

Rplus commented 8 years ago

http://codepen.io/Kseso/pen/JBrcD DYNAMIC INSIDE BLUR PURE CSS A PEN BY Kseso

利用 background: inherit 一路繼承下來再使用 background-attachment: fixed; 固定位置接著再隨意加上各式各樣的 blur style (svg or CSS~) 這樣就完成了

不過要留意 fixed 會有效能衝擊 (( 因為瀏覽器要背地去狂算背景圖的定位~

Rplus commented 7 years ago

CSS only scroll indicator a pen by Mike http://codepen.io/MadeByMike/pen/ZOrEmr/

利用三角斜切的背景製作出純 CSS 的 scroll indicator 不需要用 js 去算目前捲動位置了~ 非常高明的技巧與 Lea Verou 的 scroll shadow 都很刁鑽的應用方式

有拉回來一個用 background-attachment: fixed + 多重背景更集中樣式的作法但是因為 mobile 瀏覽器大部份堆 fixed bgi 支援度都不高所以其實泛用性不高~ http://codepen.io/Rplus/pen/dXgVpW

Rplus commented 6 years ago

CSS-only shimmering neon text https://codepen.io/giana/details/qmKNeE/

利用多重 blur + filter + mix-blend-mode 的文字特效動畫！！非常非常厲害的 combo 技！！

Rplus commented 6 years ago

Selectable Screen Reader Text on Images https://codepen.io/denmch/pen/pPmZXK

利用 user-select: all 一併選取看不到的文字適用於 logo 帶字

CLICK THE LOGO! Screen readers will see text and ignore the logo (with a null alt attribute), while clicking the logo in a visual browser will select the parent container so you can copy the hidden text contained.

It's achieved through user-select: all on the parent and pointer-events: none on the logo image.

The hidden screen-reader text is also achieved in a novel way, with position: absolute and transform: scale(0). This even seems to work in Opera Mini though Can I use… doesn't think it should.

This can be applied creatively in other ways.

Rplus commented 6 years ago

Pure CSS Halftone Effect https://codepen.io/coreh/pen/LQJBLa?editors=0100

blur filter + mix-blend-mode => magic effect !

via: https://marco.blog/en/2018/02/pure-css-halftone-effect/

tw: https://twitter.com/RplusTW/status/968184876485640196

Rplus commented 5 years ago

在 :hover 時簡單的伸縮效果

video: https://imgur.com/H0wa39D

source: https://www.twreporter.org/a/ankang-community