Skip to content →

1Miaow Posts

HTML5 logo with CSS3

I’ve drawn the HTML logo by following the tutorial HTML5 logo using CSS3 this afternoon. It looks a little complex but actually easy.Let’s put the code into parts.

  1. The text ‘HTML’;
  2. The wrapper itself, contains the whole logo;
  3. The ’#five’ div mainly defines the color of 5 and puts the 5 above the other divs.
  4. Put the divs ‘top’…’left-bottom’ together to creat the number 5.
  5. The Pseudo-classes ‘wrapper:before’ and ‘wrapper:after’ mainly defines the shape of the shield (The bigger one in deep orange).
  6. The Pseudo-classes ‘inner:before’ and ‘inner:after’ defnes the shape of the shield in light orange.This shield is in the same size as the deepper one, but the property ‘transform: scale(0.85)’ of the class inner make this shield smaller.
  7. The class ‘inner left’ contains all the properties of the class ‘inner’.It shows half of the bigger shield in the left above the div of the smaller shield:
    .inner.left {
    width: 170px;
    overflow: hidden;
    -webkit-transform: scale(1);
    }
  8. The class ‘inner left cover’ mainly adjusts the color of 5 in the left.

Fine, that’s all of it.

以后还是少写点多贴图吧,突然发现Tumblr对代码的支持好糟糕。

View the demo.

html5logo

2 Comments

A image with pure CSS3

I’ve been learning CSS3 recently.This image was finished by following the tutorial Happy Holidays with CSS3.

In this tutorial, I learned:

  • How to use the function linear-gradient.
  • Something about the Position property, especially ‘position:absolute’.
  • How to make circles and triangles in CSS3, and put them into layers like Photoshop.

The turorial was very helpful which let me improve a lot ( Although the image is simple and not very beautiful:D ).

Click here to see my work.

happyholidays

2 Comments

首页的重新设计并支持移动设备

之前首页设计的比较乱,看上去可能没问题,但是代码一塌糊涂,下面的留个按钮也是以table的形式排列的,所以根本不兼容移动设备,每次用手机打开时都会感觉到很别扭,强迫症表示受不了。

开始想使用Kube框架的,折腾了一会感觉还是不合适,这个响应式设计的框架如果直接照着使用还行,但是我这里一些地方有自己的设计,不能生搬硬套,改他的css也比较繁琐,于是决定自己针对移动端写一个css。首先把以前的table之类样式全部清理掉,全版面是div的嵌套,感觉轻松了不少,然后修改html:

一三行是针对普通PC端和移动端的css引用,第二行是突发奇想,把移动端的css用到小窗口浏览上。

这里出现一个问题,就是移动设备也会载入PC端的一些样式,所以需要覆盖重写,所以之前copyright的绝对定位是没法使用的,只能一行一行往下挤。但是按钮那一排是浮动元素,copyright自动跟在了上面main文字的后面,雅阁给的办法是after伪类清除浮动,貌似很常用的手段:

之后也没太大问题了,基本就是调调位置之类的了,哦对了,那个,在电脑上显示没问题的图标,放到手机上会显示模糊,我猜测是Retina屏幕的问题,目前还没找到解决方法,以后慢慢说吧。

2 Comments

重置了一下Nginx以及系统对中文的支持

###Nginx
问题出在不能随系统启动,由于是自己编译安装的,每次手动启动都得进入目录,找到文件以后才能启动,想停止的话只能查询并杀掉进程,决定配置一下init.d里面的脚本,可以用service命令控制Nginx。

使用了JasonGiedymin提供的脚本。

然后nginx.conf的目录有问题,在nginx的根目录下,不在conf目录下面,调试了半天也没成功,于是,重新编译安装了一遍解决:

###中文的支持
主要问题是之前系统不支持中文,VIM修改MD文件的时候很麻烦,只能下下来在本地修改,很不必要的麻烦,于是想想还是安装中文的支持吧。具体不细说了,网上很多的教程,需要注意最后得配置一下环境变量:

没有全部使用zh_CN.utf8,之前试过全部使用,连系统的提示都是中文的了,看着蛋疼无比,满满的是山寨感,于是只设置了系统语言支持中文,其它还是英文显示。

2 Comments

网站架起来了

欢迎发现我的网站1Miaow,随着自己开发水平的提高,不断发现好玩的功能。

从2011年起一直在用Wordpress博客amgxin.com,一个500M的PHP虚拟主机,用到今年也没花多少空间,图片全部外链到Flickr,2015年3月左右到期吧,考虑到PHP的局限性,这两年一直不是很满意,那个域名也是跟着自己名字起的,挺没意义的。毕业以后搞定了信用卡,使用外国的服务也很轻松,有更多的选择。

About 1Miaow

Domain

上半年玩了一段时间网游,小号叫「喵一个」,觉得很有意思,就一直拿来用了,本来想用1nyan或者1meow的,都被注册了,就取了1Miaow的名字,Miaow是Meow的动词形式,其实个人相对而言也觉得动词最传神。

VPS

1Miaow之前www的域名一直挂在Tumblr的,就是我的博客(其实我也没想好具体干什么),后来发现自己的Dropbox被墙了,改hosts和使用OpenerDNS均不是长久之计,于是打算使用Shadowsocks了,刚好红杏也要到期了。

8月15日周五晚上,搞定了DigitalOcean的VPS,$5的最便宜套餐,按照教程搞好了Shadowsocks,真是非常非常的简单!!

Index

原来的首页非常诚实,但是很丑。周六花了小半天时间把新首页设计好,真是各种研究,HTML+CSS会一些,但是长时间不用,每次用都得现查,于是一个一个元素调教才搞定的首页,话说coda2真是好用,预览和开发都在一个窗口里,不用蛋疼的不停刷新浏览器。

Blog

之前的老博客由于图片为主,而且图片都外链自Flickr,所以丢了不是很可惜,文字什么的,等以后哪天心情好备份一下。以后自己的博客就用Tumblr了,省事才是王道。

Update

说到这个Update Page,为什么会有它呢,我就是想给自己的网站发展留个记录,添加了什么新功能之类的,采用Hexo生成静态页面,然后Nginx通过设置alias实现了一个类似虚拟目录的东西,info页面定位到了hexo的public文件夹,不用运行hexo那个超级占资源的Server,以后直接generate就可以。

我是这样配置config:

在www下面建立同名文件夹,检查1miaow.com/xxx里面xxx如果是一个文件夹的话,自动加上反斜杠(也是照着网上随便改的,如果有问题请指正):

嗯,差不多先写这些吧,以后有好玩的都会分享的(还不知道有没有人看)。

2 Comments

Bear kid

Mum, the guys don’t play with me cause I’m a bear kid.

In China, the ‘wild kid’ is also called ‘bear kid’ here.

My brother is a typical ‘bear kid’.He is over 12 years old but with poor EQ =w=

2 Comments

Tojo Nozomi

I’ve tried to use Clip Studio Paint to finish this work. Although the software still has some bugs, it’s easy to use:)

PS: The girl is Tojo Nozomi in the anime Love Live!

LL大法好…

2 Comments

Logo

A logo for this Blog (= ̄ω ̄=)

Leave a Comment

Sketch

Recently my AI crushed ,so I had to use a plug-in to boot AI.

Now I’m learning Sketch (app) and find it efficient:)

话说前两天AI出现问题挂掉了,现在每次都得通过一个插件来引导启动,很不习惯,寻思刚好趁机学习一下Sketch吧:)

Leave a Comment