金阳新区模板网站建设:使用CSS和Lettering.js的创造性排版-极简慕枫

金阳新区模板网站建设:使用CSS和Lettering.js的创造性排版

2019-01-15

金阳新区模板网站建设

近年来,网站上的排版在互联网上变得更加流行。在过去,这是被忽略的,但在不同的屏幕上,这是一个必须处理的重要话题。

如今,有了使用谷歌字体和Typekit等网络字体的选择,你就可以在不用担心屏幕金阳新区模板网站建设大小的情况下,实现跨浏览器、惊人和高分辨率的网页文本。


然而,有了所有这些可用的技术,排版人员缺少了一个关键要素:Kerning。

角化是以比例字体调整字符间距的过程。由于CSS 3和jQuery的强大功能,现在可以构建一个设计良好的字体,能够快速、轻松地完全控制文本和动画。

完成本教程所需的资源:

  • 虚拟化SAN(Google字体)
  • Francois One(谷歌字体)
  • 迈凯轮(谷歌字体)
  • Candal(谷歌字体)
  • 龙虾(谷歌字体)
  • jQuery库
  • 信件
  • 云背景图像(您可以从任何源中选择或创建自己的)
  • 时间和耐心

我们将创造什么

查看演示并下载源文件。

动画掩模排版

标记

在开始之前,我们将首先在HTML文件中添加HTML 5文档类型和头部部分的一系列链接。这将包括指向CSS文件和Google字体链接的链接,然后是jQuery库文件和信件插件。





 Typography









接下来,我们将代码添加到正文部分。这将包括一个容器金阳新区模板网站建设类,其中包含H1和H2标记。我还将在h2类的每一侧为我们的复古行添加一个老式行类。


Awaesome

Text

CSS

.container {width: 960px; margin: 0 auto;}

.demo{
color: transparent;
-webkit-font-smoothing: antialiased;
background: url(img/cloudy.png);
background-position: 0px 0px;
background-repeat: repeat-x;
	text-transform: uppercase;
font-size: 167px;
text-align: center;
font-family: 'McLaren';
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -8px;
padding-bottom: 40px;
margin-top: 30px;
animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite;
-moz-animation: animatedBackground 20s linear infinite;
-webkit-animation: animatedBackground 20s linear infinite;
 
}
 

@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
 

 

h2.demo1 span {
position: relative;
-webkit-transition: all 0.3s ease-out;
font-size: 100px;
font-family: 'Francois One';
text-transform: uppercase;
top: -200px;
color: #1273B5;
text-shadow: 4px 4px 0px #56a8de;
}


h2.demo1 span:hover { top: -216px; }
h2.demo1 .char1 {
display: inline-blocks;
position: relative;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;}
 
 
.vintage-line1{
width: 215px;

height:79px;
background: url('img/vintage-line.png')no-repeat;
display: block;
 
position: absolute;
right: 760px;
top: 410px;
}

.vintage-line2{
width: 215px;
height:79px;
background: url('img/vintage-line2.png')no-repeat;
display: block;
position: absolute;
right: 379px;
top: 410px;
 
}

jQuery

对于jQuery代码,我们将添加以下脚本块,并使用magical.letting()方法:

$(document).ready(function() {
$(".demo1").lettering();
});

现在,在CSS中使用序号.char#模式很容易操作文本。这个插件假设了基本的计数技巧,但它是一个非常快速和容易的方式来控制每一个字母。

折叠式文本排版

标记

我们将再次添加HTML 5文档类型和系列链接到我们的头部部分。这将包括指向CSS文件和Google字体链接的链接,然后是jQuery库文件和信件插件。





 Typography





 


接下来,让我们添加HTML标记,它是类容器中的H1标签包装。

Typography

CSS

我们的CSS将在960px宽度容器中包含所有元素。注意,我使用了nth子CSS选择器。nth-child(N)选择器匹配作为第n个子元素的每个元素,而不考虑其类型或其父元素。

在本教程中,我们使用它来选择索引金阳新区模板网站建设为奇数或偶数的子元素(第一个子元素的索引为1)。

