纯CSS3绘制26个英文字母 在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。 网页代码中用到（<!-- 浮动p换行 --> <p style="clear:both">）和p边距设置和浮动（margin:20px5px 10px 80px; float: left;）。其中边距Margin四个像素依次代表：上右下左。 以下按字母表顺序，列出绘制26个字母的...
这次给大家带来如何使用css3实现3d立体特效，使用css3实现3d立体特效的注意事项有哪些，下面就是实战案例，一起来看一下。 其实css3中提供了很多让我们实现非常炫酷的工具，好多特效不需要通过复杂的js代码来实现，而可以通过简单的css3代码来实现，这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现。 要实现这个正当体盒子你要对css3的内容有基本的了解而且要具备css中基本的语法，css3中主要掌握的内容如下：了...
iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器。 iphone手机桌面效果 body,div,ul,li{padding: 0; margin: 0; } li{list-style: none; } body {background: #333; } #iphone {width: 900px; height: 600px; background: url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; } #wrap {width: 240px; height: 360px...
今天学习了一下QQ邮箱的网页整体缩放效果，原来实现方法很简单，代码如下： 代码如下: 测试页面 div { width: 600px; text-align: center; font-size: 4em; color: #333; } $(function() { var r = document.body.offsetWidth / window.screen.availWidth; $(document.body).css("-webkit-transform","scale(" + r + ")"); }); $(window).resize(function() { var r = document.body.offsetWidth / window.screen.availW...
前言 在本教程中，我们将创建一个独特的滑动框导航。这样做可以让有菜单的盒子滑出，并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬，子菜单将向左或向右滑动。 我们将使用jQuery Easing Plugin插件和一些由tibchris.提供的漂亮图片 标记 在HTML的结构中，我们将使用一个无序的列表，其中每个菜单项将包含的主要链接和一个子菜单的div元素： <ul id="sdt_menu" class="sdt_menu...
今天学习了一下QQ邮箱的网页整体缩放效果，原来实现方法很简单，代码如下： 代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>测试页面</title> <style type="text/css"> div { width: 600px; text-align: center; font-size: 4em; color: #333; } </style> <script type="text/javascript" sr...
iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器。 iphone手机桌面效果 body,div,ul,li{padding: 0; margin: 0; } li{list-style: none; } body {background: #333; } #iphone {width: 900px; height: 600px; background: url(//files.jb51.net/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; } #wrap {width: 240px; height: 360px; pos...
在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 问题 通过查看demo能注意到，我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果...
之前的教程《HTML5实践 -- css3图片样式》，我介绍了如何为图片添加background-image包装，借助box-shadow 和 border-radius为图片设置多种多样的样式，有兴趣的朋友可以回头阅读。但是最近我在设计 PhotoTouch 主题的时候遇到了问题，background-image大小不能调整，这对于响应式设计就不太理想了。今天我们将尝试解决问题。 问题 大多数浏览器对图片的border-radius 和内嵌 box-shadow效果渲染的并不是很完美。这也就意味...
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。 首先要和大家分享的是，如何使用p+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html：<p id="pyramid"><p></p> </p> css：<style type="text/css">#pyramid {position: relative;margin: 100px auto;height: 500px;width: 100px;}#pyramid > p {position: absolute;border-style: solid;border-width: ...
今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来， 这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。 我们先来看html代码。<!DOCTYPE html> <html> <head><title></title><link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/> </h...
包括但不限于：精确指定某个 inline-block 的高度（Height，TeX 术语）和深度（Depth），并使当前行行高与之相协调精确地将某个 inline-block 离上边缘特定距离（以 em/rem 作单位）的位置和其外部所在行的基线对齐回复内容： 完整呈現還要花些時間，例如Hachette Livre的專家Dave Cramer在完成（？）拉丁排版與分頁需求後，寫了 CSS inline layout這份文件。就在處理你所提到的部分問題。http://dev.w3.org/csswg/css-inline/TeX的...
在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 问题 通过查看demo能注意到，我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲...
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。 demo地址：http://www.gxlcms.com/jiaoben/70022.html 下面我们开始介绍如何制作。 html： 代码如下: One face Up, down, left, right Lorem ipsum. New forms of navigation are fun. Rotating 3D cube More content 上面的html中，class为face的6个div分别代表立方体的...
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。 首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html： 代码如下: css： 代码如下: #pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { position: absolute; border-style: solid; border-width: 200px 0 200px 346px...