css3教程

CSS3變換Transform的使用,以及變換的過渡 2015-12-20

CSS3變換Transform的使用,以及變換的過渡
前面給各位介紹過渡效果下文再來爲各位介紹一篇CSS3變換(Transform)的使用,以及變換的過渡的例子.1,變換函數translateX(x):在水平方向移動元素,正值向右移動. translateY(y):在垂直方向移動元素,正值向下移動. translate(x,y):在水平和垂直方向移動元素. scaleX(x):在水平方向縮放元素(1.0是原始大小).使用負值會將元

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用 2015-12-12

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用
添加陰影效果以前只能使用圖片來實現了,現在的css3功能非常的強大了,今天我們就一起來看關于CSS3給div或者文字添加陰影(盒子陰影.文本陰影的使用)的方法,具體的例子如下所示.CSS3定義了兩種陰影:盒子陰影和文本陰影.其中盒子陰影需要IE9及其更新版本,而文本陰影需要IE10及其更新版本.下面

使用 PostCSS 壓縮和優化CSS實例 2015-12-03

前面我們講了如何使用如何使用 PostCSS 插件跨浏覽器兼容 的樣式,特別是對還有很多人在使用的低版本的IE浏覽器的處理,本文我們將學習使用 PostCSS插件壓縮優化CSS.關于如何使用 PostCSS 插件跨浏覽器兼容,請點擊這裏: http://www.111cn.net/cssdiv/css/98338.htm本文主要講的內容有:[email protected],即使你的一些樣式來自Bower組件或npm模塊,都可以確保你你只需要請求一個單獨的http,載入網站的CSS:匹配媒體查詢,允許

使用 PostCSS 跨浏覽器兼容教程 2015-12-03

PostCSS是CSS變成JavaScript的數據,使它變成可操作.PostCSS是基于JavaScript插件,然後執行代碼操作.PostCSS自身並不會改變CSS,它只是一種插件,爲執行任何的轉變鋪平道路.這裏我們將使用PostCSS創建一個跨浏覽器兼容性的樣式表.我們將要做的:有前綴的自動添加前綴添加一系列的IE版本,回退到IE8.IE9和IE10爲沒有支持的屬性添加will-change屬性設置專案你需要做的第一件事情就是使用Gulp或Grunt設置您的專案.如果你沒有一個完美的專案模

CSS3 border-radius 屬性學習實例教程 2015-11-23

CSS3 border-radius 屬性學習實例教程
CSS3中的border-radius 屬性是一個簡寫屬性,用于設置四個 border-*-radius 屬性,該屬性允許您爲元素添加圓角邊框.不過要高版本的浏覽器才支持.實例給div元素添加圓角的邊框:div{border:2px solid;border-radius:25px;} 浏覽器支持I

CSS3使用Animate.css制作超炫的動畫效果 2015-11-22

CSS3要制作動畫是非常的簡單的事情了,我們只需要簡單的幾行代碼就可以實現動畫效果,下文來看一個CSS3使用Animate.css制作超炫的動畫效果.Animate.css是一個超強的CSS3動畫庫,它使用簡單,只需要將相關效果對應的class加入頁面元素中,就能實現翻轉.滑動.旋轉等等複雜超炫的跨浏覽器的動畫效果,它讓開發這制作頁面動畫變得非常簡單.首先引入animate css文件.<link rel="stylesheet" href="animate.min.c

IE10/11不支持條件性注釋的3個解決方法 2015-11-04

