CSS – 這世上 沒有偶然 只有必然 https://wordpress.lokidea.com 幻幽的小小分享區 Sat, 22 Jul 2023 14:51:27 +0000 zh-TW hourly 1 CSS 可以根據版型給予對應的設定 https://wordpress.lokidea.com/2337/css-%e5%8f%af%e4%bb%a5%e6%a0%b9%e6%93%9a%e7%89%88%e5%9e%8b%e7%b5%a6%e4%ba%88%e5%b0%8d%e6%87%89%e7%9a%84%e8%a8%ad%e5%ae%9a/ https://wordpress.lokidea.com/2337/css-%e5%8f%af%e4%bb%a5%e6%a0%b9%e6%93%9a%e7%89%88%e5%9e%8b%e7%b5%a6%e4%ba%88%e5%b0%8d%e6%87%89%e7%9a%84%e8%a8%ad%e5%ae%9a/#respond Sat, 22 Jul 2023 14:51:18 +0000 https://wordpress.lokidea.com/?p=2337 閱讀全文 CSS 可以根據版型給予對應的設定]]> 在 CSS 的 Media Query 裡面，有一個設定可以直接根據版面是橫版還是直版來判斷。

orientation: landscape

橫版 或是 橫向

orientation: portrait

直版 或是 直向 或是 縱向

具體看過 w3schools 的範例之後，就會發現，
橫向就是寬大於高，例如 1920 x 1080
直向就是高大於寬，例如 1080 x 1920

用這個設定來進行版面佈局的調整

會比用不同寬度的呈現更好，當然也可以根據寬度加上直向或橫向的組合去進行更細微版型佈局的控制，這樣不同裝置上面的呈現就會更妥當。

參考連結：

]]> https://wordpress.lokidea.com/2337/css-%e5%8f%af%e4%bb%a5%e6%a0%b9%e6%93%9a%e7%89%88%e5%9e%8b%e7%b5%a6%e4%ba%88%e5%b0%8d%e6%87%89%e7%9a%84%e8%a8%ad%e5%ae%9a/feed/ 0 10個關於Responsive Design的提示 https://wordpress.lokidea.com/1639/10%e5%80%8b%e9%97%9c%e6%96%bcresponsive-design%e7%9a%84%e6%8f%90%e7%a4%ba/ https://wordpress.lokidea.com/1639/10%e5%80%8b%e9%97%9c%e6%96%bcresponsive-design%e7%9a%84%e6%8f%90%e7%a4%ba/#respond Sat, 22 Jul 2017 03:30:15 +0000 https://wordpress.lokidea.com/?p=1639 閱讀全文 10個關於Responsive Design的提示]]> 這10點被製作在這張圖片上面
一開始列出2010年跟2012年各地區的手機流量
接著是10點提示

  1. 保持你的版面簡單 (KEEP YOUR LAYOUT SIMPLE)
  2. 使用媒體查詢 (USE MEDIA QUERIES) + MOST FREQUENT RESOLUTIONS
  3. 定義中斷點 (DEFINE THE BREAKPOINTS)
  4. 讓你的版型更靈活 (MAKE YOUR LAYOUT FLEXIBLE)
  5. 正確呈現你的圖片 (MAKE YOUR PICTURES BEHAVE)
  6. 別忘記 MAX & MIN (DON’T FORGET MAX&MIN)
  7. 產生最好的相對性內容 (MAKE MOST THINGS RELATIVE)
  8. 當使用手機端，要線性思考設計 (WHEN MOBILE LINEARIZE)
  9. 省略非必要的內容 (SKIP THE NON ESSENTIAL CONTENT)
  10. 確認你的META VIEWPORT (CHECK YOUR META VIEWPORT)


