標簽目錄：css

2018
12-03

總結：如何修改美化radio、checkbox的默認樣式

總結：如何修改美化radio、checkbox的默認樣式 現在前端頁面效果日益豐富，默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改radio、CheckBox樣式的方法。原理：大致原理都是使用原生的checkbox或input標簽，在其后面設置相關聯的label元素。給<input>元素設置為透明，然后通過定位讓用戶看到的是<label>元素，利用css的原生屬性來判斷用戶的操作，設置選中后的label樣式，即input[type=checkbox]:checked+labe... 繼續閱讀 >
2018
08-08

CSS 的空格處理

CSS 的空格處理 一、空格規則HTML代碼的空格通常會被瀏覽器忽略。<p>??hello??world??</p>上面是一行HTML代碼，文字的前部、內部和后部各有兩個空格。為了便于識別，這里使用半圓形符號?表示空格。瀏覽器的輸出結果如下。helloworld可以看到，文字的前部和后部的空格都會忽略，內部的連續空格只會算作一個。這就是瀏覽器處理空格的基本規則。如果希望空格原樣輸出，可以使用<pre>標簽。<pre>??hello??world??</pre>另... 繼續閱讀 >
2018
04-25

一個HTML元素和五個CSS屬性的魔力

一個HTML元素和五個CSS屬性的魔力 假設我告訴你，我可以使用一個HTML元素和五個CSS屬性實現下圖的效果。而且這個效果沒有使用任何一行SVG代碼，也沒有使用圖像（只是在html元素上使用了background設置了一個背景圖片，只是為了表明這個元素有一些透明的部分），同樣也沒有使用JavaScript代碼。你一定會覺得很神奇，對吧！有好奇之心，對于我們做前端的同學而言，應該一直都有，只有這樣才能做出很多我們一直以為實現不了的效果，比如接下來要介紹的內容。這... 繼續閱讀 >
2018
02-21

前端性能優化小紀

前端性能優化小紀 天下武功，無堅不破，唯快不破。對前端而言，快意味著要求資源體量更小、數量更精簡、內容更早呈現、交互更加人性化。當項目做到一定程度，就應該考慮性能的問題，前端的性能優化有諸多有跡可循的理論和方法，比如Yahoo！性能軍規、GooglePageSpeedInsightsRules。我們團隊一個比較老的項目首屏加載大概需要20多秒，這嚴重影響了用戶體驗，于是進行了一次首屏加載的性能優化。瀏覽器渲染過程首先，稍微了解一下... 繼續閱讀 >
2018
01-19

CSS3系列-css3之線性漸變初探

CSS3系列-css3之線性漸變初探 CSS3系列-css3之線性漸變初探1.寫在前面入行前端一年多的時間，想提高自己的css技術水平，于是在網上看了些關于css的書籍，想買幾本比較好的css書籍啃啃，找來找去，終于找到了《CSS揭秘》這本書。入手這本書后，從開始看到后面，發現書中的很多效果都可以使用漸變來實現，于是，我對漸變產生了興趣，決定好好掌握css3中的這個屬性。結合《CSS揭秘》、張鑫旭大神的深入理解CSS3gradient斜向線性漸變和CSS3radi... 繼續閱讀 >
2017
12-20

CSS工程化演進

CSS技術的演進CSS是Web開發中不可或缺的一部分，在前端工程化的不斷進步的今天，一方面在CSS特性隨著規范的升級越來越豐富，另一方面，前端業務復雜性的增加帶來的工程愈加龐大，驅使者開發者不斷尋找CSS工程化的最佳實踐。Web開發模塊化趨勢不可否認，無論從現代前端框架（React，Vue，Angular，Polymer等），還是從W3C的WebComponents草案看來，組件化已經是前端開發的主流之選和未來的發展方向，正... 繼續閱讀 >
2017
11-29

10個有趣的Javascript和CSS庫-2017年11月

10個有趣的Javascript和CSS庫-2017年11月 TailwindCSSTailwind是用于構建自定義用戶界面的實用CSS框架。每個Tailwind小應用都有多種尺寸，這使得創建響應式界面變得非常簡單。您可以自定義顏色，邊框尺寸，字體，陰影等等，沒有任何限制。PrettyCheckbox這是一個純CSS庫，用于創建漂亮的復選框和單選按鈕。它提供了不同的形狀（正方形，曲線，圓形），選擇方式（默認，填充，thick），顏色（主要，成功，信息），顏色類型（實心，輪廓）和動畫。... 繼續閱讀 >
2017
10-03

2017 年 9 月：15 個有趣的 JS 和 CSS 庫

