钉子の次元

Dimpurr – an artist, designer and developer from China.

HTML Head Generator – 纯 CSS 实现的头部元标签代码生成器

前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML <head> Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦。没有到用一行 JavaScript ,基本原理是 CSS 3 的 + 紧邻选择器和 ~ 同级后继选择器。前端攻城狮们可以用短链接 http://find.moe/headgen 快速访问,也可以拖到收藏夹备用。

感谢 电灵 酱对最终样式的建议。

Dimpurr's <head> Generator

Dimpurr’s Head Tag Generator

写的时候感觉槽点一大堆,过了一周什么都忘了 …… 简单说明一下实现的要点吧。如果有更好的实现思路或觉得有可以改进的地方敬请指教,不过,前提是无 JavaScript 。

READ MORE →

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 →

某釘子のWP主題 第一季

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

Clearison Theme

Clearison Theme

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

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

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

READ MORE →