文章分类 -  CSS3

1 2 下一页
你所不知道的 CSS 滤镜技巧与细节
摘要：承接上一篇你所不知道的 CSS 动画技巧与细节，本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！ 系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。 OK，下面直接进入正文。本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的 阅读全文
posted @ 2018-12-13 15:05 半前端半设计的四不像 阅读(127) 评论(0) 推荐(0)
响应式web设计之CSS3 Media Queries
摘要：Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 那么，Media Queries是如何工作的？ 两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件 阅读全文
posted @ 2016-07-08 16:59 半前端半设计的四不像 阅读(111) 评论(0) 推荐(0)
@FONT-FACE 用字体画图标
摘要：HTML 1 <body> 2 <!-- ul.layout>li*5>a[href=#]>i.icon --> 3 <!-- Sublime Text 快捷拼写 --> 4 <ul class="layout"> 5 <li><a href="#"><i class="icon"></i></a 阅读全文
posted @ 2016-03-08 10:52 半前端半设计的四不像 阅读(127) 评论(0) 推荐(0)
CSS3 @font-face
摘要：@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了 阅读全文
posted @ 2016-03-08 10:51 半前端半设计的四不像 阅读(113) 评论(0) 推荐(0)
35个让人惊讶的 CSS3 动画效果演示
摘要：本文收集了35个惊人的 CSS3 动画演示，它们将证明 CSS3 Transform 和 Transition 属性的强大能力。CSS 是网页设计非常重要的一部分，随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择。如今，用纯 CSS 就可以实现各种各样很酷的效果，甚至... 阅读全文
posted @ 2015-09-11 15:11 半前端半设计的四不像 阅读(280) 评论(0) 推荐(0)
jquery+css3实现3d滚动旋转
摘要：http://xiaobai.52nhw.com/image/pic.gif 乍一看挺唬人的。。。好吧，我确实被她给唬住了！然后先是加群又是关注的。。。最后搞到一个包。。。 然后你认为07-03就是你想看到的代码了吗。。。太天真了 里面就一个jquery的库和一堆阿猫阿狗的照片 然后老老实实的看视频 阅读全文
posted @ 2015-07-25 10:11 半前端半设计的四不像 阅读(189) 评论(0) 推荐(0)
12个CSS3 Box-shadow的创新用法
摘要：虽然HTML5和CSS3在国内还没普及，但我觉得我们应该开始使用它，因为目前很多用户已经使用支持HTML5& CSS3的浏览器了，今天达人为大家分享12个CSS3 Box-shadow的创新用法，box-shadow是CSS3中比较常用的属性之一，希望大家看了后，也尝试在新项目中使用：）推荐阅读CS... 阅读全文
posted @ 2015-07-08 10:26 半前端半设计的四不像 阅读(227) 评论(0) 推荐(0)
CSS阴影效果(Box-shadow)用法趣味讲解
摘要：使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。基本用法box-shadow:2px 2px 5px #000;box... 阅读全文
posted @ 2015-07-08 10:16 半前端半设计的四不像 阅读(452) 评论(0) 推荐(1)
CSS3 Multiple Backgrounds
摘要：前面几节和大家一起学习了CSS3中给Background新追加的属性：《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。这样一来，CSS3中的Background功能就更强大了，那么今天我要给大家推荐一个有关... 阅读全文
posted @ 2015-07-07 16:55 半前端半设计的四不像 阅读(205) 评论(0) 推荐(0)
使用background-clip实现透明边框
摘要：你有没有在网页上见过具有透明边框的元素？我觉得正是因为Facebook使用了类似于Facebox的灯箱插件，才使得透明边框这一技术发扬光大。但我并不认为Facebook现在还觉得这种样式依旧很时髦，不过至少还是十分明晰整洁的。你可能觉得实现这样的效果非常简单，只需要以下CSS代码：#lightbox... 阅读全文
posted @ 2015-07-07 16:54 半前端半设计的四不像 阅读(860) 评论(0) 推荐(0)
background-clip/origin一则运用
摘要：原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/background-clip 和 background-origin 是 CSS3 中新加的background module属性，用来确定背景的定位。ba... 阅读全文
posted @ 2015-07-07 16:53 半前端半设计的四不像 阅读(106) 评论(0) 推荐(0)
CSS3 经典教程系列：CSS3 阴影（text-shadow）详解
摘要：《CSS3 入门教程系列》前一篇文章详细介绍了border-radius的用法，今天这篇文章我们在一起来看看CSS3中实现圆角效果text-shadow属性的具体用法。在以前，阴影效果一般都是做成图片，现在有了 CSS3 可以直接使用text-shadow属性来实现阴影。这个属性可以有两个作用，... 阅读全文
posted @ 2015-06-30 15:01 半前端半设计的四不像 阅读(428) 评论(0) 推荐(0)
CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）
摘要：《CSS3 经典教程系列》的前一篇文章向大家详细介绍了text-shadow文本阴影特性的用法，今天这篇文章我们在一起来看看CSS3中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写 CSS 代码就可以实现。 CSS3 Gradien... 阅读全文
posted @ 2015-06-30 11:34 半前端半设计的四不像 阅读(219) 评论(0) 推荐(0)
响应式设计的十个基本技巧
摘要：Responsive Design对于我来说一点都不陌生，从他在这个互联网出现的时候，就一直在观注他的成长，而且在w3cplus站上也分享了很多这方面的教程和资源。由于组织了YY活动在线上和大家分享Responsive的设计，为了能让大家更好的理解，我自己也有必要好好的做一下功课，今天这个就是功课， 阅读全文
posted @ 2015-06-26 10:57 半前端半设计的四不像 阅读(235) 评论(0) 推荐(0)
响应式Web设计的9项基本原则
摘要：响应式web设计对于解决多类型屏幕问题来说是个不错方案，但从印刷的角度来看，其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式web设 阅读全文
posted @ 2015-06-26 10:52 半前端半设计的四不像 阅读(166) 评论(0) 推荐(0)
响应式布局这件小事
摘要：讲到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计 阅读全文
posted @ 2015-06-26 10:08 半前端半设计的四不像 阅读(139) 评论(0) 推荐(0)
CSS3中REM使用详解
摘要：在页面中设置字体，我们知道有常见的两种，px 和 em.px在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小（虽然一般人不会去改变浏览器字体大小），这时会使用我们的Web页面... 阅读全文
posted @ 2015-06-25 17:22 半前端半设计的四不像 阅读(387) 评论(0) 推荐(0)
css3属性：-webkit-font-smoothing: antialiased;与-moz-osx-font-smoothing: grayscale;
摘要：CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！它有三个属性：none ------ 对低像素的文本比较好subpixel-... 阅读全文
posted @ 2015-06-25 16:15 半前端半设计的四不像 阅读(2041) 评论(0) 推荐(0)
-webkit-animation的使用
摘要：-webkit-animation:仍旧是一个复合属性，-webkit-animation: name duration timing-function delay iteration_count direction;包括以下几个属性（1） -webkit-animation-name 这个属性的使... 阅读全文
posted @ 2015-06-13 17:26 半前端半设计的四不像 阅读(227) 评论(0) 推荐(0)
CSS3 @keyframes 规则
摘要：实例使 div 元素匀速向下移动：@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyfram... 阅读全文
posted @ 2015-05-27 17:32 半前端半设计的四不像 阅读(113) 评论(0) 推荐(0)

1 2 下一页