应用css怎样制做時间ICON方式实践活动

日期:2021-02-26 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

近期我在再次设计方案自身的blog站点,决策用1个日历款式的icon显示信息時间。之前的处理计划方案1般是用情况照片,谢谢css3,如今大家用css3就可以完成这样的作用。我可能用到1些linear-gradients, border radius 和 box shadow这些特性来替代之前的photoshop设计方案。

photoshop 定义图
 
许多设计方案者选用立即在访问器上设计方案的方法,可是我還是更喜爱先做photoshop的定义图的方法。尽管如今许多实际效果能够立即用css完成,可是用photoshop设计方案实际效果的方法比持续尝试改动css来最后做到你要想的实际效果的方法简易许多。
 
最先建立1个圆角矩形框,设定圆角半径为10px,以后大家会用css的border-radius特性完成。
 
为矩形框加上竖直方位的渐变色,渐变色色调是从#dad8d8 到 #fcfcfc。
 
设定1像素的描边,色调是#e3e3e3
 
最终加上向下的黑影实际效果,全透明度为20%,0像素的间距和15像素的尺寸。这些实际效果在css中可能用box-shadow特性完成。
 
拷贝刚刚的矩形框,移除上边的一部分。改动渐变色,色调从#790909 到 #d40000,填充新建立的矩形框,这一部分即将置放月份信息内容。
 
设定1个内黑影来表明上边框,色调为#a13838,100%全透明度,3px的间距和0px的尺寸。
 
用photoshop的字体样式专用工具设定日历icon上半一部分時间內容的字体样式实际效果,字体样式为Helvetica,色调为#9e9e9e。
 
在下面鲜红色一部分键入月份信息内容,字体样式设定为宽,色调为白色。

photoshop的实体模型就进行了。之前的话,大家会把照片抽出来做为情况,再在上面写上html的数据,可是如今全部这些都可以以用css完成。
HTML构造
<div class="date">
<p>25 <span>May</span></p>
</div>
这次時间ICON demo的html十分简易。大家会用带有class为‘date’的div做为器皿,随后用1个p标识来表明时间数据。天宇月份在大家的设计方案里用不一样尺寸的标识符表明,因此大家会<span>标识来差别对待不一样元素。
css款式

拷贝编码
编码以下:

.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
}

 
css款式最先设定了全部器皿的高和宽,根据css的gradient又能够很非常容易的完成渐变色的实际效果。

拷贝编码
编码以下:

.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

 
用border特性能够完成photoshop中1px边框实际效果,随后用border-radius完成了圆角的实际效果。不必忘掉再加-moz-和-webkit-前缀,以完成对老版本号访问器的适配。

拷贝编码
编码以下:

.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

 
最终1一部分编码,根据box-shadow完成在photoshop设计方案中的下黑影实际效果。加上0px的水平静竖直的偏位量,提升15px的模糊不清度。用rgba完成对全透明度的操纵,在photoshop设计方案中的105,在这里换为了0.1。

拷贝编码
编码以下:

.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}


大家用给p标识界定款式,完成了为时间界定文本款式。字体样式,文本尺寸,文本色调全是从photoshop中复制获得的,text-align设定为垂直居中。可是款式也一样危害了月份文本,接下来大家会独立为它界定span标识款式。

拷贝编码
编码以下:

.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}


鲜红色一部分的完成是根据为span的情况设定linear-gradient特性完成的,鲜红色的标值也是来自于photoshop。

拷贝编码
编码以下:

.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
}

 
改动文本款式,使它和设计方案配对,尺寸设定为45px,设定为粗体字,色调设定为白色,应用text-transform完成大写变换。将span标识设定为块元素,这样他就会配对器皿的尺寸了,设定鲜红色情况。

拷贝编码
编码以下:

.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
padding: 6px 0 6px 0;
}

 
剩余的便是加上头顶部边框,用border-top款式完成,也有便是用border-radius特性完成下部两个圆角。1点点的padding特性可让月份文本左右和别的元素一些间距。
访问器适配性
 
虽然css改善的特性能够协助大家完成photoshop中渐变色和黑影的实际效果,可是大家依然要应对之前web设计方案师要应对的难题,访问器适配性。
上一篇:HTML5应用DOM开展自定操纵示例编码 返回下一篇:没有了