专栏首页SAP Technical为什么SAP Fiori活的如此精致
原创

为什么SAP Fiori活的如此精致

正文前序

时间追溯到1992年,SAP的创始人们发布了R3版本,这是一个经典的出现。这个版本的系统提供包括所有业务领域的业务处理流程的集成的解决方案。

SAP R3的三层架构体系得到了大范围的认可,这也是SAP可以推广成为全球范围产品的开端,这个阶段的发展迅速,随后出现了诸如虚拟机,抽象数据访问,跨硬件、操作系统、数据库运行,还有更重要的NetWeaver出现。

一直到现在还有很多项目在使用的ECC的出现,NetWeaver是SAP的集成技术平台,是自从SAP Business Suite以来的所有SAP应用的技术基础。

今天不讲历史,所以SAP的一些发展情况我就不详细写了。

再到后来,就是我们熟悉的S4出现了,S4的出现带来了一个新鲜事物,也就是我们现在经常提到的SAP Fiori,给SAP添加了很多新的色彩。

SAP Fiori的出现,让SAP显得更加的鲜活,而且充满着活力,在Fiori的每个版本发布后,都会有很多细节的改进,SAP Fiori Launchpad每次都会有一些微妙的调整,比如外观上颜色的渐淡、立体感,更加饱满等等。

今天聊点技术类的问题,但是看似和SAP没有多大关系,但是就是在SAP Fiori中会使用到的美工技术。我会在公众号:SAP Technical 里继续发送Fiori的文章。

SAP Fiori基础是一个轻量级的样式表和HTML标签库,允许开发人员在任何基于Web的UI框架中构建SAP Fiori应用程序,比如Vue。

我在以前推送的文章中也有介绍了SAP的UI框架包含的内容,也就是Fiori的实现内容,其中一项就包括了CSS。所以今天聊点简单的css的内容。

公众号:SAP Technical

CSS

CSS(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS3是CSS技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。早在2001年W3C就完成了CSS3的草案规范。

公众号:SAP Technical

蓝天白云

matinal一直喜欢蓝天白云的色彩,或者说是那种无忧无虑的感觉。今天要讲的内容就和这个有关,也要和我们介绍的css技术有关,就是用css做一个蓝天白云的图案。

当然这篇文章是要有一定的CSS基础才可以。如果没有基础的话,还是要学习一下基础内容再来看。

先介绍几个css基本的属性:

transform:向元素应用 2D 或 3D 转换

box-shadow:向框添加一个或多个阴影

clip-path:区域内的部分显示,区域外的隐藏

animation:动画属性

想到蓝天白云就应该有个大概的印象,就是有蓝色的天空和白色的云彩,云彩要有阴影部分,最好是云彩还可以有晃动的感觉。

背景设定

首先要设定一个背景,也就是天空为背景,我们设定为蓝色,还有就是长度高度这些,如果在细致一些,可以把边角设置为圆角,会显得更加圆润一点。

.weather {    position: relative;    display: inline-block;    width: 200px;    height: 220px;    background: #0000FF;    border-radius: 10px;}

云彩创作

画云彩,其实也是看个人的想法,不同的人可能用的形式不同,我想就是用几个白色的圆形相互重叠一部分后,就形成了云朵的形状。大家可以想象一下,或者是用笔在纸上简单画一下。综上,我们先画一个基础的圆形。

.matinal:before {    content: "";    position: absolute;    top: 50%;    left: 25%;    transform: translate(-50%, -50%);    width: 40px;    height: 40px;    background: #F5FFFA;    border-radius: 50%;    z-index: 2;}

然后就是做重叠的部分了,这个地方就用到了之前说的属性box-shadow,做法如下

box-shadow: #F5FFFA 22px -18px 0 6px

按照这种做法,我们多复制几个云彩的模型,最后的代码如下

.matinal:before {    content: "";    position: absolute;    top: 50%;    left: 25%;    transform: translate(-50%, -50%);    width: 40px;    height: 40px;    background: #F5FFFA;    border-radius: 50%;    box-shadow:      #F5FFFA 22px -18px 0 6px,      #F5FFFA 55px -8px 0 5px,      #F5FFFA 88px 5px 0 -5px,      #F5FFFA 36px 8px 0 8px,      #F5FFFA 60px 5px 0 3px,      #D8BFD8 30px -25px 0 8px,      #D8BFD8 65px -13px 0 6px,      #D8BFD8 92px -6px 0 -6px;    z-index: 2;}

其实,就是做了一些白色图形和一些淡灰红色图形,然后在做一些重叠起来的效果,这样看起来更有云彩的效果,颜色可以自己根据自己的想法来定。

上下浮动

再做一个晃动的画面,就是让云彩更像云彩一点,有浮动的感觉。直接来看一下实现方法:

.matinal:before {    animation: seeMove 3s linear infinite;}@keyframes seeMove {    0% {        transform: translate(-50%, -50%);    }    50% {        transform: translate(-50%, -60%);    }    100% {        transform: translate(-50%, -50%);    }}

来看一下我们最后出来的效果:

公众号:SAP Technical

瓦蓝瓦蓝的天空,绝对没有雾霾,希望看到这张图片的朋友,都能有一个瓦蓝瓦蓝的心情。

这样就做好了一个云彩的动画效果。其实CSS是一个很普遍的技术,太多地方可以学习了。

我这里举个栗子,比如查找一些属性或者是一些简单例子,通过CSS的一些网站的总结学习(关注公众号:SAP Technical 会经常发布技术类文章)。

公众号:SAP Technical

web方面必定要使用到H5,而H5里也必然会需要用到css,当然很多做后台的可能觉得没必要学,有人说,我用vue还有必要学这些吗,这还真是个问题,今天就不讨论这么多了,文章过长,未必有多少人能看到这里。

想要获取完整代码,还有完整的css颜色代码大全的朋友,请在后台回复"css云彩"。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SAP Leonardo了解一下

    为什么?未来任何一个工业都会变成软件工业。盖茨是对的,因为任何工业任何行业自动化的程度会越来越高,最后你所处理的就是信息和知识。

    matinal
  • 【SAP FICO系列】固定资产月结的注意点

    matinal
  • SAP的系统审计以及SM19的使用

    SAP内部安全审核方法 SAP系统安全审核,对于企业来说,主要分为内部审核和外部审核两部分,而SAP内部审核分为用户安全审核和系统安全两大类,这里主要就SAP内...

    matinal
  • thinkPHP利用ajax异步上传图片并显示、删除的示例

    利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。

    砸漏
  • thinkPHP利用ajax异步上传图片并显示、删除的示例

    利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。

    砸漏
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • wordpress美化-文章标题样式美化

    找到当前主题的标题样式,然后去主题样式文件修改。(一般在主题根目录style.css)

    AlexTao
  • CSS 3.0实现立体书本特效

    越陌度阡
  • CSS 3.0实现创意点击按钮

    越陌度阡
  • Valine Admin后台搭建(最新修订版)

    Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akis...

    Caleb

扫码关注云+社区

领取腾讯云代金券