Y38Design

プロダクトデザインをはじめとして、
Webデザイン、グラフィックデザインなどを手がけるデザイナーY38のサイトです。

Profile Portfolio Blog

Y38Design

Profile Portfolio Blog

Blog

SASSで背景画像に使うSVGの色を変更する

Webデザイン 2020年7月5日 日曜日 8:19:33

参考:https://tomisan.com/2018/07/background-image-svg-color-sass-scss/

@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}

@function url-encode($string) {
$map: (
"%": "%25",
"<": "%3C", ">": "%3E",
" ": "%20",
"!": "%21",
"*": "%2A",
"'": "%27",
'"': "%22",
"(": "%28",
")": "%29",
";": "%3B",
":": "%3A",
"@": "%40",
"&": "%26",
"=": "%3D",
"+": "%2B",
"$": "%24",
",": "%2C",
"/": "%2F",
"?": "%3F",
"#": "%23",
"[": "%5B",
"]": "%5D"
);
$new: $string;
@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}
@return $new;
}

//function
@function bg-svg($string) {
@return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}');
}
//variable
$icon-color1: #CCC;
$icon-color2: #555;
//style
.icon-view {
background-image: bg-svg('');
}

Sassの画像パスに変数を使う

Webデザイン

参考:https://www.it-swarm.dev/ja/css/sass%E3%81%AE%E7%94%BB%E5%83%8F%E3%83%91%E3%82%B9%E3%81%AB%E5%A4%89%E6%95%B0%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/941216378/

パスを返す関数を定義する:

//Vars
$assetPath : "/assets/images";
//Functions
@function get-path-to-assets($assetPath){
@return $assetPath;
}

関数を使用する:

body {
margin: 0 auto;
background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
width: 100%;
}

イラスト

イラストレーション 2020年2月1日 土曜日 12:44:27

友達が撮った写真をトレースして塗ったものたち

Photo by Yunochi

良いお年を〜

未分類 2019年12月31日 火曜日 21:26:47

オリキャラ、ボブ子さん

イラストレーション

ポニ子

イラストレーション 2019年11月9日 土曜日 13:11:09

最近時間があったので何かに取り憑かれたように描いてた。

mastodon不調

未分類 2019年8月13日 火曜日 7:16:42

先日から突如不調になった自鯖ふたつ。
なぜかほぼ同時に急に繋がったり繋がらなかったりを繰り返すようになった。
Chromeで見てるとタイムアウトかSSLがどうのっていうエラーのどちらかが出てくる。
nginxの設定はどこも間違ってないし、その他firewalldなんかも間違ってない。
なのに
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] bind() to 0.0.0.0:443 failed (98: Address already in use)
が何個も何個も連なって出てくるのはなんだろう。
80番と443番を使ってるポートを見てもダブりは無いぽいのに。
情報調べてもダブってるプロセスをkillしてnginx再起動で直るっていう情報ばかりなんだけど、そうやってもエラーが消えない。
それにWi-Fi環境や違う端末だと不具合なく見れるのに、自分のiPhoneの4G回線の時だけ繋がらなくなる。これも謎
はて、どうしたものか…

サーバ不具合

Webデザイン 2019年8月10日 土曜日 6:51:00

自分で立てたmastodonのサーバ二つ、ある日携帯から見れなくなる不具合に遭遇。
ところがパソコンからとか、家なりその辺のWiFiに繋いだら不具合無く見れる。
SSLというか証明書の関係かなと思っていろいろ調べてみたけど間違ったことはしてないみたい。てかそもそも何もしてないのに、サーバ二つとも同時多発的に起こったのが引っかかる。
あと80番と443番のポートがもうすでに何個も使われてるよ!っていうエラーを吐き出してて直らない。linuxとかnginxとかmastodonの中身とかデータベースとか、全く知識が無いのに手を出しちゃったのがまあいけないんだけど。
ホントは大学の友達が集まることができるサーバを建てたいんだけどな。
とりあえずなにか新しいサービスが始まったら手をつけずにいられないこのアレが直らないからアレ

塗ってみた

イラストレーション 2019年7月16日 火曜日 17:58:45

下のラフを整えて塗ってみた。
やはり線を整えると勢いが無くなって生っぽさだけが残ってしまうなぁ。

描いてみた

イラストレーション

特にどのキャラを真似するでもなくオリジナルとして描いてみた。
頭身を低くしたくてそうすると体を細く描かないといけないっぽいんだけど、気をつけないとガリガリに見えちゃう……
難しい

toTop