css画图那些事

【css画图那些事】的更多相关文章

上一篇css3写了一些基本的图形,想到是不是能用css3画个动物,便在网上找图片.于是选中一只大鹏鸟也不难,一步步的写出身体部位,再定位上去就好了.来一张效果图,后面给两个加了动画,稍微难看一点,后期慢慢修改 <!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> body{ font-size:; t…

基于单个 div 的 CSS 画图

原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图译者: 前端外刊评论译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Restricting your available options forces you to re-evaluate the tools you already have. 限制你的可选项,会让你又一次评估手头上已有的工具. 为什么仅仅使用一个 Div? 2013年5月,我參加了 CSSConf,看…

关于CSS的那些事？

关于CSS的那些事? 它有精准定位与排版,使得网页布局.信息排版一目了然:它有多姿多彩的样式属性,使得网页中各元素千变万化:它有神奇的渲染天赋,使得网页有了如诗如画.别具一格的魅力.你知道它了吗?没错,它就是CSS(层叠样式表)!想了解它吗?那就跟着我走吧! 什么是CSS(层叠样式表)? 简单说,CSS(层叠样式表)是一种用来表现HTML样式的计算机语言:是HTML的表现层!它主要由CSS选择器与CSS样式组成!它具有简单易写.易于维护的特点! 什么是CSS选择器? 从字面意思上,我们就很容易看…

7件你不知道但可以用CSS做的事

不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶.今天,我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片. CSS@supports 在使用一些浏览器可能没有的特性时,每一个优秀的前端开发者都需要进行特性测试.特性测试一直以来都是由JavaScript来做的,许多人使用Modernizr,一个由许多测…

有关CSS的一些事

看到两篇关于CSS的文章,总结的非常好.因为没有那个网站的账号,没法收藏转发,所以把链接贴在这里,分享给大家.这两篇文章对于初学CSS的人来说,总结得很精炼准确,而且通俗易懂.推荐~ 有关CSS的一些事--CSS和页面布局 http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=29292475&id=4530921 有关CSS的一些事--结构伪类选择器 http://blog.chinaunix.net/xmlrpc.php?r=b…

CSS画图

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 least one browser. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Righ…

背景图片与 CSS的那些事

在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图,规定的位置是"20px 10px"和"60px…

css 样式那些事

1. input placeholder 的颜色修改 ::-moz-placeholder { color: #f3d999; } ::-webkit-input-placeholder { color:#f3d999; } :-ms-input-placeholder { color:#f3d999; } input{ outline:medium; } 2. css溢出点点(宽度给够) text-overflow : ellipsis; white-space : now…

css居中那些事

一.css垂直居中 1.line-height(适用于单行文本居中) eg: html:<p class="wordp">123</p>- css: .wordp{width:100px;line-height:50px;background:yellow;color:#fff} 2.:befor+inline-block(多对象的垂直居中技巧) eg:html <div class="box3"> …

使用CSS画图之三角形(一)

简单的画一个三角形,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /* 正方形8*8 */ .a { width: 0; height: 0; border: 4px solid; } /* 正方形80*80 (4个三角形) */ .b { wi…