杰拉斯的博客

标签:CSS3

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

杰拉斯 杰拉斯 | 时间:2015-12-17, Thu | 25,989 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,735 views
前端开发 

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

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

(阅读全文…)

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

杰拉斯 杰拉斯 | 时间:2012-05-29, Tue | 25,988 views
前端开发 

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

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

CSS3折页菜单

那么,教程开始了!

(阅读全文…)

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

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

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

不需要Flash,不需要JavaScript,纯CSS3就可以实现,先看看Demo(不支持IE内核浏览器):

(阅读全文…)

[前端]CSS3命名规范

杰拉斯 杰拉斯 | 时间:2011-09-12, Mon | 5,743 views
前端开发 
  • 头部:header
  • 内容:container
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper wrap
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:link
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 投票:vote
  • 合作伙伴:partner
  • 摘要:summary
  • 按钮:btn
  • 标签页:tab
  • 当前的:current
  • 小技巧:tips
  • 图标:icon
  • 注释:note