Travel notes
三義勝興車站 / 367苗栗縣三義鄉88號
.....
苗栗親子景點
很多年前我曾經去過三義,而當時想去的地方就是勝興車站
但很不幸的我並不知道那邊是在如此的高的地方
自不量力的搭著客運到了西湖渡家村,想徒步走去這裡
下場就是非常悽慘,因為那邊沒有任何...
大眾運輸 (ʘ言ʘ)
沒公車沒計程車.. 加上後來知道勝興真的很遠 , 所以我沿路從西湖走到了三義火車站
ಥ⌣ಥ是後來幾年之後 , 我們家族旅遊包了遊覽車~~~
耶思 ಥ⌣ಥ
終於可以一雪當年的笨蛋恥 XD ~~
Art ... 每一個景點都要畫一張插畫做個記錄!
2020.09 三義勝興車站 / 行徑路途
t shirt 變色效果 css + html + jQuery
分享一個網頁上常見的效果, 就是類似像這樣的
Color menu + t shirt 變色效果
這個效果其實非常容易 , 首先先建立一個基本的 html
(另外您要自備一張去背符合頁面的 png 圖檔 )
<div class="image">
<div class="color"> <!--這個標籤將會用來變色-->
<img alt="ts" src="/images/blog/ts.png">
</div>
</div>
<div class="color-menu">
<!--這裡我將所有的顏色連結直接寫上css
並加入一個自訂的data-name
裡面的參數就是對應的色碼
-->
<a style="background: #cb8e00;" data-name="#cb8e00" href="javascript:;"></a>
<a style="background: #bf3922;" data-name="#bf3922" href="javascript:;"></a>
<a style="background: #d05d28;" data-name="#d05d28" href="javascript:;"></a>
<a style="background: #792423;" data-name="#792423" href="javascript:;"></a>
<a style="background: #a63437;" data-name="#a63437" href="javascript:;"></a>
<a style="background: #903373;" data-name="#903373" href="javascript:;"></a>
<a style="background: #314f6f;" data-name="#314f6f" href="javascript:;"></a>
Scroll fixed Menu
浮動的網頁選單其實是非常容易的 , 例如我想讓它永遠固定在上方, 方便使用者
隨時都可以點選想進去的畫面 , 最基本在無特效的狀況下, 就是Css 設定
position: fixed;
並讓它的層級在最上層的設定 像是...
#header {
position: fixed;
top:0;
left: 0;
right: 0;
z-index: 99999;
width: 100%;
}
這樣就能呈現最基本所謂的浮動 menu , 比方說我要當視窗滾動到一個程度後
選單才會從上方用滑動的方式由上往下滑進 , 如果想加這類效果光靠css
是不夠的 , 你必須與 js 做互相對應才行, 這個效果必須要用到的函示為
“scroll“
首先一定要有html標籤 ~
<header id="header">
<nav>
<a href="#">menu-1</a>
Travel notes
今夜星辰休閒農場 / 彰化縣彰化市石牌路一段428號
.....
彰化親子景點
之前我們一直在找尋北台灣的草泥馬蹤跡,
後來聽說台北市立動物園有飼養! 但是只有一隻
而且被嚴格管理住, 後來又得知綠世界也有草泥馬
的蹤跡實際去看過發現也是不太過癮,因為我曾看
過頑皮世界的草泥馬園區是可以與他們近距離
互動的(例如惹到牠們被噴口水) T T
Art ...
在一次跟家族旅遊的行程中, 不小心掉進了這個農場 ,
叫做"今夜星辰休閒農場"一開始當然不覺得什麼,想說
就是農場吧~沒想到裡面有一群可愛的...
草泥馬!!(尖叫中!!)
2020 今夜星辰休閒農場 / 門口側邊
2020 今夜星辰休閒農場 / 售票口
Travel notes
富貴角燈塔 / 新北市石門區楓林路
.....
新北市親子景點
是台灣最北端的一座燈塔 . 小時候我爸常常帶我們去很有名的十八王公廟
所以對於這個燈塔也是只聞名從沒見過面 .. ( 見識太少 )
今天本來的行程是非常簡單的,就是到十八王公去買燒酒螺然後就回家
我老婆突然想到不然人都已經去那邊了,就去解鎖一下這個從沒去過的地方
帶著全家一起 go go go!
2020.09 富貴角燈塔旅行 / 富貴角燈塔遠拍
Art ...
2020.09 富貴角燈塔旅行 / 富貴角燈塔插畫繪筆記
Then ...
因為本來的行程只是要去買個燒酒螺 , 所以一直在家裡混到下午三點才從圓山出發
所以到了富貴角公園的時候已經是將近五點 , 天色已經開始越來越暗了
不過行程還算順利 ..
Travel notes
新竹親子景點
在很小的時候 , 我曾經聽過我哥哥說,他們有一次的校外教學去了一個非常有趣新奇的地方
叫做小叮噹科學園區.. 位於新竹縣新豐鄉
其實說真的,當時候我一直以為小叮噹是那個"小叮噹"( 哆啦A夢 )
2020.09 小叮噹旅行
在之後也聽過許多同年紀的好友講過這裡 , 對他們來說 , 這是一個充滿兒時記憶的世界
但對我來說 , 我只是在當時後 聽過而已 ~ 
本來這次的行程是規劃埔心農場 , 但是被汽車的導航三導四導導過了頭
下錯交流道 , 當時的時間也已經有點晚了, 正好看到小叮噹科學園區的指標
於是臨時跟改行程,來這個我已經了過30幾年卻從不曾進去過的地方..
Then ...
我們到達了地點之後忘記我們帶著我們家的狗狗阿東一起外出 , 原本想說完蛋了
看來今天的行程就要在這莫名其妙的迷路中結束, 因為一般園區是不能帶狗的
不過好險我們有即時google一下~
發現這裡是可以帶狗狗進去的 , 在台灣 , 能夠帶小狗進去的樂園還真的是不常見!
一般我們在html 的連結 hover 
變化不外乎就是單純變色或是變淡,
上次遇到一位客戶他想要做成滑鼠移過去時會有多色的變化, 
這個做法也非常簡單在此分享作法！
首先這是一個html連結標籤 <a href="#" id="hover-a">文字特效</a>
這是基本的ＣＳＳ
<style>
＃hover-a {
color: #333;
}
＃hover-a:hover {
color: #red;
}
</style>
基本的效果就是這樣
加了動態的效果就是這樣
這個做法非常容易 在hover時加上關鍵影格即可
<style>
#hover-a-2 {
font-size: 30px;
display: block;
color: #333;
}
#hover-a-2:hover {
position 這個屬性是在網頁css排版中會經常用到的, 但是它存在許多需要注意的地方
例如 z-index 層級的問題, 有時候設定錯誤會產生非常尷尬的現象, 像是現在很流行
製作浮動固定式的 header 一旦你的層級出現錯誤就會發生違和的重疊畫面
這種現象跟你的html階層排版也有關係,
有時候不是你一個設定 z-index:0; 一個設定 z-index:10;
就一定能避免這種現象！
position 常用的屬性有以下
relative : 相對位置 不浮動也不固定 只能靠 top類屬性移動小位置
absolute : 絕對位置 是屬於浮動式但是不會固定視窗位置;
fixed : 浮動式可隨視窗固定位置; 這個沒什麼好講的, 就是浮動效果
他們共用的幾個值分別為
top , left , right , bottom // 這是針對位置
z-index 為層級
例如：
style {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:99;
}
由於我本身有兼職做牆壁彩繪, 常常讓我最困擾的部分就是場地的大小
我該如何知道實際坪數 , 每次都是將幾＊幾交給我老婆去計算,
所以我請我老婆乾脆將公式給我, 我來寫一個簡單的坪數計算表單
也跟來此的前端初學者做個分享交流：
所以回歸到上一個主題javascript加減計算的延伸,
先寫好基本的html
<div class="box-1">
<h2>公分換算坪數</h2>
<input type="text" name="plus" class="plus" value="" placeholder="加法" onClick="placeholder=''">*
<input type="text" name="less" class="less" value="" placeholder="加法" onClick="placeholder=''">
<strong>計算的結果
<!-- 換算的三種結果 -->
<span id="span-1"></span>平方公分
<span id="span-2"></span>平方公尺
<span id="span-3"></span>坪數
</strong>
</div>
接下來就是jquery代碼
$('.submit').on('click',function(){
var plus = $('input[name="plus"]').val();
var less = $('input[name="less"]').val();
var square = 10000;
前端基礎分享
CSS padding & CSS margin 內外距的分別
對於初學者來說, padding & margin 是種非常容易搞混的屬性 ,
簡單來說 padding 是屬於框架的內距 , margin 是屬於框架的外距
例如: padding 是這樣:
這裡設定內距 padding 20px
padding是往框架內縮距離,而它的屬性共分五種方式
padding-top:20px; //只針對上距
padding-left:20px; //只針對左距
padding-right:20px; //只針對右距
padding-bottom:20px; //只針對下距
當然你也可以這樣寫:
padding:10px 10px 10px 10px; // 依序為 上右下左
padding:10px 0; // 上下為10px 左右為0
padding:0 10px; // 上下為0px 左右為10px
margin 是這樣 :
外距 margin 20px
margin是往框架外拉遠距離 ,
margin-top:20px; //只針對上距
margin-left:20px; //只針對左距
margin-right:20px; //只針對右距
margin-bottom:20px; //只針對下距
你也可以這樣寫:
最近有畫友跟我聊到 , 當在我創作時 ~ 這靈感到底是來自於哪裡?
我說 : 該來的它就是會來 , 它隨時可能出現 , 有時候它來自於你的 四週圍 .
像是前陣子我去南庄彩繪,那邊的裝潢讓我印象深刻, 我也拍了幾張照片,告訴自己有空要畫一下
逛完了整個民宿之後 , 回家我就做個紀錄打個草圖 , 加上自己最近去過動物園看過草泥馬
就這樣幾個元素拼湊一下,其實畫面就可以呈現出來了, 接這就是構圖要怎麼完整豐富,跟協調
日常生活的東西其實都可以是創作來源,例如
你不小心看到的風景圖
戈壁上的小山羊
網路上看到的山壁圖,加上一些小動物跟改變就可以成為一張插畫了!
d
午後咖啡街
臉書的網友提供的風景照 , 加上一些小創意 , 就是創作了
你的夢境
列夢人
夢境絕對是一個非常好的來源 , 只要你記得自己做過什麼夢!
節慶發想
飛象聖誕
css list-style 自訂計數器方式
一般我們在撰寫html帶有數字的有序列表時會運用到 ol + li
這種方式在文章編輯上是很好用的, 例如
<ol>
<li>順序一</li>
<li>順序二</li>
<li>順序三</li>
</ol>
呈現會像以下這樣這樣
但是這樣的樣式算是一號樣式, 最多讓你改個顏色
如果今天想要用一些比較華麗的樣式, 光靠 ol 是不夠的
那要怎樣可以達到自訂樣式？
首先先撰寫html 我們用 ul 來呈現
<ul class="ul">
<li>順序一</li>
<li>順序二</li>
<li>順序三</li>
</ul>
呈現如下
建議您在ul上加上class 以免造成全站在其他標籤的衝突
接下來我們撰寫css
.ul {
list-style: none;
padding: 0;
margin: 0
利用javascript的jQuery函式庫來編寫簡單的加減乘除,
首先這是基本要有的html標籤元素
接下來就是JQuery 語法
//將計算的方式賦予給submit
<script>
$('.submit').click(function(){
//加法
var plus = $('input[name="plus"]').val();
var less = $('input[name="less"]').val();
//var gg = plus + less; //這樣是錯誤的 22 + 22 會等於 2222 這樣只是顯示字串
var tt = plus*1 + less*1; //必須將兩個數字乘1再相加
var num = $('input[type="text"]').val(); //判斷是否為數字
if(isNaN((num)|| num =='' || num.substring(0,0)==0)){ //判斷是否為數字
alert('請輸入正確數字'); //非數字跳訊息警示
} else {
$('#span').text(tt); //正確數值即得結果
}
});
</script>
長期以來 因為身高還有體型嬌小帶很多"小人物"的心靈創傷是相當大的 , 看著路上的人各個比自己高比自己壯....
也一度長時間會讓人不太願意出門, 避免讓自己的自卑感更加濃烈！
向我也是其中之一, 但這幾年我努力做自己想做的事情, 每天畫畫, 每天研究一些工作上需要的知識跟技術,
慢慢我發現, 有人會在社群上叫我老師, 會開始請教一些有關畫畫的問題！
我體會到的是, 一個人的成就還有一群人對你的欣賞跟崇拜, 不會因為你的外表,你的身高, 或是你
不願面對的過去來進而受到影響 , 用自己的努力換來的成就, 那才是最高尚的！
2018年插圖 : 小人物咖啡館 (當我想通時畫的一張插畫, 時常提醒自己, 小人物也可以做大事)
我至今並無什麼成就 , 晚上一樣還是吃泡麵趕案子, 但我相信努力會有回饋, 縱使人生走到最後依然沒有任何回饋 ,
起碼人生也是精彩的走過！
歷史上有許多名人也都是身高不高個子嬌小的人物, 但心中藏有的信念卻比任何人都高,
像是：
拿破崙 - 法蘭西第一帝國建立者 身高158
邱吉爾 - 前英國首相 身高160
畢卡索 - 畫家 身高162
古斯塔夫·馬勒 - 作曲家 身高162
伏爾泰 - 法國思想家 身高160
2020同系列再添一筆！
我很喜歡10幾年前鄭智化的歌, 像是水手, 星星點燈, 他的歌詞就像是一種激勵一個人鬥志的亢奮劑
當你沮喪的時候, 這些字符就會環繞在你的耳邊, 要你堅強、要你振作、要你爬起來、要你繼續走下去！
總之, 只要心不滅鬥志不熄, 小人物也可以做大事！
水手歌詞：
苦澀的沙 吹痛臉龐的感覺
像父親的責罵 母親的哭泣 永遠難忘記
年少的我 喜歡一個人在海邊
捲起褲管 光著腳丫 踩在沙灘上
總是幻想海洋的盡頭有另一個世界
總是以為勇敢的水手是真正的男兒
總是一副弱不禁風孬種的樣子
在受人欺負的時候總是聽見水手說
他說 風雨中 這點痛算什麼
擦乾淚 不要怕 至少我們還有夢
他說 風雨中 這點痛算什麼
擦乾淚 不要問 為什麼
長大以後 為了理想而努力
漸漸的忽略了父親 母親和故鄉的消息
如今的我 生活就像在演戲
說著言不由衷的話 戴著偽善的面具
總是拿著微不足道的成就來騙自己
總是莫名奇妙感到一陣的空虛
總是靠一點酒精的麻醉才能夠睡去
在半睡半醒之間彷彿又聽見水手說
他說 風雨中 這點痛算什麼
擦乾淚 不要怕 至少我們還有夢
他說 風雨中 這點痛算什麼
擦乾淚 不要問 為什麼
尋尋覓覓尋不到活著的證據
都市的柏油路太硬踩不出足跡
驕傲無知的現代人不知道珍惜
那一片被文明糟踏過的海洋和天地
只有遠離人群才能找回我自己
在帶著鹹味的空氣中自由的呼吸
耳畔又傳來汽笛聲和水手的笑語
永遠在內心的最深處聽見水手說
相信很多設計師在幫客戶排版時經常會遇到一些困擾,就是客戶的文案都是Word檔,這個也不能怪客戶 ,因為對文書處裡來說
Word是編寫文案最方便的工具,有經驗的設計師都知道,我們要將word文件轉到 html上非常麻煩,雖然網路上有許多可以轉換的工具,但免不了會產生一大堆有的沒有的style樣式, 或是亂七八糟的廢碼,筆者這邊提供兩個招式給大家做個參考!
利用這個網站 wordtohtml 這個網站非常方便,你不需要上傳文檔去做轉換,只要從你的word選取你要的內容,直接貼在右邊的文字欄他就會快速轉換成html碼
接下來你會發現,他將word裡的樣式一字不漏的完全轉換給你,連空格也一併給你,如果只是幾行字刪各兩下到是不痛不癢, 但如果是表格的話..... 接下來就是第二招
打開這個網站 https://www.htmlwasher.com/ 將你剛剛轉換好的那一段落落長的html複製下來貼到Paste HTML to clean it up 的欄位裡,並按下 Wash , 如圖式! 它會立即清除所有廢碼跟遺留在標籤裡的style樣式!
https://www.facebook.com/NiceInteractiveMedia 這個方式不適用於有很多圖片的word檔
左圖右文是一直以來網頁設計不可缺少的排版方式,對於很有經驗的人來說,這並不是什麼大挑戰
但對新手來說就不一定了,一般想到左圖右文的排版方式可能就是用float屬性或是display:inline-block;
在設定 width:calc(100%/2);就可以實現兩欄排版,但是問題來了,在css排版上水平置中是很容易的,
假設html code是
圖片只要設定
img{
display:block;
margin:auto;
}
文字只需要text-align:center;就可達到
你要怎麼達到垂直置中?
有一種方式就是
Css排版屬性 display: inline-block;加上 vertical-align: middle; 屬性即可讓圖文垂直置中
這樣的方式左圖右文就可以讓垂直達到置中
另外再提一點,如果今天客戶要求一共兩列的兩欄式左圖右文,像是
因緣際會,今年我們接到了一個高人氣的民宿彩繪牆案件, 起初我一直在猶豫到底是不是要承接
最主要的原因莫過於我並不是專職的彩繪師,平常有工作,唯一能上工的時間就是放假
我也知道既然是位於南庄的山區 , 這地方肯定非常遙遠,對於住在台北的我......
2020年5月24號,我跟我老婆前往民宿了解彩繪內容 , 開了好久的山路終於抵達了
橄欖樹咖啡民宿! 首先我要先大讚一下他們的咖啡! 真的夭壽好喝!!
老闆娘手拉咖啡的功力相當精純! (重點又好喝)
開了三個小時左右的路途 ~ 終於抵達現場
場地登場!
這片外牆加上旁邊的鐵門一共11坪左右 , 其實也不算大 , 但它的地勢對我們非常不利,
兩側的高低差距甚大,因為它有一個坡道, 所以在整個地都是斜的, 就算有爬梯也沒有用
因為我一週只能上工兩天, 所以一開始我們並無法考慮採建鷹架 , 怕占用的時間過久,會影響到遊客
所以這個案件讓我頭痛的地方其實蠻多的 
加上店家告知,因為這裡位於山區, 下雨的頻率甚高
看場地的當天就下雨了~~夭壽唷
看完場地接下來就是與店家討論風格 , 其實店家老闆兩兄弟夫妻在裝飾的想法上是非常好的,
能創立一間位於深山又可以每日爆滿的網美店,其想法絕對不是等閒之輩呀! (挫哩但)
這次的案件對我而言,是最複雜的案件, 我老婆因為帶小孩所以能幫的部分也不多,所以大部分都是自己獨力完成
店家希望在這面牆上有著非常熱鬧的群體擬人化動物, 是以貓咪為主, 一共分為上牆下牆,廁所&哺乳室大門,
還有一個通往螢火蟲森林的鐵門 !
以下是這次施工的設計圖手稿
有一天我夢見一個夢, 這個夢裡頭有許多小雞在一座山谷裡面
他們過著自己的日常生活, 就跟我們人一樣有自己的家庭,自己的家
有著自己的朋友,有著自己的餐桌自己的情緒,其實動物本身就有著他們
的生活,只是我們不了解其中的方式
小雞谷(白雞山谷)Chicken valley
忘了裡面畫有幾隻小雞？
小雞谷過程記錄，我喜歡的插畫形象是越簡單越好，就像小孩子畫的一樣
FB粉絲團 https://www.facebook.com/linmojason
IG: https://www.instagram.com/linmohart/
近期愛上了畫動物,很久以前我是不太愛畫動物的, 但人家說, 一個人會因為小孩而改變這是真的
因為我兒子的關係現在我都開始畫動物了！
我喜歡寫實的風格＆插畫的風格, 因為里莫簡本身還是喜歡畫插畫
寫實的對我而言只是個練習, 因為這些姿態都是取自攝影師的智慧
也就是說都是利用素材來描繪, 不算原創！當然這是里莫簡本身的觀念而已
作品名：紅金剛鸚鵡
材料：牛皮紙 自動筆 白色粉彩筆
size: 22.9cm*30.5cm
作品名：非洲灰鸚鵡
材料：牛皮紙 水性色鉛筆
size: 22.9cm*30.5cm
作品名：獅吼
材料：白色素描紙 油性色鉛筆
size: 4k
作品名：小黑狗
材料：牛皮紙 水性色鉛筆
size: 22.9cm*30.5cm
海灘風壁畫，這是半寫實半插畫風的一面設計，這面牆的顏色本人很喜歡，
畫畫的樂趣在於會畫成如何，自己也不會預先知道！
里莫彩繪事務所粉絲團
https://www.facebook.com/linmojason/
By Linmo Chien 里莫簡
