首页 > 其他分享 >CSS3制作图片样式

CSS3制作图片样式

时间：2024-04-01 16:13:41浏览次数：30  
标签：CSS3 样式 border inset radius rgba 20px 制作 255

问题：

如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。

解决方法：

要让浏览器能正常渲染图像的圆角和内阴影效果，你需要将图像转为背景图像来渲染。

<div style="background:url(image.jpg)" no-repeat center center;width:150px;height:150px></div>

 

一、浮雕样式

.embossed .image-wrap {
			-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
			-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
			box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}

二、软浮雕效果

这也是一种浮雕效果，只是这个效果增加了一点模糊效果

.soft-embossed .image-wrap {
			-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
			-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
			box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}

三、剪影效果

同样是box-shadow的inset的值变化，但此例看上去像一种剪影效果。

.cut-out .image-wrap {
			-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
			-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
			box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}

四、变形和发光效果

在这个效果中，增加了CSS3的transition效果，当你的鼠标悬停在图片上时，图片会从一个圆角图片转圆形图片，并会发光。使用多重box-shadow来模仿发光效果。

.morphing-glowing .image-wrap {
			-webkit-transition: 1s;
			-moz-transition: 1s;
			transition: 1s;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}

		.morphing-glowing .image-wrap:hover {
			-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
			-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
			box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
			-webkit-border-radius: 60em;
			-moz-border-radius: 60em;
			border-radius: 60em;
		}

五、图片渐变效果

这个效果，在元素的伪类上增加了一个渐变的效果。

.glossy .image-wrap {
			-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
			-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
			box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}
		.glossy .image-wrap:after {
			position: absolute;
			content: ' ';
			width: 100%;
			height: 50%;
			top: 0;
			left: 0;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
			background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
			background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
		}

六、倒影效果

使用伪类制作了一个倒影效果，并应用hover改变其位置。

.reflection .image-wrap {
			-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
			-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
			box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
			-webkit-transition: .5s;
			-moz-transition: .5s;
			transition: .5s;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			}
			.reflection .image-wrap:after {
			position: absolute;
			content: ' ';
			width: 100%;
			height: 30px;
			bottom: -31px;
			left: 0;
			-webkit-border-top-left-radius: 20px;
			-webkit-border-top-right-radius: 20px;
			-moz-border-radius-topleft: 20px;
			-moz-border-radius-topright: 20px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
			background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
			}
			.reflection .image-wrap:hover {
			position: relative;
			top: -8px;
			}

七、发光和倒影效果

这个效果使用了伪类创建了一个渐变加倒影图像的效果。

