˄

如何用 CSS 做出滑動開/關切換按鈕?

如何用 CSS 做出滑動開/關切換按鈕?

在 Windows、Android、IOS 或是網頁上經常都可以看到滑動型的開/關切換按鈕,如果自己在網頁上要做出如此效果的按鈕,免用 Javascript 就可以辦到,proto.io 網站提供滑動開/關切換按鈕 CSS 語法產生器,透過介面輸入所需條件,便可產生 CSS 語法,方便你應用在網頁上。

繼續閱讀»»»

CSS Animate 線上 CSS3 動畫產生器

CSS Animate 線上 CSS3 動畫產生器

CSS 是用來控制網頁的布局與樣式,對圖檔與動畫的支援都不多,因此,大家看到網頁所呈現的圓角、陰影、漸層、半透明...等特殊效果,幾乎都由圖片來完成,當然網頁載入的速度也就會慢一些,而 CSS3 除了 CSS 原有的屬性外,大幅增加對圖像與動畫的語法支援,以前要用圖片處理的圓角、漸層、陰影...等等,都可以靠 CSS3 來完成,另外,為增加網頁的可看與互動性,CSS3 的動畫屬性,也讓製作者減輕製作的成本,更讓觀看的用戶,免去瀏覽器安裝擴充程式所帶來的資安風險與惡意程式的假藉更新名義實則進行勒索攻擊等問題。CSS3 立意很好,但對初學者來說門檻很高,我們可以透過像 CSS Animate 這類的線上免費工具,加快我們的學習並製作出具水準的動畫。

繼續閱讀»»»

CSS3 Animation 套用 CSS 3 動畫語法範本,就讓網站輕鬆動起來

CSS3 Animation 套用 CSS 3 動畫語法範本,就讓網站輕鬆動起來

以前想要讓網頁有動畫效果,多數要靠 JaveScript、GIF 或是 Flash,而現在則可以透過 CSS 3,不過想要透過 CSS 3 語法來做動態特效,其學習門檻著實不低。但若只想在網頁放一些較為簡單的特效,可以來參考 CSS3 Animation 這個網站所提供的 CSS 3 動畫語法免費範本,包含有兩大類:

  • ENTRANCES :slideUp、slideDown、slideLeft、slideRight、slideExpandUp、expandUp、fadeIn、expandOpen、bigEntrance、hatch
  • MISC:bounce、pulse、floating、tossing、pullUp、pullDown、stretchLeft、stretchRight

下載後,只要經過簡單的語法加工,就能套用範本,讓自己的網頁輕鬆動起來。

繼續閱讀»»»

EnjoyCSS 線上 CSS3 語法產生器

EnjoyCSS 線上 CSS3 語法產生器

CSS 是用來美化與排版網頁的語言,且現在各大家瀏覽器也都支援 CSS 3版本,CSS 3 相較於之前版本,其功能更強,像是以往較難做到的圓角、漸層、陰影、旋轉......等特效,在 CSS 3都可輕易完成,不過,功能變強,也就是代表 CSS 3語法變得複雜,且學習也較有門檻。若想快速應用,建議可以來 EnjoyCSS 這個網站,其提供網頁常用到的元素,像是文字、輸入欄、按鈕、區塊等等的圓角、漸層、陰影、旋轉等特效,只要調整所需要參數,便可從範例看到參數調整後所產生的變化,當調整到滿意的作品後,可輕鬆將  CSS3 代碼產生出,且還提供個瀏覽器所支援的程度,讓你可以快速佈局到自己的網頁。

繼續閱讀»»»

Simplest CSS3 Generator 線上 CSS3 特效產生器

Simplest CSS3 Generator 線上 CSS3 特效產生器

使用 CSS3 可以不需要使用圖片就能呈現出像是光暈、陰影、漸層、圓角....等等的各種網頁特效。但寫 CSS3 是件需要有耐心的事,不但語法長、同一特效還不是各家瀏覽器都能適用(各家瀏覽器還有版本之分),相當麻煩。若想使用 CSS3 所帶來的方便,但又想省去學習的過程,可以來使用 Simplest CSS3 Generator 這個免費的網路應用程式服務,快速利用 CSS3 建立出適合自己網頁使用的特效,剔除以往需使用圖片的效果,加快用戶的瀏覽體驗。
相關應用,還可以參閱:

 

繼續閱讀»»»

CSS Gradient Background Maker 微軟 CSS3 漸層背景產生器

CSS Gradient Background Maker 微軟 CSS3 漸層背景產生器

以往在網頁想要利用漸層的色彩來美化時,若要使用 CSS 需要考慮地的因素很多,各家瀏覽器所支援的語法也不盡相同,需要不斷的微調,最後乾脆使用圖片一勞永逸。現在 CSS3 開始普及,想要使用漸層色彩,越見方便,CSS Gradient Background Maker 是微軟所推出利用 CSS 語法漸層背景產生器,只要選好顏色,便能產生不同漸層方向,且支援 IE、Mozilla Firefox、Opera、Safari/Chrome 等瀏覽器的 CSS 語法。

繼續閱讀»»»

 訂閱本站文章

 站內搜尋