這些專有名詞真是不好翻譯呢
每一點都可以寫一篇獨立文章呢
看來之後文章的題材又增加不少了
原始連結
https://www.pinterest.com/pin/162270392798680920/

]]> https://wordpress.lokidea.com/1639/10%e5%80%8b%e9%97%9c%e6%96%bcresponsive-design%e7%9a%84%e6%8f%90%e7%a4%ba/feed/ 0 使用一致的社交登入按鈕【Social Buttons for Bootstrap】 https://wordpress.lokidea.com/1610/%e4%bd%bf%e7%94%a8%e4%b8%80%e8%87%b4%e7%9a%84%e7%a4%be%e4%ba%a4%e7%99%bb%e5%85%a5%e6%8c%89%e9%88%95%e3%80%90social-buttons-for-bootstrap%e3%80%91/ https://wordpress.lokidea.com/1610/%e4%bd%bf%e7%94%a8%e4%b8%80%e8%87%b4%e7%9a%84%e7%a4%be%e4%ba%a4%e7%99%bb%e5%85%a5%e6%8c%89%e9%88%95%e3%80%90social-buttons-for-bootstrap%e3%80%91/#respond Mon, 10 Jul 2017 03:30:55 +0000 https://wordpress.lokidea.com/?p=1610 閱讀全文 使用一致的社交登入按鈕【Social Buttons for Bootstrap】]]> 剛好看到 HackMD – Markdown 協作筆記 的社交登入按鈕

五個社交平台都是一致的按鈕
就想說用『btn btn-lg btn-block btn-social btn-facebook』
去搜尋一下看看會找到甚麼 【我的預設搜尋已經改為 duckduckgo.com 了】


第三個結果 『Bootstrap Snippet Social Buttons for … – Bootsnipp.com』

這應該就是我要找到的東西了
但是 bootsnipp.com 底下應該不是原站
點了 lipis.github.io/bootstrap-social 進去發現
就是這個站了

補充：

  1. 第三個結果 『Bootstrap Snippet Social Buttons for … – Bootsnipp.com』
    這頁面上的社交登入按鈕只有 12個 網站的，應該是舊版
  2. lipis.github.io/bootstrap-social 原站的社交登入按鈕有 21個網站
    去查了一下，現在版本是 5.1.1，12個 按鈕是 3.0.0
    仔細看了看，應該是 Font Awesome 的版本差異
    bootsnipp分享的版本是 Font Awesome 4.0.3
    現在 bootstrap-social 的 Font Awesome 版本為 4.7
  3. bootsnipp.com 這個站感覺挺不錯的
    可以使用很多個CSS Frameworks分享製作成果

  4. 也用 alternativeto.net 找了一下 bootsnipp.com
    類似服務果然真的不多
    只有 jsFiddle、CodePen
    不過 alternativeto.net 的資料關聯真的不精準
    有機會來寫一篇關於【線上前端作品分享平台】的文章好了
  5. 【Social Buttons for Bootstrap】首頁上有個很大的宣傳連結


     New GitHub Stats  這個站應該是作者自己做的
    上面有github的統計資料，感覺可以挖出很多有趣的關係

]]> https://wordpress.lokidea.com/1610/%e4%bd%bf%e7%94%a8%e4%b8%80%e8%87%b4%e7%9a%84%e7%a4%be%e4%ba%a4%e7%99%bb%e5%85%a5%e6%8c%89%e9%88%95%e3%80%90social-buttons-for-bootstrap%e3%80%91/feed/ 0 JSFiddle-前端的實驗平台【190/366】 https://wordpress.lokidea.com/1067/jsfiddle-%e5%89%8d%e7%ab%af%e7%9a%84%e5%af%a6%e9%a9%97%e5%b9%b3%e5%8f%b0%e3%80%90190-366%e3%80%91/ https://wordpress.lokidea.com/1067/jsfiddle-%e5%89%8d%e7%ab%af%e7%9a%84%e5%af%a6%e9%a9%97%e5%b9%b3%e5%8f%b0%e3%80%90190-366%e3%80%91/#respond Fri, 08 Jul 2016 15:23:53 +0000 https://wordpress.lokidea.com/?p=1067 閱讀全文 JSFiddle-前端的實驗平台【190/366】]]> JSFiddle 跟昨天介紹的CodePen是類似的平台
都是使用HTML、CSS、JS
去寫相關的Code用來展示一些功能或是測試自己寫的功能使用的

JSFiddle 首頁進去就可以直接寫code，也支援群組對談
而 CodePen 則是首頁可以看到很多的範例，社交性比較強
有機會再來比較這類網站的功能差異吧

]]> https://wordpress.lokidea.com/1067/jsfiddle-%e5%89%8d%e7%ab%af%e7%9a%84%e5%af%a6%e9%a9%97%e5%b9%b3%e5%8f%b0%e3%80%90190-366%e3%80%91/feed/ 0 CodePen-前端的藏寶庫【189/366】 https://wordpress.lokidea.com/1064/codepen-%e5%89%8d%e7%ab%af%e7%9a%84%e8%97%8f%e5%af%b6%e5%ba%ab%e3%80%90189-366%e3%80%91/ https://wordpress.lokidea.com/1064/codepen-%e5%89%8d%e7%ab%af%e7%9a%84%e8%97%8f%e5%af%b6%e5%ba%ab%e3%80%90189-366%e3%80%91/#respond Thu, 07 Jul 2016 15:45:33 +0000 https://wordpress.lokidea.com/?p=1064 閱讀全文 CodePen-前端的藏寶庫【189/366】]]> CodePen 可以在上面測試自己寫的東西
更多人把自己的小作品展示在上面
所以很多有趣的內容可以在上面找到
包括非常多CSS刻出來有趣的作品

