原创 CSS濾鏡(Filters)
濾鏡(Filters)是CSS3裏新增的一種神奇的功能。說起濾鏡(filter)效果，經常使用PhotoShop的人應該非常清楚，每張用Photoshop製作出來的圖片幾乎都使用了濾鏡進行美化。而CSS濾鏡，不需要你使用任何做圖軟件，用
2020-02-24 20:15:18
原创 HTML5畫布(CANVAS)速查簡表
HTML5畫布(CANVAS)元素 >HTML5畫布(Canvas)元素 <canvas id="myCanvas" width="500" height="300"> 瀏覽器不支持畫布(canvas)時的備案 <canvas
2020-02-24 20:15:18
原创 -webkit-appearance 使用說明
前段時間在《修復iPhone上submit按鈕bug》中介紹了使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的默認風格，其實我們可以反過來思路，使用“appearance”屬性，來改變任何元素的瀏
2020-02-24 20:15:18
原创 html5新功能2—使用HTML5裏頁面可見性接口判斷用戶是否正在觀看你的頁面
長期以來我們一直缺少一個判斷用戶是否正在瀏覽某個指定標籤頁的方法。用戶是否去看別的網站了？他們切換回來了麼？現在，HTML5裏頁面可見性接口就提供給了程序員一個方法，讓他們使用visibilitychange頁面事件來判斷當前頁面可見性
2019-06-11 18:06:06
原创 5種JavaScript和CSS交互的方法
隨着瀏覽器不斷的升級改進，CSS和JavaScript之間的界限越來越模糊。本來它們是負責着完全不同的功能，但最終，它們都屬於網頁前端技術，它們需要相互密切的合作。我們的網頁中都有.js文件和.css文件，但這並不意味着CSS和js是獨
2018-08-27 10:22:53
4
原创 多層嵌套的CSS 3D動畫技術詳解
IE9及其以下版本完全不支持CSS 3D transforms技術，Opera 12也不支持。具體支持信息請查看caniuse.com。 CSS動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3
2018-08-27 10:22:53
8
原创 TouchSlide移動端觸屏滑動banner插件
前言 TouchSlide 可以說是 SuperSlide 手機簡化版，不同的地方在於： 1、TouchSlide是純javascript開發的，不依賴任何js庫，鑑於此，TouchSlide調用方法和SuperSlid
2018-08-27 10:22:51
原创 5種JavaScript和CSS交互的方法
隨着瀏覽器不斷的升級改進，CSS和JavaScript之間的界限越來越模糊。本來它們是負責着完全不同的功能，但最終，它們都屬於網頁前端技術，它們需要相互密切的合作。我們的網頁中都有.js文件和.css文件，但這並不意味着CSS和js是獨
2018-08-27 10:22:51
2
原创 巧妙使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設備類型的好方法
有無數的理由要求我們在任何時候都應該知道用戶是使用的什麼設備瀏覽我們的網站——寬屏，普通屏，平板，手機？知道這些特徵，我們web應用的CSS和JavaScript才能同步做相應的操作。在給Mozilla Developer Networ
2018-08-27 10:22:51
原创 Data URL和圖片
Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法。跟傳統的用img標記將服務器上的圖片引用到頁面中的方式不一樣，在Data URL協議中，圖片被轉換成base64編碼的字符串形式，並存儲在URL中，冠以mime-t
2018-08-27 10:22:51
原创 各種瀏覽器全屏模式的方法、屬性和事件介紹
瀏覽器全屏模式的啓動函數requestFullscreen仍然需要附帶各瀏覽器的js方言前綴，相信下面這段代碼需要你花大量的搜索才能湊齊： // 判斷各種瀏覽器，找到正確的方法 function launchFullscreen(ele
2018-08-27 10:22:51
原创 用JavaScript獲取僞元素(Pseudo-Element)屬性的方法
CSS僞元素(pseudo-elements)非常的有用——你可以用它製作出CSS三角形，用在提示框上面，還可以用它完成很多簡單的任務，而不需要多餘的HTML元素。以前，僞元素的CSS屬性是無法用JavaScript獲取的，但現在，有了
2018-08-27 10:22:51
原创 CSS裏的:target僞選擇器
:target是CSS裏一個非常有趣的僞選擇器。它在CSS裏發生效力的過程是這樣的：當瀏覽器地址裏的hash(地址裏#號後面的部分)和:target僞選擇器指定的ID匹配上時，它的樣式就會在這個ID元素上生效。讓我們看一看這個:targ
2018-08-27 10:22:51
4
原创 5種方法去掉HTML中Inline-Block元素之間的空白
記得年輕時我在IE6上開發，絕望的希望IE6能支持display: inline-block功能。當需要在”inline”元素上控制margin和padding時，inline-block屬性值變得非常有用，有了它，你不在需要讓這些元
2018-08-27 10:22:51
7
原创 在CSS裏用calc進行計算
CSS就像迷一樣讓人想不透；我們喜歡CSS，是因爲它很簡單，但我們又不停的要求它提供更多的功能。CSS裏已經新增的特徵有placeholders, 動畫技術和click events等。但有一個問題是，CSS是靜態的；完全沒有邏輯操作
2018-08-27 10:22:51
1