css 缩略图_使用CSS3完美旋转和遮盖缩略图

最新推荐文章于 2024-04-25 15:01:26 发布

daique1908

最新推荐文章于 2024-04-25 15:01:26 发布

阅读量1k

点赞数

文章标签： html python css js java ViewUI

css 缩略图

有没有看过一个网站上展示了略微旋转的图像缩略图？这是一种简单的效果，可增加视觉个性。这样说，如果您不能通过CSS来实现旋转效果，那么您就太努力了！了解如何正确做！

重新发布的教程

每隔几周，我们都会回顾整个网站历史中一些读者最喜欢的帖子。本教程于2011年8月首次发布。

介绍

带有旋转缩略图的图像画廊很少出现，但这是向网页添加样式的简单技巧。但是，如果做得不好，有时达到并保持这种效果可能会很麻烦！

为了正确实现此效果，您的第一个想法可能是转向在Photoshop中创建旋转的缩略图。但是，从长远来看，这可能会很困难。以这种方式创建旋转缩略图的缺点包括：

角度一致性：如果图像未全部以相同角度旋转，则页面的视觉一致性会丢失。这意味着要以正确的角度正确旋转每个缩略图的PSD。例如，您可以打开PSD并意识到您忘记了缩略图的旋转角度。
CMS缩略图生成：如果您正在运行CMS（例如Wordpress），则缩略图可能会自动生成。使用上述的PSD方法，您必须手动在CMS中创建和上传每个缩略图。另外，如果您已经有一个站点，但想对缩略图应用旋转效果，则必须在Photoshop中重新创建所有缩略图，然后重新上传所有缩略图！
长期可管理性：假设您已经稍微旋转了所有缩略图，但是现在您想要重新调整或重新设计图库。这意味着您必须重新生成所有缩略图。如果您曾经在Photoshop中管理缩略图，则这意味着您必须重新调整并重新保存每个缩略图。啊。

如果可以用一行代码执行这种小的旋转，那不是很好吗？好吧，你可以！让我们学习如何。

步骤1：了解我们的目标

对我们要完成的工作的简要概述揭示了以下步骤：

在Photoshop中创建图像缩略图（未旋转）
使用img标签插入缩略图
使用CSS适当遮罩它（考虑一下Photoshop遮罩）
使用CSS3旋转蒙版中的缩略图

为确保我们的图片库正常降级，将使用CSS完成步骤1-3。步骤4（旋转效果）将使用CSS3完成。

步骤2：了解缩略图的大小和旋转角度增加

在创建缩略图之前，我们需要确定每个缩略图将在屏幕上显示多大。

如果缩略图太小，并且旋转角度太大，则某些角会给我们留下空白。像这样：

因此，为了正确地填充遮罩区域，我们可以得出结论，缩略图旋转得越多，它就必须越大。用数学术语来说，随着缩略图旋转角度的增加，缩略图的大小也必须增加（反之亦然）。

记住此键：图像缩略图将始终大于图像蒙版（缩略图大小>蒙版大小）

对那些被数学排斥的人的警告

步骤3-6描述了如何数学计算图像蒙版和缩略图的比例大小。了解并不一定能够使用CSS transform属性旋转图像。相反，其目的是帮助您了解如何正确确定元素的大小以允许360°完整旋转。这样可以确保您不会留下丑陋的空角。

步骤3：按比例相等

为避免出现在我们的面具空白，我们必须确定下列之一：

实际缩略图的大小
图像遮罩的大小（缩略图的可见部分）

因为缩略图和图像蒙版的大小成比例地相等，所以如果我们设置一个的大小，我们就可以计算出另一个的大小。

步骤4：确定尺寸

在此示例中，我们将首先设置图像蒙版大小。通过设置图像蒙版的大小，我们可以使用一些数学运算来计算缩略图的大小：

