杰拉斯的博客

标签：CSS3

[CSS3] 纯 CSS 实现未知高度垂直居中

杰拉斯 | 时间：2015-12-17, Thu | 26,167 views
前端开发　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现未知高度垂直居中</title>
    <style>
    .outer {
        font-size: 0;
        height: 200px;
        background: #0099ff;
        white-space: nowrap;
    }
    
    .outer:before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    
    .inner {
        font-size: 14px;
        white-space: normal;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            第一行<br>第二行<br>第三行
        </div>
    </div>
</body>
</html>

50 款简化 CSS 开发的实用工具和生成器

杰拉斯 | 时间：2012-07-27, Fri | 30,922 views
前端开发　

这些CSS工具都是很适合网页设计题使用，已经为大家分好类别，请自行点击导航快速浏览：

网格和布局，CSS 优化，CSS 菜单工具，CSS 按钮，CSS 圆角，CSS 框架，CSS Sprites，CSS 排版以及 CSS 表单。

(阅读全文…)

CSS3无图片实现华丽折页菜单效果（多浏览器兼容）

杰拉斯 | 时间：2012-05-29, Tue | 26,154 views
前端开发　

昨天在做一个网站的左栏菜单的时候，突然想到，看了那么多创意的CSS3导航、菜单，何不自己动手做一个纯CSS3菜单呢？于是捣鼓了一下把想法给实现了，虽然说是比较老掉牙的一个创意，不过顺便也算是锻炼了一下CSS水平。

先看看网页里的最终效果：

那么，教程开始了！

(阅读全文…)

CSS3实现文本框焦点伸长效果

杰拉斯 | 时间：2012-05-28, Mon | 11,747 views
前端开发　

如果用过苹果官网的搜索功能，就会发现，当搜索框获得焦点时会自动伸长，并且有动画效果，这是怎么实现的呢？

不需要Flash，不需要JavaScript，纯CSS3就可以实现，先看看Demo（不支持IE内核浏览器）：

(阅读全文…)

[前端]CSS3命名规范

杰拉斯 | 时间：2011-09-12, Mon | 5,871 views
前端开发　