剛好把CodePen丟到 alternativeto 去搜尋了一下
除了常見的幾個服務
也有很多沒有看過的服務
下次再來分別研究研究在分享給大家了

]]> https://wordpress.lokidea.com/1064/codepen-%e5%89%8d%e7%ab%af%e7%9a%84%e8%97%8f%e5%af%b6%e5%ba%ab%e3%80%90189-366%e3%80%91/feed/ 0 前端開發中文資源【42/366】 https://wordpress.lokidea.com/547/%e5%89%8d%e7%ab%af%e4%b8%ad%e6%96%87%e8%b3%87%e6%ba%90%e3%80%9042-366%e3%80%91/ https://wordpress.lokidea.com/547/%e5%89%8d%e7%ab%af%e4%b8%ad%e6%96%87%e8%b3%87%e6%ba%90%e3%80%9042-366%e3%80%91/#respond Thu, 11 Feb 2016 07:00:32 +0000 https://wordpress.lokidea.com/?p=547 閱讀全文 前端開發中文資源【42/366】]]> 昨天找Font Awesome相關資料的時候
剛好看到中文的資源站
版本還停在3.0.2
不過主站的前端開發資料滿齊全的

網站名稱：Bootstrap中文网
網址：http://www.bootcss.com/


主要都是bootstrap與前端開發的中文資源
以下列出此站首頁所有的連結資源

  1. Bootstrap 编码规范 by @mdo
  2. jQuery API 中文手册
  3. Open CDN 开放CDN服务
  4. 优站精选 Bootstrap网站实例
  5. gulp.js 基于流的自动化构建工具
  6. LESS 一种动态样式语言
  7. Lodash JavaScript 工具库
  8. Underscore.js JavaScript 工具库
  9. Buttons CSS按钮样式库
  10. stickUp 让页面元素“固定”位置
  11. Responsive Nav 响应式导航
  12. Unslider jQuery轮播插件
  13. Flat UI Metro风格的Bootstrap
  14. LayoutIt! Bootstrap可视化布局
  15. Bootstrap Switch Bootstrap开关组件
  16. Sco.js Bootstrap组件增强版
  17. iCheck 增强复选框和单选按钮
  18. bootstrap-wysiwyg 为Bootstrap定制的可视编辑器
  19. Chart.js 精巧的JS图表绘制工具库
  20. Preboot Bootstrap之前世
  21. jQuery.Pin 固定页面元素的jQuery插件
  22. Bsie Bootstrap IE6兼容方案
  23. Messenger 非常酷的弹框(Alert)组件
  24. DateTime Picker 日期时间选择器
  25. jQuery UI Bootstrap 用Bootstrap美化jQuery UI
  26. Google Bootstrap Google风格的Bootstrap
  27. Metro UI CSS Bootstrap与Metro融合
  28. Font Awesome Bootstrap专用图标字体
  29. Simple Icons Icon汇
  30. Bootstrap Form Builder 在线表单构造器
  31. HTML5 Boilerplate 专业的前端模版
  32. Web Safe Colors Web安全色
  33. Bootstrap Docs Bootstrap文档全集
  34. Git Guide Git简易指南
  35. Grumble.js 气泡形状的提示（Tooltip）控件
  36. CIKONSS 纯CSS实现的Icon
  37. Headroom.js 隐藏或展示页面元素
  38. Grunt 项目构建工具
  39. Zepto.js JavaScript 工具库