确定图像蒙版的大小：180x240像素
找出对角线边的长度
- 使用勾股定理（a ² + b ² = c ² ）
  - 我们的第一面（a）为180像素
  - 我们的第二面（b）为240像素
  - 因此，180 ² + 240 ² = c ² （对角线长度）
  - 90,000 = c ²
  - 300 = c（取每边的平方根）
- 我们的对角线长度（c）等于300

对角线长度是一个重要的数字。要使缩略图完整旋转360°，其最短边必须等于图像蒙版的最长边。（即使您可能不需要它，也可以配置360°旋转，以便将来更改旋转角度而不必调整缩略图的大小。）

步骤5：计算缩略图尺寸

如您所见，缩略图的最短边必须等于蒙版的最长边。如果不是，我们将留有空白空间。请记住：缩略图的大小与图像蒙版的大小成比例。

一旦知道了图像蒙版的尺寸，就可以轻松计算出缩略图的大小以使其合适地适合。我们只需要将蒙版的最大边（对角线）取为缩略图的最短边即可。

遮罩的最大侧面（300）等于缩略图的最短侧面（x）
使用比例关系找到缩略图的长度
- 180：300（蒙版的高度：缩略图的高度）
- 240：y（蒙版的长度：缩略图的长度）
交叉乘以解决
- 180y = 72,000
y = 400（缩略图的长度）

现在，我们确定了蒙版和缩略图的大小。我们知道图像蒙版是否为180x240px，那么蒙版中的图像缩略图必须为300x400px才能进行360°旋转。

温馨提示：由于图像蒙版和缩略图的大小成比例相等，因此，如果我们先设置缩略图的大小，此数学运算也将起作用！我们将使用相同的勾股定理和比例关系来确定适当的大小。

第6步：最后添加一些HTML

现在我们知道了所有大小，让我们从一些基本HTML开始构建旋转的缩略图。

<!DOCTYPE html> 
<html>
	<head>
		<title>Rotated Thumbnails with CSS3</title>
		<link rel="stylesheet" href="styles.css" />
	</head>
<body>

<div id="wrapper">

	<h1>Rotated Thumbnails with CSS3</h1>	
	<label>Transform Angle: </label> 
	<input id="rotation_amount" value="15" /> 
	<button>Update</button> 
	<span id="error_message"> Number values only</span> 
	<br />
	
	<a href="1.jpg" class="mask"><img src="1.jpg" /></a>
	<a href="2.jpg" class="mask"><img src="2.jpg" /></a>
	<a href="3.jpg" class="mask"><img src="3.jpg" /></a>
	
	<a href="4.jpg" class="mask"><img src="4.jpg" /></a>
	<a href="5.jpg" class="mask"><img src="5.jpg" /></a>
	<a href="6.jpg" class="mask"><img src="6.jpg" /></a>
	
	<a href="7.jpg" class="mask"><img src="7.jpg" /></a>
	<a href="8.jpg" class="mask"><img src="8.jpg" /></a>
	<a href="9.jpg" class="mask"><img src="9.jpg" /></a>
	
	
	<div style="clear:both;"></div>
	
</div> <!-- #/wrapper -->
</body>
</html>

此基本HTML标记插入以下内容：

<input> -这将允许用户更改旋转角度。此外，我们将value属性设置为与最初在CSS中设置的value相同（在这种情况下为15）。
<span> -此错误消息将从视图中隐藏。如果用户在输入框中输入了除数字以外的其他内容，我们将使用jQuery进行显示。
<img> -这些是我们的缩略图，可以链接到任何您喜欢的缩略图。
clear:both both-清除浮动的缩略图
class="mask" -图像蒙版的类

步骤7：CSS基本页面样式

让我们对页面应用一些基本样式以使其结构简单。

body {
	margin:0; 
	padding:0; 
	background:#eee;
	font-family:Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
}
#wrapper {
	width:840px; 
	margin:0 auto; 
	background:#fff; 
	border:1px solid #ccc; 
	padding:25px; 
	border-top:none;
}
#error_message {
	color:red; 
	display:none;
	font-size:.8em;
}