我們知道ie在前端中不太好弄,本文我們分享在IE10/11不支持條件性注釋後的3種替代方法,後面補充了ie10 css hack 條件注釋等兼容方式整理.針對IE的條件性注釋(Conditional comments)是專門給IE浏覽器准備的,其它浏覽器根本不能識別這種標記.使用條件性注釋可以區別對待的針對浏覽器編寫CSS等代碼.<!--[if IE]><link href="ie.css" rel="stylesheet"><![en

Sass自動化處理CSS動畫實例教程 2015-10-24

本文是翻譯國外的一篇關于使用Sass自動化處理CSS動畫解決方法,聽起來就很酷的樣子,下面我們來具體來看看解決過程.有一天,Harry Roberts有一段有關于他網站上的代碼在twitter求教,如果有可能,在某些方面得到改善.Harry Roberts做的是使用keyframes的carousel動畫,所以說使用一些數學計算是有可能得到相應改善. "Why do we have to learn algebra, Miss? We're never going to use it-"

CSS3中first-letter實現首字下沉變大 2015-10-12

CSS3中first-letter實現首字下沉變大
網頁首字下沉變大只需要使用CSS3中first-letter命令就可以實現了,下面來給各位

CSS3中Column實現多欄布局示例 2015-10-12

CSS3也可以制作瀑布流效果,不過兼容性真的慘不忍睹,只有少數支持CSS3的浏覽器才能正常的顯示,不過即使這樣,也依然不能阻止我們去嘗試這樣的一種新的技術,試想用css3的幾個簡單的屬性,就能完成使用jquery插件上百行代碼所實現的功能,是不是很cool.下面這個代碼介紹了使用3列的編寫規範,其中包括了浏覽器前綴 代碼如下 #columns-3 { text-align: justify; -moz-column-count: 3; -moz-column-gap: 12px; -moz-column-

css3中box-sizing屬性用法詳解 2015-10-12

下面來給各位介紹一個css3中box-sizing屬性用法與它的一些詳細了,希望文章能幫助到各位朋友哦.我們經常會遇到一個父級的div有1px的邊框而且還需要100%的寬度,這個時候在火狐和chrome與一些新的ie

CSS3美化複選框checkbox的例子 2015-10-12

CSS3美化複選框checkbox的例子
從前我們都是使用css+js來美化複選框了,現在有了css3我們可以直接使用它來美化複選框了,下文來爲各位介紹一個美化例子.HTML通常我們使用以下html結構,我們給複選框定義id#checkbox_a1,然後使用label的for屬性與之關聯,這樣的話,用戶點擊label的時候,實際上就相當于點擊了#checkbox_a1. checkCSS通過label和checkbox

CSS3 flex-shrink屬性用法詳解 2015-10-12

CSS3 flex-shrink屬性用法詳解
下面本文章來給各位介紹一下CSS3 flex-shrink使用方法,希望例子能幫助到各位.

CSS3中flex-basis屬性用法詳解 2015-10-12

CSS3中flex-basis屬性用法詳解
下面我對于flex-basis屬性不了解我們就一起來看看CSS3中flex-basis屬性用法吧,希望例子能幫助到各位哦.WebPlatform1上對flex-basis的解釋是:The flex-basis CSS property describes the initial main size

Flexbox跨浏覽器兼容Bug解決方法 2015-10-12

Flexbox真是一款快速布局神器,不過,最近出現浏覽器兼容問題,比較煩心,因爲剛開始沒有解析兼容浏覽器的問題,不過在不斷的努力下,還是解決了,請下以下內容.在IE10和IE11中發現了一個Bug,就是Sticky footer實際上不會粘貼在頁面的底部.我花了很多時間來解決這個問題,但始終沒有成功.起初,我真的很生氣.在Flexbox出現之前,如果在不知道頁腳的確切尺寸情況之下,要使用純CSS來實現Sticky Footer的效果是不太可能.Flexbox改變了這一切,可以使用CSS解決這個問題.失望之

詳解CSS3 object-position/object-fit屬性實例 2015-10-12

詳解CSS3 object-position/object-fit屬性實例
本教程我們通過實例來詳細講解css3中的 object-position/object-f

CSS3制作loading載入動畫效果代碼 2015-10-12

利用css3制作loading效果是非常的簡單的一事情,感覺和html5有點像了,下文整理一篇CSS3制作loading載入動畫效果例子,有興趣的可進入參考.在我們這次的新設計教程中,我將向您展示如何創建純CSS3的

css3 media query控制iframe高度的例子 2015-10-12

css3 media query是一個比較有意思的東西,很多的朋友還不怎麽理解了,下面小編來介紹css3 media query控制iframe高度的例子,希望可以幫助到各位.在這個場景下,需要使用css media

CSS3回應式設計Media Queries模板 2015-10-12

CSS3回應式設計Media Queries模板
下面給大家整理了一個CSS3回應式設計Media Queries一些例子與分析了,希望這個

css3制作IOS風格的彈出菜單效果 2015-10-12

彈出菜單在手機app中我們常會看到這種效果,像彈出消息或者彈出填寫信息的都會用到彈出菜單效果了,下文我們來爲各位介紹一個css3制作IOS風格的彈出菜單效果,希望例子可以幫助到各位.首先我們來編寫基本的HTML結構<div class="popover"> <ul> <li class="activ
一周排行