酸性设计的由来

酸性风格来源于迷幻艺术Psychedelia，在英文中称为Acid Graphics。其中（Acid）一词原指一种致幻剂LSD。这也能侧面说明为什么酸性风格常以反复出现的几何图形或高饱和度颜色呈现。

酸性设计至少有十几年的历史，但最早是由平面设计师David Rudnick来定义的，他不仅是平面设计师同时也是音乐杂志《Volume》的创始人。

正是因为他的创作在地下和主流市场中的大量露面，使这种设计风潮自然地流行起来，吸引了更多年轻设计师。

David Rudnick的作品

在2018年，Rudmer van Hulzen策划了一场展示音乐俱乐部海报设计的展览，Rudmer van Hulzen是荷兰创意机构G2K的艺术总监，在这场展览里，展示了一系列来自Studio Cryo、Studio Feixen、Anna Kulachek、Bráulio Amado和Jonathan Castro等设计师和工作室的作品，也是通过这次展览让更多人了解了酸性设计。

而Rudmer van Hulzen也重新定义了酸性设计，他定义其为 “挑战传统对美感和欲望的定义，是酸性平面的核心。尽管许多人可能会认为这些作品很丑陋，但是如果仔细研究它们的制作方式、创作目标和用户群体，你会发现它们是特意如此，并且拥有自己的美学。另外，你不需要化学刺激就能看到它们的美。”

日本的设计师GUCCIMAZE 则被定义为推动酸性设计风格趋势发展的幕后主手之一。他擅长从不同语言获取灵感，将字体、视觉元素和形状重新融合，幻化成充满神秘感的设计作品。音乐人Nicki Minaj、杂志《Tunica》等都曾邀请他操刀专辑或杂志的视觉。

GUCCIMAZE在设计中运用了大量的尖锐的字体，并且搭配重金属等疯狂字体。

酸性设计的风格特点

虽然说酸性设计没有一个标准的模版，但是其表达形式通常是固定的。这种特征也决定了它多运用于时尚、音乐、潮流以及艺术圈。而且随着C4D的流行，越来越多的设计师在酸性设计中加入3D元素。
酸性设计的表达形式通常概括为三种

1. 高饱和材质

通常为镭射纹理，金属玻璃材质，3D物体材质等,

通过特效感的颜色突出画面的科技迷幻感.

2. 装饰性文字

尖锐的字体，通常搭配重金属美学疯狂字体，流动金属字体

3. 实验性的排版

通常为复杂的构图,丰富的内容制造出独特的艺术氛围,排版形式多为科幻未来主义、反乌托邦场景.

最近超火的 liquid bubble 也是酸性设计的一种

酸性风格的设计应用

1. 平面设计

通常为时尚、音乐、潮流以及艺术圈的设计海报

2. UI设计

UI设计中的酸性设计并不多，UI设计中加入酸性设计的元素会让人眼前一亮,各种混搭的金属材质让界面焕然一新，同时也让界面设计充满各种可能性。

总结

有人说酸性风格是新的新丑风，有人把它定义为科幻未来主义，有人则认为它是Y2K风格的替代品，无论是哪一种，作为当代设计师的我们，更多的是以一种面向未来的想法，让已经有了几十年的酸味美学可以带有“自由恋爱”的内涵。无论是霓虹色彩、液态金属字还是欧普风格，都仅仅是酸性设计元素元素中的冰山一角，一种流行现象、美学观念的远远不止如此。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设 作者：石小秋

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

1、iframe子页面调用父页面js函数



子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数，就写成：

子页面取父页面中的标签中的值，比如该标签的id为“test”,则：

但是我在chrome浏览器下却发现此方法无效了！查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的。此方法支持ie、firefox浏览器。



2、iframe父页面调用子页面js函数

注：ifrtest是iframe框架的id，b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象，IE下可以省略。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：博客园

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

首先上 html代码

    


        


            


            

        

        


            

                <!--为防止一个页面出现多个id 我们改用class 
            

        

    

    


        


            


            

        

        


            

                 为防止手工填写格式出错 我们设置属性为 readonly
            

        

    

    


        


            


            

        

        


            

                 只能选 ，不能填 ok
            

        

    

    


        


            


            

        

        


            

                -->
            

        

    

    


        


            


            

        

        


            

                <input type="text" class="datepicker" readonly="readonly"/>
            

        

    

然后是jquery ui 初始化部分代码

    


        


            


            

        

        


            

                //日期格式改变
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
            

        

    

    


        


            


            

        

        


            

                //星期格式汉化
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker( "option", "dayNamesMin",[ "日", "一", "二", "三", "四", "五", "六" ] );
            

        

    

    


        


            


            

        

        


            

                //月份格式汉化
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker( "option", "monthNames", [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] );
            

        

    

注：jquery ui 的设置有两种，一种是在初始化的时候就填入参数

另一种是在初始化之后，在设置参数。这里为了说明参数选项，我们选择的第二种方式来讲解。



效果图： 



官方说明地址: http://api.jqueryui.com/datepicker/#option-altFormat

下载地址：http://download.jqueryui.com/download

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本篇博客所用到的技术也是从别的博客学习到的，但目前找不到那篇博客的链接了。

1.普通表格实现拖动列宽

var tabSize = tabSize || {}; tabSize.init = function (id) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); var headTh = table.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 调用 // 鼠标拖动列宽 setTimeout(function () { // 1.html代码里就是一个普通的table元素 // 2.传入table元素的id tabSize.init('documentList'); }, 600); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

2.datatable实现鼠标拖动列宽

1. 项目中用到datatable插件的地方，都是需要上下滚动的；而datatable插件实现上下滚动，是生成了两个div各包含了一个table，一个表格里只包含thead并且固定住（类：dataTables_scrollHead），另一个实现table内容滚动（类：dataTables_scrollBody） 。
2. 那么，若要实现鼠标拖动列宽的话，则需要：表头绑定鼠标事件→事件触发时两个表格的对应列的宽度都要改变
3. 若这个datatable表格原本没有滚动条的话，在鼠标拖动列宽的时候，会出现滚动条，其中，datatable定义时，“scrollX”: true。
   

var tabSize = tabSize || {}; tabSize.init = function (id,headTableWrapperId) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); // 获取固定头部的表格 var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0]; // 获取表格头部th var headTh = tableHead.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 鼠标拖动列宽 setTimeout(function () { // 参数：1.table元素的id， // 2.datatable插件生成的最外层div的id，F12可查看到 tabSize.init('cfcPlanListIn','cfcPlanListIn_wrapper'); }, 2000); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务