注意这里我们默认隐藏了error_message ，因为稍后我们将在jQuery中切换它的可见性。

添加一些CSS3效果

让我们添加更多细节以增强我们的基本样式

#wrapper {
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px; 
	box-shadow:0 0 5px #ccc;
	-moz-box-shadow:0 0 5px #ccc;
	-webkit-box-shadow:0 0 5px #ccc;
}

现在，我们的内容以良好的间距和一些CSS3效果为中心，以增强页面样式。

步骤8：CSS样式化图像蒙版

让我们将图像蒙版应用于缩略图。在我们HTML中，我们将每个缩略图包裹在一个定位标记中，并为其提供了一个mask类别，供我们在CSS中使用。

.mask {
	position:relative;
	height:180px;
	width:240px;
	float:left;
	overflow:hidden;
	margin:15px;
	border:5px solid #f6f6f6;
	box-shadow:0 0 1px #000;
	-moz-box-shadow:0 0 1px #000;
	-webkit-box-shadow:0 0 1px #000;
}

这是我们使用CSS属性的描述（以及为什么使用它们）：

position:relative我们的img标签将完全定位在我们的图像蒙版中
height ， width之前我们确定了图像蒙版的尺寸。这是我们放置这些尺寸的地方。
float:left left-浮动我们的图像，使其以画廊形式显示。
overflow:hidden -如前所述，我们的缩略图为300x400px。但是，我们只会显示其中的一部分（180x240px）。此属性充当遮罩，隐藏了缩略图的超出180x240尺寸的部分。
margin -缩小图片
border ， box-shadow这为我们提供了一个双边框（在支持的浏览器中）。 border属性为我们提供了围绕图像的白色粗边框，而box-shadow为我们提供了围绕白色的粗黑色细边框。

步骤9：调整缩略图大小的CSS

根据我们在步骤5中计算出的尺寸设置缩略图尺寸。

.mask img {
	height:300px;
	width:400px;
}

步骤10：将缩略图居中放置CSS

现在，我们的缩略图相对定位（从左上角开始）。

我们希望缩略图在遮罩内水平和垂直居中。

为此，我们使用以下CSS规则：

.mask img {
	position:absolute;
	margin-top:-150px; /* half the height */
	margin-left:-200px; /* half the width */
	top:50%;
	left:50%;
}

这是我们所做的描述：

position:absolute将缩略图完全定位在图像蒙版中
margin -我们将负边距设置为恰好是图像的高度和宽度（300x400）的一半，然后将我们的定位属性设置为top和left ，这会将元素拉回到完美的中心。

步骤11：CSS缩略图旋转

我们将使用CSS3属性transform来旋转元素。因此，我们CSS将包含所有浏览器前缀

.mask img {
	-webkit-transform: rotate(15deg);
	-moz-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	transform:rotate(15deg);
}

这里CSS非常简单。我们只是将旋转角度放在括号中，然后加上“ deg”。

在此示例中，我们使用15作为旋转值，但是您可以在其中放置一个不同的值。由于我们正确计算了蒙版和缩略图的大小，因此我们为360°旋转预留了空间！正整数将图像向右旋转，负整数将图像向左旋转。

步骤12：CSS图像悬停效果

作为附加效果，我们将添加一条简单CSS行，当用户将鼠标悬停在图像上时会更改边框颜色。

