HTML/CSSHTML5 / CSS3

[30天] CSS Media query几种非常用媒介查询

乍一想,好像媒介查询很简单,已经一直在用的东西,还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用!我以为我所熟知的:@media (max-width: 640px) {    /* css here */}就这?大佬教我的:一、媒介查询的更多打开方式媒介查询不只是能用在CSS代码块中,还可以用在引入CSS的链接中,甚至是JavaScript中。例如:<link&nbs...
38

[29天] 再探CSS3D

CSS3D transform perspective

第29天了,不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念,就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上。其余的手指指向前方,这样就建立了一个左手坐标系。其中,拇指、食指和其余手指分别代表x,y,z轴的正方向...
37

[28天] CSS渐变深度学习

CSS渐变 linear-gradient radial-gradient

CSS渐变有两种线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型,<gradient>只能被用于<image>可以使用的地方。因此,linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。...
41

[27天] 一条分割线能耍什么花样

这是一条普通的HTML分割线<hr class="line1">两条实线.line1{   border: 0;   border-bottom: 3px double; }一条虚线.line1{   border: 0;   border-bottom: 1px dotted; }一条可控线段长度与间距...
42

[25天] 巧用border-radius实现波浪加载

先看看只用了一个div加上css实现的效果:由于录制gif体积较大,所以只录了加载到一半的效果。先帖上完整代码,如果不好读后面有大致的思路说明:<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv=&qu...
37

[24天] background-clip实现文字遮罩效果

前言这真是一个屌炸天的新属性,可以发挥想像实现各种镂空效果。目前还没有被所有浏览器支持,Chrome需要添加-webkit-前辍。开胃小菜全文颜色渐变代码超简单:<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-...
38

[22天] CSS冷门实用特性

一、毛玻璃效果backdrop-filter 可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。下例为一个毛玻璃效果:<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8"> &nbs...
41

[20天] 上手Markdown语法

前言 Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者HTML)文档。 由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至...
46

[09天]惊艳的CSS交互动效

很多提高体验的交互效果,CSS就够了。一、加载进度完整代码:<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content=&quo...
66

[07天]CSS grid布局

一、什么是网格布局CSS 网格布局擅长于将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系(前提是HTML生成了这些区域)。像表格一样,网格布局让我们能够按行或列来对齐元素。 然而在布局上,网格比表格更可能做到或更简单。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。二、基本概念2.1 网格容器我们通过在元素上声明 display:grid 或 display:inline-grid 来创建一个...
70

精品模板蓝瞳原创精品网站模板

^