swish pytorch_使用CSS3快速构建Swish Teaser页面

最新推荐文章于 2023-09-15 00:09:38 发布

daique1908

最新推荐文章于 2023-09-15 00:09:38 发布

阅读量235

点赞数

文章标签：定位 css html css3 html5

swish pytorch

在本教程中，您将学习如何仅使用CSS，不使用图像甚至使用Photoshop设计来构建预告页面。许多网站和即将发布的应用程序从前导页面获得了广泛的宣传，因此这是添加到您的工具箱中的有用概念。将其用于准备启动的任何应用程序或网站。

步骤1： HTML标记

宣传页面HTML非常简单。我们只有一个带有介绍性文字和输入内容的容器。

<!doctype html>

<head>

	<!-- Basics -->
	
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>App is coming soon.</title>
	
	<!-- Mobile -->
	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS -->
	
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/styles.css">
	
</head>

	<!-- Main HTML -->
	
<body>
	
	<!-- Begin Page Content -->
	
	<div id="container">
	
		<h1>App.</h1>
		
		<p>
		This amazing application will change your life. Subscribe to be notified when it's available, or follow us on <a href="#">Twitter.</a>
		</p>
		
		<div id="subscribe">
		
		<input type="email" placeholder="email address">
		
		<input type="submit" value="submit">
		
		</div>
		
	</div>
	
	
	<!-- End Page Content -->
	
</body>

</html>

步骤2：定位和调整元素大小

让我们给页面一些结构。我们从基础开始，然后将容器放置在页面的中央。我们将使用50％的定位，然后使用负边距将对象恢复为宽度和高度的一半。

html, body {
	width: 100%;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	color: #444;
	-webkit-font-smoothing: antialiased;
}
	
	
}

#container {
	position: fixed;
	width: 500px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -250px;
	text-align: center;
}

接下来，我们使用属性选择器定位文本和输入，以电子邮件为目标并分别提交输入。

h1 {
	font-size: 90px;
}

p {
	width: 80%;
	font-size: 23px;
	line-height: 1.3em;
	margin: 1.1em auto;
	text-align: center;
}

#subscribe {
	margin: 0 auto;
	text-align: center;
}

input[type=email] {
	width: 90%;
	padding: 15px;
	margin: 0 auto;
}

input[type=submit] {
	position: absolute;
	margin-left: -105px;
	margin-top: 5px;
	padding: 10px;
	width: 100px;
	height: 50px;
}

步骤3：样式化文字

此页面的文字样式非常简单。我们希望名称与背景形成对比，因此将其设为白色。文字很重要，但是我们希望访客记住我们产品的名称，因此我们不会将其发音如此。 Twitter链接带有下划线，表示它是一个链接。

一，主要文字：

h1 {
	font-size: 90px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 4px #000;
	margin-top: 20px;
}

p {
	width: 80%;
	font-size: 23px;
	line-height: 1.3em;
	color: #fff;
	margin: 1.1em auto;
	text-align: center;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

然后是Twitter链接：

p a {
	color: #fff;
	border-bottom: 2px solid #2da1ec;
}

步骤4：设定背景样式

现在，有趣的部分是：为页面上的对象提供额外的je ne sais quoi 。我们将从创建一个漂亮的渐变背景开始。如果您是Mac用户，则可以依靠GradientApp为您完成艰苦的工作。另外，请前往CSS3！了解一些语法。

html, body {
	width: 100%;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	color: #444;
	-webkit-font-smoothing: antialiased;
	background: #000222;
	background: -moz-linear-gradient(top,  #000222 0%, #4b637c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
	background: -webkit-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -o-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -ms-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: linear-gradient(top,  #000222 0%,#4b637c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );	
}

步骤5：设置订阅表单的样式

订阅表单是我们页面的重点，因为我们希望访问者了解我们惊人的产品何时发布。我们希望它成为页面的焦点，在名称或徽标之后。

我们首先设置占位符的样式（Mozilla和Webkit特定的样式），然后设置字体大小：

::-webkit-input-placeholder {
 	   color: rgba(255, 255, 255, 0.4);
 	}
 	
 	::-moz-input-placeholder {
 	   color: rgba(255, 255, 255, 0.4);
 	}
 	
 	input {
 		font-family: "Helvetica Neue", Helvetica, sans-serif;
 		font-size: 25px;
 	}

现在让我们为字段和按钮提供一些颜色和深度：

input[type=email] {
  		outline: none;
  		width: 90%;
  		padding: 15px;
  		margin: 0 auto;
  		color: #fff;
  		border: none;
  		-webkit-border-radius: 6px;
  		-moz-border-radius: 6px;
  		border-radius: 6px;
  		background: rgba(0, 0, 0, 0.3);
  		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  		-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  		-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	}
  	
  	input[type=submit] {
  		position: absolute;
  		margin-left: -105px;
  		margin-top: 5px;
  		font-size: 25px;
  		color: #222;
  		text-shadow: 0 1px 0 #fff;
  		padding: 10px;
  		width: 100px;
  		height: 50px;
  		border: none;
  		background: #f0f0f0;
  		background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%);
  		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff));
  		background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 );
  		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		-webkit-border-radius: 3px;
  		-moz-border-radius: 3px;
  		border-radius: 3px;
  		cursor: pointer;
  	}

步骤6：添加CSS过渡

