Web Design, Development Blog and Graphic Resources (Path I)

Tympanus Web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. tympanus.net   Free images / Graphic resources Unsplash Free high-resolution photos. https://unsplash.com/   Graphic Burger Free mockups, UI kits, icons, text effects, background and others. http://graphicburger.com/ Uplabs Daily UI Inspiration & Downloads very best of Android, … Continue reading Web Design, Development Blog and Graphic Resources (Path I)

นึกถึง Muzli ทุกครั้งเวลาหิว

Muzli เป็น Chrome extension สำหรับเราแล้ว ถือว่าเป็นแหล่งเรียนรู้มหาศาล เป็นแหล่งรวม Inspiration เนื่องจากหลักๆ เขาก็จะหยิบเอา ดีไซน์เก๋ๆ กับเว็บไซต์ที่ สวยๆ มาเป็น feature ใหม่สดทุกวัน หรือเราเข้าไป setting เลือกเว็บไซต์ที่เราอยากจะดู feed ก็ได้ เนื้อหาอื่นๆ เรื่องเกี่ยวกับ Technology, Product ใหม่ๆ ก็มีนะ ส่วนการตั้งค่าก็ง่ายมาก เข้าไปที่เมนูตั้งค่า ที่มุมซ้ายใต้โลโก้ แต่จะบอกว่ามีแต่ข้อดีก็ไม่ได้ ข้อเสียก็มีบ้าง ช่วงแรกๆ ที่ลง extension ใหม่ บางทีทำงานอยู่ เปิด New Tab เจอบทความที่น่าสนใจ หลุดโฟกัสซะงั้น เพราะฉะนั้นแบ่งเวลาเสพย์ดีๆ นะ ฮ่าาาาา : D ไปตามหา Muzli กัน https://muz.li/ และย้อนดู Weekly Inspiration, UI, UX … Continue reading นึกถึง Muzli ทุกครั้งเวลาหิว

CSS PEEPER

CSS PEEPER เป็น Chrome extension ตัวนึง ที่ช่วยให้เราเช็ค style ให้เหมือนกับ design ได้เร็วมากขึ้น ที่มา : https://csspeeper.com/ ทำอะไรได้บ้าง แสดงข้อมูลพื้นฐาน ของเว็บเราได้ เช่น ขนาดของไฟล์ css, เวลาที่ใช้ในการโหลดไฟล์, ชนิดของ font ที่ใช้ใน header และใน body แล้วก็ยังบอกสี Background ของ body ด้วย สามารถ export ไฟล์รูปที่ใช้ในหน้าเว็บเราได้ โดย export ในรูปแบบ zip ไฟล์ นอกจากนั้นก็ยังแสดงรายละเอียดความ กว้าง และสูงของรูปในเว็บด้วย แสดง pallete สีที่เราใช้ในเว็บได้ (มันจะแสดงเฉพาะ สีที่อยู่ใน element html ไม่รวมถึงรูปภาพนะ) แสดงชื่อคลาสที่เราใช้ ถ้าไม่มีชื่อคลาสก็จะแสดงเป็นชนิดของ element เวลาคลิกที่ element ก็จะแสดงรายละเอียดของ … Continue reading CSS PEEPER

Debugging Safari on mobile

How to setting Go to 'General' --> 'Safari' --> 'Advanced' --> turn on 'Web inspector' Open Safari Browser on your device Connect your device to Mac with USB. Open Safari Browser on Mac and select 'Develop' on menu bar --> select your device Select website that you would like to inspect.

Compass: Sprite Image

เอาไว้ตอนตั้งค่า sprite ภาพ ด้วยการใช้ compass Above style.scss $icons-spacing : 150px; $icons-layout: vertical; $icons-sprite-dimensions: true; @import "icons/*.png"; @include all-icons-sprites; $icons: sprite-map("icons/*.png");   config.rb http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" generated_images_dir = images_dir + "/generated" javascripts_dir = "javascripts" http_images_path = "sites/all/themes/.../images"

 Convert CSS --> SCSS sass-convert -F css -T scss style.css style.scss   Compress CSS Output scss -t compressed path/to/input.scss path/to/output.css

ปัญหา Font แปลงเป็น Font-face ไม่ได้

ปัญหา ฟอนต์บางอันมันไม่สามารถแปลงเพื่อใช้งาน Font-face ได้ หรือบางทีแปลงได้แล้ว แต่บาง Browser ก็ไม่ยอมอ่านฟอนต์ ใช้ http://www.freefontconverter.com แปลงจาก ttf เป็น otf ก่อน แล้วเอาไฟล์ otf ที่ได้มาไปเข้า http://www.fontsquirrel.com/fontface/generator อีกที CR. พี่ดิว

Bike in Dream

วันนี้ว่างเว้นจากการทำงานคะ จึงแอบเข้าไปเล่นออกแบบ fixed gear มาคะ (แอบตรงไหน โจ่งแจ้งมาก)   - -" แต่แต่งไปแต่งมาก็เพลินดีเหมือนกันนะคะ เผื่อใครสนใจอยากลองแต่งจักรยานในฝันกัน ก็ลองเข้าไปเล่นดูนะคะ ตามลิงค์นี้เลยค่ะ Pedalmafia   ถึงจะเป็นจักรยานในฝัน ต้องมีสักวันแหละที่ฝันเป็นจริง ..ถ้าเราไม่ทิ้งฝันนั้นไปก่อนน๊ะ  : )        

มาทำรูปของเล่นด้วย tiltshiftmaker

  เห็นชาวบ้านเขาถ่ายรูปมา ดูเป็นของเล่นน่ารักดีจัง ใช้เลนส์อะไร โหมดอะไร มันต้องAdvance แน่ๆ มือใหม่อย่างเรา เกิดความคิดอยากทำบ้าง..   อยากทำให้ ภาพธรรมดาๆ กลายเป็นภาพไม่ธรรมดา .. มันดูน่ารัก สดใส ดูแล้วสบายใจดี   การทำรูปของเล่น มีหลายวิธีการแต่วิธีที่ง่ายๆ ที่จะมาแนะนำกันวันนี้ก็คือ .. ใช้ โปรแกรม ออนไลน์ ค่ะ จากเวป Tiltshiftmaker   ไม่ยากเลย ..  เราแค่ทำการ Upload รูป  แล้วปรับแต่งอะไรนิดๆหน่อยๆ แล้วแต่ความพอใจ เลือกขนาดรูปภาพที่เราต้องการ .. แล้วก็ ทำการ Download ภาพ Save เก็บปั๊บ! แค่นี้เราก็มีรูปของเล่นไว้ให้เชยชมแล้วค่ะ : )           Before     … Continue reading มาทำรูปของเล่นด้วย tiltshiftmaker