文章彙整

31 篇文章標籤含"CSS"

首頁  /  標籤含 "CSS"的文章

CSS 預處理器 SASS、LESS 介紹

CSS 預處理器產生了一種新的語言,而核心理念是用一種專門的程式語言,為 CSS 增加一些程式設計的的特性,無需考慮瀏覽器的兼容性問題,例如可以在 CSS 中使用變量、簡單的邏輯程序、函數等等,讓開發者就只使用這種語言進行編碼工作。簡單來說,CSS 預處理器用一種專門的程式語言,進行 Web 頁面樣式設計,然後再透過編譯轉為正常的 CSS 文件。

前端開發:如何隱藏數字輸入框的小箭頭

又來到了歐斯瑞的前端開發教學系列,今天要與大家分享如何使用CSS隱藏數字輸入框的小箭頭,並附上codepen範例方便讀者們做使用,一起跟著我們來學習吧!

前端開發:表單元件常用的CSS選擇器

CSS對於前端開發而言,是不可少的一重要元件,今天就來為大家介紹表單元件中常用的CSS選擇器 (CSS selector for input),同時也提供codepen範例給大家參考,方便大家快速學習唷!

利用CSS counter 自動分類計算細項

CSS (Cascading Style Sheets) 用於定義網頁中所顯示的樣式,也可以用於做簡單計算,讓歐斯瑞帶著大家學習如何使用CSS來自動分類計算細項!

利用checkbox做判斷改變CSS樣式並更改checkbox本身樣式

如何利用checkbox 做判斷改變CSS樣式並更改checkbox本身樣式

使用css+jquery+jqueryUI 做出拖拉相片效果

拖拉相片效果其實比你想像中簡單,清楚的設定教學與截圖,讓你一次就上手!

使用Magento2 原生工具來將LESS編譯成CSS

Magento2 提供Blank以及Luma二款預設的主題包,這二款主題包都是使用LESS來編譯CSS。在這篇文章中,我們要為您介紹如何使用Grunt來開發及調整CSS。

CSS3 : 簡單使用flexbox 展示自適應及滑過效果

要怎麼在網頁呈現自適應及滑過的效果呢,這次我們介紹flexbox,讓你可以簡單使用輕鬆上手!

利用多邊形圖層,絕對定位和置中呈現Landing Page

今天要介紹的是用css打造一個Landing Page中 header部分,利用多邊形圖層,絕對定位和置中呈現;本教學大概會用到製造效果的css包括:background-image: linear-gradient()。

純CSS實現表格首行和首列固定

當表格列數和行數較多時,使用者會出現的需求即是把重要的列與行固定,以便於瀏覽表格內容,才得以提高用戶體驗。為各位介紹使用單純 CSS 和運用簡單邏輯的解決方案。

BEM 規範思維 – 讓 CSS 更利於開發與維護 (二)

BEM 是一種前端項目開發的方法學,著重程式命名的識別度、一致性,本文將介紹Modify、Mix模式以及文件架構!

如何在Magento2 使用 Bootstrap

如果想要在Magento2的主題包裡使用bootstrap 的 javascript,我們就要使用requirejs的方式來引入bootstrap.js,請看以下說明。

BEM 規範思維 – 讓 CSS 更利於開發與維護 (一)

BEM 是一種前端項目開發的方法學,因應當前網頁發展爆炸趨勢,前端程式碼複雜度大大提升,尤其是 JavaScript 和 CSS 的數量大幅增加,程式命名的識別度、一致性就成了首要課題,使用BEM找出適合自己與團隊的程式組織方法和命名規範因應而生!

CSS3屬性 pointer-events應用

CSS3 的新屬性Pointer-Events,最簡單的用法就是讓滑鼠滑過後沒有作用,本篇文章將介紹一些其他變化操作。

Clippy – 輕鬆利用 CSS 實踐多邊形設計

現在的 UI 設計中隨處可見各種不規則的形狀元素,現在將介紹 CSS3 中的 clip-path 屬性, 就可以輕鬆使用幾行程式碼實踐各種不同的形狀!

如何利用CSS3原生網格系統快速排版

CSS3有原生地網格系統,過去沒有被廣泛應用最大的原因莫過於瀏覽器支援性的問題,但現在IE11也支援Grid的語法了,讓我們來看看用CSS3 Grid屬性排版有多方便。