.mask:hover {border-color:#ddd;}

步骤13：jQuery动态更改旋转值

作为一点好处，我们将允许用户在我们的输入框中输入一个值来更改CSS旋转角度。因此，首先，让我们在页面末尾紧接body标记之前添加jQuery以及指向自定义脚本的链接：

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="js.js"></script>

第14步：准备好jQuery文档

现在让我们为文档准备就绪时设置jQuery：

jQuery(document).ready(function($) {
	// code here
});

步骤15：jQuery初始函数

每当我们单击“更新”按钮时，我们都会创建一个函数。

$('button').click(function() {
	//code here
});

步骤16：jQuery存储当前旋转值

我们希望将当前旋转角度CSS数值存储在变量中。

var rotation_angle_value = $('#rotation_amount').val();

这段代码找到了rotation_amount id（我们将其分配给input ）并获取了其当前值。如果您还记得的话，我们会将初始value属性设置为等于15（与CSS代码中的旋转角度相同）。

步骤17：jQuery使用isNaN（）函数

我们希望使用户的输入值成为新的旋转角度。但是，我们要确保用户不会意外输入非数字值。这就是isNaN() javascript函数进来的地方isNaN()代表“不是数字”。该函数的功能恰如其名称所暗示的那样：它检查是否传递给它的值“不是数字”。

因此，我们将使用isNaN()函数并将其旋转角度值（由用户输入isNaN()传递给它。如果不是数字，我们将显示错误消息。

//check to see if the user's input value is a number or not
if (isNaN(rotation_angle_value)) { //not a number
	$('#error_message').show();
	//rest of code here
}

步骤18：jQuery更新新的旋转角度

如果用户新输入的值不是数字，则我们显示了一条错误消息。现在，我们将使用else的时候，他们已经进入了一个数值的声明。首先，我们隐藏错误消息。

else {
	$('#error_message').hide();
}

由于旋转角度在CSS中多次存储（由于各种浏览器前缀），因此我们必须使用jQuery更新所有这些值。因此，我们要做的是将CSS值的语法存储在变量中（带有新的angle值）。本质上，我们正在编写rotate(15deg) ，并将“ 15”的值替换为用户输入的值。

var rotation_angle = 'rotate(' + rotation_angle_value + 'deg)';

然后，我们创建具有关系值CSS对象。我们定义每个CSS属性（用于转换的浏览器前缀），然后将值插入为我们刚刚定义的变量。

var updated_css = {
	'-webkit-transform' : rotation_angle,
	'-moz-transform' : rotation_angle,	
	'-o-transform' : rotation_angle,
	'-ms-transform' : rotation_angle,
	'transform'	: rotation_angle,
}

现在，我们只需将存储CSS属性和值的变量传递给jQuery即可更新CSS！

$('.mask img').css(updated_css);

步骤19：jQuery最终jQuery代码

这就是我们所有的jQuery的样子：

jQuery(document).ready(function($) {
	
	$('button').click(function() {
		//get the rotation angle value
		var rotation_angle_value = $('#rotation_amount').val();
		
		if (isNaN(rotation_angle_value)) { //is not a number
			$('#error_message').show();
		} 
		else { //is a number
			$('#error_message').hide();
			
			//store CSS value syntax with the new rotation angle value
			var rotation_angle = 'rotate(' + rotation_angle_value + 'deg)';
			
			//store CSS properties and values
			var updated_css = {
				'-webkit-transform' :	rotation_angle,
				'-moz-transform'	:	rotation_angle,	
				'-o-transform'		:	rotation_angle,
				'-ms-transform'		:	rotation_angle,
				'transform'			:	rotation_angle,
			}
			
			//update our CSS
			$('.mask img').css(updated_css);
		}
	});
});

结论

希望您学到了一些知识，尤其是可以通过直接在浏览器中使用CSS3技术来避免在Photoshop中进行非灵活的设计。感谢您的关注！

翻译自: https://webdesign.tutsplus.com/articles/perfectly-rotate-and-mask-thumbnails-with-css3--webdesign-3823

css 缩略图

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 缩略图_使用CSS3完美旋转和遮盖缩略图

有没有看过一个网站上展示了略微旋转的图像缩略图？这是一种简单的效果，可增加视觉个性。这样说来，如果您不能通过CSS达到旋转效果，那么您就太努力了！了解如何正确做！重新发布的教程每隔几周，我们就会回顾整个网站历史中一些读者最喜欢的帖子。本教程于2011年8月首次发布。介绍具有旋转缩略图的图像画廊很少出现，但这是向网页添加样式的简单技巧。但是，如果做得不好，有时达...
复制链接

扫一扫