设计responsive页面时的注意点： 使用media query增加breakpoint来实现responsive. 永远以mobile设计优先。 设计组件时经常长宽使用百分比。 如果需要设置一些长宽固定数值时，使用em作为单位是个不错的选择。然后针对字体大小设置对应的em大小。以字体作为参照物。 参考文档： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ...
阅读全文学习css3的作业之一，制作一个简单的图表。 这里是源码和效果图。 参考文档:https://tympanus.net/Tutorials/Animated3DBarChart/ CSS源码： @media screen and (max-width: 450px) { .sm-graph-container { font-size: 0.22em; } ...
阅读全文这是学习css3动画效果的示例，动态不停旋转文字。 可以参考网址：https://tympanus.net/Tutorials/CSS3RotatingWords/index4.html 这是简单效果图截屏。 首先HTML代码如下： <section class="rw-wrapper"> <h2 class="rw-sentence"> < ...
阅读全文css的transform提供了rotate函数。rotate对inline元素直接旋转不起作用。比如下面的例子 Yes or No 希望将or旋转。 HTML代码： Yes <span class="rotateme"> or </span> No CSS代码： .rotateme{ transform: rotate(270deg); display: inline-block; backgrou ...
阅读全文本文收集了CSS实现的基本形状，以及border-radius的文档解释。 border-radius中比较难理解的是由/设置的附加弧度实现椭圆型的边角。 Syntax The border-radius property is specified as: 1.one, two, three, or four <length> or <percentage> values. This is used to set a single ...
阅读全文本文收集了一些css3示例网站。 这些网站有： https://1stwebdesigner.com/css-effects/ https://tympanus.net/Tutorials/SwatchBook/index5.html https://nettuts.s3.amazonaws.com/771_sticky/step5.html https://designmodo.com/demo/interactivegraph/ https://ty ...
阅读全文如何通过css来实现紧贴底部的页脚 在网页设计时存在一个非常常见的问题：一个块级样式的页脚，常常设置了特定的背景，当页面内容足够长的时候它一切正常。而当页面内容比较短的时候就会出现问题。此时的问题就是页脚不能像期望中的那样“贴紧”视口的最底部，而是紧跟在内容的下方。（悬在页面中间）。 问题的关键是页面内容的高度是动态的，不同页面高度是不一样的。通过js来计算解决不是我们期望的。在css3之前都咩有很好的解决方案。大部分解决方案都是给页脚设计一个固定的高度，然后 ...
阅读全文Lea Verou著CSS魔法译的<<CSS揭秘>>是一部不错的CSS技巧书籍。本文简单摘录一些示例和技巧。 背景和边框 1. 半透明边框 (http://play.csssecrets.io/translucent-borders) border: 10px solid hsla(0,0%,100%,.5); background:white; background-clip:padding-box; 2.多重边框 (http://pla ...
阅读全文c=1, w=2, b=512, kB=1000, K=1024, MB=1000*1000, M=1024*1024, xM=M GB=1000*1000*1000 G=1024*1024*1024, 以及T, P, E, Z ,Y The Shapes of CSS All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at ...
阅读全文