【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的内容。
CSS
CSS(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS3是CSS技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。早在2001年W3C就完成了CSS3的草案规范。
蓝天白云
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%); }}
来看一下我们最后出来的效果:
瓦蓝瓦蓝的天空,绝对没有雾霾,希望看到这张图片的朋友,都能有一个瓦蓝瓦蓝的心情。
这样就做好了一个云彩的动画效果。其实CSS是一个很普遍的技术,太多地方可以学习了。
我这里举个栗子,比如查找一些属性或者是一些简单例子,通过CSS的一些网站的总结学习(关注公众号:SAP Technical 会经常发布技术类文章)。
web方面必定要使用到H5,而H5里也必然会需要用到css,当然很多做后台的可能觉得没必要学,有人说,我用vue还有必要学这些吗,这还真是个问题,今天就不讨论这么多了,文章过长,未必有多少人能看到这里。
想要获取完整代码,还有完整的css颜色代码大全的朋友,请在后台回复"css云彩"。
最后安利一下我们的国产动画电影。
【Fiori系列】为什么SAP Fiori活的如此精致的更多相关文章
- 【FIORI系列】SAP 一文读懂SAP Fiori是什么
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP 一文读懂SAP Fio ...
- 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...
- SAP Fiori应用的三种部署方式
封面图片来自Google搜索,关键字: Fiori Deployment 方式1 On premise环境下以BSP应用作为Fiori应用部署和运行的载体 在SAP成都labs我曾经担任过CRM这几个 ...
- Fiori Fundamentals和SAP UI5 Web Components
这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...
- 【Fiori系列】浅谈SAP Fiori的设计美感与发展历程
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]浅谈SAP Fiori的设计美 ...
- SAP Fiori和UI5的初学者导航
你是UI5和Fiori的新手?来对地方了. 对我来说,今年是不得不“跟上时代”去提升自己ABAP世界以外的技术技能的困难的一年.幸运的是,有很多可免费获得的信息和课程可以帮你实现这个跳跃.不要等着别人 ...
- SAPUI5 freestyle vs SAP Fiori Elements —— 两种开发SAP UI5 Apps的方式对比
概述 目前SAPUI5 SDK 提供了两种方式来开发一个SAPUI5 App.一种方式是传统的SAPUI5开发方式,一种是利用SAP Fiori Elements通过模板快速构建应用的方式. 本文简单 ...
- SAP Fiori Client
iPhone资源->iPhone商务软件 SAP Fiori Client 固件要求:需要 iOS 9.0 或更高版本.与 iPhone.iPad 和 iPod touch 兼容. 利用适用于 ...
- SAP Fiori + Vue = ?
2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨.回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了 ...
随机推荐
- 根据IP获取经纬度 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- informix创建同义词
搜索词条 1.informix不同主机的数据库同义词创建? 2.informix怎么实现跨服务器数据抽取? 3.informix 数据库跨库访问的配置?https://blog.csdn.net/Da ...
- 洛谷P1330 封锁阳光大学【dfs】
题目:https://www.luogu.org/problemnew/show/P1330 题意:一个无向边,一个河蟹可以占领一个点,但一个点只能被一个河蟹占领. 占领了一个点之后,这个点所有的边都 ...
- 解决每次执行Java等命令时都要重新source /etc/profile后才能执行,否则找不到命令
linux mint 我们通常将环境变量设置在/etc/profile这个文件中,这个文件是全局的. /etc/profile:在登录时,操作系 统定制用户环境时使用的第一个文件 ,此文件为系统的每个 ...
- js.map文件意义(转)
什么是source map文件 source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是ma ...
- [Luogu] 矩形覆盖
https://www.luogu.org/problemnew/show/P1034 数据太水 爆搜过掉 #include <iostream> #include <cstdio& ...
- Try-Catch-Finally代码块中的return
测试类的原型是这样子的 public class TryCatchFinallyToReturn { public static void main(String[] args) { System.o ...
- 7月清北学堂培训 Day 2
今天是林永迪老师的讲授~ 继续昨日的贪心内容. 我们继续看例题: 分析样例的过河方法: 首先1和2先过河,总时间为2: 然后1回来,总时间为3: 然后5和10过河,总时间为13: 然后2回来,总时间为 ...
- c++ demo code
/* //多继承 #include <iostream> using namespace std; class Sofa { public: Sofa(); ~Sofa(); void s ...
- 20175313 张黎仙《Java程序设计》第十周学习总结
目录 一.教材学习内容总结 二.教材学习中的问题和解决过程 三.代码调试中的问题和解决过程 四.代码托管 五.心得体会 六.学习进度条 七.参考资料 一.教材学习内容总结 第十二章内容 主要内容 杂项 ...