Hatena::Grouppico

おとなになんかならないで

|

Feb 12, 2010

CSS3(firefox / webkit)による太ボーダー 00:27

  background-image:
   -moz-linear-gradient(
    top right,  
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.3) 10%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.3) 60%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 90%,
    rgba(255, 255, 255, 0.3) 90%,
    rgba(255, 255, 255, 0.3) 100%
   );
  -moz-background-size: 30px 30px;
  background-image:
    -webkit-gradient(
    linear, right top, left bottom,
    color-stop(0.0, rgba(255, 255, 255, 0.3)),
    color-stop(0.10, rgba(255, 255, 255, 0.3)),
    color-stop(0.10, rgba(255, 255, 255, 0)),
    color-stop(0.40, rgba(255, 255, 255, 0)),
    color-stop(0.40, rgba(255, 255, 255, 0.3)),
    color-stop(0.60, rgba(255, 255, 255, 0.3)),
    color-stop(0.60, rgba(255, 255, 255, 0)),
    color-stop(0.90, rgba(255, 255, 255, 0)),
    color-stop(0.90, rgba(255, 255, 255, 0.3)),
    color-stop(1.00, rgba(255, 255, 255, 0.3))
   );
  -webkit-background-size: 30px 30px;

これでたぶんだいたい1:1の太さになるはずだけど、ちょっと違う感じがする。background-sizeの値で太さが変えられます。

デザイン変えた 00:14

http://d.hatena.ne.jp/chepooka/

nimbus系を画像なしでやるとどうなるかという感じで。

バナーのところが下に書いたボーダーです

Feb 11, 2010

CSS3(firefox / webkit)で斜めドットボーダー 18:14


  background-image:
   -moz-linear-gradient(
    top right,  
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.5) 5%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.5) 55%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0) 95%,
    rgba(255, 255, 255, 0.5) 95%,
    rgba(255, 255, 255, 0.5) 100%
   );
  -moz-background-size: 5px 5px;
  background-image:
    -webkit-gradient(
    linear, right top, left bottom,
    color-stop(0.0, rgba(255, 255, 255, 0.5)),
    color-stop(0.05, rgba(255, 255, 255, 0.5)),
    color-stop(0.05, rgba(255, 255, 255, 0)),
    color-stop(0.45, rgba(255, 255, 255, 0)),
    color-stop(0.45, rgba(255, 255, 255, 0.5)),
    color-stop(0.55, rgba(255, 255, 255, 0.5)),
    color-stop(0.55, rgba(255, 255, 255, 0)),
    color-stop(0.95, rgba(255, 255, 255, 0)),
    color-stop(0.95, rgba(255, 255, 255, 0.5)),
    color-stop(1.0, rgba(255, 255, 255, 0.5))
   );
  -webkit-background-size: 5px 5px;

参考

できました。

チープカは くろーむに のりかえた! 01:04

公開デザインwebkitバリバリのやつを作って上げていく予定。ここはwebkitで出来ることをいろいろ考えていきたいと思います。

Jan 4, 2010

曽我部さんのサイトがほとんどはてなダイアリーになってる 00:40

http://www.sokabekeiichi.com/top.html

リンク先がはてな曽我部さんの日記はてな

こうなったら曽我部さんにそが部に入ってもらうしか!!はいはい

|