钉子の次元

Dimpurr – 千里之行,始於足下。

Modern Sci-Fi Personal Page

唔 …… 大概可以说是预谋很久了,至少是在公布 dp-card 即上一个个人页之前,就准备好要写一个新的主页了。要说直接原因,或许是因为被 JN 吐槽了很多次请换一个,抑或是一时急躁提前公布了之前的个人页无法再用下去了?至少还是在寒假的第二天开工,花了两个下午把这个新的页面完成了。围观→

dp-modern

dp-modern

其实很早就有过好几个版本的设想了,但是脑子里浮现出来的基本上是 iOS7 风的单页长视差。大气一点的原则自不必说,之前的个人页自己烦恼了挺久的隐蔽的博客入口的问题也得好好解决。不过等到某天骑着单车准备补课的时候,脑子里却冒出来一个与之前完全迥异的思路。然后等到做完数学试卷后,某人就开始在本子上涂画了起来。

READ MORE →

一个 Div 可以做到的 ……

起因是 Cry 姐在群里提到了 box-shaodow 的 Spread Distanc 属性,于是在测试时钉子就想到做了这样一个模拟了一张 CD 的页面。整个页面只用了一个 div 元素,全部效果完全通过 CSS 实现。查看效果→

One-Div-CSS3-CD

One-Div-CSS3-CD

DOM 如下:

<body><div></div></body>

光盘整体通过多 box-shadow 和控制阴影距离以及模糊实现,为了保证透明后配色能看调了半天。上下的文字都通过伪元素添加,其中上方的标题用到了 text-shadow 模拟立体效果。四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟,在别的内核下貌似没有效果。

READ MORE →

dp-card – 钉子的个人页一代

这是一个 HTML5 + CSS3 的个人名片页,附带响应式移动版,兼容 IE9 及以上浏览器。

dp-card

dp-card

最近有不少同学表示了对钉子目前个人页的喜爱,虽然个人觉得并不咋滴, 正好准备过段时间重新设计新版的个人页,于是好好修正了一下放出来了。出于无聊重新修改了各种语义化标记,把脚本也重做了,并且通过了 W3C 验证,感谢 @JoyNeop 菊苣的挑刺 …… 纯 HTML5 页面,需要请自行修改相关内容。有问题可以回复,可能不接受新的功能需求。

READ MORE →

StartPress – 空 WordPress 主题脚手架

这是一个 HTML5 的空 WordPress 主题,可以基于此快速开始新主题的创作。内置了基本的输出结构和函数,没有任何多余样式标签。目前处于早期测试版本还较不稳定,欢迎试用和反馈。Github 项目地址→

StartPress

StartPress

因为连续制作了几个主题之后遇到了例如首页 meta 标签等的复用问题,于是就花了一晚上在几个主题的基础上修改合并成了这个空主题,并加上了注释。这只是一个单纯的空白主题,并且内置了一些常用函数,并不是一个框架,也没有复杂的功能。代码格式和文件结构有一定的个人风格,也欢迎诸位来添砖加瓦。预计将会在今后增加关于后台设置的框架。

READ MORE →

页面布局孰优孰劣:基于REM的EMs弹性布局——可用性的胜利

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 Fixed 固定布局,到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端们在可用性方面做的努力越来越多。

REM 是一个在 CSS3 中被提出的新单位,相对 EM 变为了针对根元素 <html> 的 font-size 计算,使得便利性大为提升的弹性布局再次被提上话题。在介绍具体实现之前,不妨先说说为何要选择 EMs 进行布局。

