CSS3妙用

css3 妙味

css3 属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css3属性</title> </head> <body> <h1>自定义属性p[kang]</h1> <!--<style> p[kang]{color:red;} /*属性…

scaleX的妙用案例1 效果: HTML: <a href="javascript:;">我有下划线噢</a> CSS: a{ text-decoration:none; position:relative; padding-bottom:5px; } a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background-color:red;…

css3妙用刷新图标

从猫眼电影看到的一个图标 .geopos i:before { content: ""; width: .8em; height: .8em; border: .14em solid #b7b7b7; border-top: .14em solid transparent; border-radius: %; position: absolute; top: .2em; -webkit-transform: rotate(45deg); } .geopos i:after { cont…

【学+原】CSS3的2D动画 ——仿NOMOS手表

看CSS3妙味课堂中有一课是介绍如何做钟表界面,然后三根针都能随着时间转动,然后自己在那个简易的版本上做了一些进一部改进. 最关键的知识点应该是transform-origin这个样式,要选对旋转的中心点.分针秒针时针的旋转中心点应该是针的底部中间位置这个实例还是让我第一次见到把<style>设置了id,然后写进js里去操作的,因为表面的各种小时,秒的刻度的制作,需要用循环来写,直接写css样式里是不现实的. 另外就是要把setInterval和transform:rotate结合起来使用,…

《众妙之门——精通CSS3》一书知识点剖析

不得不佩服京东的速度,昨天刚下单的两本书今天上午就到了.其中一本是全彩页的<众妙之门 - 精通CSS3>,细看了前几十页,书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子,扔个例子的链接(没源码下载,要自己手动输入,而且近乎所有的例子页面均已失效),未经细剖便草草了事,感觉倒是适合作为厕所读物(汗).... 虽然书中不细剖,却也不能白花银子,不妨自己实打实地查资料.记笔记,不辜负了早上送出的老毛. 如果你也买了这本书,那这篇文章会给你一定的辅助. (本文依照我翻阅书籍的进度…

妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些一.总结一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个divE:target { sRules } 匹配相关URL指向的E元素.…

妙味css3课程---1-1、css中自定义属性可以用属性选择器么

妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=text]{background-image:url(img/text.gif);}…

css3 animation 属性众妙

转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需要了解的同学可先移步 MDN),而是结合实际的开发经验,介绍 css3 animation 属性的一些使用场景及技巧. 1. animation-delay MDN 中的介绍: animation-delay CSS 属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度. 该属性值…

CSS3 Media Queries 特性的妙用

第一招: 在网页中,pixel与point比值称为 device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5. 那么-webkit-min-device-pixel-ratio:2 可以用来区分iphone(4/4s/5)和其它的手机 iPhone4/4s的分辨率为640*960 pixels,DPI为是326,设备高度为480px iPhone5的分辨率为640*1136 pixels,DPI依然是326,设备高度为568px 那么我们只需要判…

CSS3 border属性的妙用

.ribbon { background: #45c9c8; position: absolute; width: 75px; height: 25px; line-height: 25px; top: -4px; left: -11px; font-size: 14px; color: #fff; text-align: center; font-style: normal; z-index: 1; &:after{ content: ""; position: absolu…

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 . 正文从这里开始,本文主要讲述一下伪元素 before 和 after 各种妙用. :before和::before的区别在介绍具体用法之前,简单介绍下伪类和…

总结30个CSS3选择器

或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法.*选择器也可以应用到子选择器中,例如下面的代码: #container * { border:1px solid black; } 这样ID为container 的…

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文章: [CSS进阶]伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用. 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势.为了不误导读者,就赶紧补充一下. 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的.…

总结30个CSS3选择器（转载）

或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法. *选择器也可以应用到子选择器中,例如下面的代码: #container * { border:1px solid bl…

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl…

CSS3选择器的研究，案例

在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲实例. 属性选择器 [title]:选择带有title属性的元素 [title='hello']:选择属性是title并且值是hello的元素 [title~='hello']:选择属性是title并且部分值是hello的元素,hello需要是单独的值,以空格分开 [title*='hello']:…

[css3]CSS3选择器:nth-child和:nth-of-type之间的差异

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标…

【巩固】CSS3的3D动画 ——3D旋转（1）

最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果:但是ie11并不支持preserve-3d perspective也要加在父级上,使动画具有透视效果: 要给父级也加上宽高,否则动画没有效果 <style> #box{ margin: 70px auto; width: 300px; height…

【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe…

js框架Modernizr是什么东西？他是前端开发HTML5和CSS3的强有力前端js检测类库

最近在研究modernizr的前端框架,发现这个Modernir对前端写页面非常友好,并且能够很快的建立起适应任何设备的html页面哦.在这里分享下基础教程,让大伙对modernizr是什么?做什么用的?有个基础的了解和起个初步教程的作用吧. 10年前,只有最尖端的网站设计师会为网页的布局和修饰使用CSS.那时的浏览器对CSS进行布局的支持即不完善又漏洞百出,所以这些人在坚持 WEB标准化的同时,也不得不采用hacks来使得他们的页面在所有浏览器中都能正常显示.其中一个被使用的越来越多的hack…

前端的3D(css3版本)

其实是依托Css3的功劳,先上一个例子代码地址:链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh 这动画纵有万般变化,也离不开以下几个属性 transform (元素2D 3D转换) translate,3d,X,Y,Z (移动距离) scale,3d,X,Y,Z (缩放比例) rotate,3d,X,Y,Z (旋转角度) skew,X,Y (倾斜角度) transform-origin (允许被转换元素位置) left center right le…

30个CSS3选择器的应用

或许大家平时总是在用的选择器都是: id class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,爱创课堂为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 更多精彩关注:http://www.icketang.com/ 1 *:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上…

妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> var str = '妙味课堂'; // alert( str.length ); //字符串…

CSS3 Backgrounds相关介绍

CSS3 Backgrounds相关介绍 1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认的位置. 2.在CSS3中,我们可以给background-position属性指定高达4个值:开始的两个值代表了水平轴;后面的两个值代码垂直轴,这意味着我们可以相对于上下左右任意一个角落定位,而不是之前的只能相对于左上角定位. 3.我们可以使用正值决定背景图片的位置,也可以使用负值.正值所产生的效…

【CSS3妙用】的更多相关文章