CSS筆記

2017-05-17

將youtube embed的影品隨螢幕尺寸調整比例CSS解法

內嵌youtube影片或其他供應影音串流的平台最常遇到的就是iframe不知道寬高要設定為多少,尤其遇到響應式的狀況更是頭痛,今天搜尋了一下找到有個簡單的CSS解法,在這裡分享給大家。 HTML代碼 < div class="video-container">< iframe.......></iframe></div> 裡面的iframe就是我們用來內嵌的影音iframe, 我們在外面用個div把它包起來 CSS .video-container { position:relative; paddi...
更多資料
2017-02-14

用css讓圖片可以置中且保持比例縮放於指定框尺寸

HTML: <div class="frame"> <img src="foo"/> </div> CSS: .frame { height: 160px; /*can be anything*/ width: 160px; /*can be anything*/ position: relative; } img { max-height: 100%; max-width: 100%; width: auto; he...
更多資料
2016-12-31

Mac中 /usr/bin 的 Operation not permitted 解法

更新Mac OSX完後發現Ruby compass無法在Sublime Text 3下執行, 爬了一下文發現原來是更新的OSX加入了Rootless機制,用來防止惡意軟體程序攻擊,不過這確造成另一個困擾,就是軟體會因為權限的關係,很難在互相取用資源,所以可以透過以下方式將其關閉: 先重啟電腦按下Command+R進入Recovery模式, 在Recovery模式下執行Terminal然後執行下面指令 csrutil disable 如果事後要再恢復則可以執行: csrutil enable csrutil還有其相關設定項目,可參考需求進行微調整: csrutil ena...
更多資料
2016-11-10

CSS 垂直置中解法

關於CSS垂直置中的方法 HTML <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body>   <div class="ot">     <div class="wrapper"></div>   ...
更多資料
2016-06-04

CSS製作六角形排版

SCSS   #btn-group-wrap{                         width:1025px;                         position:absolu...
更多資料
2016-02-01

關於zoom的問題

zoom可以直接以比例的方式將物件進行縮放,firefox不支援所以要用-moz-transform: scale()來取代 zoom和transform不同的地方在於,transform比較像是filter的感覺,實際上並不會改變物件的尺寸,只會針對物件進行比例縮放。 zoom就不同了,縮放後的尺寸會依比例改變,所以要看需求使用。 此外,zoom在使用上必須要把物件的css屬性改成inline-block才可以正常地在IE取得相對尺寸,如: <div id="myZoomObj" style="display:inline-bloc...
更多資料
2015-11-09

CSS 計算寬度語法

透過calc來實現透過css計算百分比與像素單位做運算的語法: /* 最好預設一組高度,防止不支援calc語法的瀏覽器破版 */  ​height: 98%; /* Firefox */ height: -moz-calc(100% - 18px); /* WebKit */ height: -webkit-calc(100% - 18px); /* Opera */ height: -o-calc(100% - 18px); /* Standard */ height: calc(100% - 18px);   ...
更多資料
2015-07-14

建立sublime text 2 sass 及 js 開發環境

1. 安裝sublime text 2, ruby, nodejs, 將npm及ruby指令集路徑填入system path參數, 如下: (安裝路徑請換成您安裝軟體的實體路徑) C:安裝路徑AppDataRoaming pm;C:安裝路徑Ruby22-x64in 2. 安裝 sublime pakage control manager 鍵入ctrl+或View>Show Console 然後把以下python code貼入指令視窗 import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf...
更多資料
2014-04-22

CSS Mobile語法

overflow:scroll; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; 用這段語法來在手機上製作直向捲軸區塊 在ipad上面一定要在iframe的外部用div包住,並且在這個包覆iframe的div下以下css才可以捲動 -webkit-overflow-scrolling: touch; overflow-y: scroll; ...
更多資料

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【154291】
digishot webdesign studio