• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

详解CSS3绘制会跳动的爱心

CSS3与HTML5为网页设计提供了更多的便捷,同时丰富的动画效果也为网页增添了许多鲜活色彩,现在,让我们一起走进CSS3,学习使用CSS3的新增属性绘制一些简单的图示。

今天要教大家制作的是一个会跳动的爱心。

没了DEMO怎么行,点我查看

heart

 

从图中可以看见,红色线部分所组成的就是一个爱心。

经过分析,我们将爱心的组成方法拆分开来,如下图:heart-2

 

图片构成的方案已经确定,接着我们看看如何利用CSS3代码来实现这一的效果。

首先,我们只需要一个div来包裹这个爱心,通过简单的计算,一个美观的爱心宽高比约为1.2:1

我们创建一个宽200px,高165px的div层,并将其position设置为relative以控制子元素的定位。

.myheart {
	width: 200px;
	height: 165px

利用active伪类实现网页在触摸屏下的点击状态效果

在开发触摸屏下的网页时,常常会发现hover所带来的效果并不完美,在iOS系统下,hover的效果并不展现,只有当手指点击时才出现效果,并且返回页面的时候,hover的状态一直保留,所以我们需要使用active伪类来为触摸屏下的网站实现一个点击效果。 如果使用ios系统的朋友还应当有所发现,即点击按钮或链接时,会有一个高亮区域,半透明的黑色背景 那么我们如何来改变这个黑色块的样式? 在iOS设备中,有一个名为-webkit-tap-highlight-color的属性,即定义了用户点击按钮时所产生的高亮背景 想要禁用这样的高亮效果,我们就需要将他的颜色值改为完全透明

代码如下

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

这是我们就屏蔽了默认的点击黑色背景块的显示。然后接下来我们对我们的按钮进行一个点击设置

首先我们先设置一下CSS

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.btn {
width:100px;
height:40px;

JS判断鼠标进入或离开容器的方向做出特殊hover效果

无意中在uemo的一个子站点看到一个很动感的hover效果,经过简单分析,想必是通过JS判断鼠标进入方向来实现这个hover效果,使父容器中的子容器通过判断鼠标进入方向,从而使子容器从相同的方向“进入”到父容器中并且从鼠标离开的方向“离开”父容器。下面这一段js代码来源于网络,如果想深入了解代码的意义请跳转

http://sentsin.com/web/112.html

DEMO:

http://www.im050.com/im050/memory/demo/jquery-direction.html

而在津泓橱柜官方网站的制作过程中,在其产品展示页面也使用了这样的效果

具体参见:http://www.jhcg.net/home/product/

HTML代码部分:

<style>
body {margin: 50px;}
#wrap {width: 100px; height: 100px; background: #000}
#result 

CSS3 图片鼠标滑过渐变为灰色

看了老赵茶馆的特色图像鼠标滑过效果,于是自己也模仿了一下,不要见怪。
更改你自己的CSS选择器以达到你想控制图片所属的范围。

.article-img img{
	width: 100%;
	display: block;
	height: 100%;
	/* 上述设置是为了使图片自适应容器大小 

再观《2012》

当最后一屡阳光被黑暗抹去,
残留下的只有恐惧,无助与绝望。
前所未有的自然灾害,无情的肆虐着大地。
大海咆哮,火山怒吼,似乎在宣泄着世界的不公。
每一寸土地都被撕裂,无数生灵向无尽的深渊坠入。
无辜者的祷告谁又能听见?
唯有静静相拥,迎接死亡。
人类的文明,在大自然的力量下,犹如蝼蚁,不堪一击。
方舟,看似生命的希望,却因为一张船票泯灭了人性。

10亿欧元,政客在笑,富豪在笑,又见谁落泪?

0001年1月27日,
雨过天晴,当甲板敞开,阳关依旧美好。
这一次没有衔着橄榄枝飞来的鸽子。
人类又开始和他们的祖先一样,重新开始。
全世界人民应该亲如兄弟。

当真是如此吗?当我听到,中国解放军在问逃难的几人船票是什么颜色,让他们出示船票时,心中感慨万千。
在灾难面前,人类真的会无私吗?…

使用七牛云储存为你的wordpress加速

首先给大家稍微介绍一下CDN,CDN通过拷贝你的静态资源,将你相同的静态资源存放于不同的地方,使得用户就近获取所需的资源,解决网络拥挤的情况,提高网站访问速度。

想要了解更多,百度一下,你就知道。

回归正题,想要了解七牛就到七牛的官网自行了解一下。总而言之,七牛还算是一个不错的选择,不过有的时候也避免不了脑残的状况发生。

接下来我们就看看如何配置你的wordpress来使用七牛云储存

配置你的七牛

首先你得注册一个七牛账号。

登录七牛网站,并创建一个新的空间,根据提示输入空间名称,设置空间为公开访问。

创建完成后将会自动生成一个七牛的二级域名http://空间名称.qiniu.com

当然你也可以申请绑定你想绑定的域名,但要求是你的域名已经备案。

配置你的WordPress

登录WordPress后台,打开“http://yourdomain.com/wp-admin/options.php”页面,“Ctrl+F”找到“upload_url_path”选项,将其改为你的自定义域名或七牛提供的二级域名“http://xxxx.qiniudn.com”。

这里需要注意的是,输入完七牛提供的二级域名,结尾不能为"/"

提示:因为第一次加载文件需要进行回源操作,所以等待的时间较长。为了避免文件第一次加载使得用户等待时间过长,可以在配置完成后把含有资源文件的页面都访问一遍,这样文件就会自动复制到云存储中,用户加载时间也会短些了。

尝试查看你的特色图像或多媒体中的图像,是不是发现图片地址变为

http://你的七牛域名/wp-content/uploads/xxxx/xx/xx/xxxxxxxxxxxxx.jpg了?…

解决WordPress加载慢的问题

第一次安装wordpress的时候就觉得wordpress怎么加载这么慢,尤其是后台,本想说这么受大众欢迎的blog不应该啊?于是就推敲会不会是由于php,apache或者mysql版本问题引起的呢?尝试更换版本之后问题依旧,最后通过开发者工具才发现,原来是因为加载了Google字体库,而这段时间在国内很多地区都无法访问google,这才导致了wordpress加载变慢。

背景交代完毕,接下来告诉大家如何解决问题

方法一:直接替换源代码

将以下文本googleapis.com替换为useso.com

方法二:下载以下插件并安装

auto-remove-googles-url

新的开始,新的起点

首先,让我做个自我介绍,我是个刚从大学毕业的失业者,为什么这么说,因为父亲说过“大学毕业,你就失业了。”

想想也并无多错,90后的我从未尝试过进入任何一家公司上班,也意味着未就业先失业。但我不会因此放弃走在网页设计开发的这一条道路上。

接触了一个多月的wordpress主题开发制作,终于把自己的网站也更换成了wordpress,一个新的开始,一个新的起点。

几年前也曾与其打过交道,却不是深交,只觉其功能强大,但对于二次开发寸步难行,只怪自己学艺不精。

如今,这一个多月以来对Wordpress的了解,确实有许多独到之处,譬如你可以分分钟创造属于你自己的自定义字段来满足你对文章表达或程序流程的控制,更可以利用函数钩子进行一系列的功能拓展,原本定义为Blog平台的Wordpress总能给大家带来不一样的惊喜。

在接下来的时间里,我也将会在这里和大家一起交流wordpress开发的经验以及网页开发的技巧。

 …