要了解更多关于第n个孩子选择器的信息,请点击这里。这将帮助我们很容易地帮助我们定义风格,从左和右的折叠背景,以创造一个幻觉的阴影效果。

h1.demo2[class*="word"]{
margin: 0px 10px 0 0 ;
}
	
.demo2 [class*="char"]{
font-family: 'Open Sans';
color: #fff;
font-weight: normal;
margin-top: 60px;
font-size: 90px;
padding: 20px;
background: #1273B5;
display: inline-block;
}
 
 
.demo2 [class*="char"]:nth-child(odd){
-webkit-transform: skewY(-11deg);
moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
-ms-transform: skewY(-11deg);
transform: skewY(-11deg);
}
 
 
.demo2 [class*="char"]:nth-child(even){
color: #00e8ca;
background: #346282;
-webkit-transform: skewY(11deg);
moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
-ms-transform: skewY(11deg);
transform: skewY(11deg);
}

jQuery

对于jQuery代码,我们将添加以下脚本块,并使用神奇的.letling()方法,但这一次,我们将使用.child()方法选择它的子元素。

$(document).ready(function() {
 $(".demo2").lettering("words").children('span').lettering();
});

简单标题文本排版

标记




 Typography
 





 



接下来,我们将代码添加到正文部分。我们所有的元素都将被一个容器类包装。我们将添加一个Header标记来组织h1和h2标记。然后,在底部,我们将添加我们的排版文字与一个悬停动画.

div class="container">

Blow your mind

With this design

Typography

CSS

对于CSS,我们将所有元素包装在一个960px宽度容器中。我们也将发挥每一个字符金阳新区模板网站建设跨度的位置,并给它一个很好的流畅的动画鼠标通过。

.container{width:960px;margin:0 auto; height:900px;}
 
 h1#title{
font-size: 90px;
text-transform: uppercase;
border-bottom: 2px dashed #56a8de;
padding-bottom: 38px;
font-weight: normal;
font-family:'Candal';
text-shadow: 4px 4px 0px #56a8de;
color: #1273B5;
}
 
h1 .char2{margin-right: -6px;} 
h1 .char5{margin-right: -8px;}
h1 .char8{margin-right: -3px;}

 
#tagline{
font-size: 40px;
background:#00e8ca;
font-style: italic;
display: inline-block;
padding-right: 10px;
padding-left: 10px;
top: -142px;
position: relative;
color: #1273b5;
font-family: 'Pacifico';
} 
 
 
h1.typo {
font:80px "Lobster";
text-shadow:#56a8de 4px 4px 0;
position: relative;
margin-top: -215px;
color: #1273b5;
}
 
 
h1.typo span {
display:inline-block;
position:relative;
padding:10px;
-webkit-transition:all 0.2s ease-out;
}
 
h1.typo span:hover {
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
}
 
h1.typo .char1 { font-size:120px; position:relative; top:10px; left:-10px; }
h1.typo .char2 { position:relative; top:-15px; left:-8px; }
h1.typo .char3 { position:relative; top:-20px; left:-6px; }
h1.typo .char4 { position:relative; top:-25px; left:-4px; }
h1.typo .char5 { position:relative; top:-30px; left:-2px; }
h1.typo .char6 { font-size:120px; }
h1.typo .char7 { position:relative; top:-15px; left:0px; }
h1.typo .char8 { position:relative; top:-20px; left:4px; }
h1.typo .char9 { position:relative; top:-25px; left:6px; }
h1.typo .char10 { position:relative; top:-30px; left:8px; }

jQuery

我们将使用magical.letting()方法添加以下脚本块,并选择类型和ID标题。

$(document).ready(function(){
$("#title").lettering();
$(".typo").lettering();

});

现在,您可以使用序号.char#模式轻松地操作CSS。

结束语

祝贺你!你成功了!你可以想象,所有这些跨度都乱扔在你的标记上,以及需要维护的噩梦中,这是多么痛苦的一件事。幸运的是,我们有这个伟大的插件-字母js,当然,随着CSS 3动画的力量,我们的排版设计将永远不会再无聊。

联系电话 400-6065-301

微信咨询 寒总监