脱离了表格布局的蛮荒时代后,越来越多的基本布局方式被应用在了实践中,当然也不乏多种配合。以下就是几个常用技术的对比。(响应式和自适应这两个名词经常被错误使用,例如 自适应网页设计(Responsive Web Design) 这篇文章

  • 固定 Fixed
    使用 px 和 pt 这样的绝对单位进行固定布局。在无论什么设备上保持固定的尺寸,在不适合的分辨率下可能导致大面积空白或横向滚动条。最经典,也是被证明极其不友好、维护困难的方法。
  • 流动 Fluid
    使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。某些情况下可能导致错误的伸缩或者布局被破坏。
  • 弹性 Elastic
    使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点,又相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来,但几乎是目前最好的布局方式。
  • 伸缩 Flexbox
    使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大,但是还未普及并且兼容性较差。
  • 响应式 Responsive
    使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,但是在同一个设备下实际还是固定的布局,并且因为浏览器的支持原因对介质的检测还不实用。
  • 自适应 Adaptive
    通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是利用响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术综合统称。自适应几乎已经成为优秀页面布局的标准。

READ MORE →

为 WordPress 主题添加文章形式支持和注册自定义类型

WordPress 3.1 之后,推出了一个模仿 Tumblr 的「文章形式」功能,可以让博客中除了默认的文章之外展现出更多的特殊样式。不同的文章形式,可以支持在输出时进行判断处理,以及列出存档等等……很多细心的主题里面都会加上对一些文章形式的支持,如果在面临特殊需求时,希望能够自定义专门的编辑器或者分类目录,那么还可以去注册一个自定义的文章类型。

一 内置形式

WordPress 已经内置对几种常用的文章形式的支持,如果可以满足需要,那么就不需要再重复造轮子了,只需要添加主题对已有形式的支持就好了。内置形式列表如下:

  • standard – 标准,也就是默认的文章形式
  • aisde – 日志,实质上就是个不显示标题的标准文章
  • link – 链接,类似 Tumblr 的链接分享
  • quote – 引语,展示为引用的一段文字
  • status – 状态,简而言之就像是一条 Tweet
  • image – 图像,发布单张图片
  • gallery – 相册,也就是扩充的图像功能
  • audio – 音频,……需要说吗
  • video – 视频,……同上
  • chat – 聊天,以专门格式显示聊天记录

如果想添加对以上形式的支持,只需要在 functions.php 里添加对应的项目即可,然后在输出文章的时候使用函数判断切换不同的样式:

READ MORE →

First Blood! 人生第一桶金 Get

钉子最近各种销声匿迹,许多文章也拖着迟迟没有码完,至于这单儿,已经是两周以前的事儿了。时间久远略微有点记忆模糊,不过为了纪念,还是在此回忆一下国庆那时的一血达成之路吧。

Alipay

Alipay

@Losses Don 螺丝菊苣找到钉子时,还从未做过 Discuz! 模板更别说商业模板的某人还不太敢接。任务很简单,不需要再从头做设计,按照一个现成的 Typecho 模板风格套用上去即可。口上说着不一定做, 身体还是挺老实的嘛 不过钉子还是马上查起了相关的教程。

「唉 就是个想做站刚入行不知道水多深的家伙 我也就是帮忙忙活一下 ._. 工作量不大 不过很闹心 你做做就知道了= =」

——螺丝菊苣如是说

在那之前钉子只有做过一次 WordPress 的主题,充分享受了其完善的官方文档和开发资源的福利,自然不会料到接下来的艰辛。混乱过时的各种教程,语焉不详的模板文档,首先就来了一个下马威。在无奈放弃了寻找教程之后,某人对着默认模版敲起了代码。还没开始多久,调用LOGO这一关就被间歇性失灵的新老版本两个模版目录调用语句卡住了。钉子终于开始体会到了闹心这个词的含义。

READ MORE →

你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。

Creative Button Styles

Creative Button Styles

一 基本语法

在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性:

READ MORE →

使用 position: sticky 达到粘性元素区域悬浮效果

在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。

这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中。下面是一个示例:

.sticky {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 15px; // 使用和 Fixed 同样的方式设定位置
}

因为这个样式尚未进入标准,还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式:

READ MORE →

某釘子のWP主題 第一季

记得在开学前夕,某钉子曾无奈地望着手上的各种大坑,对着日益临近的初三昼夜叹息。于是就在那时想起了一直想给博客写个主题,于是……这里就是一篇关于某钉子的第一个 WordPress 试水作的回顾。

Clearison Theme

Clearison Theme

草率的基调大概是一开始就定好的。在只剩下寥寥数天暑假而且作业没写完(活该)的情况下,主题的大致样式在英语课间的十分钟内迅速定下。刚回到家,在本地PHP环境中安上 WordPress ,然后直接在 wp-content 目录开始了代码。

在此之前还稍微回顾了一下自己过往作品的所谓设计风格,直到端详自己个人页的时候看到那个「交互/前端」……交互前端你妹啊!某人顿时掀桌。没错,直到今天才发现,作为自己选择的两个方向,正常开发过程中还要经过的一步视觉,某人完全没有研究……虽说当年还是以平面设计起家的,但是最后一次开PS貌似只是为了P一张同学的恶搞图片,难怪自己的页面都是所谓「简洁平面化」风格。眼前的道路霎时迷茫起来……

咳咳跑题了。说起来当年好不容易觉得能手写出个页面来时就已经有意要做,曾经下载的 WordPress 主题教程仍静静的呆在硬盘里,当然因为那时菜鸟级的技术没看多少就只能放弃。只是重新翻出来时发现里面引用的大量资源已经失效,于是最后还是在官方模版和官方文档之间各种参考完成的模版。

READ MORE →

Clearision V2.7 – 简洁清新自适应单栏 WordPress 主题

这是一个 HTML5 的 WordPress 自适应单栏灰色素雅/透明清新双风格主题,风格简洁清新阅读体验良好,适合注重文字的个人博客。附带移动版响应式页面,支持中英文。感谢  @Losses Don 螺丝关于阅读体验的建议。

Clearision 2.0

Clearision V2 灰色素雅风格

Clearision V2.5 透明清新风格

Clearision V2.5 透明清新风格

V2.7 主要更新内容:

  • 新增引语和状态文章格式支持
  • 新增香港、台湾繁体语言包
  • 修正样式和更新上的已知问题

欢迎在此页提出相关问题和建议!

READ MORE →

Elementary OS Luna 第一天

最开始知道 Elementary OS 是 @Mummy醬 在评论里提到的:

愛麗絲卡 2013-7-18 21:00: 可以試試別的桌面環境的說,咱是elementary os的飯。

当初看了一下觉得和 Gnome 差不多 (当时把 Gnome 当成了 KDE …),所以没有引起多大注意。昨天正好没事干,就刻录了下 OpenSUSE 准备试试。等待之中在 V2EX 晃悠时,又看到了有人提到 Elementary OS 。于是就顺便搜索了一下,结果大感兴趣,直接把刚刻好的 OpenSUSE 覆盖掉了……

很快进入了安装界面,当然先点了试用。不得不说真的是惊艳到了,默认的桌面环境确实非常漂亮,略有 Mac 风格但也不只是模仿,既细腻又简洁,不愧是设计师主导的发行版。于是 Elementary 的脑残粉又多了一个……之后因为除了界面风格之外定制 Ubuntu 的部分不算多,安装也轻车熟路,断网安装一下子就搞定了。时某人依然是试用然后边玩边安装,不过因为 Live CD 没有 sudo 权限 GoAgent 配置失败了……

边安装边玩中~

边安装边玩中~

很快设置好引导进了系统,然后配置好了GoAgent、 Wine、 Ubuntu Tweak 等之前研究过了的东西。输入法 SunPinyin 暂时凑合,下次试试传说中的 Rime 小狼毫。播放器还是习惯的 SMPlayer ,浏览器换成了 Chromium 。之前攒下的经验用完后,又开始了折腾。某渣渣首先尝试了一下著名的新立得包管理器,最后表示软件中心 + 手动 apt-get 也挺方便了……

READ MORE →