让我们添加一些不错CSS过渡来帮助吸引访问者的注意力。

首先，我们将鼠标悬停和活动状态添加到Twitter链接和输入中：

p a {
   	color: #fff;
   	border-bottom: 2px solid #2da1ec;
   }
   
   p a:hover {
   	color: #2da1ec;
   	border-bottom: 2px solid #fff;
   }

input[type=email] {
  	outline: none;
  	width: 90%;
  	padding: 15px;
  	margin: 0 auto;
  	color: #fff;
  	border: none;
  	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	border-radius: 6px;
  	background: rgba(0, 0, 0, 0.3);
  	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  }
  
  input[type=email]:hover {
  	background: rgba(0, 0, 0, 0.5);
  }
  
  input[type=email]:focus {
  	-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	-o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	background: rgba(0, 0, 0, 0.6);
  }
  
  input[type=submit] {
  	position: absolute;
  	margin-left: -105px;
  	margin-top: 5px;
  	font-size: 25px;
  	color: #222;
  	text-shadow: 0 1px 0 #fff;
  	padding: 10px;
  	width: 100px;
  	height: 50px;
  	border: none;
  	background: #f0f0f0;
  	background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%);
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff));
  	background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 );
  	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	-webkit-border-radius: 3px;
  	-moz-border-radius: 3px;
  	border-radius: 3px;
  	cursor: pointer;
  }
  
  input[type=submit]:hover {
  	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	width: 125px;
  	margin-left: -130px;
  	
  }
  
  input[type=submit]:active {
  	background: #c3d7ff;
  	background: -moz-linear-gradient(top,  #c3d7ff 0%, #f0f0f0 100%);
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d7ff), color-stop(100%,#f0f0f0));
  	background: -webkit-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	background: -o-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	background: -ms-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	background: linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d7ff', endColorstr='#f0f0f0',GradientType=0 );
  	
  }

然后我们添加过渡规则：

p a {
   	color: #fff;
   	border-bottom: 2px solid #2da1ec;
   	-webkit-transition: all .4s ease;
   	-moz-transition: all .4s ease;
   	-o-transition: all .4s ease;
   	transition: all .4s ease;
   }

和

input {
   	font-family: "Helvetica Neue", Helvetica, sans-serif;
   	font-size: 25px;
   	-webkit-transition: all .4s ease;
   	-moz-transition: all .4s ease;
   	-o-transition: all .4s ease;
   	transition: all .4s ease;
   }

步骤7： CSS动画

我们也可以在页面加载时添加一些不错CSS3动画，以增加效果。建议使用CSS动画作为设计的补充。不是它的组成部分。对动画的支持仍然很少，因此，请注意不要过于复杂化设计。

也就是说，Dan Eden的Animate.css是一个非常有用CSS动画库。您可以按照本教程开始时原始文档中所示的那样添加它，也可以根据需要将其导入样式表中：

@import url(animate.css);

有多种精美的动画可供选择，但我将添加bounceInDown动画。我们将其应用于元素（在本例中为容器），如下所示：

#container {
   	position: fixed;
   	width: 500px;
   	height: 300px;
   	top: 50%;
   	left: 50%;
   	margin-top: -150px;
   	margin-left: -250px;
   	text-align: center;
   	-webkit-animation-name: bounceInDown;
   	-webkit-animation-fill-mode: both;
   	-webkit-animation-duration: 1.5s;
   	-webkit-animation-iteration-count: 1;
   	-webkit-animation-timing-function: linear;
   	-moz-animation-name: bounceInDown;
   	-moz-animation-fill-mode: both;
   	-moz-animation-duration: 1.5s;
   	-moz-animation-iteration-count: 1;
   	-moz-animation-timing-function: linear;
   	animation-name: bounceInDown;
   	animation-fill-mode: both;
   	animation-duration: 1.5s;
   	animation-iteration-count: 1;
   	animation-timing-function: linear;
   }

如果要更改动画，只需将-animation-name更改为-animation-name的动画名称。

步骤8：进一步发展

这并不是一个响应式设计，但与之相去甚远，但是您可能想在CSS底部添加几个媒体查询，以适应较小的设备。考虑将容器元素缩小以适合较小的屏幕，并更改输入的宽度或位置。

为了允许我们的注册表单将电子邮件地址添加到列表，我们可以将其连接到电子邮件通讯服务，例如MailChimp。我不会详细解释这一点，因为本文完美地展示了它。

如果您想向表单添加验证，则可以查看本教程。

结论

建立这样的快速预告页面对于在网站或产品发布之前进行宣传至关重要。正如这个纯CSS解决方案所示，它不必太复杂。

希望您从本教程中学到了什么，谢谢阅读！

翻译自: https://webdesign.tutsplus.com/articles/quickly-build-a-swish-teaser-page-with-css3--webdesign-6532

swish pytorch

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swish pytorch_使用CSS3快速构建Swish Teaser页面

在本教程中，您将学习如何仅使用CSS，不使用图像甚至使用Photoshop设计来构建预告页面。许多网站和即将发布的应用程序从前导页面获得了广泛的宣传，因此这是添加到您的工具箱中的有用概念。将其用于准备启动的任何应用程序或网站。步骤1： HTML标记宣传页面HTML非常简单。我们只有一个带有介绍性文字和输入内容的容器。 <!doctype html>&lt...
复制链接

扫一扫