CSS浮雕效果

news2024/11/25 13:41:53

效果图:

HTML源码:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
</head>
<body>
        

<form>
        <div class="segment">
          <h1>Sign Up</h1>
        </div>
        <label>
          <input type="text" placeholder="Username" />
        </label>
        <label>
          <input type="password" placeholder="Password" />
        </label>
        <button class="red" type="button" title="Login"> Log in <svg t="1730280552580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5041" width="16" height="16" style="vertical-align: middle;"><path d="M409.002667 469.333333L300.8 361.130667 361.130667 300.8l211.2 211.2-211.2 211.2-60.330667-60.330667L409.002667 554.666667H128v-85.333334h281.002667zM469.333333 128h341.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333h-341.333334v-85.333333h341.333334V213.333333h-341.333334V128z" fill="#ae1100" p-id="5042"></path></svg></button>

        <div class="input-group">
          <label>
            <input type="text" placeholder="Register By Email" />
          </label>
          <button class="unit" type="button" title="Register"><svg t="1730281008926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6135" width="16" height="16"><path d="M722.6 645.295c17.497-26.999 9.793-63.072-17.206-80.567-21.997-14.255-45.104-26.406-69.045-36.377 69.66-51.387 114.937-134.006 114.937-227.013 0-155.467-126.483-281.951-281.951-281.951s-281.951 126.483-281.951 281.951c0 92.95 45.223 175.527 114.811 226.919-51.763 21.557-99.309 53.261-140.153 94.103-82.080 82.080-127.284 191.213-127.284 307.292 0 32.174 26.082 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-175.385 142.685-318.068 318.068-318.068 61.579 0 121.298 17.606 172.699 50.915 27.002 17.498 63.074 9.793 80.567-17.206zM469.334 135.897c91.225 0 165.442 74.218 165.442 165.442s-74.218 165.442-165.442 165.442c-91.225 0-165.442-74.217-165.442-165.442s74.218-165.442 165.442-165.442z" p-id="6136" fill="#ae1100"></path><path d="M926.63 743.197h-66.992v-66.992c0-32.174-26.080-58.254-58.254-58.254s-58.254 26.080-58.254 58.254v66.992h-66.992c-32.174 0-58.254 26.080-58.254 58.254s26.080 58.254 58.254 58.254h66.992v66.992c0 32.174 26.080 58.254 58.254 58.254s58.254-26.080 58.254-58.254v-66.992h66.992c32.174 0 58.254-26.080 58.254-58.254s-26.080-58.254-58.254-58.254z" p-id="6137" fill="#ae1100"></path></svg></button>
        </div>
      </form>


<style>
        body,
html {
  background-color: #ebecf0;
}

body,
p,
input,
select,
textarea,
button {
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.2px;
  font-size: 16px; /* $ruler: 16px */
}

div,
p {
  color: #babecc; /* $color-shadow */
  text-shadow: 1px 1px 1px #fff; /* $color-white */
}

form {
  width: 320px; /* $ruler * 20 */
  margin: 0 auto;
}

.segment {
  padding: 32px 0; /* $ruler * 2 */
  text-align: center;
}

button,
input {
  border: 0;
  outline: 0;
  font-size: 16px; /* $ruler */
  border-radius: 320px; /* $ruler * 20 */
  padding: 16px; /* $ruler */
  background-color: #ebecf0; /* $color-bg */
  text-shadow: 1px 1px 0 #fff; /* $color-white */
}

label {
  display: block;
  margin-bottom: 24px; /* $ruler * 1.5 */
  width: 100%;
}

input {
  margin-right: 8px; /* $ruler / 2 */
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff; /* $color-shadow, $color-white */
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
}

input:focus {
  box-shadow: inset 1px 1px 2px #babecc,
    inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}

button {
  color: #61677c;
  font-weight: bold;
  box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc; /* $color-white, $color-shadow */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc; /* $color-white, $color-shadow */
}

button:active {
  box-shadow: inset 1px 1px 2px #babecc,
    inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}

.button .icon {
  margin-right: 8px; /* $ruler / 2 */
}

button.unit {
  border-radius: 8px; /* $ruler / 2 */
  line-height: 0;
  width: 48px; /* $ruler * 3 */
  height: 48px; /* $ruler * 3 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px; /* $ruler / 2 */
  font-size: 19.2px; /* $ruler * 1.2 */
}

