Rainshadow StudioRainshadow StudioRainshadow StudioRainshadow Studio
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others

Blog

Home Posts tagged "css"

Font Awesome 一个好用的扁平化icon字体

By rainshadow | 设计技巧 | 0 comment | 5 7月, 2016 | 0

网页设计时候,经常遇到需要使用icon美化页面,也经常会同一个icon需要不同颜色和尺寸。以往只能反复进行切小图片,既耗时又占流量和空间。

现在流行使用icon样子的字体来完成这工作,这样做的好处有不少,由于是字体,我们可以通过css很方便的控制color、size等字体参数。

其实很早微软在word等软件中就可以使用windings这类icon字体,而目前网页设计师们常用的是Font Awesome这个字体,这个字体包含了很多常用的icon。 Read more

如何将页脚固定在页面底部

By rainshadow | 设计技巧 | 0 comment | 31 3月, 2016 | 0

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超过浏览器高度时,Web页面的footer部分在页面的底部,总而言之Web页面的footer部分永远在页面的底部,换句说,Footer部分永远沉底。 Read more

CSS优先级

By rainshadow | 设计技巧 | 0 comment | 17 9月, 2014 | 0

优先级顺序

下列是一份优先级逐级增加的选择器列表:

  • 通用选择器(*)
  • 元素(类型)选择器 div
  • 类选择器 .classname
  • 属性选择器 input[type=“button”]
  • 伪类 :hover
  • ID 选择器 #id
  • 内联样式 <style=””>

Read more

UI设计师不可不知的安卓屏幕知识

By rainshadow | 设计技巧 | 0 comment | 14 7月, 2014 | 0

1、了解几个概念

(1)分辨率。分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。

(2)屏幕大小。屏幕大小是手机对角线的物理尺寸,以英寸(inch)为单位。比如某某手机为“5寸大屏手机”,就是指对角线的尺寸,5寸×2.54厘米/寸=12.7厘米。

(3)密度(dpi,dots per inch;或PPI,pixels per inch)。从英文顾名思义,就是每英寸的像素点数,数值越高当然显示越细腻。假如我们知道一部手机的分辨率是1080×1920,屏幕大小是5英寸,你能否算出此屏幕的密度呢?哈哈,中学的勾股定理派上用场啦!通过宽1080和高1920,根据勾股定理,我们得出对角线的像素数大约是2203,那么用2203除以5就是此屏幕的密度了,计算结果是440。440dpi的屏幕已经相当细腻了。 Read more

CSS中用背景图片做为超链接的方法

By rainshadow | 设计技巧 | 0 comment | 24 3月, 2014 | 0
a{
display:block;
width:100px;
height:100px;
cursor:hand;
}
<a href="#"></a>

可以在a上做背景,也可以在父级标签上做背景。

响应式布局 Media Queries

By rainshadow | 设计技巧 | 0 comment | 1 7月, 2013 | 0

讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query实现响应布局)。 Read more

CSS3 Gradient 渐变

By rainshadow | 设计技巧 | 0 comment | 23 1月, 2013 | 0

CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐变。 Read more

CSS设置垂直居中解决方法

By rainshadow | 设计技巧 | 0 comment | 22 1月, 2013 | 0

垂直居中一直是一个比较头疼的问题,我这里只是解决了部分情况下的垂直居中问题,抛砖引玉,如果你的问题没有解决,试试看从我这个方向出发修改一下代码。 Read more

一个可以把ps直接变成css3的插件

By rainshadow | 设计技巧 | 0 comment | 20 9月, 2012 | 0

网址:http://css3ps.com/

标签

Adobe ai app apple BBC CIVIC code css dreamweaver excel Flash Google Gphone HD html ipad jequery js jsp office ppt PS PS3 TV UI wordpress 上海 吃吃喝喝 奥运 婚礼 小常识 幽默 手机 报价 摄影 摄影技巧 汽车 流行 电影 电脑 网站 视频 设计 软件 音乐
Copyright 2017 Rainshadow Studio | All Rights Reserved
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others
Rainshadow Studio