tag css3

標籤
貢獻98
164
05:52 PM · Oct 25 ,2025
nanchengfe 頭像 tuzixiansen_63d4d65909d62 頭像 zhuifengdekukafei 頭像 dmitry-dragilev 頭像 linyuyizhizou_678b9fdc436f1 頭像 vitaly-friedman 頭像 jsliang 頭像 kestrel_task 頭像 bianchengsanmei 頭像 hui_61e3b3803b922 頭像 gqkmiss 頭像 louis-lazaris 頭像

@css3 / 博客 RSS 訂閱

dyisheng 頭像

D一生 - html2canvas常見踩坑問題

一、html2canvas圖片留白 圖片留白的問題應該是頁面有滾動條，所以導致截屏又留白，解決方式有兩種： 1. 將頁面window.scrollTo(0,0)這樣可以解決，但是有的時候滾動會讓用户看到，體驗不好，所以，我們可以看下另外一種方式 2. 設置參數 this.$html2canvas(document.getElementById('attack'),{sc

css3 , html2canvas , Css , Javascript

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - CSS3 Cheat Sheet (PDF)

Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML5 tags, their descriptions, their attributes and their support in HTML 4. In comments to t

css3 , Cheat Sheets , Freebies , coding

收藏 評論

399 頭像

399 - 【叢林】HTML Table 表格淺談（邊框、隔行變色

此例子已經包含本文大部分內容，請對照參考。查看代碼 》 定義和用法 table標籤定義 HTML 表格。 創建表格的四要素：table、tr、th、td table 整個表格以table標記開始、/table標記結束。 tr Table row。表格的一行，有幾對 tr 表格就有幾行。 td Table data。表格的一個單元格，一行中包含幾對 td ，一行中就有幾列。 th Table he

表格 , css3 , css選擇器 , Css , HTML

收藏 評論

trent-walton 頭像

Trent Walton - CSS3 vs. CSS: A Speed Benchmark

I believe in the power, speed and “update-ability” of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in producti

Speed , performance , css3 , coding , Css

收藏 評論

u_16213646 頭像

mob64ca140761a4 - android 自適應寬度的popwindow

1.透明度 opacity:0~1的數字 filter：alpha（opacity=0~100的數字）； 0表示完全透明，opacity屬性1或者filter的100代表完全透明； 説明:這是讓元素整體透明 如果只是讓顏色透明，用rgba（r，g，b ，透明度） 2.自適應 概念 ：能夠根據設備類型尺寸，自動調整

css3 , 移動開發 , Android , 偽元素 , Css , ci , HTML

收藏 評論

shawnphang 頭像

茶無味的一天 - 原生拖拽太拉跨了，純JS自己手寫一個拖拽效果，縱享絲滑

前言 提到元素拖拽，通常都會先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 來實現，它提供了一套完整的事件機制，看起來似乎是首選的解決方案，但實際卻不是那麼美好，主要是它的樣式太過簡陋，無法實現更高級的用户體驗： 這是瀏覽器默認的拖拽效果，點住拖拽任意圖片或文字都會產生。 筆者因為之前有個小項目需要經常參考稿定設計，一直有留意其元素拖拽的效果(如下圖)，所以接下來我將以這種效果為藍

css3 , 拖拽 , 前端 , html5 , Javascript

收藏 評論

xiaoxxuejishu 頭像

小X學技術 - Y分鐘速成Sass

源代碼下載： learnsass-cn.scss Sass是一種CSS擴展語言，它增加了諸如變量、嵌套、mixin等功能。 Sass(以及其它預處理器，如Less等) 能幫助開發人員編寫易維護和 DRY (Don't Repeat Yourself)的代碼。 Sass有兩種不同的語法可選用。SCSS的語法和CSS的相同，但增加了Sass的額外功能。或者Sass（原來的語法），它使用縮進而非大

sass , css3 , mixin , 入門 , Css

收藏 評論

bianchengsanmei 頭像

編程三昧 - CSS 選擇器總結

CSS 是用於網頁設計可用的最強大的工具之一。使用它我們可以在幾分鐘內改變一個網站的界面，而不用改變頁面的標籤。 好一段時間不用 CSS ，有一些基礎知識的記憶有點模糊了，今天再做一次總結記錄，方便日後回顧複習。 選擇器分類 在 CSS 中，選擇器可分為以下幾類： 基本選擇器（通配選擇器、元素選擇器、類選擇器、ID 選擇器、羣組選擇器） 層次選擇器 屬性選擇器 偽類選擇器 偽元素

css3 , css選擇器 , 樣式 , 前端 , html5

收藏 評論

alasolala 頭像

Alaso - SVG動畫從入門到實戰，提升你的網站表現力

在 SVG 中，如果我們想實現一個動畫效果，可以使用 CSS，JS，或者直接使用 SVG 中自帶的animate元素（SMIL）。 這裏我們主要探討SVG與CSS結合實現的一些常見動畫效果。 （下面要使用到的SVG基礎知識，在SVG從入門到圖標繪製和組件封裝 和 SVG中的Transform詳解---平移、旋轉和縮放中都有詳細的介紹，這裏就不重複了，有需要的朋友可以前往查看哦。 ） SVG + C

css3 , svg動畫 , 前端 , html5 , svg

收藏 評論

hooray 頭像

Hooray - 爆款預訂，2022 年最值得關注的後台框架 —— Fantastic-admin

前言 如果 2021 年你還沒有聽説過 Fantastic-admin ，那即將到來的 2022 年可不要再錯過了。 Fantastic-admin 做為一款開箱即用的 Vue 中後台管理系統框架，距離首次面向大眾已經過去一年多的時間了，在這一年多的時間裏，我們服務了數百個團隊和個人開發者，應用在近千款的產品和項目中(保守估計)。其中小到有剛步入社會的新人，用 Fantastic-admin 寫

vue.js , css3 , 後台 , Javascript

收藏 評論

tom-waterhouse 頭像

Tom Waterhouse - The Guide To CSS Animation: Principles and Examples

With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash o

animation , css3 , coding , Css , Essentials

收藏 評論

trent-walton 頭像

Trent Walton - Connecting The Dots With CSS3

In fact, I’d argue the opposite. Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to g

css3 , Techniques , coding , Css

收藏 評論

wynectar 頭像

忘憂N - 談一談可視化大屏的適配方案

説起大屏可視化，就要了解大屏分辨率與尺寸的概念、實際應用場景、自適應適配方案等。 大屏分辨率與尺寸的異同 特性 分辨率 物理尺寸 定義 屏幕上像素點的數量 屏幕對角線的實際長度 單位 像素 (px) 英寸 (in) 或 釐米 (cm) 決定因素 顯示面板的製造工藝 屏幕的

css3 , 可視化

收藏 評論

susuhhhhhh 頭像

用户bPcSPjP - 用css的transform屬性實現一個翻轉字符

本文將用rotateY為大家展示一個翻轉的字符 1.實現效果 2.transform介紹 transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 語法： transform: none|transform-functions; eg： transform:rotate(7deg); -ms-transform:rotate(7deg);

css3 , transform , hsl , HTML , 前端

收藏 評論

rodney-rehm 頭像

Rodney Rehm - CSS3 Transitions: Thank God We Have A Specification!

This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circu

css3 , Techniques , coding , Css

收藏 評論

martin-kool 頭像

Martin Kool - Let’s Play With Hardware-Accelerated CSS

In the context above, performance is usually about measurable aspects such as loading time and responsiveness to user interaction. But more often than not, statements about performance lie within th

optimization , css3 , mobile

收藏 評論

lxnxbnq 頭像

lxnxbnq - Grid佈局總結

Grid簡介 CSS Grid Layout(又叫Grid或者CSS Grid)，它是一個二維網格的佈局系統。在這之前經過了tables,float,positioning和inline-block,但它們都相當於一個 hack，並且功能較少。Flex佈局雖然是一個很棒的佈局工具，但它是一維的，只能分開操作行和列。 Grid術語 Grid Container(容器) 當你對一個元素設置了di

css3 , grid

收藏 評論

dmitry-dragilev 頭像

ZURB - Stronger, Better, Faster Design with CSS3

In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat coder — a lot of the CSS properti

css3 , coding , Css

收藏 評論

richard-shepherd 頭像

Richard Shepherd - How To Use CSS3 Pseudo-Classes

CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added

css3 , coding , Css , Essentials

收藏 評論

ishan-anand 頭像

Ishan Anand - How To Apply Transformations To Responsive Web Design

To most Web developers, it sounds controversial until you hear the punchline: Last summer, the developers in charge of Google’s Chrome browser floated a proposal that went virtually unnoticed by the

css3 , Responsive Design , mobile , Apps , Content , Opinion Column

收藏 評論

professordeng 頭像

professordeng - 針對移動端開發的響應式 Jekyll 主題

simple 這是針對移動端開發的響應式 Jekyll 主題，效果看 demo，源碼在 GitHub，覺得不錯點個 star。 主題特性包括但不限於： 在線編輯、新建、發佈文章 GitHub 官方語法寫作 MathJax 支持屬性公式渲染 mermaid 提供流程圖渲染 支持 B 站、YouTube 視頻嵌入 Gitalk 提供評論支持 原生 JS 實現站內搜索 快速搭建 你可以

github-pages , css3 , jekyll , html5

收藏 評論

jeremy-hixon 頭像

Jeremy Hixon - An Introduction To LESS: LESS vs Sass

I’ve been using LESS religiously ever since I stumbled upon it months ago. CSS was never really a problem for me, in and of itself, but I was intrigued by the idea of using variables to create somet

css3 , Frameworks , Preprocessors , coding , Css

收藏 評論

divya-manian 頭像

Divya Manian - Six CSS Layout Features To Look Forward To

At W3Conf, I gave a talk on how the CSS Working Group is attempting to solve the concerns of Web developers with multiple proposals. There are six layout proposals that are relevant to us, all of wh

css3 , Layouts , coding , Css

收藏 評論

invalidnull 頭像

註銷 - Chrome 開發者工具裏的 CSS grid editor

Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。 Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"項目所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大。 看個具體的例子： !DOCTYPE html html hea

css3 , grid , Css , 前端 , html5

收藏 評論