button.unit .icon {
  margin-right: 0;
}

button.red {
  display: block;
  width: 100%;
  color: #ae1100; /* $color-red */
  margin: 32px 0;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.input-group label {
  margin: 0;
  flex: 1;
}

</style>

</body>
</html>

相关参考:cssinspirationguide - csc inspiration guide onlinecsc inspiration guide onlineicon-default.png?t=O83Ahttps://csscoco.com/inspiration/#/./shadow/relief-style-btn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2228629.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

英飞凌TRAVEO-II MCU能做什么?

概述 英飞凌TRAVEO™T2G微控制器基于ArmCortex-M4(单核)/M7(单核/双核)内核,提供高性能、增强的人机界面、高安全性和先进的网络协议,专为电气化、车身控制模块、网关和信息娱乐应用等广泛的汽车应用量身定制。基于单核和双核操作的强大ArmCortexM系列内核,它提供了最先…

Ant-Dseign-Pro如何去国际化及删除oneapi.json后出现程序直接结束问题的解决方案

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;WebStorm 移除国际化 什么是国际化 在AntDesignPro当中&#xff0c;国际化就是如果你初始默认使用中文&#xff0c;想要切换英文&#xff0c;我们可以切换到英文模式。同时&#x…

UOS中读取 bitlocker加密的U盘

目前安装的1079专业版本&#xff0c;apt 安装的dislocker版本太低&#xff0c;要安个高点的 git clone https://github.com/Aorimn/dislocker sudo apt install gcc cmake make libfuse-dev libmbedtls-dev ruby-dev cd dislocker cmake . make sudo make install 这时运等l…

RHCE笔记-DNS服务器

一.DNS简介 DNS&#xff08;域名系统&#xff09;是一种互联网服务&#xff0c;负责将我们熟悉的域名&#xff08;比如 www.example.com&#xff09;转换为计算机能理解的IP地址&#xff08;比如 192.0.2.1&#xff09;。这样&#xff0c;当你在浏览器中输入网址时&#xff0c;…

自研小程序-心情追忆

在近期从繁忙的工作中暂时抽身之后&#xff0c;我决定利用这段宝贵的时间来保持我的Java技能不致生疏&#xff0c;并通过一个个人项目来探索人工智能的魅力。 我在Hugging Face&#xff08;国内镜像站点&#xff1a;HF-Mirror&#xff09;上发现了一个关于情感分析的练习项目&…

Admin.NET源码学习(5:swagger使用浅析)

直接启动Admin.NET.Web.Entry项目&#xff0c;会弹出swagger登录验证框&#xff0c;虽然采用Furion简化了项目加载过程及配置&#xff0c;但是学习源码过程就比较恼火&#xff0c;很多设置及功能搞不清楚到低是怎么启用的&#xff0c;本文记录学习Admin.NET项目中swagger的设置…

Pytorch学习--神经网络--线性层及其他层

一、正则化层 torch.nn.BatchNorm2d torch.nn.BatchNorm2d(num_features, eps1e-05, momentum0.1, affineTrue, track_running_statsTrue, deviceNone, dtypeNone)正则化的意义&#xff1a; 加速训练收敛&#xff1a;在每一层网络的输入上执行批量归一化可以保持数据的分布稳…

SSH免密钥登录

1: 用 ssh-key-gen 在本地主机上创建公钥和密钥 winr cmd 打开控制台 ssh-keygen -t rsa 一直按enter 2: 用 ssh-copy-id 把公钥复制到远程主机上 user 是用户名 remote_host是远程主机 ssh-copy-id -i ~/.ssh/id_rsa.pub userremote_host 3: 直接登录远程主机&#xf…

推荐一款优秀的pdf编辑器:Ashampoo PDF Pro

Ashampoo PDF Pro是管理和编辑 PDF 文档的完整解决方案。程序拥有您创建、转换、编辑和保护文档所需的一切功能。根据需要可以创建特定大小的文档&#xff0c;跨设备可读&#xff0c;还可以保护文件。现在您还能像编辑Word文档一样编辑PDF! 软件特点 轻松处理文字 如 Microso…

使用C语言实现经典贪吃蛇游戏

一、项目概述 我们的目标是创建一个基本的贪吃蛇游戏&#xff0c;它具有以下功能&#xff1a; 蛇能够根据玩家的键盘输入改变方向。 当蛇吃到食物时&#xff0c;蛇的长度增加&#xff0c;同时分数增加。 蛇可以在窗口边缘“穿墙”移动。 游戏界面包括一个蛇和一个随机出现…

Spring Boot Configuration和AutoConfiguration加载逻辑和加载顺序调整

在spring中&#xff0c; AutoConfiguration也是一个种Configuration&#xff0c;只是AutoConfiguration是不能使用proxy的。 而且spring对于两者的加载顺序也不是一视同仁&#xff0c;是有顺序的。spring会先加载SpringBootApplication可达的且标注了Configuration的类&#x…

算法速刷(LeetCode)(160.相交链表)

个人思路&#xff1a; 笨蛋做法&#xff0c;但是好用 代码如下 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution …

面试记录(1)

java中的抽象类和接口的区别&#xff1a; 相同点 (1) 都可以被继承 (2) 都不能被实例化 (3) 都可以包含方法声明 (4) 派生类必须实现未实现的方法 不同点 1.关键字不同&#xff1a; ​ ① 继承抽象类的关键字是extends&#xff0c;而实现接口的关键字是implements&#xff1b;…

MATLAB下的四个模型的IMM例程(CV、CT左转、CT右转、CA四个模型),附源代码可复制

文章目录 基于IMM算法的目标跟踪概述源代码运行结果代码结构与功能1. 初始化2. 仿真参数设置3. 模型参数设置4. 生成量测数据5. IMM算法初始化6. IMM迭代7. 绘图8. 辅助函数总结基于IMM算法的目标跟踪 概述 该MATLAB代码实现了基于交互式多模型(IMM)算法的目标跟踪,旨在估…

Jmeter实际应用

环境准备 JDK1.8Jmeter 5.6.3 下载地址Jmeter 插件 下载地址 放到lib/ext下 常用命令 # 启动 sh jmeter# 集群模式下启动节点&#xff0c;不启动用不了集群 sh jmeter-server#生成ssl需要的证书, 这里会要求输入个密码&#xff0c;是要在jmeter中用的 keytool -import -ali…

使用 Flask 实现简单的登录注册功能

目录 1. 引言 2. 环境准备 3. 数据库设置 4. Flask 应用基本配置 5. 实现用户注册 6. 实现用户登录 7. 路由配置 8. 创建前端页面 9. 结论 1. 引言 在这篇文章中&#xff0c;我们将使用 Flask 框架创建一个简单的登录和注册系统。Flask 是一个轻量级的 Python Web 框架…

SystemC学习(3)— APB_SRAM的建模与测试

SystemC学习&#xff08;3&#xff09;— APB_SRAM的建模与测试 一、前言 二、APB_SRAM建模 编写APB_SRAM模型文件apb_sram.h文件如下所示&#xff1a; #ifndef __APB_SRAM_H #define __APB_SRAM_H#include "systemc.h"const int ADDR_SIZE 32; const int DATA_…

新兴斗篷cloak技术,你了解吗?

随着互联网技术的飞速发展&#xff0c;网络营销领域也经历了翻天覆地的变革。 从最早的网络横幅广告到如今主流的搜索引擎和社交媒体营销&#xff0c;广告形式变得越来越多样。 其中&#xff0c;搜索引擎广告一直以其精准投放而备受青睐&#xff0c;但近年来&#xff0c;一项名…

UG NX二次开发(C#)-计算圆柱面与其他平面的夹角

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、前言2、首先创建一个三维模型3、 源代码4、调用代码1、前言 在QQ群中,有群友提问了如何判断圆柱面与某一平面是否垂直,我这里以案例的形式计算圆柱面主轴矢量与平面法矢的夹角,如果夹角为0,…

基于卷积神经网络的棉花病虫害识别与防治系统,resnet50,mobilenet模型【pytorch框架+python源码】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; 棉花病害识别与防治系统&#xff0c;卷积神经网络&#xff0c;resnet50&#xff0c;mobilenet【pytorch框架&#xff0c;python源码】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于卷积…