2017 年 9 月：15 個有趣的 JS 和 CSS 庫 迎來了金秋9月，在這收獲的季節，Tutorialzine又為我們帶來了哪些新鮮、有趣的前端資源呢？前端開發者們，一起來看看有木有你需要的前端庫。1.DisplayJSDisplayJS是一個幫助你渲染DOM的簡易框架。使用它，你可以更容易地將JS變量遍歷到特定的HTML元素中，類似于React或Vue.js處理模版的方式。項目地址：【傳送門】2.ReactBeautifulDnD這是由Atlassian開源的用于制作拖拽... 繼續閱讀 >
2017
09-19

67 個JavaScript和CSS實用工具、庫與資源

67 個JavaScript和CSS實用工具、庫與資源 在這篇文章中，我不會與大家談論大型的前端框架，如React、Angular、Vue等，也沒有涉及那些流行的代碼編輯器，如Atom、VSCode、Sublime，我只想與大家分享一個有助于提升開發人員效率的工具列表合集?；蛟S，一些朋友已經對文中的一些工具有所了解，但如果你發現了一些對你有幫助的新工具，那么，我將倍感欣慰。由于這個列表中包含了不同類別的資源，為了便于大家查看，我已將其進行了重新的分類，來Enjoy吧！... 繼續閱讀 >
2017
09-16

你所不知道的 CSS 濾鏡技巧與細節

你所不知道的 CSS 濾鏡技巧與細節 本文所描述的濾鏡，指的是CSS3出來后的濾鏡，不是IE系列時代的濾鏡，語法如下，還未接觸過這個屬性的可以先簡單到 MDN--filter了解下：{filter:blur(5px);filter:brightness(0.4);filter:contrast(200%);filter:drop-shadow(16px16px20pxblue);filter:grayscale(50%);filter:hue-rotate(90deg);filter:invert(75%);filter:opacity(25%);filter:saturate(30%)... 繼續閱讀 >
2017
09-05

【整理】CSS布局方案

【整理】CSS布局方案 我們在日常開發中經常遇到布局問題，下面羅列幾種常用的css布局方案話不多說，上代碼！居中布局以下居中布局均以不定寬為前提，定寬情況包含其中1、水平居中a)inline-block+text-align.parent{text-align:center;}.child{display:inline-block;}tips：此方案兼容性較好，可兼容至IE8，對于IE567并不支持inline-block，需要使用csshack進行兼容b)table+margin.child{displ... 繼續閱讀 >
2017
08-29

你所不知道的 CSS 動畫技巧與細節

你所不知道的 CSS 動畫技巧與細節 怕標題起的有點大，下述技巧如果你已經掌握了看看就好，歡迎斧正，本文希望通過介紹一些CSS不太常用的技巧，輔以一些實踐，讓讀者可以更加深入的理解掌握CSS動畫。廢話少說，直接進入正題，本文提到的動畫不加特殊說明，皆指CSS動畫。正負旋轉相消嗯。名字起的很奇怪，好像數學概念一樣。（寫完文章才發現這里應該叫正反旋轉相消，圖都截完了，大家心里清楚就好）在動畫中，旋轉是非常常用的屬性... 繼續閱讀 >
2017
08-19

移動 H5 首屏秒開優化方案探討

隨著移動設備性能不斷增強，web頁面的性能體驗逐漸變得可以接受，又因為web開發模式的諸多好處(跨平臺，動態更新，減體積，無限擴展)，APP客戶端里出現越來越多內嵌web頁面（為了配上當前流行的說法，以下把所有網頁都稱為H5頁面，雖然可能跟H5沒關系），很多APP把一些功能模塊改成用H5實現。雖然說H5頁面性能變好了，但如果沒針對性地做一些優化，體驗還是很糟糕的，主要兩部分體驗：頁面啟動白... 繼續閱讀 >
2017
07-26

純 CSS 實現波浪酷炫效果

純 CSS 實現波浪酷炫效果 一直以來，使用純CSS實現波浪效果都是十分困難的。因為實現波浪的曲線需要借助貝塞爾曲線。而使用純CSS的方式，實現貝塞爾曲線，額，暫時是沒有很好的方法。當然，借助其他力量（SVG、CANVAS），是可以很輕松的完成所謂的波浪效果的，先看看，非CSS方式實現的波浪效果。使用SVG實現波浪效果借助SVG，是很容易畫出三次貝塞爾曲線的?？纯葱Ч捍a如下：<svgwidth="200... 繼續閱讀 >
2017
06-22

使用瀏覽器開發者工具檢查CSS動畫性能

使用瀏覽器開發者工具檢查CSS動畫性能 本文是我們和SiteGround一起合作的系列之一。感謝我們的合作伙伴，有了你們，SitePoint才成為可能。CSS動畫的性能可以非常好。雖然對簡單動畫和少部分元素來說這是事實，但是如果你不注意編寫高性能的動畫代碼，額外增加了很多復雜性，網站用戶很快就會注意到（動畫性能很差），并產生厭惡。本文里，我會介紹一些有用的開發者工具，來幫助我們調試，理解CSS動畫背后的機制。通過這些方法，當一個動畫效果看起來不... 繼續閱讀 >