BEM 規範思維 – 讓 CSS 更利於開發與維護 (一)
BEM 是一種前端項目開發的方法學，因應當前網頁發展爆炸趨勢，前端程式碼複雜度大大提升，尤其是 Ja...
AI 自動化專案／電商快速上線專案，歐斯瑞專業團隊免費提供諮詢中！
CSS3屬性 pointer-events應用
CSS3 的新屬性Pointer-Events，最簡單的用法就是讓滑鼠滑過後沒有作用，本篇文章將介紹...
使用 font-display 改善與優化網站效能
使用font-face時，可能會因為字型檔很大而影響網頁速度，為了改善這種情況，font-face新...
如何利用CSS3原生網格系統快速排版
CSS3有原生地網格系統，過去沒有被廣泛應用最大的原因莫過於瀏覽器支援性的問題，但現在IE11也支援...
Magento 2 iOS 產品放大圖全螢幕時無法關閉
這篇內容要跟大家介紹一個在Magento 2 可能會遇到的小問題與解決方法。 裝置：i...
closure-compiler︰產生最佳化（最小化）的JavaScript 程式碼
Closure Tools 是由 Google 所發展的一套網頁應用程式工具組，可以幫助網頁...
前端通訊協定介紹
現今的網站常常需要像聊天室一樣即時做資料接收，而且必須在不重新整理網站的情況下一直接收後端送...
HTML5.2 的到來 (2) – 新的有效與無效實踐篇
html 5.2將一些之前認定為無效的內容改為有效，究竟哪些寫法在html 5.2 將調整為有效呢？...
SVG邊框動畫提升網頁質感 (下)
Vivus 是一個輕量級的JS庫，用來執行 SVG 路徑動畫，在上集我們有先提到如何使用CS...
強大的前端框架工具Bootstrap 3介紹
Astral Web使用Bootstrap 3作為我們的前端框架基礎，以簡化我們的工作且提高...
網頁文字單位 PX,EM,REM的差別: 如何修改Magento2 預設rem
PX: px的最大特色是精準度高，也因為他不知道他是絕對數值，不管你在那種螢幕寬的裝置下看到...
如何解決Bootstrap 3和PrototypeJS之間的衝突
如何解決Bootstrap 3和PrototypeJS之間的衝突 當我們想要在Magent...
如何解決Magento 2 預設主題的選單問題
Magento 2 的預設主題有一個小小的問題，當你...
使用sass定製你的bootstrap css
本篇文章要跟大家分享如何使用sass定製你的bootstrap css。
讓你的Bootstrap下拉選單可以支援多層選單
Bootstrap 3.x 的下拉選單只支援到第二層、如果您需要多層選單的話、可以試試加上底下這支 ...
如何製作阿拉伯語、希伯來語等由右向左的網頁
如果您需要製作阿拉伯語、希伯來語、印度語等這些由右向左的網頁、底下是必備的基本資訊。 ...
如何設計 Magento佈景主題 (2) – 使用sass開發
上一篇 我們教大家把 Magento佈景 主題的基本環境設定好了，今天來談談如何使用sass...
使用SelectBoxIt.js自訂你的下拉選單
CSS無法影響下拉選單展開的選項，如果希望自訂選項的樣式，我們需要使用一些外掛來改變下拉選單的結構，...
Bootstrap Carousel (Bootstrap廣告輪播器)使用上的小技巧
這篇文章要跟你分享幾個使用Bootstrap的小技巧，包括：取消換頁的箭頭及按鈕、改變幻燈片停留的時...
當只有一張圖片的時候、隱藏Bootstrap Carousel 的箭頭和按鈕
現今有許多網站都會使用輪播圖片的方式來傳達訊息，網頁瀏覽者也可自行左右移動圖片，但如果在圖片...
在行動裝置上避免點擊輸入框時畫面放大
您有沒有遇過這樣的情況：當使用手機瀏覽網頁時，點擊輸入框準備輸入文字時，畫面放大了。若是不希望畫面放...
SASS: 如何幫產生的css指定編碼為UTF-8
( 繼續閱讀… )
幫你的sass專案加上Autoprefixer功能
Autoprefixer是一個自動幫CSS加上前輟詞的工具，如果你習慣使...
SASS的二種註解方式 /* */ 與 //
SASS的註解方式有二種：多行註解及單行註解 多行註解 使用...
Sass的註解功能，讓除錯工作變得更簡單
如果Sass生成的CSS檔案、不如你所預期的，你要怎麼知道是哪邊出問題了呢？Sass有一個註解功...
如何修改Sass的輸出樣式
在網站的開發階段、我們通常會將CSS樣式表展開、方便查找代碼。但是當網站要正式上線的時候、我們又...
如何使用CSS(border-radius)畫出圓角DIV
在使用CSS排版時，div預設的形狀都是方形，因此今天就要教大家如何使用border-radius將...
如何使用XENU查找網站的失效連結
當您需要檢查網站失效連結的時候，可以使用免費工具 - XENU，請看以下範例。
使用adapt.js快速將您的網站變成響應式網站
響應式網站是目前建站的趨勢，但如果您原本已經有個網站了，又暫時還不打算另外建立新站，您可以考慮使...
如何設計響應式的電子郵件
響應式的電子郵件在編碼上比響應式的網頁更加麻煩，因為我們必須同時考慮各種郵件軟體及各家線上郵件平台的...
利用Javascript，自製清理網頁元素工具
相信不少的網頁工作者，都會有類似的經驗，尤其是在需要重新整理網頁內容，或是重構網站時，看到一...
使用CSS自動設定單偶數背景色
在還沒有CSS3以前，CSS是無法加入判斷功能的，例如說今天要做的單數行背景顏色X色，偶數行背景...
實作前端購物車或資源回收桶效果
JQueryUI相信是很多人開發網頁時都使用過的js套件，只要能結合JQuery UI其中的Dr...
純CSS的下拉式選單
以往我們要實現下拉式選單大多會使用Javascript或者是Flash，不過現在我們有更簡單...
CSS 濾鏡特效
CSS 濾鏡是一個讓我們實現各種視覺效果的工具，我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。 本...
如何使用CSS製作逐格動畫
一般我們在應用CSS動畫屬性時最常用到的效果不外乎改變顏色、形狀及移動位置等。但是，你知道嗎？其實C...
滿版背景圖的製作方法- CSS & jQuery
今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求： ...
如何新增Magento頁面配置
當我們使用Magento後台新增頁面的時候，不管是產品頁面、還是內容頁面都可以選擇頁面的配置...
8個免費工具幫助簡化前端開發的工作
本文將介紹幾個前端開發的工具：Chrome 開發人員工具、Brackets、Sublime Text...
在您的網頁中新增 Google+ 追蹤按鈕
Google+ 追蹤按鈕可在您的網頁上新增一個簡單小型的條件按鈕，讓訪客可將您的個人資料或專頁快速加...
jQuery特效:Parallax Scrolling 視差滾動
視差滾動(Parallax scrolling)是電腦圖學中一種滑動特效技巧，讓2D畫面產生多層次的...
響應式圖片的解決方案：利用html5 標籤在不同裝置載入不同解析度圖片
html5 有針對響應式網頁的標籤、可以針對不同解析度的裝置、設定載入不同的圖片。既可以更符合設計、...
利用jQuery Scroll Depth追蹤使用者的閱讀情形
購物網站如何申請超商取貨付款？(7-ELEVEN、全家、OK、萊爾富四大超商)Astral web...
【教學】Google Code Prettify 幫您的程式碼上個色吧!
Google Code Prettify 是一個好用的語法上色工具、用法相當簡單 (...
從前端設計的角度來實踐SEO！
本文將提供您SEO-friendly的幾項HTML設置方針：結構化頁面，正確使用H 標籤，設置Mic...
如何在網頁中新增Google+ 徽章？
將您的 Google+專頁連到相關網站，可在 Google 搜尋結果中，為您的網站爭取更多推薦，吸引...
如何利用jQuery來讓錨點連結有滑動的效果？
當單一網頁的內容很多的時候，可以將內容分成數個段落，在每一段內容前面插入一個錨點，利用超連結的功能，...
利用Google的Structured Data Testing Tool檢查schema標記是否正確
繼上篇文章善用SCHEMA 標記，讓搜尋引擎更容易了解你的內容！後，我們針對Schema做了延伸文章...
如何使用Brackets 擴充功能 “Extract for Brackets (Preview)”，直接從psd檔取出設計資訊？
本篇文章將介紹如何使用Brackets擴充功能 “Extract for Brackets (Pre...
如何用CSS自訂網站反白文字？
如果來到Astral Web歐斯瑞的網站，按下左鍵選取文字(反白)時，出現的不是預設的背景色，而是鐵...
如何使用css來隱藏placeholder文字？
設計表單的輸入欄位時、常用placeholder來做提示文字，在預設的狀況下、placehold...
如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數？
設計版面時，為了讓網頁更整齊，常需要限制文字的字數，當文字超過限制時會自動顯示"..."的刪節號。 ...
使用響應式網頁設計，可提升使用者經驗！
Astral Web歷年來已幫許多客戶製作響應式設計的網站，效果良好；若想了解更多響應式網頁設計的...