公众号:SAP Technical
本文作者:matinal
 

前言部分

大家可以关注我的公众号,公众号里的排版更好,阅读更舒适。

正文部分

时间追溯到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活的如此精致的更多相关文章

  1. 【FIORI系列】SAP 一文读懂SAP Fiori是什么

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP 一文读懂SAP Fio ...

  2. 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...

  3. SAP Fiori应用的三种部署方式

    封面图片来自Google搜索,关键字: Fiori Deployment 方式1 On premise环境下以BSP应用作为Fiori应用部署和运行的载体 在SAP成都labs我曾经担任过CRM这几个 ...

  4. Fiori Fundamentals和SAP UI5 Web Components

    这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...

  5. 【Fiori系列】浅谈SAP Fiori的设计美感与发展历程

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]浅谈SAP Fiori的设计美 ...

  6. SAP Fiori和UI5的初学者导航

    你是UI5和Fiori的新手?来对地方了. 对我来说,今年是不得不“跟上时代”去提升自己ABAP世界以外的技术技能的困难的一年.幸运的是,有很多可免费获得的信息和课程可以帮你实现这个跳跃.不要等着别人 ...

  7. SAPUI5 freestyle vs SAP Fiori Elements —— 两种开发SAP UI5 Apps的方式对比

    概述 目前SAPUI5 SDK 提供了两种方式来开发一个SAPUI5 App.一种方式是传统的SAPUI5开发方式,一种是利用SAP Fiori Elements通过模板快速构建应用的方式. 本文简单 ...

  8. SAP Fiori Client

    iPhone资源->iPhone商务软件 SAP Fiori Client 固件要求:需要 iOS 9.0 或更高版本.与 iPhone.iPad 和 iPod touch 兼容. 利用适用于 ...

  9. SAP Fiori + Vue = ?

    2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨.回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了 ...

随机推荐

  1. c#winform多线程感想

    我很菜所以好好学!!! 最近在做一个关于识别的项目,手动识别和自动识别,为了更好的保证自动识别不会引起界面的卡顿等现象,所以简单的学习了一下多线程,也只是入门但还是记录一下. 一.首先了解一下用多线程 ...

  2. 洛谷P1341 无序字母对【欧拉路】【dfs】

    题目:https://www.luogu.org/problemnew/show/P1341 题意:给定n对字母对,要求构造一个个数为n+1的字符串,使得每一个字母对都在里面出现过. 思路:这种题目都 ...

  3. C#百度api 根据经纬度获取地址

    public string GetAddress(string lat, string lng) { try { string res = ""; string url = @&q ...

  4. [Flutter] Stack Layout

    Normally if you place three the same size icons in a stack, they will stands on top of each other, t ...

  5. [Javascript] Convert a forEach method to generator

    For example we have a 'forEach' method which can loop though a linked list: forEach(fn) { let node = ...

  6. HR#4 题解

    既然考这么差就来写题啦OTZ T1 猜结论?猜nm! 一直到考试结束都没猜出来=.=我就好奇别人如何猜出来的 我们来说DP(from ZBK) 设\(dp[i][j]\)表示胜or负 那我们来看一下代 ...

  7. P1772 [ZJOI2006]物流运输 最短路+DP

    思路:最短路+DP 提交:1次 题解: $f[i]$表示到第$i$天的最小代价,我们可以预先处理出$i,j$两天之间(包括$i,j$)都可通行的最短路的代价记做$s[i][j]$,然后有$f[i]=m ...

  8. session.getdefaultinstance和getinstance的区别

    如果想要同时使用两个帐号发送javamail,比如使用1@a.com发送1#邮件,使用2@a.com发送2#邮件,这时候,你就需要同时创建两个java.mail.Session对象.但是如果你仍然使用 ...

  9. moment.js 日期转换工具

    官方网站: http://momentjs.cn/ 文档: https://itbilu.com/nodejs/npm/4Jxk-Ti-l.html https://www.jianshu.com/p ...

  10. C/C++应用--Window下获取硬件信息(CPU, 硬盘,网卡等)

    一.头文件如下: #include <Windows.h> #include <string> #include <iostream> #include <w ...