中文翻譯以後，不見得每個站都有持續維護
有機會再來更新更新這些專案的情況吧

]]> https://wordpress.lokidea.com/547/%e5%89%8d%e7%ab%af%e4%b8%ad%e6%96%87%e8%b3%87%e6%ba%90%e3%80%9042-366%e3%80%91/feed/ 0 Font Awesome 好用的CSS工具【41/366】 https://wordpress.lokidea.com/545/font-awesome-%e5%a5%bd%e7%94%a8%e7%9a%84css%e5%b7%a5%e5%85%b7%e3%80%9041-366%e3%80%91/ https://wordpress.lokidea.com/545/font-awesome-%e5%a5%bd%e7%94%a8%e7%9a%84css%e5%b7%a5%e5%85%b7%e3%80%9041-366%e3%80%91/#respond Wed, 10 Feb 2016 10:30:50 +0000 https://wordpress.lokidea.com/?p=545 閱讀全文 Font Awesome 好用的CSS工具【41/366】]]> 今天寫了些Code
剛好有用到一個不錯的工具
使用自行檔配合CSS來顯示圖示
還支援大小變化，動畫顯示
圖示翻轉、還可以重疊圖示
整個就是超級好用啊!!!

名稱：Font Awesome
類型：網站服務
網址：http://fontawesome.io/
Github： FortAwesome/ Font-Awesome

延伸閱讀：
Font Awesome，果然厲害！ – 黑暗執行緒

]]> https://wordpress.lokidea.com/545/font-awesome-%e5%a5%bd%e7%94%a8%e7%9a%84css%e5%b7%a5%e5%85%b7%e3%80%9041-366%e3%80%91/feed/ 0 CSS background 背景屬性【11/366】 https://wordpress.lokidea.com/453/css-background-%e8%83%8c%e6%99%af%e5%b1%ac%e6%80%a7%e3%80%9011-366%e3%80%91/ https://wordpress.lokidea.com/453/css-background-%e8%83%8c%e6%99%af%e5%b1%ac%e6%80%a7%e3%80%9011-366%e3%80%91/#respond Mon, 11 Jan 2016 00:30:49 +0000 https://wordpress.lokidea.com/?p=453 閱讀全文 CSS background 背景屬性【11/366】]]> 這幾天遇到背景屬性
究竟要分開寫還合在一起寫好
所以就查了一下

http://www.w3.org/TR/CSS2/colors.html
CSS2的定義寫得很清楚呢

Value: [<‘background-color’> || <‘background-image’> || <‘background-repeat’> || <‘background-attachment’> || <‘background-position’>] | inherit

position其實可以定義顯示的背景長寬，
而CSS3則是把size也抽出來變成獨立的屬性
http://www.w3.org/TR/2002/WD-css3-background-20020802/

]]> https://wordpress.lokidea.com/453/css-background-%e8%83%8c%e6%99%af%e5%b1%ac%e6%80%a7%e3%80%9011-366%e3%80%91/feed/ 0 圖片垂直方向的對齊 https://wordpress.lokidea.com/272/%e5%9c%96%e7%89%87%e5%9e%82%e7%9b%b4%e6%96%b9%e5%90%91%e7%9a%84%e5%b0%8d%e9%bd%8a/ https://wordpress.lokidea.com/272/%e5%9c%96%e7%89%87%e5%9e%82%e7%9b%b4%e6%96%b9%e5%90%91%e7%9a%84%e5%b0%8d%e9%bd%8a/#respond Thu, 18 Jun 2015 15:55:18 +0000 https://wordpress.lokidea.com/?p=272 閱讀全文 圖片垂直方向的對齊]]> 今天遇到一個情況
整串文字裡面，有穿插一張圖片
要設定這張圖片的對齊
於是google一下CSS的做法
找到了一個屬性

CSS vertical-align 屬性
連結：CSS vertical-align 屬性 – Wibibi

因為要讓圖片向上對齊
就用了

vertical-align : super;

讓圖片對齊到上標的位置
 

]]> https://wordpress.lokidea.com/272/%e5%9c%96%e7%89%87%e5%9e%82%e7%9b%b4%e6%96%b9%e5%90%91%e7%9a%84%e5%b0%8d%e9%bd%8a/feed/ 0 純CSS喬巴 https://wordpress.lokidea.com/171/%e7%b4%94css%e5%96%ac%e5%b7%b4/ https://wordpress.lokidea.com/171/%e7%b4%94css%e5%96%ac%e5%b7%b4/#respond Sun, 26 Apr 2015 08:33:48 +0000 https://wordpress.lokidea.com/?p=171 http://blog.chibc.net/learning/uibeginner-daily/848

]]> https://wordpress.lokidea.com/171/%e7%b4%94css%e5%96%ac%e5%b7%b4/feed/ 0