今天看到一个有意思的效果,闲来无事做一个: 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示出两极是用另加的块元素挡住底面的颜色,但如果上图的两极用遮挡来实现效果的话并不能实现透明,将遮挡的块设为透明又会显示出底面原本的样子,所以这个思路不对.那就只能将底面本身变为透明,但怎么实现既透明又能出现这种样子呢?渐变,而且为了能出现圆的样子选择了径向渐变. 效果: 路明确,开始操作 一个极分成四个块,圆头,肚子,尾,还有分离的小圆

  在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]

仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章没有写进去,但不管怎么说,多少了解一下还是有好处的,里面部分功能,有些浏览器已经实现了. 如果你对CSS预处理器感兴趣,那么本篇文章也许很适合你. 初学CSS预处理器,其实我是不太明白为什么需要用这种东西的,后来想明白一件事,一切都是为了可维护性.比如下面这幅图 距离左边有一点点间距,而其他元素设置的间距往往

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s

一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibility: hidden; overflow: hidden; } 解读浮动闭合最佳方案:clearfix 二.使用斜杠/分割的关键字 1.font H2{ font:12px/100% sans-serif; } 分割的分别是 字体大小 与 行高 ,其他关键是用空白符分割. 2.background div{

前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性.之前的博文中已经分别详细地介绍了margin的基础知识和负margin的详细用法.本文将详细介绍外边距margin的几个重点部分,包括重叠.auto和无效情况 重叠 [前提]   margin重叠又叫margin合并,发生这种情况有两个前提   1.只发生在block元素上(不包

前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的正确效果,还是浏览器兼容性的bug.下面将详细介绍CSS视觉格式化 术语解释   了解CSS视觉格式化之前要先了解一些基本术语.而下面所有的术语中,最重要的就是基本框和包含块 [基本框]   CSS假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区(content

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣

在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类.指定数据库连接字符串以及创建一个数据库.最后,我们还将添加视图和控制器来管理和显式产品和分类数据. 注意:如果你想按照本章的代码编写示例,你必须完成第一章或者直接从www.apress.com下载第一章的源代码. 2.1 添加模型类 Entity Framework的代码优先模式允许我们从模型类创

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣

CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动画一般由浏览器"主线程"之外的独立线程处理,在其中执行样式.布局.绘制和 JavaScript. 使用CSS动画,允许对单个动画关键帧.持续时间和迭代进行更多控制. 但缺乏表现力,并且很难有意义地组织动画,这意味着创造动画会带来较高的复杂度和错误率. 2)JavaScript动画: 在浏览

前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度).边框颜色和边框样式,且先后顺序无关 border: border-width border-color border-style border: 1px solid red; [边框样式]   如果一个边框没有样式,边框将根本不会存在   关于虚线dashed,在chrome/firefox下,

前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义   Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能. Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式

以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在随着时间变化而改变CSS属性值呈现方面,动画与过渡(transitions)类似.主要的区别是,当CSS属性值改变时,过渡隐式触发:而当动画属性被应用时,动画被显式地执行.正因为如此,在给CSS属性添加动画时,需要给动画指定明确的值. 动画的许多方面都可以被控制,包括动画的重复次数,是否在开始值与结

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 所有题目汇总在我的 Github . 3.层叠顺序(stacking level)与堆

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

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

   误区一.多div症 <div class="nav"> <ul> <li><a href="/home/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/concact/">Concact<

前几篇博客中讲了Jquery的基础和点击实际,下面来说一下和css搭配着来怎么做 还是和往常一样,举个例子 好几个方块,然后设置颜色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite 集成火狐浏览器,让你在浏览的时候便可以轻松地获取丰富的网页开发工具.你可以在任何一个网页中实时编辑.调试和监测CSS,HTML及JavaScript. Web Developer Web Developer (网页开发者) 扩展为浏览器添加了各种开发者工具.扩展可用于Chrome, Firefox和

Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样式调用方式:介绍外部.内部.内联等调用方式. 3. 样式的优先级:介绍调用样式的优先级. 1. 选择器的分类 语法结构 1.1 Id选择器 1.1.1 格式 #id :#+元素的id:id是区分大小写. 1.1.2 示例 #title1 {background-color:Blue;border-w