快速查詢CSS/HTML與各瀏覽器的支援-Can I Use

Can I Use網站上羅列出前端常用的CSS、Html、SVG、JS,JS API等等屬性以及瀏覽器支援與否,在開發前先行查詢,可以避免最後因為瀏覽器不相容而需要修改情況。

使用sass定製你的bootstrap css

本篇文章要跟大家分享如何使用sass定製你的bootstrap css。

SASS: 如何幫產生的css指定編碼為UTF-8

font-family: Arial, '微軟正黑體'; 如果您的css檔案跟上面一樣使用了「中文名稱」字型,為了讓瀏覽器正確辨識字型名稱,我們必須要在css檔案的最前面指定編碼為UTF-8編碼  

如何使用CSS(border-radius)畫出圓角DIV

在使用CSS排版時,div預設的形狀都是方形,因此今天就要教大家如何使用border-radius將div的直角變成圓角。

如何在Magento的首頁上增加最新產品的列表

這篇文章要為您介紹如何在Magento的首頁上增加最新產品的列表,全部的操作都可以在管理後台完成,不需要任何程式碼的知識。   Magento後台的編輯器提供了小工具(widget),現在我們就要利用這個小工具來完成添加新產品列表的動作。 Step1: 進入管理後台、選擇CMS>

使用CSS自動設定單偶數背景色

在還沒有CSS3以前,CSS是無法加入判斷功能的,例如說今天要做的單數行背景顏色X色,偶數行背景顏色Y色,以前必須要靠別的程式輔助,例如PHP或是Javascript。 現在就介紹一個CSS3的新選擇器(Selector):nth-child()。 例如:我們今天想要做,單數行的背景顏色綠色,偶數行的背景顏色橘色。 先來準備一些文字段落(p): <p>aaa</p>

純CSS的下拉式選單

以往我們要實現下拉式選單大多會使用Javascript或者是Flash,不過現在我們有更簡單的選擇。今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。底下就是我們完成的選單效果截圖。   首先我們先把第一層的按鈕做出來。 HTML <ul

CSS 濾鏡特效

CSS 濾鏡是一個讓我們實現各種視覺效果的工具,我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。 本文將為您介紹CSS的濾鏡效果及用法。

如何使用CSS製作逐格動畫

一般我們在應用CSS動畫屬性時最常用到的效果不外乎改變顏色、形狀及移動位置等。但是,你知道嗎?其實CSS也可以做到傳統的逐格動畫,今天我們就要跟大家分享如何用CSS製作一個逐格動畫出來。

滿版背景圖的製作方法- CSS & jQuery

今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求: 圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。 圖片可以隨著瀏覽器尺寸自動縮放。 圖片必須保持長寬比,不能變形。

【教學】Google Code Prettify 幫您的程式碼上個色吧!

Google Code Prettify 是一個好用的語法上色工具、用法相當簡單 下載解壓縮後,引用他的

【Magento小技巧】:在Magento中整合CSS及Javascript

為了提升網站效能、減少HTTP requests,將眾多的javascript及css整合在一起,是一件必要的工作。關於這一方面,magento提供一個簡便的方法,請參考下列教學步驟。 Step 1: 登入magento後台

如何用CSS自訂網站反白文字?

如果來到Astral Web歐斯瑞的網站,按下左鍵選取文字(反白)時,出現的不是預設的背景色,而是鐵灰色,讓使用者可以可以更清楚瀏覽文字。這種手法在網站上很常見,今天我們就來和大家介紹如何設定! 方法很簡單,只要利用css3 的selection選擇器就可以了! ::-moz-selection

如何使用css來隱藏placeholder文字?

設計表單的輸入欄位時、常用placeholder來做提示文字,在預設的狀況下、placeholder的文字只有在輸入資料後才會消失、如果我們希望在點選輸入欄位後,placeholder的文字會立即消失,一般常用的方法就是利用 onfocus 和 onblurl來達成。 <input

如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數?

設計版面時,為了讓網頁更整齊,常需要限制文字的字數,當文字超過限制時會自動顯示”…”的刪節號。 今天Astral Web要介紹如何限制字數,讓版面更整齊順眼;但這部分會用到程式碼較為複雜,需要有程式背景的人進行操作。 首先,單純使用CSS時,我們可以利用text-overflow: ellipsis;