.glossy-reflection {
			background: #000;
			padding: 20px 40px 50px;
			color: #fff;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			}
			.glossy-reflection .image-wrap {
			-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
			-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
			box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
			-webkit-transition: 1s;
			-moz-transition: 1s;
			transition: 1s;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			}
			.glossy-reflection .image-wrap:before {
			position: absolute;
			content: ' ';
			width: 100%;
			height: 50%;
			top: 0;
			left: 0;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
			background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
			}
			.glossy-reflection .image-wrap:after {
			position: absolute;
			content: ' ';
			width: 100%;
			height: 30px;
			bottom: -31px;
			left: 0;
			-webkit-border-top-left-radius: 20px;
			-webkit-border-top-right-radius: 20px;
			-moz-border-radius-topleft: 20px;
			-moz-border-radius-topright: 20px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
			background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
			}

八、变形和着色效果

这个效果使用了径向渐变和transition，以及伪类制作一种变形和着色效果，当鼠标悬停在图片上时，图片会变成圆形，并着上另一种颜色。

.morphing-tinting .image-wrap {
			position: relative;
			-webkit-transition: 1s;
			-moz-transition: 1s;
			transition: 1s;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			}
			.morphing-tinting .image-wrap:hover {
			-webkit-border-radius: 30em;
			-moz-border-radius: 30em;
			border-radius: 30em;
			}
			.morphing-tinting .image-wrap:after {
			position: absolute;
			content: ' ';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			-webkit-transition: 1s;
			-moz-transition: 1s;
			transition: 1s;
			-webkit-border-radius: 30em;
			-moz-border-radius: 30em;
			border-radius: 30em;
			}
			.morphing-tinting .image-wrap:hover:after {
			background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
			background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
			}

九、羽化效果

.feather .image-wrap {
			position: relative;
			-webkit-border-radius: 30em;
			-moz-border-radius: 30em;
			border-radius: 30em;
			}
			.feather .image-wrap:after {
			position: absolute;
			content: ' ';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
			background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
			}

 

小结：上面就是Web Designer Wall在《CSS3 Image Styles 》一文中给我们带来的十二种使用CSS3的border-radius、box-shadow、rgba、transition、gradient以及伪类“:before”和“:after”等属性制作的图片效果。

标签：CSS3,样式,border,inset,radius,rgba,20px,制作,255
From： https://www.cnblogs.com/moranjl/p/18094044

相关文章

  • 动态修改el-input的样式
    1.在css中定义变量（前边要加--） 2.el-input使用 3.data定义 来源：动态修改el-input样式，css变量形式外层修改input样式-m2maomao-博客园(cnblogs.com)......
  • Django项目部署本地windows IIS（详细版）和static文件设置（页面样式正常显示）
    Django项目部署本地windowsIIS（详细版）和static文件设置（页面样式正常显示）原文链接：https://blog.csdn.net/hahahahanhanhan/article/details/134638020目录必要条件：一、下载并启用wfastcgi二、window安装IIS功能三、IIS管理器中添加网站1、复制项目2、复制wfastcgi.py文件......
  • vue 自定义tabs 样式的组件
    大家应该都用过tabs不同状态显示不同的列表 这种东西其实可以自己封装的其实是很简单的做一个这样简单的筛选组件 这样的跟tabs的效果一样上代码<template><divclass="switch-container"><divclass="box"><divclass="box-item"......
  • 【飞控制作】从飞控制作学习项目经验
    1.四旋翼无人机飞行原理：欠驱动系统通过4个电机的转速，来控制飞行器X、Y、Z轴的加速度和角速度，实现悬停、垂直升降、俯仰、偏航、滚转（这里只对比较陌生的俯仰、偏偏行、滚转做示意图说明）。组成运动控制运动控制主要参考：四旋翼无人机飞行原理及控制方法，你了解多少？实物图2.......
  • css样式重置
    @charset"utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xmp,......
  • 前端学习＜二＞CSS基础——14-CSS3属性详解：Web字体
    前言开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。支持程度比较好，甚至IE低版本的浏览器也能支持。字体的常见格式不同浏览器所支持的字体格式是不一样的，我......
  • PyQt：【重磅干货】实现一个自定义样式的窗口（比如去掉边框、改变标题位置、窗口按钮样式
    如果想突破PyQt自带窗口的样式限制，比如同时去掉窗口的边框、改变边框、改变标题位置、窗口控制按钮等等，那就需要实现一个自定义样式的窗口，本文教你如何实现先来看看PyQt创建窗口的默认样式：再看看一个自定义样式的窗口：可以看到，这里示例的自定义窗口去掉了窗口的边框、改......
  • Android studio制作的mqtt协议通讯app，可用于搭建的meqx服务器，不可连接阿里云
    首先，在app目录下创建一个libs文件夹，导入相应的MQTT的jar包，然后右击jar包拉到最后找到Add...的一个选项，单击就OK了然后就是添加一些权限添加另一个layout的名字activity_main<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.......
  • 9.折磨了一周的springboot样式跳转
    大致是这样的springboot一个项目将头部和侧部公共部分都提取出来但是一点击员工怎么侧边样式一直失败我看F12报错说的什么cavas渲染加上了还是错啊因为我是侧边栏的问题我的Controller跳转肯定没错这个真是让我难受了一周多因为还差增删改查就设计完毕了这个坑一......
  • 2-23. 制作人物背包内的 UI
    创建PlayerBag创建SlotHolder给SlotHolder添加GridLayoutGroup，ChildAlignment改为MiddleCenter然后再添加上节课的槽位预制体添加头像和金币项目相关代码代码仓库：https://gitee.com/nbda1121440/DreamOfTheKingdom.git标签：20240331_1050......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99